/* =====================================================
   HCBS AI Calling ? Marketing landing page
   Design language mirrored from monday.com's own stylesheet:
     font        Poppins
     big type    font-weight 500, letter-spacing -.04em, up to 6rem
     easing      cubic-bezier(.515,.147,.25,1)   (their most-used curve)
     durations   .2s / .3s / .4s
     radii       .5 / 1 / 1.5 / 2rem, pills at 100rem
     container   80rem
   All classes are prefixed .lp- so nothing collides with the console CSS.
   ===================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

/* Only theme.css + this file load here (no main.css), so carry a small reset. */
body.lp {
    margin: 0;
}

.lp h1,
.lp h2,
.lp h3,
.lp h4,
.lp p,
.lp ul,
.lp figure {
    margin: 0;
}

.lp {
    /* ---- accent: change --lp-primary to re-skin the page ---- */
    --lp-primary: #3b82f6;
    --lp-primary-d: #2563eb;
    --lp-primary-soft: #eff6ff;

    --lp-pink: #ff4ad8;
    --lp-cyan: #00c8d7;
    --lp-orange: #ff9d00;
    --lp-green: #00c875;
    --lp-red: #fa4270;
    --lp-violet: #9b59ff;

    --lp-heading: #10141f;
    --lp-ink: #0f2d52;
    --lp-ink-2: #52607a;
    --lp-ink-3: #8b9bb5;

    --lp-line: #e6e9f1;
    --lp-grey: #f3f4f5;
    --lp-grey-2: #f6f7fb;

    --lp-max:90rem;

    /* ---- vertical rhythm: every gap on this page comes from these five ----
       sec-y    section padding      gap-lg  header block -> its content
       sec-y-sm band / tight section gap-md  content -> button, block -> block
                                     gap-sm  heading -> lead, lead -> note
                                     gap-xs  eyebrow -> heading, row -> row */
    --lp-sec-y: clamp(4rem, 6.5vw, 7rem);
    --lp-sec-y-sm: clamp(2.75rem, 4.5vw, 4rem);
    --lp-gap-lg: clamp(2.25rem, 3.5vw, 3.25rem);
    --lp-gap-md: 2rem;
    --lp-gap-sm: 1.1rem;
    --lp-gap-xs: .75rem;
    /* copy | visual split grids, and card grids */
    --lp-col-gap: clamp(2.5rem, 4vw, 4rem);
    --lp-grid-gap: 1.5rem;

    --lp-r-sm: .5rem;
    --lp-r: 1rem;
    --lp-r-lg: 1.5rem;
    --lp-r-xl: 2rem;
    --lp-pill: 100rem;

    /* monday's signature curve + timings */
    --lp-ease: cubic-bezier(.515, .147, .25, 1);
    --lp-t-fast: .2s;
    --lp-t: .3s;
    --lp-t-slow: .4s;

    font-family: Poppins, "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--lp-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.lp *,
.lp *::before,
.lp *::after {
    box-sizing: border-box;
}

/* :where() keeps these resets at zero specificity ? a plain `.lp a` would
   outrank every single-class component rule (.lp-btn--primary, .lp-tlink ?)
   and repaint their labels with the inherited page colour. */
.lp :where(a) {
    color: inherit;
    text-decoration: none;
}

.lp :where(button) {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
}

.lp-wrap {
    width: 100%;
    max-width: var(--lp-max);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* =====================================================
   TYPE  ? big headings are weight 500, not 700
   ===================================================== */
.lp-h1 {
    font-size: clamp(2.75rem, 6.6vw, 5rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.04em;
    color: var(--lp-heading);
}

.lp-h2 {
    font-size: clamp(2.25rem, 5.6vw, 4rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.04em;
    color: var(--lp-heading);
}

/* the oversized display headings ("Full control", "Consider yourself limitless") */
.lp-display {
    font-size: clamp(3.25rem, 9vw, 6rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: var(--lp-heading);
}

.lp-h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.25rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--lp-heading);
}

.lp-section--ink .lp-h2,
.lp-section--ink .lp-display,
.lp-cta .lp-h2 {
    color: #fff;
}

.lp-pay {
    color: var(--lp-primary);
}

.lp-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    font-weight: 400;
    color: var(--lp-ink-2);
}

/* One eyebrow recipe for the whole page ? only the colour changes per section. */
.lp-eyebrow,
.lp-floweyebrow,
.lp-briefsec__eyebrow {
    display: block;
    margin: 0 0 var(--lp-gap-xs);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-eyebrow {
    color: var(--lp-primary);
}

.lp-section {
    padding-block: var(--lp-sec-y);
}

.lp-section--tight {
    padding-block: var(--lp-sec-y-sm);
}

/* Two sections sharing a background read as one block ? one gap, not two. */
.lp-section--muted+.lp-section--muted,
.lp-section--ink+.lp-section--ink {
    padding-top: 0;
}

.lp-section--muted {
    background: var(--lp-grey-2);
}

.lp-section--ink {
    background: var(--lp-heading);
    color: #fff;
}

.lp-section--ink .lp-lead {
    color: rgba(255, 255, 255, .72);
}

.lp-head {
    text-align: center;
    max-width: 52rem;
    margin: 0 auto var(--lp-gap-lg);
}

.lp-head .lp-lead {
    margin-top: var(--lp-gap-sm);
}

/* header that sits directly on top of its own card grid */
.lp-head--flush {
    margin-bottom: 0;
}

/* block that follows a full-width section block */
.lp-stack {
    margin-top: var(--lp-gap-lg);
}

/* the stack already provides the gap ? don't add the button-row one on top */
.lp-stack>.lp-cta__btns {
    margin-top: 0;
}

.lp-center {
    text-align: center;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .95rem 1.75rem;
    border-radius: var(--lp-pill);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--lp-t) var(--lp-ease),
        color var(--lp-t) var(--lp-ease),
        border-color var(--lp-t) var(--lp-ease),
        box-shadow var(--lp-t) var(--lp-ease),
        transform var(--lp-t-fast) var(--lp-ease);
}

.lp-btn svg {
    transition: transform var(--lp-t) var(--lp-ease);
}

.lp-btn:hover svg {
    transform: translateX(4px);
}

.lp-btn:active {
    transform: scale(.98);
}

.lp-btn--primary {
    background: var(--lp-primary);
    color: #fff;
}

.lp-btn--primary:hover {
    background: var(--lp-primary-d);
}

/* monday uses a solid black pill in several sections */
.lp-btn--black {
    background: var(--lp-heading);
    color: #fff;
}

.lp-btn--black:hover {
    background: #2b3040;
}

.lp-btn--outline {
    background: #fff;
    color: var(--lp-primary);
    border: 1.5px solid var(--lp-primary);
}

.lp-btn--outline:hover {
    background: var(--lp-primary-soft);
}

.lp-btn--dark-outline {
    background: transparent;
    color: var(--lp-heading);
    border: 1.5px solid #c9cdd8;
}

.lp-btn--dark-outline:hover {
    border-color: var(--lp-heading);
}

.lp-btn--light {
    background: #fff;
    color: var(--lp-heading);
}

.lp-btn--light:hover {
    background: var(--lp-primary-soft);
}

.lp-btn--outline-light {
    border: 1.5px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.lp-btn--outline-light:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
}

.lp-btn--sm {
    padding: .6rem 1.2rem;
    font-size: .9rem;
}

.lp-btn--lg {
    padding: 1.1rem 2.1rem;
    font-size: 1.05rem;
}

.lp-tlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 500;
    font-size: .95rem;
    color: var(--lp-primary);
}

.lp-tlink svg {
    width: 16px;
    height: 16px;
    transition: transform var(--lp-t) var(--lp-ease);
}

.lp-tlink:hover svg {
    transform: translateX(4px);
}

/* =====================================================
   NAV
   ===================================================== */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--lp-t) var(--lp-ease), box-shadow var(--lp-t) var(--lp-ease);
}

.lp-nav.is-stuck {
    border-bottom-color: var(--lp-line);
    box-shadow: 0 2px 14px rgba(15, 45, 82, .06);
}

.lp-nav__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 76px;
}

.lp-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -.03em;
    flex-shrink: 0;
    color: var(--lp-heading);
}

.lp-logo__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--lp-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.lp-nav__links {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-right: auto;
}

.lp-nav__link {
    padding: .5rem .8rem;
    border-radius: var(--lp-r-sm);
    font-size: .95rem;
    font-weight: 400;
    color: var(--lp-heading);
    transition: color var(--lp-t-fast) var(--lp-ease), background var(--lp-t-fast) var(--lp-ease);
}

.lp-nav__link:hover {
    color: var(--lp-primary);
    background: var(--lp-primary-soft);
}

.lp-nav__actions {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.lp-nav__login {
    font-size: .95rem;
    font-weight: 400;
    color: var(--lp-heading);
}

.lp-nav__login:hover {
    color: var(--lp-primary);
}

.lp-nav__burger {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--lp-r-sm);
    place-items: center;
}

.lp-nav__burger:hover {
    background: var(--lp-primary-soft);
}

.lp-nav__mobile {
    display: none;
    flex-direction: column;
    padding: .5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--lp-line);
    background: #fff;
}

.lp-nav__mobile.is-open {
    display: flex;
}

.lp-nav__mobile a {
    padding: .85rem .25rem;
    font-weight: 500;
    color: var(--lp-heading);
}

.lp-nav__mobile .lp-btn {
    margin-top: .75rem;
}

/* =====================================================
   HERO ? left aligned two column
   ===================================================== */
.lp-hero {
    position: relative;
    padding-block: var(--lp-sec-y-sm) var(--lp-sec-y);
    background:
        radial-gradient(880px 520px at 78% 4%, #f2f0ff 0%, rgba(242, 240, 255, 0) 66%),
        #fff;
}

.lp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--lp-col-gap);
    align-items: center;
}

.lp-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 1rem .4rem .45rem;
    margin-bottom: var(--lp-gap-md);
    border-radius: var(--lp-pill);
    background: #fff;
    border: 1px solid var(--lp-line);
    font-size: .85rem;
    color: var(--lp-ink-2);
}

.lp-hero__brand {
    margin: 0 0 .85rem;
    font-size: clamp(2.85rem, 7vw, 4.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--lp-heading);
}

.lp-hero__pill b {
    padding: .25rem .6rem;
    border-radius: var(--lp-pill);
    background: var(--lp-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.lp-hero__title {
    max-width: 16ch;
    font-size: clamp(2rem, 4.2vw, 3.15rem);
}

.lp-hero__sub {
    max-width: 27rem;
    margin-top: var(--lp-gap-sm);
}

.lp-roles {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.9rem;
    max-width: 28rem;
}

.lp-role {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: var(--lp-pill);
    border: 1px solid var(--lp-line);
    background: #fff;
    font-size: .9rem;
    font-weight: 400;
    color: var(--lp-heading);
    transition: background var(--lp-t) var(--lp-ease), color var(--lp-t) var(--lp-ease),
        border-color var(--lp-t) var(--lp-ease);
}

.lp-role:hover {
    border-color: var(--lp-primary);
    color: var(--lp-primary);
}

.lp-role.is-active {
    background: var(--lp-primary-soft);
    border-color: var(--lp-primary-soft);
    color: var(--lp-primary);
    font-weight: 500;
}

/* tick drawn with a mask so the chip needs no extra markup */
.lp-role.is-active::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--lp-primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/74% no-repeat,
        linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/74% no-repeat,
        linear-gradient(#000, #000);
    mask-composite: exclude;
}

.lp-hero__cta {
    margin-top: var(--lp-gap-md);
    margin-bottom: 1rem;
}

.lp-hero__note {
    margin-top: var(--lp-gap-sm);
    font-size: .875rem;
    color: var(--lp-ink-3);
}

/* ---------- hero visual: live agent deck ---------- */
.lp-hstage {
    position: relative;
    display: grid;
    place-items: center;
    height: 30rem;
    max-width: 34rem;
    margin-inline: auto;
}

.lp-hstage__glow {
    position: absolute;
    inset: 8% 7% 4%;
    border-radius: 50%;
    background: var(--hero-c, var(--lp-primary));
    opacity: .26;
    filter: blur(46px);
    transition: background .7s var(--lp-ease);
}

.lp-hstage__ring {
    position: absolute;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    border: 1px dashed rgba(90, 90, 255, .2);
    animation: lp-hspin 34s linear infinite;
}

.lp-hstage__ring::after {
    content: "";
    position: absolute;
    top: -.3rem;
    left: 50%;
    width: .6rem;
    height: .6rem;
    margin-left: -.3rem;
    border-radius: 50%;
    background: var(--hero-c, var(--lp-primary));
    transition: background .7s var(--lp-ease);
}

@keyframes lp-hspin {
    to {
        transform: rotate(360deg);
    }
}

.lp-hstage__deck {
    position: relative;
    z-index: 2;
    width: 17.5rem;
    height: 24rem;
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
    transition: transform .5s var(--lp-ease);
}

.lp-hcard {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 1;
    border-radius: var(--lp-r-lg);
    overflow: hidden;
    background: #eceff6;
    box-shadow: 0 18px 48px rgba(15, 45, 82, .18);
    opacity: 0;
    transform: translateY(1.6rem) scale(.88);
    transition: opacity .55s var(--lp-ease), transform .7s var(--lp-ease), box-shadow .7s var(--lp-ease);
}

.lp-hcard img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 14%;
}

.lp-hcard:not(.is-active) img {
    filter: saturate(.72) brightness(.96);
}

.lp-hcard:not(.is-active) .lp-hcard__foot,
.lp-hcard:not(.is-active) .lp-hcard__live {
    opacity: 0;
}

.lp-hcard.is-prev,
.lp-hcard.is-next {
    opacity: .5;
    z-index: 2;
}

.lp-hcard.is-prev {
    transform: translate(-3rem, 1.5rem) scale(.87) rotate(-6deg);
}

.lp-hcard.is-next {
    transform: translate(3rem, 1.5rem) scale(.87) rotate(6deg);
}

.lp-hcard.is-active {
    opacity: 1;
    transform: none;
    z-index: 3;
    box-shadow: 0 30px 70px rgba(15, 45, 82, .26);
}

.lp-hcard__live {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    border-radius: var(--lp-pill);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    font-size: .7rem;
    font-weight: 600;
    color: var(--lp-heading);
    transition: opacity var(--lp-t) var(--lp-ease);
}

.lp-hcard__live i {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #00c875;
    animation: lp-hpulse 1.9s var(--lp-ease) infinite;
}

@keyframes lp-hpulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 200, 117, .55);
    }

    70% {
        box-shadow: 0 0 0 .5rem rgba(0, 200, 117, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 200, 117, 0);
    }
}

.lp-hcard__foot {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: .1rem;
    padding: 3.5rem .95rem 1rem;
    text-align: left;
    color: #fff;
    background: linear-gradient(180deg, rgba(10, 14, 24, 0), rgba(10, 14, 24, .8) 45%);
    transition: opacity var(--lp-t) var(--lp-ease);
}

.lp-hcard__name {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.lp-hcard__task {
    font-size: .8rem;
    color: rgba(255, 255, 255, .8);
}

.lp-hcard__wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 1.4rem;
    margin-top: .55rem;
}

.lp-hcard__wave i {
    flex: 1;
    min-width: 2px;
    height: 100%;
    border-radius: 2px;
    background: #fff;
    opacity: .78;
    transform: scaleY(.25);
    transform-origin: bottom;
}

.lp-hcard.is-active .lp-hcard__wave i {
    animation: lp-hwave 1s var(--lp-ease) infinite alternate;
}

@keyframes lp-hwave {
    from {
        transform: scaleY(.2);
    }

    to {
        transform: scaleY(1);
    }
}

.lp-hstage__pill {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border-radius: var(--lp-pill);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(15, 45, 82, .16);
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--lp-heading);
}

.lp-hstage__pill--done {
    left: 0;
    top: 7.5rem;
    padding-left: .5rem;
    animation: lp-hfloat 5s var(--lp-ease) infinite;
}

.lp-hstage__pill--stat {
    right: 3.4rem;
    top: 1.5rem;
    animation: lp-hfloat 6.5s var(--lp-ease) .9s infinite reverse;
}

@keyframes lp-hfloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-.55rem);
    }
}

.lp-hstage__tick {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #00c875;
    color: #fff;
}

.lp-hstage__tick svg {
    width: .8rem;
    height: .8rem;
}

.lp-hstage__pill--done [data-hero-done-text] {
    display: inline-block;
    transition: opacity .22s var(--lp-ease), transform .22s var(--lp-ease);
}

.lp-hstage__pill--done.is-swap [data-hero-done-text] {
    opacity: 0;
    transform: translateY(.35rem);
}

.lp-hstage__dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--hero-c, var(--lp-primary));
    transition: background .7s var(--lp-ease);
}

.lp-hstage__rail {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: grid;
    gap: .45rem;
}

.lp-hstage__thumb {
    position: relative;
    width: 2.55rem;
    height: 3.2rem;
    padding: 0;
    border-radius: .7rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 45, 82, .16);
    opacity: .55;
    filter: saturate(.7);
    transition: opacity var(--lp-t) var(--lp-ease), transform var(--lp-t) var(--lp-ease),
        filter var(--lp-t) var(--lp-ease), box-shadow var(--lp-t) var(--lp-ease);
}

.lp-hstage__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
}

.lp-hstage__thumb:hover {
    opacity: .9;
    transform: translateX(-.2rem);
}

.lp-hstage__thumb.is-active {
    opacity: 1;
    filter: none;
    transform: translateX(-.3rem) scale(1.06);
    box-shadow: 0 8px 22px rgba(15, 45, 82, .22), 0 0 0 2px var(--c, var(--lp-primary));
}

/* thin timer bar showing when the deck flips to the next agent */
.lp-hstage__thumb::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--c, var(--lp-primary));
    transform: scaleX(0);
    transform-origin: left;
}

.lp-hstage__thumb.is-active::after {
    animation: lp-hprog var(--hero-dur, 3.6s) linear forwards;
}

.lp-hstage:hover .lp-hstage__thumb.is-active::after {
    animation-play-state: paused;
}

@keyframes lp-hprog {
    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    .lp-hstage__ring,
    .lp-hstage__pill,
    .lp-hcard.is-active .lp-hcard__wave i,
    .lp-hcard__live i,
    .lp-hstage__thumb.is-active::after {
        animation: none;
    }
}

.lp-av {
    width: 2.875rem;
    height: 2.875rem;
    border-radius: .875rem;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    flex-shrink: 0;
}

.lp-live {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .8rem;
    border-radius: var(--lp-pill);
    background: rgba(0, 200, 117, .12);
    color: #059862;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lp-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: lp-pulse 1.4s var(--lp-ease) infinite;
}

@keyframes lp-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .3;
        transform: scale(.65);
    }
}

@keyframes lp-bounce {

    0%,
    100% {
        height: 16%;
        opacity: .5;
    }

    50% {
        height: 100%;
        opacity: 1;
    }
}

/* =====================================================
   MARQUEES
   ===================================================== */
.lp-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.lp-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: lp-scroll 40s linear infinite;
}

/* Spacing sits on the items, never as `gap`: the track is duplicated once and
   animated to -50%, and a gap would put that midpoint half a gap out of step,
   making the loop visibly jump. */
.lp-marquee__track>* {
    margin-right: 4rem;
}

.lp-marquee:hover .lp-marquee__track {
    animation-play-state: paused;
}

.lp-marquee--slow .lp-marquee__track {
    animation-duration: 56s;
}

.lp-marquee--slow .lp-marquee__track>* {
    margin-right: 1rem;
}

.lp-marquee--rev .lp-marquee__track {
    animation-direction: reverse;
}

@keyframes lp-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.lp-mlabel {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--lp-heading);
    margin-bottom: var(--lp-gap-lg) !important;
}

.lp-mlogo {
    display: inline-flex;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.04em;
    color: #1d2330;
    white-space: nowrap;
    opacity: .78;
}

/* ---------- giant scrolling text band with avatar chips ---------- */
.lp-bigmarquee {
    padding-block: var(--lp-sec-y-sm);
    border-top: 1px solid var(--lp-line);
}

/* stacked marquee rows (voice chips) */
.lp-marquee+.lp-marquee {
    margin-top: var(--lp-gap-xs);
}

.lp-bigmarquee .lp-marquee__track>* {
    margin-right: 2.5rem;
}

.lp-bigtext {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--lp-heading);
    white-space: nowrap;
}

.lp-facepile {
    display: inline-flex;
    align-items: center;
}

.lp-facepile i {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: .875rem;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    border: 3px solid #fff;
    margin-left: -1rem;
}

.lp-facepile i:first-child {
    margin-left: 0;
}

/* ---------- voice chips ---------- */
.lp-vchip {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.1rem .7rem .7rem;
    border-radius: var(--lp-pill);
    background: #fff;
    border: 1px solid var(--lp-line);
    white-space: nowrap;
    transition: border-color var(--lp-t) var(--lp-ease), box-shadow var(--lp-t) var(--lp-ease),
        transform var(--lp-t) var(--lp-ease);
}

.lp-vchip:hover {
    border-color: var(--lp-primary);
    box-shadow: 0 8px 22px rgba(90, 90, 255, .16);
    transform: translateY(-2px);
}

.lp-vchip__av {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.lp-vchip__t {
    text-align: left;
    line-height: 1.25;
}

.lp-vchip__t strong {
    display: block;
    font-size: .9rem;
    font-weight: 500;
    color: var(--lp-heading);
}

.lp-vchip__t span {
    font-size: .75rem;
    color: var(--lp-ink-3);
}

.lp-vchip__bars {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 1.125rem;
    margin-left: .2rem;
}

.lp-vchip__bars i {
    width: 3px;
    border-radius: 2px;
    background: #cdd4e0;
    height: 35%;
}

.lp-vchip:hover .lp-vchip__bars i {
    background: var(--lp-primary);
    animation: lp-bounce .9s var(--lp-ease) infinite;
}

.lp-vchip__bars i:nth-child(2) {
    animation-delay: .12s;
}

.lp-vchip__bars i:nth-child(3) {
    animation-delay: .24s;
}

.lp-vchip__bars i:nth-child(4) {
    animation-delay: .36s;
}

/* =====================================================
   ROLE TAB BAR  (monday-style: flat text, soft active pill)
   ===================================================== */
.lp-tabbar {
    display: flex;
    justify-content: center;
    margin-bottom: var(--lp-gap-md);
}

.lp-tabbar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .2rem .15rem;
    padding: 0;
    max-width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.lp-uctab {
    flex-shrink: 0;
    padding: .55rem 1.15rem;
    border-radius: var(--lp-pill);
    font-size: 1rem;
    font-weight: 400;
    color: #6b7285;
    transition: background var(--lp-t) var(--lp-ease), color var(--lp-t) var(--lp-ease);
}

.lp-uctab:hover {
    color: var(--lp-heading);
    background: rgba(255, 255, 255, .55);
}

.lp-uctab.is-active {
    background: var(--lp-primary-soft);
    color: var(--lp-heading);
    font-weight: 500;
}

.lp-ucpanel {
    display: none;
}

.lp-ucpanel.is-active {
    display: block;
    animation: lp-fade var(--lp-t-slow) var(--lp-ease);
}

@keyframes lp-fade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lp-uc {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--lp-col-gap);
    align-items: center;
}

.lp-uc__copy .lp-lead {
    margin-top: var(--lp-gap-sm);
}

.lp-uc__copy .lp-btn {
    margin-top: var(--lp-gap-md);
}

.lp-uc__bullets {
    list-style: none;
    padding: 0;
    margin: var(--lp-gap-md) 0 0;
    display: grid;
    gap: .85rem;
}

.lp-uc__bullets li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .975rem;
    color: var(--lp-ink-2);
}

.lp-uc__bullets svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--lp-green);
}

.lp-panelwrap {
    border-radius: var(--lp-r-xl);
    padding: 1.6rem;
    background: var(--wash, var(--lp-primary-soft));
}

.lp-panel {
    border-radius: var(--lp-r);
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 45, 82, .12);
    overflow: hidden;
}

.lp-panel__bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem .95rem;
    background: #f7f8fb;
    border-bottom: 1px solid var(--lp-line);
    font-size: .78rem;
    font-weight: 500;
    color: var(--lp-ink-3);
}

.lp-panel__bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d3d9e4;
}

.lp-panel__body {
    padding: 1.1rem;
}

.lp-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem;
    border-radius: .75rem;
    border: 1px solid var(--lp-line);
    transition: border-color var(--lp-t) var(--lp-ease), background var(--lp-t) var(--lp-ease);
}

.lp-row+.lp-row {
    margin-top: .6rem;
}

.lp-row:hover {
    border-color: var(--lp-primary);
    background: var(--lp-primary-soft);
}

.lp-row__m {
    margin-right: auto;
    min-width: 0;
    line-height: 1.35;
}

.lp-row__m strong {
    display: block;
    font-size: .9rem;
    font-weight: 500;
    color: var(--lp-heading);
}

.lp-row__m span {
    font-size: .78rem;
    color: var(--lp-ink-3);
}

.lp-pill {
    padding: .25rem .6rem;
    border-radius: var(--lp-pill);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-pill--phi {
    background: rgba(250, 66, 112, .12);
    color: #d61f4c;
}

.lp-pill--std {
    background: rgba(0, 160, 255, .12);
    color: #0075c4;
}

.lp-pill--ok {
    background: rgba(0, 200, 117, .14);
    color: #059862;
}

.lp-pill--draft {
    background: #eef1f6;
    color: var(--lp-ink-3);
}

/* =====================================================
   AGENT EXPLORER ? monday accordion + per-set carousel
   Soft side fades (not hard clip); peeks ~8.5rem
   ===================================================== */
.lp-explorer {
    --lp-explorer-bg: #f0f1f5;
    padding: 2.75rem 2rem 2.75rem 2rem;
    display: grid;
    grid-template-columns: minmax(22rem, 26rem) minmax(0, 1fr);
    gap: 1.5rem 1.25rem;
    align-items: center;
    overflow: hidden;
    border-radius: 2rem;
    background: var(--lp-explorer-bg);
}

.lp-acc {
    display: flex;
    flex-direction: column;
    gap: .77rem;
    align-self: center;
    width: 100%;
    max-width: 24.5rem;
}

.lp-acc__item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0; /* kill UA button padding — was making closed rows fat */
    border-radius: 100rem; /* closed = pill like monday */
    background: #fff;
    overflow: hidden;
    text-align: left;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    color: inherit;
    line-height: 1.25;
    appearance: none;
    -webkit-appearance: none;
    transition: box-shadow var(--lp-t) var(--lp-ease), background var(--lp-t) var(--lp-ease),
        border-color var(--lp-t) var(--lp-ease), border-radius var(--lp-t) var(--lp-ease);
}

.lp-acc__item.is-open {
    border-radius: 1.6rem; /* open = card, not pill */
    box-shadow: 0 10px 28px rgba(15, 45, 82, .1);
    background: #fff;
}

.lp-acc__item:not(.is-open) {
    background: #fff;
    border: 1px solid #d8dbe3;
    box-shadow: none;
}

.lp-acc__item:not(.is-open):hover {
    background: #fafbfc;
    border-color: #c9ced9;
}

.lp-acc__h {
    display: flex;
    align-items: center;
    gap: .77rem;
    padding: .59rem 1.05rem .59rem .91rem; /* closed pill (+40%) */
    min-height: 0;
}

.lp-acc__item.is-open .lp-acc__h {
    padding: 1.19rem 1.54rem .28rem 1.33rem;
}

.lp-acc__label {
    font-size: 1.225rem; /* .875 × 1.4 */
    font-weight: 500;
    color: var(--lp-heading);
    line-height: 1.2;
    letter-spacing: -.01em;
}

.lp-acc__sign {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid #b7bcc8;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    color: var(--lp-heading);
    transition: background var(--lp-t) var(--lp-ease), border-color var(--lp-t) var(--lp-ease),
        transform var(--lp-t-slow) var(--lp-ease);
}

.lp-acc__sign::before,
.lp-acc__sign::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    transition: opacity var(--lp-t) var(--lp-ease);
}

.lp-acc__sign::before {
    width: 8.5px;
    height: 2px;
}

.lp-acc__sign::after {
    width: 2px;
    height: 8.5px;
}

.lp-acc__item.is-open .lp-acc__sign {
    transform: none; /* stay as minus, don't rotate into a weird glyph */
    border-color: var(--lp-primary);
    color: var(--lp-primary);
}

.lp-acc__item.is-open .lp-acc__sign::after {
    opacity: 0; /* hide vertical bar → minus */
}

/* Closed body must be truly zero-height. Padding on .lp-acc__par while
   collapsed leaked space (Billing etc. stayed tall with aria-selected=false). */
.lp-acc__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--lp-t-slow) var(--lp-ease);
}

.lp-acc__item:not(.is-open) .lp-acc__body {
    grid-template-rows: 0fr;
}

.lp-acc__item.is-open .lp-acc__body {
    grid-template-rows: 1fr;
}

.lp-acc__par {
    display: block;
    overflow: hidden;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: 1.12rem; /* .8 × 1.4 */
    line-height: 1.45;
    color: var(--lp-ink-2);
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.25rem);
    transition: opacity .22s var(--lp-ease), transform .22s var(--lp-ease),
        visibility 0s linear .22s, padding var(--lp-t-slow) var(--lp-ease);
}

.lp-acc__item:not(.is-open) .lp-acc__par {
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.25rem);
}

.lp-acc__item.is-open .lp-acc__par {
    /* indent past the + circle so copy aligns under the label (monday) */
    padding: .21rem 1.54rem 1.26rem 3.5rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .16s, .16s, 0s, 0s;
}

.lp-explorer__stage {
    position: relative;
    min-width: 0;
    min-height: 38rem;
    overflow: visible;
}

.lp-pane {
    display: none;
    opacity: 0;
    transform: translateY(18px);
    overflow: visible;
}

.lp-pane.is-open {
    display: block;
    opacity: 1;
    transform: none;
    animation: lp-pane-arrive .65s cubic-bezier(.16, 1, .3, 1) both;
}

.lp-pane.is-leaving {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: none;
    animation: none;
    transition:
        opacity .48s cubic-bezier(.33, 0, .2, 1),
        transform .48s cubic-bezier(.33, 0, .2, 1),
        filter .48s cubic-bezier(.33, 0, .2, 1);
}

.lp-pane.is-leaving.is-gone {
    opacity: 0;
    transform: translateY(-10px) scale(.99);
    filter: blur(1.5px);
}

.lp-pane.is-entering {
    display: block;
    opacity: 0;
    transform: translateY(22px);
    animation: none;
}

@keyframes lp-pane-arrive {
    0% {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(2px);
    }
    70% {
        opacity: 1;
        filter: none;
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-pane.is-open {
        animation: none;
    }
    .lp-pane.is-leaving {
        transition: none;
    }
}

.lp-carousel {
    --lp-card-w: 22rem;
    --lp-peek: 9.35rem;
    --lp-card-gap: 1.25rem;
    --lp-track-w: calc(var(--lp-card-w) + (var(--lp-peek) * 2) + (var(--lp-card-gap) * 2));
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    padding: .85rem 0 1.25rem;
    overflow: visible;
}

.lp-carousel__viewport {
    display: flex;
    align-items: stretch;
    gap: var(--lp-card-gap);
    width: min(100%, var(--lp-track-w));
    margin-inline: auto;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(var(--lp-peek) + var(--lp-card-gap));
    padding-block: 1.35rem 1.35rem;
    scrollbar-width: none;
    scroll-behavior: auto;
    /* Soft dissolve on peeks ? fade, not a hard clip edge */
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 18%,
        #000 82%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 18%,
        #000 82%,
        transparent 100%
    );
}

.lp-carousel__viewport::before,
.lp-carousel__viewport::after {
    content: "";
    flex: 0 0 var(--lp-peek);
    width: var(--lp-peek);
    pointer-events: none;
}

.lp-carousel__viewport::-webkit-scrollbar {
    display: none;
}

/* Extra wash over peeks so edges melt into explorer bg */
.lp-carousel__fade {
    position: absolute;
    top: .5rem;
    bottom: 2.4rem;
    left: max(0px, calc(50% - min(var(--lp-track-w), 100%) / 2));
    width: var(--lp-peek);
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--lp-explorer-bg) 0%,
        color-mix(in srgb, var(--lp-explorer-bg) 70%, transparent) 42%,
        transparent 100%
    );
}

.lp-carousel__fade--right {
    left: auto;
    right: max(0px, calc(50% - min(var(--lp-track-w), 100%) / 2));
    background: linear-gradient(
        270deg,
        var(--lp-explorer-bg) 0%,
        color-mix(in srgb, var(--lp-explorer-bg) 70%, transparent) 42%,
        transparent 100%
    );
}

.lp-acard {
    box-sizing: border-box;
    flex: 0 0 var(--lp-card-w);
    width: var(--lp-card-w);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    /* monday inset frame: gutter around media on all sides */
    padding: .85rem .85rem 1rem;
    margin: 0;
    border-radius: 1.5rem;
    background: #fff;
    text-align: left;
    overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--c, #c4c8d2) 42%, #e8ebf2);
    box-shadow: 0 10px 28px rgba(15, 45, 82, .08);
    opacity: .45;
    transform: scale(.9) translateY(14px);
    filter: blur(2.5px);
    pointer-events: none;
    will-change: transform, opacity, filter;
    transition:
        transform .45s var(--lp-ease),
        box-shadow .45s var(--lp-ease),
        opacity .4s var(--lp-ease),
        filter .4s var(--lp-ease),
        border-color .4s var(--lp-ease);
}

.lp-acard.is-side {
    opacity: .78;
    transform: scale(.93) translateY(10px);
    filter: blur(1.25px) saturate(.9);
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
}

.lp-acard.is-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: none;
    pointer-events: auto;
    border-color: color-mix(in srgb, var(--c, var(--lp-primary)) 55%, #d5d8e2);
    box-shadow: 0 16px 36px rgba(15, 45, 82, .14);
    z-index: 2;
}

.lp-acard.is-active.is-entering {
    transform: scale(.94) translateY(22px);
    opacity: .78;
    filter: blur(1.5px);
    box-shadow: 0 8px 22px rgba(15, 45, 82, .1);
}

.lp-carousel--single {
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 1rem;
}

.lp-carousel--single .lp-carousel__viewport {
    justify-content: center;
    width: auto;
    max-width: 100%;
    scroll-padding-inline: 0;
    padding-block: 1.5rem 1.35rem;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.lp-carousel--single .lp-carousel__viewport::before,
.lp-carousel--single .lp-carousel__viewport::after,
.lp-carousel--single .lp-carousel__fade {
    display: none;
}

.lp-carousel--single .lp-acard {
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
    /* Same inset frame, a bit roomier for the lone card */
    padding: 1rem 1rem 1.15rem;
    border-radius: 1.65rem;
    border-color: color-mix(in srgb, var(--c, var(--lp-primary)) 50%, #d5d8e2);
    box-shadow: 0 18px 40px rgba(15, 45, 82, .14);
}

.lp-acard__media {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 1.05rem;
    background: #f4f5f8;
    display: block;
    overflow: hidden;
    flex-shrink: 0;
}

/* V3 portrait renders: show the upper body instead of a tight face crop. */
.lp-acard__avatar {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--lp-t-slow) var(--lp-ease);
}

.lp-acard.is-active:hover .lp-acard__avatar {
    transform: scale(1.04);
}

.lp-acard__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem .2rem .15rem;
    min-height: 8.25rem;
}

.lp-acard__ic {
    display: none;
}

.lp-acard h3 {
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--lp-heading);
    margin: 0;
}

.lp-acard p {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--lp-ink-2);
    margin: 0;
    flex: 1;
}

.lp-acard .lp-btn {
    margin-top: .55rem;
    align-self: flex-end;
}

.lp-carousel__arrow {
    position: absolute;
    top: calc(42% - .2rem);
    z-index: 4;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--lp-heading);
    box-shadow: 0 6px 18px rgba(15, 45, 82, .14);
    transition: transform var(--lp-t) var(--lp-ease), background var(--lp-t) var(--lp-ease), color var(--lp-t) var(--lp-ease);
}

.lp-carousel__arrow--prev {
    left: calc(50% - min(var(--lp-track-w), 100%) / 2 - 0.15rem);
}

.lp-carousel__arrow--next {
    right: calc(50% - min(var(--lp-track-w), 100%) / 2 - 0.15rem);
}

.lp-carousel__arrow:hover {
    background: var(--lp-heading);
    color: #fff;
    transform: scale(1.06);
}

.lp-carousel__arrow svg {
    width: 15px;
    height: 15px;
    display: block;
}

.lp-carousel__dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: .1rem;
}

.lp-carousel__dots button {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: #c4c8d2;
    transition: background var(--lp-t) var(--lp-ease), transform var(--lp-t) var(--lp-ease);
}

.lp-carousel__dots button.is-active {
    background: var(--lp-heading);
    transform: scale(1.35);
}


.lp-carousel__nav {
    display: none;
}

/* =====================================================
   BEFORE THE DIAL ? call brief fills step-by-step
   Purpose: context before action. Form: ops sheet, not orbit UI.
   ===================================================== */
.lp-briefsec {
    padding-block: var(--lp-sec-y);
    background: #fff;
}

.lp-briefsec__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--lp-col-gap);
    align-items: start;
}

.lp-briefsec__copy {
    position: sticky;
    top: 5.5rem;
}

.lp-briefsec__eyebrow {
    color: #0a7a52;
}

.lp-briefsec__copy .lp-h2 {
    margin-bottom: var(--lp-gap-sm);
    max-width: 16ch;
}

.lp-briefsec__copy .lp-lead {
    margin-bottom: var(--lp-gap-md);
    max-width: 34rem;
    color: var(--lp-ink-2);
}

.lp-briefsec__steps {
    list-style: none;
    margin: 0 0 var(--lp-gap-md);
    padding: 0;
    display: grid;
    gap: .35rem;
    counter-reset: briefstep;
}

.lp-briefsec__steps li {
    counter-increment: briefstep;
}

.lp-briefsec__steps button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .85rem;
    border-radius: .65rem;
    text-align: left;
    font-size: .95rem;
    font-weight: 500;
    color: var(--lp-ink-2);
    background: transparent;
    border: 0;
    transition: background var(--lp-t) var(--lp-ease), color var(--lp-t) var(--lp-ease);
}

.lp-briefsec__steps button::before {
    content: counter(briefstep, decimal-leading-zero);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--lp-ink-3);
    min-width: 1.6rem;
}

.lp-briefsec__steps li.is-on button,
.lp-briefsec__steps li.is-done button {
    color: var(--lp-heading);
    background: #f0f7f4;
}

.lp-briefsec__steps li.is-on button::before {
    color: #0a7a52;
}

.lp-brief {
    background: #0f1a24;
    color: #e8eef4;
    border-radius: 1.25rem;
    padding: 1.35rem 1.35rem 1.15rem;
    box-shadow: 0 24px 48px rgba(15, 26, 36, .22);
}

.lp-brief__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: .35rem;
}

.lp-brief__kicker {
    margin: 0 0 .25rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(232, 238, 244, .55);
}

.lp-brief__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: #fff;
}

.lp-brief__badge {
    flex-shrink: 0;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .1);
    color: rgba(232, 238, 244, .85);
}

.lp-brief.is-ready .lp-brief__badge {
    background: rgba(0, 200, 117, .2);
    color: #7dffc0;
}

.lp-brief__lines {
    list-style: none;
    margin: 0;
    padding: .35rem 0 .5rem;
}

.lp-brief__lines li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    opacity: .22;
    transform: translateY(8px);
    filter: blur(1.5px);
    transition:
        opacity .45s var(--lp-ease),
        transform .45s var(--lp-ease),
        filter .45s var(--lp-ease);
}

.lp-brief__lines li.is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

.lp-brief__key {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(232, 238, 244, .45);
    padding-top: .15rem;
}

.lp-brief__val {
    font-size: .95rem;
    line-height: 1.4;
    color: #f4f7fb;
}

.lp-brief__foot {
    margin-top: .85rem;
    display: grid;
    gap: .65rem;
}

.lp-brief__wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 1.75rem;
    opacity: .35;
    transition: opacity .4s var(--lp-ease);
}

.lp-brief.is-ready .lp-brief__wave {
    opacity: 1;
}

.lp-brief__wave i {
    flex: 1;
    min-width: 3px;
    max-width: 6px;
    border-radius: 2px;
    background: #00c8d7;
    height: 30%;
    transform-origin: bottom;
}

.lp-brief.is-ready .lp-brief__wave i {
    animation: lp-brief-bar .9s ease-in-out infinite alternate;
}

@keyframes lp-brief-bar {
    from { transform: scaleY(.35); }
    to { transform: scaleY(1); }
}

.lp-brief__status {
    margin: 0;
    font-size: .85rem;
    color: rgba(232, 238, 244, .55);
}

.lp-brief.is-ready .lp-brief__status {
    color: #7dffc0;
}

@media (max-width: 920px) {
    .lp-briefsec__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .lp-briefsec__copy {
        position: static;
    }
    .lp-briefsec__copy .lp-h2 {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .lp-brief__lines li {
        grid-template-columns: 1fr;
        gap: .2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-brief__lines li {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
    .lp-brief.is-ready .lp-brief__wave i {
        animation: none;
        height: 55%;
    }
}

/* =====================================================
   WORKFLOW BUILDER
   Connectors are drawn with borders/pseudo-elements on a
   2-column grid, so column centres sit at 25% and 75%.
   ===================================================== */
.lp-floweyebrow {
    text-align: center;
    color: var(--lp-ink-3);
}

.lp-flowhead {
    text-align: center;
}

/* Center the whole intro stack (title + sub + CTA) on one axis */
.lp-flow__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.lp-flow__sub {
    display: block;
    width: fit-content;
    max-width: min(36rem, 100%);
    margin: var(--lp-gap-sm) 0 0;
    padding-inline: 0;
    box-sizing: border-box;
    text-align: center;
    font-size: clamp(1.2rem, 2.2vw, 1.65rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -.02em;
    color: var(--lp-heading);
}

/* overlapping avatar pills sitting inline in a sentence */
.lp-inlinefaces {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 .25rem;
}

.lp-inlinefaces i {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: .62rem;
    font-weight: 600;
    color: #fff;
    border: 2px solid #fff;
    margin-left: -.5rem;
}

.lp-inlinefaces i:first-child {
    margin-left: 0;
}

.lp-flow__cta {
    text-align: center;
    margin-top: var(--lp-gap-md);
}

/* ---------- the diagram ---------- */
.lp-flow {
    --flow-line: #cfd5e0;
    --node-w: 14.25rem;
    --agent-w: 18.5rem;
    --trunk-w: 18.5rem;
    max-width: 48rem;
    margin: var(--lp-gap-lg) auto 0;
}

.lp-flow__center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-flow__trunk {
    width: 100%;
    max-width: var(--trunk-w);
}

.lp-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .72rem .9rem;
    border-radius: .85rem;
    background: #fff;
    border: 1px solid #e4e7ef;
    box-shadow:
        0 1px 2px rgba(15, 45, 82, .04),
        0 4px 12px rgba(15, 45, 82, .05);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--lp-heading);
    transition: box-shadow var(--lp-t) var(--lp-ease), transform var(--lp-t) var(--lp-ease);
}

.lp-node:hover {
    box-shadow: 0 10px 28px rgba(15, 45, 82, .11);
    transform: translateY(-2px);
}

.lp-node__ic {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .5rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--c, var(--lp-primary));
    background: color-mix(in srgb, var(--c, var(--lp-primary)) 14%, #fff);
}

.lp-node__ic svg {
    width: 1.05rem;
    height: 1.05rem;
}

.lp-node__av {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
    object-position: center top;
    background: #eef1f6;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e6e9f1;
}

/* agent nodes: wider + rainbow border + soft glow (monday) */
.lp-node--agent {
    max-width: var(--agent-w);
    width: var(--agent-w);
    padding: .85rem 1rem;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(120deg, #ff4ad8, #3b82f6, #00c8d7, #00c875) border-box;
    box-shadow:
        0 8px 28px rgba(90, 90, 255, .12),
        0 2px 8px rgba(15, 45, 82, .06);
}

.lp-node--agent:hover {
    box-shadow:
        0 14px 36px rgba(90, 90, 255, .16),
        0 4px 12px rgba(15, 45, 82, .08);
}

.lp-node--step {
    max-width: var(--node-w);
}

/* condition node: stacked cards + soft rainbow glow */
.lp-condwrap {
    position: relative;
    width: 100%;
    max-width: var(--trunk-w);
    display: flex;
    isolation: isolate;
    filter: drop-shadow(0 12px 28px rgba(90, 90, 255, .14));
}

.lp-condwrap::before,
.lp-condwrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: .95rem;
    border: 1px solid #e6e9f1;
    background: #fff;
    z-index: 0;
}


.lp-condwrap .lp-node {
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(120deg, #ff4ad8, #3b82f6, #00c8d7, #00c875) border-box;
    box-shadow: 0 6px 20px rgba(15, 45, 82, .08);
}

/* green bolt badge — icon only, no hexagon (monday) */
.lp-flow__badge {
    width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    color: #fff;
    position: relative;
    z-index: 3;
    margin-bottom: -.55rem;
    border-radius: .45rem;
    background: var(--lp-green);
    box-shadow: 0 4px 12px rgba(0, 200, 117, .35);
}

.lp-flow__badge svg {
    width: 12px;
    height: 12px;
}

.lp-flow__badge--cond {
    width: 1.35rem;
    height: 1.35rem;
    margin-bottom: -.45rem;
    border-radius: 0;
    background: var(--lp-primary);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    box-shadow: 0 4px 12px rgba(90, 90, 255, .3);
}

.lp-flow__badge--cond svg {
    display: none;
}

/* vertical connector */
.lp-flow__stem {
    width: 2px;
    height: 2.15rem;
    background: var(--flow-line);
    position: relative;
    overflow: hidden;
    justify-self: center;
}

.lp-flow__stem::after {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    height: 42%;
    background: linear-gradient(180deg, transparent, var(--lp-primary), transparent);
    animation: lp-flowpulse 2.4s var(--lp-ease) infinite;
}

@keyframes lp-flowpulse {
    0% { top: -40%; }
    100% { top: 100%; }
}

.lp-flow__stem--short {
    height: 1.25rem;
}

.lp-flow__stem--dash {
    width: 0;
    height: 1.35rem;
    background: none;
    border-left: 2px dashed var(--flow-line);
}

.lp-flow__stem--dash::after {
    display: none;
}

/* Yes / No fork — tags near split; long drops = equal gap before step cards */
.lp-flow__branch {
    position: relative;
    width: 100%;
    height: 5rem;
}

.lp-flow__branch::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 1.5rem;
    margin-left: -1px;
    background: var(--flow-line);
}

.lp-flow__branch::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--flow-line);
}

.lp-flow__drop {
    position: absolute;
    top: 1rem;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--flow-line);
}

.lp-flow__drop--l { left: 25%; }
.lp-flow__drop--r { left: 75%; }

.lp-flow__tag {
    position: absolute;
    top: 1.85rem;
    transform: translateX(-50%);
    padding: .18rem .6rem;
    border-radius: .35rem;
    background: #fff;
    border: 1px solid #e0e4ed;
    box-shadow: 0 1px 2px rgba(15, 45, 82, .04);
    font-size: .72rem;
    font-weight: 500;
    color: var(--lp-ink-2);
}

.lp-flow__tag--l { left: 25%; }
.lp-flow__tag--r { left: 75%; }

.lp-flow__cols {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    row-gap: 0;
    column-gap: 0;
    margin-top: .35rem;
}

.lp-flow__cols .lp-node--step {
    width: var(--node-w);
    max-width: var(--node-w);
}

.lp-flow__cols .lp-node--agent {
    width: var(--agent-w);
    max-width: var(--agent-w);
}

.lp-flow__plus {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .4rem;
    border: 1.5px dashed #c5cbd7;
    display: grid;
    place-items: center;
    color: #9aa3b5;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    background: transparent;
    justify-self: center;
    padding: 0;
    transition: border-color var(--lp-t) var(--lp-ease), color var(--lp-t) var(--lp-ease);
}

.lp-flow__plus:hover {
    border-color: var(--lp-primary);
    color: var(--lp-primary);
}

/* Optional: drop a looping product clip in place of the diagram.
   <div class="lp-flow__video"><video muted playsinline loop autoplay
        poster="..."><source src="..." type="video/webm"></video></div> */
.lp-flow__video {
    margin-top: var(--lp-gap-lg);
    border-radius: var(--lp-r-lg);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 45, 82, .14);
}

.lp-flow__video video {
    width: 100%;
    height: auto;
    display: block;
}

/* =====================================================
   DISPLAY SPLIT  ("Full control" / "Consider yourself limitless")
   ===================================================== */
.lp-dsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--lp-col-gap);
    align-items: start;
}

.lp-dsplit__aside .lp-lead {
    margin-top: var(--lp-gap-sm);
}

.lp-dsplit__aside strong {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--lp-heading);
}

.lp-dsplit__aside .lp-btn {
    margin-top: var(--lp-gap-md);
}

/* row of round tool badges */
.lp-toolrow {
    display: flex;
    align-items: center;
    margin-bottom: var(--lp-gap-sm);
}

.lp-toolrow span {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--lp-line);
    margin-left: -.6rem;
    font-size: 1.1rem;
    transition: transform var(--lp-t) var(--lp-ease);
}

.lp-toolrow span:first-child {
    margin-left: 0;
}

.lp-toolrow span:hover {
    transform: translateY(-4px);
}

.lp-toolrow svg {
    width: 20px;
    height: 20px;
    color: var(--lp-heading);
}

/* 3x2 small feature grid under a display heading */
.lp-fgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-gap-md) var(--lp-col-gap);
    margin-top: var(--lp-gap-lg);
}

.lp-fitem svg {
    width: 22px;
    height: 22px;
    color: var(--lp-primary);
    margin-bottom: .9rem;
}

.lp-fitem h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--lp-heading);
    margin-bottom: .5rem;
}

.lp-fitem p {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--lp-ink-2);
}

/* =====================================================
   TRIO / STATS / QUOTES
   ===================================================== */
.lp-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-grid-gap);
}

.lp-feat {
    padding: 2rem 1.75rem;
    border-radius: var(--lp-r-xl);
    background: #fff;
    border: 1px solid var(--lp-line);
    transition: transform var(--lp-t-slow) var(--lp-ease), box-shadow var(--lp-t-slow) var(--lp-ease),
        border-color var(--lp-t-slow) var(--lp-ease);
}

.lp-feat:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 22px 48px rgba(15, 45, 82, .13);
}

.lp-feat__ic {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .9rem;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--c, var(--lp-primary));
    margin-bottom: 1.3rem;
}

.lp-feat__ic svg {
    width: 26px;
    height: 26px;
}

.lp-feat h3 {
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -.025em;
    color: var(--lp-heading);
    margin-bottom: .6rem;
}

.lp-feat p {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--lp-ink-2);
    margin-bottom: 1.3rem;
}

.lp-feat ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    display: grid;
    gap: .6rem;
}

.lp-feat li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    color: var(--lp-ink-2);
}

.lp-feat li svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--c, var(--lp-primary));
}

.lp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    text-align: center;
}

.lp-stats strong {
    display: block;
    font-size: clamp(2.5rem, 4.8vw, 3.75rem);
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1;
}

.lp-stats span {
    display: block;
    margin-top: .7rem;
    font-size: .92rem;
    color: rgba(255, 255, 255, .7);
}

.lp-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-grid-gap);
}

.lp-quote {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    border-radius: var(--lp-r-xl);
    background: #fff;
    border: 1px solid var(--lp-line);
}

.lp-quote__big {
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--c, var(--lp-primary));
    margin-bottom: 1rem;
}

.lp-quote p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--lp-ink-2);
    margin-bottom: 1.6rem;
}

.lp-quote__by {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1.3rem;
    border-top: 1px solid var(--lp-line);
}

.lp-quote__by strong {
    display: block;
    font-size: .9rem;
    font-weight: 500;
    color: var(--lp-heading);
}

.lp-quote__by span {
    font-size: .8rem;
    color: var(--lp-ink-3);
}

/* =====================================================
   SECURITY  ? badge cards
   ===================================================== */
.lp-badges {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--lp-grid-gap);
    margin-top: var(--lp-gap-lg);
}

.lp-badgecard {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-lg);
    background: #fff;
    padding: 2rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.lp-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--lp-heading);
    text-align: center;
}

.lp-badge svg {
    width: 34px;
    height: 34px;
    color: var(--lp-heading);
}

.lp-badge__ring {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    border: 2px solid var(--lp-heading);
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.1;
}

.lp-sec {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lp-grid-gap);
}

.lp-secitem {
    padding: 1.6rem 1.4rem;
    border-radius: var(--lp-r);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

.lp-secitem svg {
    width: 26px;
    height: 26px;
    margin-bottom: 1rem;
    color: #fff;
}

.lp-secitem h3 {
    font-size: 1.02rem;
    font-weight: 500;
    margin-bottom: .45rem;
}

.lp-secitem p {
    font-size: .9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

/* =====================================================
   FAQ
   ===================================================== */
.lp-faq {
    max-width: 52.5rem;
    margin-inline: auto;
    display: grid;
    gap: .7rem;
}

.lp-faq details {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r);
    background: #fff;
    transition: border-color var(--lp-t) var(--lp-ease);
}

.lp-faq details[open] {
    border-color: var(--lp-primary);
}

.lp-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--lp-heading);
    cursor: pointer;
    list-style: none;
}

.lp-faq summary::-webkit-details-marker {
    display: none;
}

.lp-faq summary::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--lp-primary);
    flex-shrink: 0;
}

.lp-faq details[open] summary::after {
    content: "\2212";
}

.lp-faq__a {
    padding: 0 1.4rem 1.3rem;
    font-size: .975rem;
    line-height: 1.65;
    color: var(--lp-ink-2);
}

/* =====================================================
   FINAL CTA
   ===================================================== */
.lp-cta {
    position: relative;
    overflow: hidden;
    padding-block: var(--lp-sec-y);
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--lp-primary) 0%, #7b5cff 48%, var(--lp-violet) 100%);
}

.lp-cta::after {
    content: "";
    position: absolute;
    width: 45rem;
    height: 45rem;
    border-radius: 50%;
    right: -14rem;
    top: -20rem;
    background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
}

.lp-cta .lp-wrap {
    position: relative;
    z-index: 1;
}

.lp-cta p {
    max-width: 35rem;
    margin: var(--lp-gap-sm) auto 0;
    font-size: 1.15rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
}

.lp-cta__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
    margin-top: var(--lp-gap-md);
}

.lp-cta__note {
    margin-top: var(--lp-gap-sm);
    font-size: .875rem;
    color: rgba(255, 255, 255, .65);
}

/* =====================================================
   FOOTER
   ===================================================== */
.lp-footer {
    padding-block: var(--lp-sec-y-sm) 2rem;
    background: #fff;
    border-top: 1px solid var(--lp-line);
    color: var(--lp-ink-2);
    font-size: .9rem;
}

.lp-footer__grid {
    display: grid;
    grid-template-columns: 1.7fr repeat(4, 1fr);
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--lp-line);
}

.lp-footer .lp-logo {
    margin-bottom: 1rem;
}

.lp-footer__blurb {
    max-width: 19rem;
    line-height: 1.65;
}

.lp-footer h4 {
    margin-bottom: 1rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--lp-heading);
}

.lp-footer ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .65rem;
}

.lp-footer a {
    transition: color var(--lp-t-fast) var(--lp-ease);
}

.lp-footer a:hover {
    color: var(--lp-primary);
}

.lp-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.6rem;
    font-size: .84rem;
    color: var(--lp-ink-3);
}

.lp-footer__bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}

/* =====================================================
   REVEAL
   ===================================================== */
.lp-reveal {
    opacity: 0;
    transform: translateY(26px);
    will-change: transform, opacity;
    transition: opacity .7s var(--lp-ease), transform .7s var(--lp-ease);
}

.lp-reveal.is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {

    .lp *,
    .lp *::before,
    .lp *::after {
        animation: none !important;
        transition: none !important;
    }

    .lp-reveal {
        opacity: 1;
        transform: none;
    }

    .lp-carousel__viewport {
        scroll-behavior: auto;
    }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1120px) {
    .lp-nav__link {
        padding-inline: .55rem;
        font-size: .9rem;
    }

    .lp-nav__sales {
        display: none;
    }

    .lp-explorer {
        grid-template-columns: 22.5rem minmax(0, 1fr);
        padding: 2.5rem 2rem 2.5rem 1.85rem;
        gap: 1.5rem 1.75rem;
    }

    .lp-sec,
    .lp-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .lp-hero__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .lp-hero__title,
    .lp-hero__sub,
    .lp-roles {
        max-width: none;
    }

    /* Deck tightens once the hero is single-column */
    .lp-hstage {
        height: 27rem;
        max-width: 28rem;
    }

    .lp-hstage__deck {
        width: 15.5rem;
        height: 21rem;
    }

    .lp-hstage__ring {
        width: 21rem;
        height: 21rem;
    }

    .lp-dsplit {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .lp-explorer {
        grid-template-columns: 1fr;
        padding: 1.75rem 1.35rem 1.85rem;
        gap: 1.35rem;
    }

    .lp-carousel {
        --lp-card-w: min(22rem, 72vw);
        --lp-peek: min(6rem, 18vw);
        --lp-card-gap: 1rem;
        --lp-track-w: calc(var(--lp-card-w) + (var(--lp-peek) * 2) + (var(--lp-card-gap) * 2));
    }

    .lp-carousel__arrow--prev {
        left: calc(50% - min(var(--lp-track-w), 100%) / 2);
    }

    .lp-carousel__arrow--next {
        right: calc(50% - min(var(--lp-track-w), 100%) / 2);
    }

    .lp-fgrid {
        grid-template-columns: 1fr 1fr;
    }

    .lp-badges {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 940px) {
    .lp-uc {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .lp-trio,
    .lp-quotes {
        grid-template-columns: 1fr;
    }

    .lp-stats {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 780px) {

    .lp-nav__links,
    .lp-nav__login {
        display: none;
    }

    .lp-nav__burger {
        display: grid;
    }

    .lp-sec,
    .lp-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .lp-fgrid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .lp-panelwrap {
        padding: 1rem;
    }

    /* The diagram is inherently two-branch ? collapsing it to one column would
       interleave the sides. Let it scroll sideways instead. */
    .lp-flow {
        --node-w: 12.5rem;
        --agent-w: 15.5rem;
        --trunk-w: 16rem;
        overflow-x: auto;
        padding-bottom: 1rem;
        scrollbar-width: thin;
    }

    .lp-flow__center {
        min-width: 34rem;
    }

    .lp-node {
        font-size: .82rem;
        padding: .65rem .75rem;
    }

    .lp-flow__cols .lp-node--agent {
        width: var(--agent-w);
        max-width: var(--agent-w);
    }
}

@media (max-width: 620px) {
    .lp-hstage {
        height: 25rem;
        max-width: 21rem;
    }

    .lp-hstage__deck {
        width: 13.25rem;
        height: 19rem;
    }

    .lp-hstage__ring {
        display: none;
    }

    .lp-hstage__pill--stat {
        display: none;
    }

    .lp-hstage__pill--done {
        top: 5.5rem;
        font-size: .74rem;
    }

    .lp-hstage__thumb {
        width: 2.1rem;
        height: 2.65rem;
    }

    .lp-stats {
        grid-template-columns: 1fr;
    }

    .lp-hero__cta .lp-btn,
    .lp-cta__btns .lp-btn {
        width: 100%;
    }

    .lp-hero__cta,
    .lp-cta__btns {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .lp-footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .lp-hero__brand {
        font-size: clamp(2.4rem, 12vw, 3.25rem);
    }
}

/* =====================================================
   POLISH ? Laravel landing (design bug fixes)
   ===================================================== */
.lp-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.lp-btn svg,
.lp-tlink svg,
.lp-carousel__arrow svg {
    display: block;
    flex-shrink: 0;
}

/* Center card uses transform for centering ? keep hover lift without fighting it */
/* Prevent role chips from stretching the hero awkwardly */
.lp-roles {
    max-width: 32rem;
}

.lp-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
}

/* Nav actions: avoid horizontal squeeze before burger kicks in */
@media (max-width: 940px) {
    .lp-nav__links {
        display: none;
    }

    .lp-nav__login {
        display: none;
    }

    .lp-nav__burger {
        display: grid;
    }
}