/* =========================================================
   Allinks marketing site (wrapper.php pages)
   ========================================================= */

.al-site {
    color: var(--al-ink);
    background: #fff;
    overflow-x: hidden;
}

.al-site.al-no-scroll {
    overflow: hidden;
}

.al-site h1,
.al-site h2,
.al-site h3 {
    letter-spacing: -.025em;
}

.al-site a {
    transition: color .15s ease;
}

.al-main {
    min-height: 60vh;
    overflow-x: clip;
}

/* Pages without their own hero get a blue band under the header */
.al-site:not(:has(.al-hero, .al-page-hero)) .al-main {
    padding-top: 7.5rem;
    background:
        radial-gradient(40% 320px at 15% 0, rgba(41, 128, 185, .1), transparent 70%),
        radial-gradient(35% 300px at 88% 0, rgba(142, 68, 173, .08), transparent 70%),
        #fff;
}

/* =========================================================
   Header
   ========================================================= */

.al-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1030;
    padding: 1.1rem 0;
    transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease, backdrop-filter .3s ease;
}

.al-nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
}

.al-nav-left {
    align-items: center;
    gap: .35rem;
}

.al-nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.al-nav-brand {
    justify-self: center;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1;
}

.al-nav-brand img {
    max-height: 2.25rem;
}

.al-nav-link {
    display: inline-flex;
    align-items: center;
    padding: .55rem .85rem;
    border-radius: 999px;
    font-size: .975rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .92) !important;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease;
}

.al-nav-link:hover,
.al-nav-link[aria-expanded="true"] {
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
}

.al-nav-link.dropdown-toggle::after {
    margin-left: .45rem;
    border-top-width: .3em;
    opacity: .7;
}

.al-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: .7rem 1.3rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--al-navy) !important;
    background: #fff;
    text-decoration: none !important;
    box-shadow: 0 10px 30px -12px rgba(0, 15, 55, .45);
    transition: transform .2s var(--al-ease), box-shadow .2s var(--al-ease);
}

.al-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -14px rgba(0, 15, 55, .55);
}

.al-nav-user {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 220px;
    padding: .3rem .8rem .3rem .3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    font-weight: 500;
    text-decoration: none !important;
}

.al-nav-user img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
}

.al-nav-mega {
    min-width: 340px;
    padding: .6rem;
    margin-top: .6rem !important;
    border: 0;
    border-radius: 1.1rem;
    box-shadow: 0 30px 60px -20px rgba(0, 15, 55, .35), 0 0 0 1px rgba(0, 15, 55, .04);
}

.al-nav-mega-item {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .75rem;
    border-radius: .8rem;
    color: var(--al-ink) !important;
    text-decoration: none !important;
}

.al-nav-mega-item:hover {
    background: var(--al-soft);
}

.al-nav-mega-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .7rem;
    color: var(--al-primary);
    background: var(--al-primary-soft);
}

.al-nav-mega-title {
    display: block;
    font-weight: 600;
}

.al-nav-mega-description {
    display: block;
    font-size: .85rem;
    color: var(--al-muted);
}

.al-nav-mega-all {
    display: block;
    padding: .7rem .75rem .4rem;
    margin-top: .25rem;
    border-top: 1px solid var(--al-line);
    font-size: .875rem;
    font-weight: 600;
    color: var(--al-primary) !important;
}

/* Scrolled: frosted glass */
.al-nav.is-scrolled,
.al-nav.is-open {
    padding: .6rem 0;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(1.6) blur(16px);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: 0 1px 0 rgba(0, 15, 55, .06), 0 10px 30px -20px rgba(0, 15, 55, .35);
}

.al-nav.is-scrolled .al-nav-brand,
.al-nav.is-open .al-nav-brand {
    color: var(--al-navy) !important;
}

.al-nav.is-scrolled .al-nav-link,
.al-nav.is-open .al-nav-link {
    color: var(--al-ink-2) !important;
}

.al-nav.is-scrolled .al-nav-link:hover {
    background: var(--al-soft);
    color: var(--al-primary) !important;
}

.al-nav.is-scrolled .al-nav-cta {
    color: #fff !important;
    background: var(--al-primary);
    box-shadow: 0 10px 24px -12px rgba(41, 128, 185, .8);
}

.al-nav.is-scrolled .al-nav-user {
    background: var(--al-soft);
    color: var(--al-ink) !important;
}

/* Burger + mobile panel */
.al-nav-burger {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.al-nav-burger span,
.al-nav-burger span::before,
.al-nav-burger span::after {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s var(--al-ease), background-color .2s ease;
}

.al-nav-burger span {
    top: 50%;
    margin-top: -1px;
}

.al-nav-burger span::before,
.al-nav-burger span::after {
    content: "";
    left: 0;
    margin-left: 0;
}

.al-nav-burger span::before {
    transform: translateY(-6px);
}

.al-nav-burger span::after {
    transform: translateY(6px);
}

.al-nav.is-scrolled .al-nav-burger,
.al-nav.is-open .al-nav-burger {
    background: var(--al-soft);
}

.al-nav.is-scrolled .al-nav-burger span,
.al-nav.is-scrolled .al-nav-burger span::before,
.al-nav.is-scrolled .al-nav-burger span::after,
.al-nav.is-open .al-nav-burger span::before,
.al-nav.is-open .al-nav-burger span::after {
    background: var(--al-navy);
}

.al-nav.is-open .al-nav-burger span {
    background: transparent;
}

.al-nav.is-open .al-nav-burger span::before {
    transform: rotate(45deg);
}

.al-nav.is-open .al-nav-burger span::after {
    transform: rotate(-45deg);
}

.al-nav-mobile {
    display: none;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 1rem 0 2rem;
}

.al-nav.is-open .al-nav-mobile {
    display: block;
    animation: al-fade-up .3s var(--al-ease) both;
}

.al-nav-mobile a:not(.al-btn) {
    display: block;
    padding: .8rem 0;
    border-bottom: 1px solid var(--al-line);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--al-ink) !important;
}

.al-nav-mobile .al-btn {
    display: flex;
}

.al-nav-mobile-label {
    display: block;
    margin-top: 1.25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--al-muted-2);
}

/* =========================================================
   Common blocks
   ========================================================= */

.al-section {
    position: relative;
    padding: 6.5rem 0;
}

.al-section-soft {
    background: var(--al-soft);
}

.al-section-head {
    max-width: 760px;
    margin: 0 auto 4rem;
    text-align: center;
}

.al-kicker {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--al-accent);
    background: var(--al-accent-soft);
}

.al-section-title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1.06;
    color: var(--al-navy);
    margin-bottom: 1.25rem;
}

.al-section-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--al-muted);
    margin: 0;
}

.al-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
}

.al-pill-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .25);
    animation: al-pulse 2s ease-in-out infinite;
}

@keyframes al-pulse {
    50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, .05); }
}

.al-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--al-primary) !important;
}

.al-link-arrow i {
    transition: transform .2s var(--al-ease);
}

.al-link-arrow:hover i {
    transform: translateX(4px);
}

/* Reveal on scroll */
[data-al-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--al-ease), transform .7s var(--al-ease);
}

[data-al-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-al-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   Hero
   ========================================================= */

.al-hero {
    position: relative;
    padding: 9.5rem 0 0;
    background: var(--al-gradient-hero);
    overflow: hidden;
    isolation: isolate;
}

.al-hero::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    z-index: -1;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(142, 68, 173, .45), transparent 65%);
    filter: blur(20px);
}

.al-hero-decoration {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(../images/index/elements/background-hero.svg) top center / 1060px auto no-repeat;
    opacity: .35;
}

.al-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.al-hero-title {
    max-width: 980px;
    margin: 1.75rem auto 1.5rem;
    font-size: clamp(2.6rem, 6.6vw, 5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.04em;
    color: #fff;
    text-shadow: 0 2px 30px rgba(0, 15, 55, .12);
}

.al-hero-title .surlign {
    background-image: linear-gradient(rgba(142, 68, 173, .85), rgba(142, 68, 173, .85));
}

.al-hero-subtitle {
    max-width: 680px;
    margin: 0 auto 2.5rem;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

.al-claim {
    display: flex;
    gap: .6rem;
    width: 100%;
    max-width: 600px;
    padding: .45rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 30px 60px -25px rgba(0, 15, 55, .55), 0 0 0 6px rgba(255, 255, 255, .18);
}

.al-claim-field {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding-left: 1.25rem;
    cursor: text;
}

.al-claim-prefix {
    font-weight: 600;
    color: var(--al-ink);
    white-space: nowrap;
}

.al-claim input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: .75rem .25rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--al-primary);
    background: transparent;
}

.al-claim input::placeholder {
    color: var(--al-muted-2);
    font-weight: 400;
}

.al-hero-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: rgba(255, 255, 255, .9);
}

.al-hero-proof i {
    margin-right: .35rem;
    font-size: .8em;
}

.al-hero-proof .al-chip-icon-inline {
    margin-right: .4rem;
    font-size: .85em;
}

.al-hero-proof a {
    color: #fff !important;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .4);
    text-underline-offset: 3px;
}

.al-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Hero stage: real user pages fanned out + floating stats */
.al-hero-stage {
    position: relative;
    width: 100%;
    max-width: 1040px;
    height: 560px;
    margin: 3.5rem auto 0;
}

/* Soft halo behind the phones */
.al-hero-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4rem;
    width: 820px;
    height: 520px;
    margin-left: -410px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 60%, transparent);
}

.al-stage-phone {
    position: absolute;
    left: 50%;
    height: auto;
    will-change: transform;
}

.al-stage-phone-center {
    z-index: 3;
    bottom: -4rem;
    width: 350px;
    margin-left: -175px;
    filter: drop-shadow(0 50px 60px rgba(0, 20, 60, .45));
}

.al-stage-phone-left,
.al-stage-phone-right {
    z-index: 2;
    bottom: -7rem;
    width: 270px;
    opacity: .92;
    filter: drop-shadow(0 30px 40px rgba(0, 20, 60, .3)) saturate(.9);
}

.al-stage-phone-left {
    margin-left: -400px;
    rotate: -9deg;
}

.al-stage-phone-right {
    margin-left: 130px;
    rotate: 9deg;
}

.al-chip-icon-instagram {
    background: linear-gradient(45deg, #f9a43f, #e1306c 55%, #833ab4) !important;
}

.al-float-chip {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    border-radius: 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--al-navy);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 40px -18px rgba(0, 20, 60, .45);
    white-space: nowrap;
    animation: al-float 6s ease-in-out infinite;
}

.al-chip-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    font-size: .85rem;
    color: #fff;
    background: var(--al-gradient);
}

.al-float-chip small {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: var(--al-muted);
}

.al-float-chip-1 { top: 18%; left: 2%; }
.al-float-chip-2 { top: 44%; right: 0; animation-delay: -2s; }
.al-float-chip-3 { top: 70%; left: 8%; animation-delay: -4s; }

@keyframes al-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .al-float-chip { animation: none; }
}

/* =========================================================
   Inner pages hero (pricing, features, affiliation)
   ========================================================= */

.al-page-hero {
    position: relative;
    padding: 9rem 0 4.5rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, #2980b9 0%, #3a8fc6 55%, #5aa3d3 100%);
    overflow: hidden;
    isolation: isolate;
}

.al-page-hero::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -100px;
    z-index: -1;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(142, 68, 173, .45), transparent 65%);
}

.al-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(../images/background-login.jpg) center / cover no-repeat;
    opacity: .25;
    mix-blend-mode: soft-light;
}

.al-page-hero h1 {
    max-width: 860px;
    margin: 1.25rem auto 1rem;
    font-size: clamp(2.3rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
    color: #fff;
}

.al-page-hero p {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
}

.al-page-hero .al-hero-actions {
    margin-top: 2rem;
}

.al-page-hero .surlign {
    background-image: linear-gradient(rgba(142, 68, 173, .85), rgba(142, 68, 173, .85));
}

/* Pricing page */
.al-plan-page-pricing {
    padding: 3.5rem 0 0;
    background: linear-gradient(180deg, var(--al-soft), #fff);
}

.al-plan-page.is-in-app .al-plan-page-pricing {
    padding-top: 0;
    background: none;
}

.al-plan-page-head {
    margin-bottom: 2rem;
    text-align: center;
}

.al-plan-page-head h1 {
    margin: 0 0 .4rem;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--al-ink-2);
}

.al-plan-page-head p {
    margin: 0;
    color: var(--al-muted);
}

.al-reassurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.al-reassurance > div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .9rem;
    align-items: center;
    padding: 1.25rem 1.4rem;
    border-radius: 1.25rem;
    background: var(--al-soft);
}

.al-reassurance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-row: span 2;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: var(--al-primary);
    background: #fff;
}

.al-reassurance strong {
    color: var(--al-navy);
}

.al-reassurance span {
    font-size: .875rem;
    color: var(--al-muted);
}

@media (max-width: 767.98px) {
    .al-page-hero {
        padding: 7.5rem 0 3rem;
    }

    .al-reassurance {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Logos marquee
   ========================================================= */

.al-logos {
    padding: 2.5rem 0 1rem;
}

.al-logos-title {
    margin-bottom: 1.25rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--al-muted-2);
}

.al-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.al-marquee-track {
    display: flex;
    gap: .9rem;
    width: max-content;
    padding: .5rem 0;
    animation: al-marquee 45s linear infinite;
}

.al-marquee-slow .al-marquee-track {
    animation-duration: 90s;
}

@keyframes al-marquee {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .al-marquee-track {
        animation: none;
    }

    .al-marquee {
        overflow-x: auto;
    }
}

.al-logo-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--al-line);
    background: #fff;
    font-weight: 600;
    color: var(--al-ink-2);
    white-space: nowrap;
    box-shadow: var(--al-shadow-sm);
}

.al-logo-chip img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* =========================================================
   Presentation (alternating rows)
   ========================================================= */

.al-presentation::before {
    content: "";
    position: absolute;
    top: 14rem;
    left: 0;
    z-index: -1;
    width: 174px;
    height: 348px;
    background: url(../images/index/elements/decorator-transparent.svg) no-repeat;
}

.al-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 5rem;
}

.al-split > * {
    min-width: 0;
}

.al-split + .al-split {
    margin-top: 7rem;
}

.al-split.is-reversed .al-split-media {
    order: 2;
}

.al-split-media-frame {
    position: relative;
}

.al-split-media-frame::before {
    content: "";
    position: absolute;
    inset: 18% 12% -6% -4%;
    z-index: -1;
    border-radius: 2rem;
    background: var(--al-gradient);
    opacity: .9;
    transform: rotate(-3deg);
}

.al-split.is-reversed .al-split-media-frame::before {
    inset: 18% -4% -6% 12%;
    transform: rotate(3deg);
}

.al-split-media img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 40px rgba(0, 15, 55, .18));
}

.al-step-number {
    display: inline-block;
    margin-bottom: .75rem;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--al-primary);
}

.al-split-text h3 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.12;
    color: var(--al-navy);
    margin-bottom: 1.25rem;
}

.al-split-text p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--al-muted);
    margin-bottom: 1.5rem;
}

.al-split-text p a {
    font-weight: 600;
    color: var(--al-primary);
}

/* =========================================================
   Features grid
   ========================================================= */

.al-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.al-feature-card {
    display: block;
    padding: 1.75rem;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid var(--al-line);
    color: inherit !important;
    text-decoration: none !important;
    transition: transform .25s var(--al-ease), box-shadow .25s var(--al-ease), border-color .25s ease;
}

.al-feature-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--al-shadow);
}

.al-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    border-radius: .9rem;
    font-size: 1.15rem;
    color: #fff;
    background: var(--al-gradient);
    box-shadow: 0 10px 20px -10px rgba(41, 128, 185, .8);
}

.al-feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--al-navy);
    margin-bottom: .5rem;
}

.al-feature-card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--al-muted);
}

/* =========================================================
   Showcase
   ========================================================= */

/* Dark band between the two soft sections */
.al-showcase {
    position: relative;
    padding-bottom: 5rem;
    background:
        radial-gradient(45% 55% at 20% 45%, rgba(41, 128, 185, .14), transparent 70%),
        radial-gradient(40% 50% at 80% 60%, rgba(142, 68, 173, .12), transparent 70%),
        linear-gradient(180deg, #fff 0%, #f5f8fd 50%, #fff 100%);
    isolation: isolate;
    overflow: hidden;
}

.al-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(27, 37, 89, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 80%);
}

.al-showcase-marquee {
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.al-showcase-marquee .al-marquee-track {
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1rem 0 3.5rem;
}

.al-showcase-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 250px;
    text-decoration: none !important;
    transition: transform .35s var(--al-ease);
}


.al-showcase-item img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 30px rgba(21, 58, 87, .2));
}

.al-showcase-url {
    display: inline-flex;
    margin-top: 1rem;
    align-items: center;
    gap: .35rem;
    max-width: 92%;
    padding: .45rem .8rem;
    border: 1px solid rgba(230, 236, 245, .9);
    border-radius: 99px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 30px -16px rgba(21, 58, 87, .45);
    color: var(--al-muted);
    font-size: .7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al-showcase-url :is(i, svg) {
    flex: none;
    color: #16a34a;
    font-size: .6rem;
}

.al-showcase-url strong {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--al-ink);
}

/* =========================================================
   Key figures
   ========================================================= */

.al-figures-section {
    padding: 3rem 0 6rem;
}

.al-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 1.75rem;
    background: var(--al-navy);
    background-image: radial-gradient(circle at 15% 0%, rgba(41, 128, 185, .55), transparent 55%), radial-gradient(circle at 90% 100%, rgba(142, 68, 173, .55), transparent 55%);
    box-shadow: var(--al-shadow-lg);
    overflow: hidden;
}

.al-figure {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.al-figure + .al-figure {
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.al-figure-value {
    display: block;
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
}

.al-figure-label {
    display: block;
    margin-top: .35rem;
    font-size: .95rem;
    color: rgba(255, 255, 255, .7);
}

/* =========================================================
   Pricing
   ========================================================= */

.al-billing {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: max-content;
    margin: 0 auto 3rem;
    padding: .35rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--al-line);
    box-shadow: var(--al-shadow-sm);
}

.al-billing::before {
    content: "";
    position: absolute;
    top: .35rem;
    bottom: .35rem;
    left: .35rem;
    width: calc(50% - .35rem);
    border-radius: 999px;
    background: var(--al-navy);
    transform: translateX(calc(var(--al-billing-index, 0) * 100%));
    transition: transform .35s var(--al-ease);
}

.al-billing button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 150px;
    padding: .65rem 1.25rem;
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    background: none;
    font-weight: 600;
    color: var(--al-ink-2);
    transition: color .25s ease;
}

.al-billing button.is-active {
    color: #fff;
}

.al-billing-badge {
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: #1f6fa8;
    background: #e3f0fa;
}

/* All plans on one line; each card spans 6 shared rows so names, prices and CTAs line up */
.al-pricing-grid {
    display: grid;
    grid-template-columns: repeat(var(--al-columns, 4), minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    column-gap: 1rem;
    align-items: stretch;
    padding-top: 1rem;
}

.al-pricing-grid-5 { --al-columns: 5; }
.al-pricing-grid-3 { --al-columns: 3; max-width: 1000px; margin: 0 auto; }
.al-pricing-grid-2 { --al-columns: 2; max-width: 760px; margin: 0 auto; }
.al-pricing-grid-1 { --al-columns: 1; max-width: 400px; margin: 0 auto; }

.al-plan {
    position: relative;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: 1.75rem 1.5rem;
    border-radius: 1.5rem;
    background: #fff;
    border: 1px solid var(--al-line);
    transition: transform .25s var(--al-ease), box-shadow .25s var(--al-ease);
}

.al-plan:hover {
    box-shadow: var(--al-shadow);
}

.al-plan.is-featured {
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--al-gradient) border-box;
    box-shadow: 0 30px 60px -30px rgba(142, 68, 173, .55);
}


.al-plan-tag {
    position: absolute;
    top: -.85rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .3rem .9rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--al-gradient);
    white-space: nowrap;
}

.al-plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--al-navy);
    margin-bottom: .35rem;
}

.al-plan-description {
    font-size: .875rem;
    line-height: 1.45;
    color: var(--al-muted);
    margin-bottom: 1.25rem;
}

.al-plan-price {
    margin-bottom: 1.25rem;
}

.al-price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--al-navy);
}

.al-price-currency {
    margin-left: .1rem;
    font-size: .55em;
    vertical-align: .55em;
}

.al-price-note .al-price-currency {
    margin-left: 0;
    font-size: inherit;
    vertical-align: baseline;
}

.al-price-period {
    margin-left: .25rem;
    font-size: .95rem;
    color: var(--al-muted);
}

.al-price-note {
    display: block;
    margin-top: .5rem;
    font-size: .825rem;
    color: var(--al-muted);
}

.al-plan .al-btn {
    align-self: start;
    white-space: nowrap;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

.al-plan-reassurance {
    margin: .6rem 0 1.25rem;
    text-align: center;
    font-size: .775rem;
    color: var(--al-muted);
}

.al-plan-features {
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--al-line);
    list-style: none;
}

.al-plan-features li {
    display: flex;
    gap: .55rem;
    padding: .3rem 0;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--al-ink-2);
}

/* Custom offer: a slim banner instead of a 5th card */
.al-plan-custom {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding: 1.1rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px dashed #c9d6ea;
    background: rgba(255, 255, 255, .7);
}

.al-plan-micro + .al-plan-custom {
    margin-top: .75rem;
}

.al-plan-custom > div {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .6rem;
    align-items: baseline;
}

.al-plan-custom strong {
    color: var(--al-navy);
}

.al-plan-custom span {
    font-size: .925rem;
    color: var(--al-muted);
}

.al-plan-custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: var(--al-primary) !important;
    background: var(--al-primary-soft);
}

/* Detailed comparison (pricing page) */
.al-compare {
    margin-top: 2.5rem;
}

.al-compare summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    width: max-content;
    margin: 0 auto;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--al-primary);
    background: var(--al-primary-soft);
    cursor: pointer;
    list-style: none;
}

.al-compare summary::-webkit-details-marker {
    display: none;
}

.al-compare summary::after {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}

.al-compare[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
}

.al-compare-scroll {
    margin-top: 1.75rem;
    overflow-x: auto;
    border-radius: 1.25rem;
    border: 1px solid var(--al-line);
    background: #fff;
}

.al-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}

.al-compare-table tbody tr:hover > * {
    background-color: #f3f7fc;
}

.al-compare-table tbody tr:hover > .is-featured {
    background-color: rgba(142, 68, 173, .1);
}

/* No scroll container around the table, so the header sticks to the page right under the fixed nav */
.al-compare-scroll {
    overflow: clip;
}

.al-compare-table thead th {
    z-index: 2;
    box-shadow: 0 1px 0 var(--al-line);
}

body:has(.al-nav) .al-compare-table thead th {
    top: 64px;
}

.al-compare-table th,
.al-compare-table td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--al-line);
    text-align: center;
    color: var(--al-ink-2);
}

.al-compare-table td {
    white-space: nowrap;
}

.al-compare-table thead th {
    position: sticky;
    top: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--al-navy);
    background: #fff;
}

.al-compare-table tbody th {
    text-align: left;
    font-weight: 500;
}

.al-compare-note {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    font-weight: 400;
    color: var(--al-muted, #6b7280);
}

.al-compare-table tr:last-child th,
.al-compare-table tr:last-child td {
    border-bottom: 0;
}

.al-compare-table .is-featured {
    background: rgba(142, 68, 173, .05);
}

.al-compare-table thead th.is-featured {
    background: linear-gradient(rgba(142, 68, 173, .05), rgba(142, 68, 173, .05)), #fff;
}

.al-compare-yes {
    color: var(--al-primary);
}

.al-compare-no {
    color: var(--al-muted-2);
}

@media (max-width: 767.98px) {
    .al-compare-table {
        min-width: 0;
        table-layout: fixed;
        font-size: .8rem;
    }

    .al-compare-table th,
    .al-compare-table td {
        padding: .65rem .2rem;
    }

    .al-compare-table td {
        padding-right: .1rem;
        padding-left: .1rem;
        font-size: .72rem;
        letter-spacing: -.01em;
    }

    .al-compare-table th:first-child {
        width: 34%;
        padding-left: .75rem;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .al-compare-table thead th:not(:first-child) {
        padding-right: .1rem;
        padding-left: .1rem;
        font-size: .66rem;
        letter-spacing: -.01em;
    }

    .al-compare-note {
        font-size: .7rem;
        line-height: 1.35;
    }

    body:has(.al-nav) .al-compare-table thead th {
        top: 60px;
    }
}


.al-plan-features li > i,
.al-plan-features li > svg {
    flex-shrink: 0;
    margin-top: calc((.875rem * 1.4 - 1em) / 2);
    font-size: .75rem;
    color: var(--al-primary);
}

.al-plan.is-featured .al-plan-features li > i,
.al-plan.is-featured .al-plan-features li > svg {
    color: var(--al-accent);
}

.al-plan-features-intro {
    font-weight: 600;
    color: var(--al-navy) !important;
}

.al-pricing-more {
    margin: 3rem 0 0;
    text-align: center;
    color: var(--al-muted);
}

.al-pricing-more a {
    font-weight: 600;
    color: var(--al-primary);
}

/* =========================================================
   FAQ
   ========================================================= */

.al-faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 5rem;
    align-items: start;
}

.al-faq-intro {
    position: sticky;
    top: 7rem;
}

.al-faq-intro p {
    font-size: 1.05rem;
    color: var(--al-muted);
    margin-bottom: 1.75rem;
}

.al-faq-item {
    border-bottom: 1px solid var(--al-line);
}

.al-faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--al-navy);
    cursor: pointer;
    list-style: none;
}

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

.al-faq-item summary::after {
    content: "+";
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--al-primary);
    background: var(--al-primary-soft);
    transition: transform .25s var(--al-ease), background-color .2s ease, color .2s ease;
}

.al-faq-item[open]:not(.is-closing) summary::after {
    transform: rotate(45deg);
    color: #fff;
    background: var(--al-primary);
}

.al-faq-answer {
    padding: 0 3rem 1.5rem 0;
    line-height: 1.7;
    color: var(--al-muted);
}

.al-faq-answer a {
    font-weight: 600;
    color: var(--al-primary);
}

/* =========================================================
   CTA
   ========================================================= */

.al-cta {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    min-height: 380px;
    border-radius: 2rem;
    background: var(--al-gradient);
    overflow: hidden;
    isolation: isolate;
}

.al-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url(../images/index/elements/pattern-white.svg) center / cover no-repeat;
    opacity: .12;
}

.al-cta-content {
    padding: 4rem;
}

.al-cta > * {
    min-width: 0;
}

.al-cta h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1rem;
}

.al-cta p {
    max-width: 520px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 2rem;
}

.al-cta-visual {
    position: relative;
    align-self: stretch;
    min-height: 420px;
}

.al-cta-phone {
    position: absolute;
}

.al-cta-phone .alv-phone {
    box-shadow: 0 40px 70px -30px rgba(0, 20, 60, .6), inset 0 0 0 2px #2a3142;
}

.al-cta-phone-front {
    z-index: 2;
    top: 3.25rem;
    left: 50%;
    margin-left: -40px;
    rotate: 6deg;
}

.al-cta-phone-back {
    top: 4.75rem;
    left: 50%;
    margin-left: -200px;
    rotate: -8deg;
}

.al-cta-chip {
    top: 9.5rem;
    left: -12%;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-width: 170px;
}

.al-cta-chip .alv-spark {
    width: 100%;
    height: 28px;
}

.al-cta-chip-2 {
    right: 4%;
    bottom: 2.5rem;
}

/* Features pages */
.al-page-hero-media {
    padding-bottom: 0;
}

.al-page-hero-visual {
    max-width: 1080px;
    margin: 3.5rem auto 0;
}

.al-page-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: -1px;
}

.al-check-list {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.al-check-list li {
    display: flex;
    gap: .75rem;
    padding: .5rem 0;
    font-size: 1.025rem;
    line-height: 1.5;
    color: var(--al-ink-2);
}

.al-check-list .al-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: .1rem;
    border-radius: 50%;
    font-size: .65rem;
    color: #fff;
    background: var(--al-primary);
}

.al-plan-badge {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .725rem;
    font-weight: 700;
    vertical-align: .1em;
    color: var(--al-accent);
    background: rgba(142, 68, 173, .1);
    white-space: nowrap;
}

.al-split-text .al-feature-icon {
    margin-bottom: 1rem;
}

.al-logos-light {
    background: var(--al-soft);
}

.al-features-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 860px;
    margin: 0 auto;
}

/* =========================================================
   Footer
   ========================================================= */

.al-footer {
    padding: 4.5rem 0 2rem;
    border-top: 1px solid var(--al-line);
    margin-top: 2rem;
}

.al-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2.5rem;
}

.al-footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--al-navy) !important;
    text-decoration: none !important;
}

.al-footer-logo img {
    max-height: 2rem;
}

.al-footer-brand p {
    max-width: 320px;
    font-size: .925rem;
    line-height: 1.6;
    color: var(--al-muted);
}

.al-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.al-footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    color: var(--al-ink-2);
    background: var(--al-soft);
    transition: background-color .2s ease, color .2s ease, transform .2s var(--al-ease);
}

.al-footer-socials a:hover {
    color: #fff;
    background: var(--al-primary);
    transform: translateY(-2px);
}

.al-footer-col {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.al-footer-title {
    margin-bottom: .35rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--al-navy);
}

.al-footer-col a {
    font-size: .925rem;
    color: var(--al-muted) !important;
}

.al-footer-col a:hover {
    color: var(--al-primary) !important;
    text-decoration: none;
}

.al-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--al-line);
    font-size: .85rem;
    color: var(--al-muted);
}

.al-footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.al-footer-bottom a {
    font-weight: 600;
    color: var(--al-ink-2);
}

.al-footer-language {
    border: 1px solid var(--al-line);
    border-radius: 999px;
    padding: .35rem .85rem;
    background: #fff;
    font-size: .85rem;
    color: var(--al-ink-2);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199.98px) {
    .al-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Plans stay on one line and swipe */
    .al-pricing-grid {
        grid-template-columns: repeat(var(--al-columns, 4), minmax(270px, 1fr));
        max-width: none;
        margin: 0 -1rem;
        padding: 1rem 1rem 1.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .al-plan {
        scroll-snap-align: start;
    }

    .al-plan.is-featured,
    .al-plan.is-featured.is-visible {
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .al-nav-inner {
        grid-template-columns: auto 1fr;
    }

    .al-nav-brand {
        justify-self: start;
        font-size: 1.6rem;
    }

    .al-section {
        padding: 4.5rem 0;
    }

    .al-split,
    .al-faq-layout,
    .al-cta {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .al-split.is-reversed .al-split-media {
        order: 0;
    }

    .al-split + .al-split {
        margin-top: 4.5rem;
    }

    .al-faq-intro {
        position: static;
    }

    .al-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .al-figure:nth-child(3) {
        border-left: 0;
    }

    .al-figure:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .al-cta-content {
        padding: 3rem 2rem 0;
        text-align: center;
    }

    .al-cta p {
        margin-left: auto;
        margin-right: auto;
    }

    .al-cta-visual {
        min-height: 300px;
    }

    .al-cta-visual {
        min-height: 360px;
    }

    .al-cta-phone-front {
        top: 1rem;
    }

    .al-cta-phone-back {
        top: 2.5rem;
    }

    .al-cta-chip {
        top: 6.5rem;
        left: .75rem;
        min-width: 150px;
    }

    .al-cta-chip-2 {
        right: .75rem;
        bottom: 1.5rem;
    }

    .al-hero-stage {
        height: 460px;
    }

    .al-stage-phone {
        width: 240px;
    }

    .al-stage-phone-center {
        width: 260px;
        margin-left: -130px;
    }

    .al-stage-phone-left {
        margin-left: -330px;
    }

    .al-stage-phone-right {
        margin-left: 90px;
    }

    .al-float-chip-1 { left: 0; }
    .al-float-chip-3 { display: none; }

    .al-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .al-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .al-hero {
        padding-top: 7.5rem;
    }

    .al-claim {
        flex-direction: column;
        border-radius: 1.5rem;
        padding: .5rem;
    }

    .al-claim-field {
        padding: .25rem .75rem;
    }

    .al-claim .al-btn {
        width: 100%;
    }

    .al-feature-grid {
        grid-template-columns: 1fr;
    }

    .al-pricing-grid {
        grid-template-columns: repeat(var(--al-columns, 4), 82vw);
    }

    .al-plan-custom {
        flex-direction: column;
        text-align: center;
    }

    .al-showcase-item {
        width: 170px;
    }

    .al-hero-stage {
        height: 400px;
    }

    .al-stage-phone-left,
    .al-stage-phone-right,
    .al-float-chip-2 {
        display: none;
    }

    .al-float-chip-1 {
        top: 8%;
        left: 0;
    }

    .al-features-more-grid {
        grid-template-columns: 1fr;
    }

    .al-billing button {
        min-width: 0;
        gap: .35rem;
        padding: .6rem .85rem;
        font-size: .875rem;
    }

    .al-billing-badge {
        padding: .1rem .4rem;
        font-size: .7rem;
    }

    .al-faq-answer {
        padding-right: 0;
    }
}

/* ==========================================================================
   Product illustrations (features pages, home) - drawn in HTML/CSS
   ========================================================================== */

.al-split-media-frame.is-visual::before {
    inset: 6% 4% 2%;
    border-radius: 48px;
    background: var(--al-gradient-soft);
    opacity: 1;
    transform: none;
}

.al-split.is-reversed .al-split-media-frame.is-visual::before {
    inset: 6% 4% 2%;
    transform: none;
}

.alv {
    position: relative;
    font-family: inherit;
    color: var(--al-ink);
    text-align: left;
    user-select: none;
}

.alv * {
    box-sizing: border-box;
}

/* Shared: cards, floating chips */
.alv-card {
    position: relative;
    width: min(100%, 440px);
    margin: 2.5rem auto;
    padding: 1.25rem;
    border: 1px solid rgba(230, 236, 245, .9);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 60px -30px rgba(21, 58, 87, .35), 0 2px 6px rgba(27, 37, 89, .04);
}

.alv-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.alv-card-head strong {
    font-size: .95rem;
    font-weight: 700;
}

.alv-card-head strong :is(i, svg) {
    margin-right: .35rem;
    color: var(--al-primary);
}

.alv-float {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    border: 1px solid rgba(230, 236, 245, .9);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 40px -20px rgba(21, 58, 87, .45);
    font-size: .8rem;
    line-height: 1.25;
    white-space: nowrap;
    animation: alv-float 6s ease-in-out infinite;
}

.alv-float[data-float="2"] { animation-delay: -2s; }
.alv-float[data-float="3"] { animation-delay: -4s; }

@keyframes alv-float {
    50% { transform: translateY(-8px); }
}

.alv-float strong {
    display: block;
    font-size: .85rem;
    font-weight: 700;
}

.alv-float small {
    display: block;
    color: var(--al-muted);
    font-size: .72rem;
}

.alv-float-label {
    display: block;
    color: var(--al-muted);
    font-size: .72rem;
}

.alv-float-value {
    font-size: 1.35rem !important;
    letter-spacing: -.02em;
}

.alv-float-value em,
.alv-stats-total em {
    margin-left: .3rem;
    color: #16a34a;
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
    vertical-align: middle;
}

.alv-float-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--al-primary-soft);
    color: var(--al-primary);
}

.alv-float-icon img {
    width: 20px;
    height: 20px;
}

.alv-float-icon.is-green { background: #e8f8ee; color: #16a34a; }
.alv-float-icon.is-accent { background: var(--al-accent-soft); color: var(--al-accent); }

.alv-spark {
    display: block;
    width: 120px;
    height: 32px;
    margin-top: .35rem;
}

.alv-spark path {
    fill: none;
    stroke: var(--al-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.alv-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 99px;
    background: var(--al-soft);
    color: var(--al-muted);
    font-size: .72rem;
    font-weight: 600;
}

.alv-pill.is-green { background: #e8f8ee; color: #16a34a; }

.alv-control-label {
    display: block;
    margin: 0 0 .5rem;
    color: var(--al-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.alv-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 0;
    border-top: 1px solid var(--al-line);
    font-size: .82rem;
    font-weight: 500;
}

.alv-toggle {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 99px;
    background: var(--al-line);
}

.alv-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.alv-toggle.is-on { background: var(--al-primary); }
.alv-toggle.is-on::after { left: 17px; }

.alv-swatches {
    display: inline-flex;
    gap: .35rem;
}

.alv-swatches i {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--al-line);
}

.alv-swatches.is-lg {
    gap: .5rem;
    margin-bottom: 1rem;
}

.alv-swatches.is-lg i {
    width: 26px;
    height: 26px;
}

.alv-swatches i.is-active {
    box-shadow: 0 0 0 2px var(--al-accent);
}

/* Phone */
.alv-phone {
    --phone-bg: linear-gradient(180deg, #eaf3fb 0%, #f4effa 100%);
    --phone-ink: #1d2433;
    --phone-btn: #fff;
    --phone-btn-ink: #1d2433;
    --phone-btn-border: rgba(27, 37, 89, .08);
    position: relative;
    z-index: 2;
    width: 270px;
    height: 552px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 46px;
    background: #0d1220;
    box-shadow: 0 50px 90px -40px rgba(13, 18, 32, .65), inset 0 0 0 2px #2a3142;
}

.alv-phone[data-theme="dark"] {
    --phone-bg: radial-gradient(120% 70% at 50% 0%, #1e293b 0%, #0b1120 70%);
    --phone-ink: #f8fafc;
    --phone-btn: rgba(255, 255, 255, .08);
    --phone-btn-ink: #f8fafc;
    --phone-btn-border: rgba(255, 255, 255, .14);
}

.alv-phone[data-theme="soft"] {
    --phone-bg: linear-gradient(135deg, #fde8dc 0%, #f7efe4 30%, #e4efe6 60%, #f4e4ee 100%);
    --phone-ink: #4a3426;
    --phone-btn: rgba(255, 255, 255, .75);
    --phone-btn-ink: #4a3426;
    --phone-btn-border: rgba(74, 52, 38, .08);
}

.alv-phone[data-theme="soft"] .alv-phone-screen {
    background-size: 280% 280%;
    animation: alv-soft-drift 14s ease-in-out infinite;
}

@keyframes alv-soft-drift {
    0%, 100% { background-position: 0% 30%; }
    50% { background-position: 100% 70%; }
}

@media (prefers-reduced-motion: reduce) {
    .alv-phone[data-theme="soft"] .alv-phone-screen { animation: none; }
}

.alv-phone[data-theme="sunset"] {
    --phone-bg: linear-gradient(170deg, #fb923c 0%, #db2777 60%, #7c3aed 100%);
    --phone-ink: #fff;
    --phone-btn: rgba(255, 255, 255, .2);
    --phone-btn-ink: #fff;
    --phone-btn-border: rgba(255, 255, 255, .3);
}

.alv-phone[data-theme="pastel"] {
    --phone-bg: linear-gradient(180deg, #fdf2f8 0%, #e0e7ff 100%);
    --phone-ink: #3b0764;
    --phone-btn: #3b0764;
    --phone-btn-ink: #fff;
    --phone-btn-border: transparent;
}

.alv-phone-screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 37px;
    background: var(--phone-bg);
}

.alv-phone-island {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 84px;
    height: 24px;
    border-radius: 99px;
    background: #0d1220;
    transform: translateX(-50%);
}

.alv-bio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 3.4rem 1.1rem 1rem;
    color: var(--phone-ink);
    text-align: center;
}

.alv-bio-avatar {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: linear-gradient(135deg, #2980b9, #8e44ad);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    box-shadow: 0 10px 24px -10px rgba(27, 37, 89, .5);
}

.alv-bio-name {
    margin-top: .2rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.alv-bio-name :is(i, svg) {
    color: #3b82f6;
    font-size: .8rem;
}

.alv-phone[data-theme="sunset"] .alv-bio-name :is(i, svg),
.alv-phone[data-theme="dark"] .alv-bio-name :is(i, svg) {
    color: #fff;
}

.alv-bio-text {
    margin-top: -.35rem;
    font-size: .75rem;
    opacity: .7;
}

.alv-bio-socials {
    display: flex;
    gap: .9rem;
    margin: .1rem 0 .4rem;
    font-size: .95rem;
    opacity: .85;
}

.alv-bio-btn {
    display: block;
    width: 100%;
    padding: .72rem .8rem;
    border: 1px solid var(--phone-btn-border);
    border-radius: 14px;
    background: var(--phone-btn);
    color: var(--phone-btn-ink);
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 4px 12px -8px rgba(27, 37, 89, .35);
}

.alv-bio-video {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 98px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1d2433 0%, #2980b9 100%);
    color: #fff;
    overflow: hidden;
}

.alv-play {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding-left: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #ef4444;
    font-size: .8rem;
}

.alv-bio-video small {
    position: absolute;
    bottom: .5rem;
    left: .7rem;
    font-size: .68rem;
    font-weight: 600;
}

.alv-bio-tiktok {
    display: flex;
    gap: .6rem;
    width: 100%;
    padding: .45rem;
    border-radius: 14px;
    background: #111318;
    color: #fff;
    text-align: left;
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .6);
}

.alv-tiktok-thumb {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 54px;
    height: 80px;
    border-radius: 9px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 45%),
        linear-gradient(160deg, #fde68a 0%, #fdba74 40%, #f9a8d4 100%);
    color: #fff;
    font-size: .8rem;
}

.alv-tiktok-meta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    padding: .15rem 0;
}

.alv-tiktok-handle {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 700;
}

.alv-tiktok-handle :is(i, svg) {
    color: #fff;
    filter: drop-shadow(1px 0 0 #fe2c55) drop-shadow(-1px 0 0 #25f4ee);
}

.alv-tiktok-caption {
    display: -webkit-box;
    overflow: hidden;
    font-size: .66rem;
    line-height: 1.35;
    opacity: .85;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.alv-tiktok-views {
    margin-top: auto;
    font-size: .62rem;
    font-weight: 600;
    opacity: .6;
}

.alv-tiktok-views :is(i, svg) { font-size: .5rem; }

.alv-bio-pay {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem;
    border: 1px solid var(--phone-btn-border);
    border-radius: 14px;
    background: var(--phone-btn);
    color: var(--phone-btn-ink);
    text-align: left;
    box-shadow: 0 4px 12px -8px rgba(27, 37, 89, .35);
}

.alv-pay-thumb {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .7), transparent 50%),
        linear-gradient(150deg, #e0e7ff 0%, #c4b5fd 55%, #8e44ad 100%);
    color: #fff;
    font-size: .8rem;
}

.alv-pay-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.alv-pay-meta strong { font-size: .72rem; font-weight: 700; }

.alv-pay-meta small {
    overflow: hidden;
    font-size: .6rem;
    opacity: .65;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alv-pay-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
}

.alv-pay-side b { font-size: .75rem; font-weight: 800; }

.alv-pay-side em {
    padding: .22rem .55rem;
    border-radius: 99px;
    background: var(--phone-btn-ink);
    color: var(--phone-btn);
    font-size: .58rem;
    font-style: normal;
    font-weight: 700;
}

.alv-bio-playlist {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem;
    border-radius: 14px;
    background: #121418;
    color: #fff;
    text-align: left;
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .6);
}

.alv-playlist-cover {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 70% 20%, rgba(251, 146, 60, .9), transparent 55%),
        linear-gradient(160deg, #7c3aed 0%, #1e1b4b 100%);
}

.alv-eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.alv-eq i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: #fff;
    transform-origin: bottom;
    transform: scaleY(.45);
}

.alv-playlist-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.alv-playlist-meta strong { font-size: .72rem; font-weight: 700; }

.alv-playlist-meta small {
    font-size: .6rem;
    opacity: .65;
    white-space: nowrap;
}

.alv-playlist-meta small :is(i, svg) { color: #1ed760; }

.alv-playlist-progress {
    position: relative;
    height: 3px;
    margin-top: .2rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}

.alv-playlist-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    border-radius: inherit;
    background: #fff;
}

.alv-playlist-play {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 26px;
    height: 26px;
    padding-left: 2px;
    border-radius: 50%;
    background: #1ed760;
    color: #0b0d10;
    font-size: .55rem;
}

.is-visible .alv-eq i { animation: alv-eq 1.1s ease-in-out infinite; }
.is-visible .alv-eq i:nth-child(2) { animation-delay: -.4s; }
.is-visible .alv-eq i:nth-child(3) { animation-delay: -.75s; }
.is-visible .alv-playlist-progress i { animation: alv-progress 24s linear infinite; }

@keyframes alv-eq {
    0%, 100% { transform: scaleY(.35); }
    50% { transform: scaleY(1); }
}

@keyframes alv-progress {
    from { width: 22%; }
    to { width: 86%; }
}

.alv-phone.is-mini {
    width: 200px;
    height: 410px;
    padding: 8px;
    border-radius: 36px;
}

.alv-phone.is-mini .alv-phone-screen {
    border-radius: 29px;
}

.alv-phone.is-mini .alv-bio {
    gap: .4rem;
    padding: 2.6rem .8rem .8rem;
    transform-origin: top center;
}

.alv-phone.is-mini .alv-bio-avatar { width: 56px; height: 56px; font-size: 1.05rem; }
.alv-phone.is-mini .alv-bio-btn { padding: .55rem; font-size: .66rem; border-radius: 11px; }
.alv-phone.is-mini .alv-bio-video { height: 70px; }
.alv-phone.is-mini .alv-bio-tiktok { gap: .45rem; padding: .35rem; border-radius: 11px; }
.alv-phone.is-mini .alv-tiktok-thumb { width: 40px; height: 58px; border-radius: 7px; font-size: .62rem; }
.alv-phone.is-mini .alv-tiktok-handle { font-size: .58rem; }
.alv-phone.is-mini .alv-tiktok-caption { font-size: .56rem; }
.alv-phone.is-mini .alv-tiktok-views { font-size: .54rem; }
.alv-phone.is-mini :is(.alv-bio-pay, .alv-bio-playlist) { gap: .4rem; padding: .35rem; border-radius: 11px; }
.alv-phone.is-mini :is(.alv-pay-thumb, .alv-playlist-cover) { width: 32px; height: 32px; border-radius: 7px; }
.alv-phone.is-mini :is(.alv-pay-meta, .alv-playlist-meta) strong { font-size: .6rem; }
.alv-phone.is-mini :is(.alv-pay-meta, .alv-playlist-meta) small { font-size: .52rem; }
.alv-phone.is-mini .alv-pay-side b { font-size: .62rem; }
.alv-phone.is-mini .alv-pay-side em { padding: .15rem .4rem; font-size: .5rem; }
.alv-phone.is-mini .alv-playlist-play { width: 20px; height: 20px; font-size: .45rem; }
.alv-phone.is-mini .alv-bio-name { font-size: .85rem; }
.alv-phone.is-mini .alv-bio-text { font-size: .65rem; }
.alv-phone.is-mini .alv-bio-socials { font-size: .75rem; }

/* Hero composition */
.alv-hero {
    max-width: 920px;
    height: 600px;
    margin: 0 auto;
    padding-top: 1rem;
}

.alv-hero-glow {
    position: absolute;
    inset: 12% 22% 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
    filter: blur(10px);
}

.alv-float-tl { top: 18%; left: 6%; flex-direction: column; align-items: flex-start; gap: .1rem; }
.alv-float-tr { top: 12%; right: 8%; }
.alv-float-bl { bottom: 22%; left: 10%; }
.alv-float-br { bottom: 12%; right: 6%; }

/* Block palette */
.alv-search {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-radius: 10px;
    background: var(--al-soft);
    color: var(--al-muted-2);
    font-size: .75rem;
}

.alv-palette-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.alv-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .85rem .4rem .7rem;
    border: 1px solid var(--al-line);
    border-radius: 14px;
    background: #fff;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}

.alv-tile-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .9rem;
}

.alv-tile.is-active {
    border-color: var(--al-primary);
    box-shadow: 0 0 0 4px rgba(41, 128, 185, .12);
}

.alv-cursor {
    position: absolute;
    top: 58%;
    left: 52%;
    color: var(--al-ink);
    font-size: 1.15rem;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2));
}

.alv-float-palette { right: -6%; bottom: -1.5rem; }

/* Themes */
.alv-themes {
    height: 500px;
}

.alv-themes .alv-phone {
    position: absolute;
    top: 50%;
    left: 50%;
}

.alv-themes .is-left { transform: translate(-112%, -46%) rotate(-8deg) scale(.92); z-index: 1; }
.alv-themes .is-center { transform: translate(-50%, -52%); z-index: 3; }
.alv-themes .is-right { transform: translate(12%, -46%) rotate(8deg) scale(.92); z-index: 2; }
.alv-float-themes { left: 50%; bottom: 0; transform: translateX(-50%); animation: none; }

/* Domain */
.alv-domain {
    padding: 2.5rem 0;
}

.alv-browser {
    position: relative;
    width: min(100%, 460px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(230, 236, 245, .9);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 60px -30px rgba(21, 58, 87, .4);
}

.alv-browser-bar {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--al-line);
    background: #f8faff;
}

.alv-dots {
    display: flex;
    gap: .35rem;
}

.alv-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e8f0;
}

.alv-browser-url {
    flex: 1;
    padding: .45rem .8rem;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--al-line);
    font-size: .85rem;
}

.alv-browser-url :is(i, svg) {
    margin-right: .3rem;
    color: #16a34a;
    font-size: .75rem;
}

.alv-browser-old {
    position: absolute;
    top: 3.6rem;
    left: 50%;
    padding: .3rem .7rem;
    border-radius: 8px;
    background: #fff1f2;
    color: #be123c;
    font-size: .72rem;
    text-decoration: line-through;
    transform: translateX(-50%);
    white-space: nowrap;
}

.alv-browser-old :is(i, svg) {
    margin-right: .25rem;
}

.alv-browser-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 3.4rem 2.5rem 2rem;
    background: linear-gradient(180deg, #fff, #f6f9ff);
}

.alv-browser-body .alv-bio-avatar {
    width: 58px;
    height: 58px;
    font-size: 1rem;
}

.alv-line {
    display: block;
    width: 40%;
    height: 8px;
    border-radius: 99px;
    background: var(--al-line);
}

.alv-line.is-strong {
    width: 55%;
    height: 10px;
    background: #d5deef;
}

.alv-bar {
    display: block;
    width: 100%;
    height: 34px;
    margin-top: .3rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--al-line);
}

.alv-float-domain-1 { top: 0; right: 0; }
.alv-float-domain-2 { bottom: .5rem; left: 0; }

/* QR codes */
.alv-qr-hero {
    height: 520px;
}

.alv-qr-card {
    --qr-bg: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: 230px;
    padding: 1.1rem 1.1rem .9rem;
    border-radius: 26px;
    background: var(--qr-bg);
    box-shadow: 0 40px 70px -35px rgba(13, 18, 32, .55);
}

.alv-qr-card svg {
    display: block;
    width: 100%;
    height: auto;
    padding: .5rem;
    border-radius: 16px;
    background: #fff;
}

.alv-qr-card.is-center { z-index: 3; width: 270px; transform: translate(-50%, -50%); }
.alv-qr-card.is-left { z-index: 1; transform: translate(-125%, -42%) rotate(-9deg); }
.alv-qr-card.is-right { z-index: 2; transform: translate(25%, -42%) rotate(9deg); }

.alv-qr-label {
    padding: .45rem 1.1rem;
    border-radius: 99px;
    background: #2980b9;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.alv-formats {
    display: flex;
    gap: .35rem;
}

.alv-formats b {
    padding: .3rem .55rem;
    border-radius: 8px;
    background: var(--al-soft);
    font-size: .7rem;
    font-weight: 700;
}

.alv-formats b:first-child {
    background: var(--al-ink);
    color: #fff;
}

.alv-qr-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: min(100%, 500px);
}

.alv-qr-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1rem;
    border-radius: 18px;
    background: var(--al-gradient-soft);
}

.alv-qr-preview svg {
    width: 100%;
    padding: .6rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 24px -16px rgba(27, 37, 89, .4);
}

.alv-styles {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.alv-styles i {
    width: 40px;
    height: 40px;
    border: 1px solid var(--al-line);
    border-radius: 10px;
    background-color: #fff;
    background-size: 12px 12px;
    background-position: center;
}

.alv-styles .is-square { background-image: linear-gradient(90deg, var(--al-ink) 50%, transparent 0), linear-gradient(var(--al-ink) 50%, transparent 0); background-size: 6px 6px; background-blend-mode: multiply; }
.alv-styles .is-dots { background-image: radial-gradient(circle, var(--al-ink) 1.4px, transparent 1.9px); background-size: 6px 6px; }
.alv-styles .is-rounded { background-image: radial-gradient(circle, var(--al-accent) 2px, transparent 2.5px); background-size: 6.5px 6.5px; }
.alv-styles i.is-active { border-color: var(--al-accent); box-shadow: 0 0 0 3px rgba(142, 68, 173, .15); }

.alv-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .75rem;
    padding: .65rem;
    border-radius: 12px;
    background: var(--al-ink);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
}

.alv-qr-uses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem .85rem;
    width: min(100%, 470px);
    margin: 2rem auto 3rem;
}

.alv-use {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .8rem;
    border: 1px solid rgba(230, 236, 245, .9);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 40px -26px rgba(21, 58, 87, .4);
}

.alv-use:nth-child(3n + 2) {
    transform: translateY(22px);
}

.alv-use-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    font-weight: 700;
}

.alv-use-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--use-color) 12%, #fff);
    color: var(--use-color);
    font-size: .7rem;
}

.alv-use svg {
    width: 100%;
    height: auto;
}

/* Smartlink routing */
.alv-route {
    height: auto;
    aspect-ratio: 1000 / 460;
    max-width: 1000px;
    container-type: inline-size;
}

.alv-route-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.alv-route-lines path {
    fill: none;
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 2;
    stroke-dasharray: 6 8;
    animation: alv-dash 1.6s linear infinite;
}

.alv-route-lines path.is-out {
    stroke: #fff;
    stroke-width: 2.5;
}

@keyframes alv-dash {
    to { stroke-dashoffset: -28; }
}

.alv-route-source,
.alv-route-dest,
.alv-route-center {
    position: absolute;
    display: flex;
    align-items: center;
    border: 1px solid rgba(230, 236, 245, .9);
    background: #fff;
    box-shadow: 0 20px 40px -22px rgba(21, 58, 87, .5);
    transform: translateY(-50%);
}

.alv-route-source {
    left: 3%;
    gap: .6cqw;
    width: 18cqw;
    padding: 1.2cqw 1.4cqw;
    border-radius: 1.6cqw;
    font-size: 1.5cqw;
    font-weight: 700;
}

.alv-route-source img {
    width: 2.4cqw;
    height: 2.4cqw;
}

.alv-route-center {
    top: 50%;
    left: 50%;
    flex-direction: column;
    gap: .5cqw;
    width: 18cqw;
    padding: 2cqw 1cqw;
    border-radius: 2.4cqw;
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 30px 60px -24px rgba(13, 18, 32, .55), 0 0 0 8px rgba(255, 255, 255, .25);
}

.alv-route-center strong {
    font-size: 1.6cqw;
}

.alv-route-center small {
    color: var(--al-muted);
    font-size: 1.2cqw;
}

.alv-route-icon {
    display: grid;
    place-items: center;
    width: 4.4cqw;
    height: 4.4cqw;
    border-radius: 1.3cqw;
    background: var(--al-gradient);
    color: #fff;
    font-size: 1.7cqw;
}

.alv-route-dest {
    right: 3%;
    gap: 1.2cqw;
    width: 19cqw;
    padding: 1.2cqw 1.4cqw;
    border-radius: 1.6cqw;
}

.alv-route-dest-icon {
    display: grid;
    place-items: center;
    width: 3.6cqw;
    height: 3.6cqw;
    border-radius: 1cqw;
    background: var(--al-ink);
    color: #fff;
    font-size: 1.7cqw;
}

.alv-route-dest strong {
    display: block;
    font-size: 1.5cqw;
}

.alv-route-dest small {
    display: block;
    color: var(--al-muted);
    font-size: 1.2cqw;
}

/* Targeting rules */
.alv-rule {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    margin-bottom: .45rem;
    border-radius: 12px;
    background: var(--al-soft);
    font-size: .78rem;
}

.alv-rule-if {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    white-space: nowrap;
}

.alv-rule-arrow {
    color: var(--al-muted-2);
    font-size: .7rem;
}

.alv-rule-then {
    overflow: hidden;
    color: var(--al-primary-dark);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alv-ab {
    display: flex;
    overflow: hidden;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
}

.alv-ab span {
    padding: .5rem .7rem;
    background: var(--al-primary);
}

.alv-ab span + span {
    background: var(--al-accent);
}

/* Stats */
.alv-stats-total {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.alv-chart {
    display: block;
    width: 100%;
    height: 110px;
    margin: .25rem 0 1rem;
}

.alv-chart .is-fill { fill: url(#alv_chart_fill); }
.alv-chart .is-line { fill: none; stroke: var(--al-primary); stroke-width: 2.5; stroke-linecap: round; }

.alv-stats-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.alv-stat-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: .35rem 0 .55rem;
    font-size: .76rem;
}

.alv-stat-row i {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    border-radius: 99px;
    background: var(--al-gradient);
}

/* Overview */
.alv-overview .alv-qr-card.is-left {
    width: 200px;
    transform: translate(-150%, -40%) rotate(-7deg);
}

.alv-overview-link {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    width: 260px;
    margin: 0;
    transform: translate(45%, -30%) rotate(5deg);
}

.alv-overview-link strong {
    font-size: .95rem;
}

.alv-overview-link .alv-route-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: .9rem;
}

.alv-overview-link .alv-rule {
    margin: 0;
}

@media (max-width: 991.98px) {
    .alv-hero { height: 560px; }
    .alv-float-tl, .alv-float-bl { left: 0; }
    .alv-float-tr, .alv-float-br { right: 0; }
    .alv-overview .alv-qr-card.is-left, .alv-overview-link { display: none; }
}

@media (max-width: 575.98px) {
    .alv-hero .alv-float { transform: scale(.85); }
    .alv-float-tl, .alv-float-br { display: none; }
    .alv-qr-card.is-left, .alv-qr-card.is-right { display: none; }
    .alv-themes .is-left, .alv-themes .is-right { display: none; }
    .alv-qr-editor { grid-template-columns: 1fr; }
    .alv-float-palette { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .alv-float, .alv-route-lines path { animation: none; }
}

/* Link in bio hero scene: editor + phone + stats */
.alv-scene {
    max-width: 1080px;
    height: 600px;
    margin: 0 auto;
}

.alv-scene .alv-phone {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.alv-scene .alv-card {
    position: absolute;
    z-index: 3;
    margin: 0;
}

.alv-editor {
    top: 70px;
    left: 0;
    width: 340px !important;
    padding: 1rem !important;
}

.alv-editor-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .6rem;
    margin-bottom: .4rem;
    border: 1px solid var(--al-line);
    border-radius: 12px;
    background: #fff;
    font-size: .8rem;
    font-weight: 600;
}

.alv-editor-row.is-active {
    border-color: var(--al-primary);
    box-shadow: 0 10px 22px -14px rgba(41, 128, 185, .7);
    transform: translateX(10px) rotate(-1deg);
}

.alv-editor-grip {
    display: grid;
    gap: 2px;
}

.alv-editor-grip i {
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--al-muted-2);
}

.alv-editor-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: .75rem;
}

.alv-editor-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alv-editor-clicks {
    padding: .15rem .45rem;
    border-radius: 6px;
    background: var(--al-soft);
    color: var(--al-muted);
    font-size: .68rem;
    font-weight: 700;
}

.alv-editor-row .alv-toggle {
    transform: scale(.8);
}

.alv-editor-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .6rem;
    padding: .6rem;
    border: 1px dashed #c9d6ec;
    border-radius: 12px;
    color: var(--al-primary);
    font-size: .78rem;
    font-weight: 700;
}

.alv-scene-stats {
    top: 30px;
    right: 0;
    width: 280px !important;
    padding: 1.1rem !important;
}

.alv-spark.is-wide {
    width: 100%;
    height: 44px;
    margin: .25rem 0 .75rem;
}

.alv-scene-sources {
    display: grid;
    gap: .45rem;
    padding-top: .75rem;
    border-top: 1px solid var(--al-line);
}

.alv-source {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .76rem;
    font-weight: 600;
}

.alv-source img {
    width: 18px;
    height: 18px;
}

.alv-source span {
    flex: 1;
}

.alv-scene-qr {
    top: auto !important;
    left: auto !important;
    right: 7%;
    bottom: 40px;
    z-index: 4;
    width: 150px !important;
    padding: .7rem !important;
    border-radius: 20px !important;
    transform: rotate(6deg) !important;
}

.alv-scene-domain {
    left: 6%;
    bottom: 50px;
}

.alv-scene-lead {
    top: 330px;
    right: 26%;
}

@media (max-width: 1199.98px) {
    .alv-editor { left: -1rem; transform: scale(.9); transform-origin: left top; }
    .alv-scene-stats { right: -1rem; transform: scale(.9); transform-origin: right top; }
}

@media (max-width: 991.98px) {
    .alv-editor, .alv-scene-stats, .alv-scene-qr { display: none; }
    .alv-scene-lead { right: 4%; }
}

/* Home hero: centre phone, two phones behind, cards in the side lanes */
.al-hero-visual {
    position: relative;
    width: min(1080px, 100vw - 2rem);
    margin: 3.75rem 0 0 calc(50% - min(540px, 50vw - 1rem));
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

.alv-home-hero {
    height: 580px;
}

.alv-home-phone {
    position: absolute;
    top: 0;
    left: 50%;
}

.alv-home-phone.is-center {
    z-index: 3;
    transform: translateX(-50%);
}

.alv-home-phone.is-left,
.alv-home-phone.is-right {
    top: 64px;
    z-index: 1;
}

.alv-home-phone.is-left { transform: translateX(calc(-50% - 290px)) rotate(-4deg) scale(.82); }
.alv-home-phone.is-right { transform: translateX(calc(-50% + 290px)) rotate(4deg) scale(.82); }

.alv-home-phone .alv-phone {
    background: #1c2233;
    box-shadow:
        0 1px 2px rgba(27, 37, 89, .08),
        0 40px 70px -40px rgba(41, 85, 140, .45),
        inset 0 0 0 1.5px #3a4256;
}

.alv-home-phone.is-left .alv-phone,
.alv-home-phone.is-right .alv-phone {
    box-shadow: 0 30px 60px -40px rgba(41, 85, 140, .35), inset 0 0 0 1.5px #3a4256;
}

.alv-home-halo {
    position: absolute;
    top: 40px;
    left: 50%;
    width: 640px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(41, 128, 185, .18), rgba(142, 68, 173, .08) 60%, transparent);
    transform: translateX(-50%);
}

.alv-home-hero .alv-card,
.alv-home-hero .alv-qr-card,
.alv-home-hero .alv-float {
    border: 1px solid rgba(27, 37, 89, .07);
    box-shadow: 0 1px 2px rgba(27, 37, 89, .05), 0 24px 48px -28px rgba(41, 85, 140, .35) !important;
}

.alv-home-stats {
    position: absolute !important;
    top: 130px;
    left: 0;
    z-index: 4;
    width: 240px !important;
    margin: 0 !important;
    padding: 1.1rem !important;
}

.alv-home-qr {
    top: 100px !important;
    left: auto !important;
    right: 0;
    z-index: 4;
    width: 150px !important;
    padding: .75rem !important;
    border-radius: 22px !important;
    transform: rotate(4deg) !important;
}

.alv-home-domain { left: 34px; top: 395px; }
.alv-home-lead { right: 14px; top: 345px; }

@media (max-width: 1199.98px) {
    .alv-home-hero { zoom: .86; }
}

@media (max-width: 991.98px) {
    .alv-home-hero { zoom: 1; height: 540px; }
    .alv-home-stats, .alv-home-qr { display: none; }
    .alv-home-domain { left: 2%; }
    .alv-home-phone.is-left { transform: translateX(calc(-50% - 230px)) rotate(-5deg) scale(.8); }
    .alv-home-phone.is-right { transform: translateX(calc(-50% + 230px)) rotate(5deg) scale(.8); }
}

@media (max-width: 575.98px) {
    .alv-home-phone.is-left,
    .alv-home-phone.is-right { top: 70px; opacity: .9; }
    .alv-home-phone.is-left { transform: translateX(calc(-50% - 150px)) rotate(-6deg) scale(.76); }
    .alv-home-phone.is-right { transform: translateX(calc(-50% + 150px)) rotate(6deg) scale(.76); }
}

/* Customize panel (home step 1) */
.alv-customize {
    height: 500px;
}

.alv-customize-panel {
    position: absolute !important;
    top: 40px;
    left: 4%;
    z-index: 2;
    width: 300px !important;
    margin: 0 !important;
    padding: 1.1rem !important;
}

.alv-customize-panel .alv-control-label {
    display: block;
    margin: .9rem 0 .45rem;
}

.alv-customize .alv-phone {
    position: absolute;
    top: 60px;
    right: 6%;
    z-index: 3;
    rotate: 5deg;
}

.alv-theme-thumbs,
.alv-fonts,
.alv-shapes {
    display: flex;
    gap: .45rem;
}

.alv-theme-thumbs i {
    width: 48px;
    height: 64px;
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--al-line);
}

.alv-theme-thumbs i.is-active,
.alv-shapes i.is-active {
    box-shadow: 0 0 0 2px var(--al-primary);
}

.alv-fonts b {
    flex: 1;
    padding: .45rem 0;
    border: 1px solid var(--al-line);
    border-radius: 9px;
    font-size: .74rem;
    text-align: center;
}

.alv-fonts b.is-active {
    border-color: var(--al-primary);
    background: rgba(41, 128, 185, .07);
    color: var(--al-primary);
}

.alv-shapes i {
    flex: 1;
    height: 30px;
    border: 1px solid var(--al-line);
    border-radius: 9px;
    background: #fff;
    position: relative;
}

.alv-shapes i::after {
    content: "";
    position: absolute;
    inset: 8px 12px;
    background: #cfd9ea;
}

.alv-shapes .is-round::after { border-radius: 5px; }
.alv-shapes .is-pill::after { border-radius: 99px; }

.alv-domain-field {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .7rem;
    border: 1px solid var(--al-line);
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
}

.alv-domain-field > :is(i, svg) {
    color: #16a34a;
    font-size: .65rem;
}

.alv-domain-field em {
    margin-left: auto;
    padding: .15rem .45rem;
    border-radius: 6px;
    background: #dcfce7;
    color: #15803d;
    font-size: .64rem;
    font-style: normal;
    font-weight: 700;
}

.alv-customize-chip {
    left: 0;
    bottom: 30px;
}

/* Customize: live demo */
.alv-theme-thumbs i,
.alv-fonts b,
.alv-shapes i {
    transition: box-shadow .25s, border-color .25s, background-color .25s, color .25s, transform .25s;
}

.alv-customize :is(.alv-theme-thumbs i, .alv-fonts b, .alv-shapes i).is-pressed {
    transform: scale(.92);
}

.alv-customize .alv-bio {
    font-family: var(--phone-font, inherit);
}

.alv-customize .alv-phone[data-font="serif"] { --phone-font: Georgia, 'Times New Roman', serif; }
.alv-customize .alv-phone[data-font="mono"] { --phone-font: 'Courier New', ui-monospace, monospace; }

.alv-customize .alv-bio-btn {
    transition: border-radius .35s cubic-bezier(.2, .8, .2, 1), background-color .35s, color .35s;
}

.alv-customize .alv-phone[data-shape="square"] .alv-bio-btn { border-radius: 3px; }
.alv-customize .alv-phone[data-shape="pill"] .alv-bio-btn { border-radius: 99px; }

.alv-customize .alv-phone.is-swapping .alv-bio {
    animation: alv-theme-swap .45s cubic-bezier(.2, .8, .2, 1);
}

@keyframes alv-theme-swap {
    from { opacity: .35; transform: translateY(6px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.alv-save-state .alv-save-busy { display: none; }
.alv-save-state.is-saving { background: #f1f5f9 !important; color: #64748b !important; }
.alv-save-state.is-saving .alv-save-done { display: none; }
.alv-save-state.is-saving .alv-save-busy { display: inline-flex; align-items: center; gap: .3rem; }

.alv-save-spinner {
    width: 9px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 99px;
    animation: alv-spin .6s linear infinite;
}

@keyframes alv-spin {
    to { transform: rotate(360deg); }
}

.alv-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .25));
    transform: translate(var(--cx, 160px), var(--cy, 120px));
    transition: transform .7s cubic-bezier(.65, 0, .35, 1), opacity .3s;
}

.alv-cursor svg {
    display: block;
    transition: transform .15s;
}

.alv-customize.is-playing .alv-cursor { opacity: 1; }
.alv-cursor.is-clicking svg { transform: scale(.82); }

.alv-cursor::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 99px;
    background: rgba(41, 128, 185, .35);
    opacity: 0;
    transform: scale(.2);
}

.alv-cursor.is-clicking::after {
    animation: alv-click-ring .5s ease-out;
}

@keyframes alv-click-ring {
    from { opacity: 1; transform: scale(.2); }
    to { opacity: 0; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
    .alv-cursor { display: none; }
}


@media (max-width: 575.98px) {
    .alv-customize { height: 470px; }
    .alv-customize-panel { left: 0; width: 260px !important; }
    .alv-customize .alv-phone { right: 0; top: 120px; }
    .alv-home-lead { display: none; }
}

/* Home features: bento grid with product previews */
.al-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.al-bento-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--al-line);
    border-radius: 1.5rem;
    background: #fff;
    color: inherit !important;
    text-decoration: none !important;
    transition: transform .3s var(--al-ease), box-shadow .3s var(--al-ease);
}

.al-bento-card.is-wide {
    grid-column: span 2;
}

.al-bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -36px rgba(21, 58, 87, .35);
}

.al-bento-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    height: 170px;
    padding: 1.25rem;
    background:
        radial-gradient(60% 80% at 50% 100%, rgba(41, 128, 185, .08), transparent 70%),
        #f7f9fc;
    border-bottom: 1px solid var(--al-line);
}

.al-bento-text {
    padding: 1.35rem 1.5rem 1.5rem;
}

.al-bento-text h3 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .45rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--al-navy);
}

.al-bento-text p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--al-muted);
}

.al-bento-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--al-soft);
    color: var(--al-navy);
    font-size: .75rem;
}


/* Design */
.al-bento-themes {
    display: flex;
    gap: .6rem;
}

.al-bento-theme {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 58px;
    height: 92px;
    padding: 12px 8px;
    border: 3px solid #0d1220;
    border-radius: 14px;
    transition: transform .3s var(--al-ease);
}

.al-bento-theme.is-active {
    transform: translateY(-6px);
    box-shadow: 0 16px 24px -14px rgba(13, 18, 32, .6);
}

.al-bento-theme i {
    width: 18px;
    height: 18px;
    margin-bottom: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

.al-bento-theme b {
    width: 100%;
    height: 9px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .8);
}

.al-bento-theme:last-child b {
    background: #3b0764;
    opacity: .7;
}

.al-bento-fonts {
    width: 220px;
}

.al-bento-fonts b {
    background: #fff;
}

/* Blocks */
.al-bento-tiles {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: .55rem;
}

.al-bento-tiles span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    font-size: .95rem;
}

/* Stats */
.al-bento-stats {
    width: 100%;
    max-width: 200px;
}

.al-bento-stats .alv-spark {
    height: 50px;
    margin: .3rem 0 0;
}

/* QR */
.al-bento-qr {
    width: 118px;
    padding: .55rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 30px -18px rgba(21, 58, 87, .5);
}

.al-bento-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Smartlinks */
.al-bento-rules {
    display: grid;
    gap: .5rem;
    width: 100%;
    max-width: 210px;
}

.al-bento-rules .alv-rule {
    justify-content: space-between;
    margin: 0;
    background: #fff;
}

/* Domain */
.al-bento-url {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: min(100%, 380px);
    padding: .65rem .8rem;
    border: 1px solid var(--al-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 30px -20px rgba(21, 58, 87, .45);
}

.al-bento-url-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 8px;
    background: var(--al-soft);
    font-size: .82rem;
    color: var(--al-ink);
}

.al-bento-url-bar :is(i, svg),
.al-bento-url em :is(i, svg) {
    color: #16a34a;
    font-size: .65rem;
}

.al-bento-url em {
    padding: .2rem .5rem;
    border-radius: 6px;
    background: #dcfce7;
    color: #15803d;
    font-size: .68rem;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

/* Collect */
.al-bento-form {
    position: relative;
    display: flex;
    gap: .5rem;
    width: min(100%, 360px);
}

.al-bento-input {
    flex: 1;
    padding: .65rem .85rem;
    border: 1px solid var(--al-line);
    border-radius: 11px;
    background: #fff;
    color: var(--al-muted);
    font-size: .82rem;
}

.al-bento-button {
    padding: .65rem 1rem;
    border-radius: 11px;
    background: var(--al-navy);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.al-bento-toast {
    position: absolute;
    top: -2.6rem;
    right: -.5rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border: 1px solid var(--al-line);
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 12px 24px -14px rgba(21, 58, 87, .45);
    font-size: .72rem;
    font-weight: 700;
    color: var(--al-ink);
}

.al-bento-toast :is(i, svg) {
    color: #16a34a;
}

/* Sell */
.al-bento-product {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: min(100%, 360px);
    padding: .6rem;
    border: 1px solid var(--al-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 30px -20px rgba(21, 58, 87, .45);
}

.al-bento-product-image {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbcfe8, #c7d2fe);
    color: #fff;
}

.al-bento-product-info {
    flex: 1;
    display: grid;
    font-size: .85rem;
}

.al-bento-product-info small {
    color: var(--al-muted);
    font-weight: 600;
}

.al-bento-payments {
    display: flex;
    gap: .4rem;
}

.al-bento-payments b {
    padding: .2rem .55rem;
    border: 1px solid var(--al-line);
    border-radius: 6px;
    background: #fff;
    color: var(--al-muted);
    font-size: .68rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .al-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .al-bento { grid-template-columns: 1fr; }
    .al-bento-card.is-wide { grid-column: auto; }
}

/* Light home hero: white base, soft colour halos and a fading grid */
.al-hero.is-light {
    background: #fff;
}

.al-hero.is-light::before {
    display: none;
}

.al-hero-mesh {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(38% 42% at 18% 12%, rgba(41, 128, 185, .16), transparent 70%),
        radial-gradient(34% 40% at 84% 8%, rgba(142, 68, 173, .13), transparent 70%),
        radial-gradient(50% 40% at 50% 62%, rgba(41, 128, 185, .09), transparent 70%);
}

.al-hero-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(27, 37, 89, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 37, 89, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(60% 55% at 50% 20%, #000 20%, transparent 75%);
    mask-image: radial-gradient(60% 55% at 50% 20%, #000 20%, transparent 75%);
}

.al-hero.is-light .al-hero-title {
    color: var(--al-navy);
    text-shadow: none;
}

.al-hero.is-light .al-hero-subtitle {
    color: var(--al-muted);
}

.al-hero.is-light .al-claim {
    box-shadow: 0 30px 60px -30px rgba(21, 58, 87, .45), 0 0 0 1px var(--al-line), 0 0 0 7px rgba(41, 128, 185, .07);
}

.al-hero.is-light .al-hero-proof {
    color: var(--al-muted);
}

.al-hero.is-light .al-hero-proof a {
    color: var(--al-primary) !important;
    text-decoration-color: rgba(41, 128, 185, .35);
}

.al-hero.is-light .al-btn-glass {
    color: var(--al-navy) !important;
    border-color: var(--al-line);
    background: #fff;
}

/* Nav on top of the light heroes */
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-brand { color: var(--al-navy) !important; }
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-link { color: var(--al-ink-2) !important; }
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-link:hover { background: var(--al-soft); color: var(--al-primary) !important; }
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-cta { color: #fff !important; background: var(--al-navy); }
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-user { background: var(--al-soft); color: var(--al-ink) !important; }
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-burger { background: var(--al-soft); }
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-burger span,
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-burger span::before,
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-burger span::after { background: var(--al-navy); }

/* Home steps: soft halo instead of a box behind the visuals */
.al-presentation .al-split-media-frame.is-visual::before,
.al-presentation .al-split.is-reversed .al-split-media-frame.is-visual::before {
    inset: -8% -6%;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(41, 128, 185, .13), rgba(142, 68, 173, .06) 55%, transparent 100%);
    transform: none;
}

/* Bento, premium pass */
.al-bento-card {
    position: relative;
    border-color: rgba(27, 37, 89, .08);
    box-shadow: 0 1px 2px rgba(27, 37, 89, .04), 0 20px 40px -32px rgba(21, 58, 87, .35);
}

.al-bento-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(41, 128, 185, .55), rgba(142, 68, 173, .45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.al-bento-card:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(27, 37, 89, .04), 0 30px 60px -30px rgba(41, 128, 185, .35);
}

.al-bento-card:hover::after {
    opacity: 1;
}

.al-bento-visual {
    height: 200px;
    overflow: hidden;
    border-bottom: 0;
    background:
        radial-gradient(55% 70% at 50% 60%, rgba(41, 128, 185, .1), transparent 70%),
        linear-gradient(180deg, #f8fafd, #fff);
}

.al-bento-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(27, 37, 89, .09) 1px, transparent 1px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 80%);
    mask-image: radial-gradient(60% 70% at 50% 50%, #000 20%, transparent 80%);
}

.al-bento-visual > * {
    position: relative;
    transition: transform .45s var(--al-ease);
}

.al-bento-card:hover .al-bento-visual > :first-child {
    transform: translateY(-4px) scale(1.03);
}

.al-bento-text {
    padding: .5rem 1.6rem 1.6rem;
}

.al-bento-text h3 {
    font-size: 1.1rem;
    letter-spacing: -.01em;
}

.al-bento-icon {
    width: 26px;
    height: 26px;
    border: 1px solid var(--al-line);
    background: #fff;
    color: var(--al-ink-2);
}

.al-bento-card:hover .al-bento-icon {
    border-color: rgba(41, 128, 185, .35);
    background: #fff;
    color: var(--al-primary);
}

a.al-bento-card .al-bento-text h3::after {
    content: "→";
    margin-left: auto;
    color: var(--al-primary);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease;
}

a.al-bento-card:hover .al-bento-text h3::after {
    opacity: 1;
    transform: none;
}

.al-bento-theme { width: 64px; height: 104px; }
.al-bento-tiles { grid-template-columns: repeat(3, 48px); gap: .65rem; }
.al-bento-tiles span { width: 48px; height: 48px; border-radius: 13px; background-color: #fff !important; box-shadow: 0 10px 20px -14px rgba(21, 58, 87, .45), inset 0 0 0 1px rgba(27, 37, 89, .06); font-size: 1.05rem; }
.al-bento-qr { width: 132px; }
.al-bento-stats { max-width: 230px; padding: 1rem; border: 1px solid var(--al-line); border-radius: 16px; background: #fff; box-shadow: 0 16px 30px -20px rgba(21, 58, 87, .45); }
.al-bento-rules { max-width: 230px; }
.al-bento-rules .alv-rule { box-shadow: 0 10px 20px -16px rgba(21, 58, 87, .45); }

/* Light page heroes (features, tools, pricing) */
.al-page-hero {
    color: var(--al-ink);
    background:
        radial-gradient(38% 60% at 15% 0%, rgba(41, 128, 185, .15), transparent 70%),
        radial-gradient(34% 55% at 86% 0%, rgba(142, 68, 173, .12), transparent 70%),
        #fff;
}

.al-page-hero::before {
    inset: 0;
    top: 0;
    right: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background-image:
        linear-gradient(rgba(27, 37, 89, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 37, 89, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(60% 50% at 50% 15%, #000 20%, transparent 75%);
    mask-image: radial-gradient(60% 50% at 50% 15%, #000 20%, transparent 75%);
}

.al-page-hero::after {
    display: none;
}

.al-page-hero h1 {
    color: var(--al-navy);
}

.al-page-hero p {
    color: var(--al-muted);
}

.al-page-hero .al-btn-glass {
    color: var(--al-navy) !important;
    border-color: var(--al-line);
    background: #fff;
}

.al-page-hero .al-btn-glass:hover {
    background: var(--al-soft);
}

.al-page-hero .al-kicker {
    color: var(--al-primary);
    background: rgba(41, 128, 185, .08);
}

.al-page-hero .alv-hero-glow {
    background: radial-gradient(closest-side, rgba(41, 128, 185, .16), rgba(142, 68, 173, .06) 60%, transparent);
    filter: none;
}

.al-page-hero .alv-phone {
    background: #1c2233;
    box-shadow: 0 1px 2px rgba(27, 37, 89, .08), 0 40px 70px -40px rgba(41, 85, 140, .45), inset 0 0 0 1.5px #3a4256;
}

.al-page-hero .alv-card,
.al-page-hero .alv-qr-card,
.al-page-hero .alv-float {
    border: 1px solid rgba(27, 37, 89, .07);
    box-shadow: 0 1px 2px rgba(27, 37, 89, .05), 0 24px 48px -28px rgba(41, 85, 140, .35) !important;
}

.al-page-hero-visual {
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}

/* Light heroes: thin brand underline instead of a heavy highlight band */
.al-hero.is-light .al-hero-title .surlign,
.al-page-hero .surlign {
    padding: 0;
    background-image: linear-gradient(90deg, #2980b9, #8e44ad);
    background-position: 0 100%;
    background-size: 100% .09em;
    text-decoration: none;
}

.al-hero.is-light .al-hero-title .surlign:hover,
.al-page-hero .surlign:hover {
    background-size: 100% .09em;
}

/* Smartlink routing on light backgrounds */
.alv-route-lines path {
    stroke: rgba(41, 128, 185, .45);
}

.alv-route-lines path.is-out {
    stroke: #8e44ad;
    stroke-opacity: .65;
}

.alv-route-center {
    box-shadow: 0 1px 2px rgba(27, 37, 89, .06), 0 30px 60px -30px rgba(41, 85, 140, .5), 0 0 0 8px rgba(41, 128, 185, .08);
}

.alv-route-source,
.alv-route-dest {
    border-color: rgba(27, 37, 89, .08);
    box-shadow: 0 1px 2px rgba(27, 37, 89, .05), 0 20px 40px -26px rgba(41, 85, 140, .4);
}

/* Feature heroes: end on a soft floor with a hairline so the first section reads as a new chapter */
.al-page-hero-media {
    padding-bottom: 4.5rem;
    border-bottom: 1px solid rgba(27, 37, 89, .07);
    background:
        radial-gradient(38% 60% at 15% 0%, rgba(41, 128, 185, .15), transparent 70%),
        radial-gradient(34% 55% at 86% 0%, rgba(142, 68, 173, .12), transparent 70%),
        linear-gradient(180deg, #fff 0%, #fff 45%, #f4f7fc 100%);
}

.al-page-hero-media .al-page-hero-visual {
    -webkit-mask-image: none;
    mask-image: none;
}

.al-page-hero-media + .al-section {
    padding-top: 5.5rem;
}

@media (max-width: 991.98px) {
    .al-page-hero-media {
        padding-bottom: 3rem;
    }

    .al-page-hero-media + .al-section {
        padding-top: 4rem;
    }
}

/* =========================================================
   Living illustrations: motion that shows the product working
   ========================================================= */

/* Pointer depth on the home hero (driven by --mx / --my from allinks.js) */
.alv-home-hero {
    --mx: 0;
    --my: 0;
}

.alv-home-hero > * {
    transition: translate .9s cubic-bezier(.22, 1, .36, 1);
}

.alv-home-halo { translate: calc(var(--mx) * -10px) calc(var(--my) * -8px); }
.alv-home-phone.is-center { translate: calc(var(--mx) * 6px) calc(var(--my) * 4px); }
.alv-home-phone.is-left,
.alv-home-phone.is-right { translate: calc(var(--mx) * 10px) calc(var(--my) * 6px); }
.alv-home-stats,
.alv-home-qr,
.alv-home-smart { translate: calc(var(--mx) * 18px) calc(var(--my) * 12px); }
.alv-home-hero .alv-float { translate: calc(var(--mx) * 24px) calc(var(--my) * 16px); }

/* Phones breathe slightly out of phase */
.is-visible .alv-home-phone .alv-phone { animation: alv-breathe 8s ease-in-out infinite; }
.is-visible .alv-home-phone.is-left .alv-phone { animation-delay: -2.6s; }
.is-visible .alv-home-phone.is-right .alv-phone { animation-delay: -5.2s; }

@keyframes alv-breathe {
    50% { transform: translateY(-7px); }
}

/* A visitor taps the first button of the main page */
.alv-home-phone.is-center .alv-bio-socials + .alv-bio-btn {
    position: relative;
    overflow: hidden;
}

.alv-home-phone.is-center .alv-bio-socials + .alv-bio-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 68%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
}

.is-visible .alv-home-phone.is-center .alv-bio-socials + .alv-bio-btn { animation: alv-press 4.2s 1.2s ease-in-out infinite; }
.is-visible .alv-home-phone.is-center .alv-bio-socials + .alv-bio-btn::after { animation: alv-tap 4.2s 1.2s ease-out infinite; }

@keyframes alv-press {
    0%, 8%, 20%, 100% { transform: none; }
    12% { transform: scale(.97); }
}

@keyframes alv-tap {
    0%, 8% { opacity: 0; transform: scale(.4); }
    11% { opacity: .22; transform: scale(1); }
    32% { opacity: 0; transform: scale(7); }
    100% { opacity: 0; transform: scale(7); }
}

/* Live indicator + counter bump on the stats card */
.alv-home-stats .alv-control-label::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 .4rem 1px 0;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .45);
    vertical-align: middle;
    animation: alv-live 2.4s ease-out infinite;
}

@keyframes alv-live {
    70%, 100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.alv-stats-total.is-bump { animation: alv-bump .5s cubic-bezier(.22, 1, .36, 1); }

@keyframes alv-bump {
    40% { transform: translateY(-2px); color: var(--al-primary); }
}

/* Sparklines and charts draw themselves when revealed */
.is-visible .alv-spark path,
.is-visible .alv-chart .is-line {
    stroke-dasharray: 1;
    animation: alv-draw .9s .1s cubic-bezier(.65, 0, .35, 1) both;
}

.is-visible .alv-chart .is-fill { animation: alv-fade .5s .55s ease both; }

@keyframes alv-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes alv-fade {
    from { opacity: 0; }
}

/* Percentage bars fill in */
.is-visible .alv-stat-row i {
    transform-origin: left;
    animation: alv-grow .6s .2s cubic-bezier(.22, 1, .36, 1) both;
}

.al-presentation .is-visible .alv-chart .is-line { animation-duration: 2.4s; animation-delay: 0s; }
.al-presentation .is-visible .alv-chart .is-fill { animation-duration: 1.2s; animation-delay: 1.6s; }
.al-presentation .is-visible .alv-stat-row i { animation-duration: 1.4s; animation-delay: .2s; }
.al-presentation .is-visible .alv-stat-row:nth-child(3) i { animation-delay: .4s; }
.al-presentation .is-visible .alv-stat-row:nth-child(4) i { animation-delay: .6s; }

@keyframes alv-grow {
    from { transform: scaleX(0); }
}

/* QR codes: a scanner line sweeps over the code */
.alv-home-qr { overflow: hidden; }

.al-bento-qr {
    position: relative;
    overflow: hidden;
}

.alv-home-qr::after,
.al-bento-qr::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 8%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #8e44ad, transparent);
    box-shadow: 0 0 12px 2px rgba(142, 68, 173, .35);
    opacity: 0;
    pointer-events: none;
}

.al-bento-qr::after { background: linear-gradient(90deg, transparent, #2980b9, transparent); box-shadow: 0 0 12px 2px rgba(41, 128, 185, .35); }

.is-visible .alv-home-qr::after { animation: alv-scan 5s 1.5s ease-in-out infinite; }
.al-bento-card.is-visible .al-bento-qr::after,
.al-bento-card:hover .al-bento-qr::after { animation: alv-scan-bento 5s 1s ease-in-out infinite; }

@keyframes alv-scan {
    0% { top: 8%; opacity: 0; }
    6% { opacity: 1; }
    40% { top: 74%; opacity: 1; }
    46%, 100% { top: 74%; opacity: 0; }
}

@keyframes alv-scan-bento {
    0% { top: 6%; opacity: 0; }
    6% { opacity: 1; }
    40% { top: 92%; opacity: 1; }
    46%, 100% { top: 92%; opacity: 0; }
}

/* New lead notification: soft ping on its icon */
.alv-home-lead .alv-float-icon,
.alv-scene-lead .alv-float-icon {
    position: relative;
}

.alv-home-lead .alv-float-icon::after,
.alv-scene-lead .alv-float-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(142, 68, 173, .35);
    animation: alv-ping 3s 2s ease-out infinite;
}

@keyframes alv-ping {
    0% { box-shadow: 0 0 0 0 rgba(142, 68, 173, .35); }
    45%, 100% { box-shadow: 0 0 0 9px rgba(142, 68, 173, 0); }
}

/* Bento: themes take turns, the lead toast pops in */
.al-bento-card.is-visible .al-bento-theme { animation: alv-theme-turn 8s ease-in-out infinite; }
.al-bento-card.is-visible .al-bento-theme:nth-child(2) { animation-delay: 2s; }
.al-bento-card.is-visible .al-bento-theme:nth-child(3) { animation-delay: 4s; }
.al-bento-card.is-visible .al-bento-theme:nth-child(4) { animation-delay: 6s; }

@keyframes alv-theme-turn {
    0%, 30%, 100% { transform: none; box-shadow: none; }
    6%, 24% { transform: translateY(-6px); box-shadow: 0 16px 24px -14px rgba(13, 18, 32, .6); }
}

.al-bento-card.is-visible .al-bento-theme.is-active { transform: none; box-shadow: none; }

.al-bento-card.is-visible .al-bento-toast { animation: alv-toast 6s 1s cubic-bezier(.22, 1, .36, 1) infinite both; }

@keyframes alv-toast {
    0% { opacity: 0; transform: translateY(6px) scale(.96); }
    8%, 80% { opacity: 1; transform: none; }
    90%, 100% { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .alv *,
    .alv *::before,
    .alv *::after,
    .alv-home-hero > * {
        animation: none !important;
        transition: none !important;
        translate: none !important;
    }
}

/* =========================================================
   Seamless section transitions (no hard colour cuts)
   ========================================================= */
.al-section-soft {
    background:
        radial-gradient(40% 320px at 12% 30%, rgba(41, 128, 185, .06), transparent 70%),
        radial-gradient(36% 300px at 88% 70%, rgba(142, 68, 173, .05), transparent 70%),
        linear-gradient(180deg, #fff 0, var(--al-soft) 160px, var(--al-soft) calc(100% - 160px), #fff 100%);
}

.al-page-hero-media {
    border-bottom: 0;
    background:
        radial-gradient(38% 60% at 15% 0%, rgba(41, 128, 185, .15), transparent 70%),
        radial-gradient(34% 55% at 86% 0%, rgba(142, 68, 173, .12), transparent 70%),
        linear-gradient(180deg, #fff 0%, #fff 40%, var(--al-soft) 100%);
}

.al-page-hero-media + .al-section {
    background: linear-gradient(180deg, var(--al-soft) 0, #fff 220px);
}

/* =========================================================
   Living illustrations, round 2 (kept sparse on purpose)
   ========================================================= */

/* Link in bio hero: the visitor taps the first link */
.alv-scene .alv-phone .alv-bio-socials + .alv-bio-btn {
    position: relative;
    overflow: hidden;
}

.alv-scene .alv-phone .alv-bio-socials + .alv-bio-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 68%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
}

.is-visible .alv-scene .alv-phone .alv-bio-socials + .alv-bio-btn { animation: alv-press 4.2s 1.4s ease-in-out infinite; }
.is-visible .alv-scene .alv-phone .alv-bio-socials + .alv-bio-btn::after { animation: alv-tap 4.2s 1.4s ease-out infinite; }

/* The editor row of that link lights up in sync */
.is-visible .alv-editor-row.is-active .alv-editor-clicks { animation: alv-bump 4.2s 1.95s ease-in-out infinite; display: inline-block; }

/* Block picker: the cursor travels to "Form" and clicks it */
.is-visible .alv-palette .alv-cursor { animation: alv-cursor 5s 1s cubic-bezier(.65, 0, .35, 1) infinite both; }
.is-visible .alv-palette .alv-tile.is-active { animation: alv-tile-pick 5s 1s ease infinite both; }

@keyframes alv-cursor {
    0% { transform: translate(60px, 70px); opacity: 0; }
    10% { opacity: 1; }
    40% { transform: none; }
    46% { transform: scale(.85); }
    52%, 85% { transform: none; opacity: 1; }
    100% { transform: none; opacity: 0; }
}

@keyframes alv-tile-pick {
    0%, 42% { border-color: var(--al-line); box-shadow: none; transform: none; }
    46% { transform: scale(.96); }
    52%, 100% { border-color: var(--al-primary); box-shadow: 0 0 0 4px rgba(41, 128, 185, .12); transform: none; }
}

/* QR hero: the main code gets scanned */
.alv-qr-hero .alv-qr-card.is-center { overflow: hidden; }

.alv-qr-hero .alv-qr-card.is-center::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 8%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #8e44ad, transparent);
    box-shadow: 0 0 14px 2px rgba(142, 68, 173, .35);
    opacity: 0;
    pointer-events: none;
}

.is-visible .alv-qr-hero .alv-qr-card.is-center::after { animation: alv-scan 5s 1.2s ease-in-out infinite; }

/* Home hero: phones are shown whole, with room for their motion */
.al-hero-visual {
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 3rem;
}

.alv-home-hero {
    height: 600px;
}

.alv-home-phone { top: 14px; }

@media (max-width: 991.98px) {
    .alv-home-hero { height: 600px; }
}

/* =========================================================
   Headline underline: one thin brand line everywhere, drawn on reveal
   ========================================================= */
.al-site .surlign,
.al-hero.is-light .al-hero-title .surlign,
.al-page-hero .surlign {
    padding: 0 0 .02em;
    background-image: linear-gradient(90deg, #2980b9, #8e44ad);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% .08em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 1.1s .45s cubic-bezier(.65, 0, .35, 1);
}

.al-site .surlign:hover,
.al-hero.is-light .al-hero-title .surlign:hover,
.al-page-hero .surlign:hover {
    background-size: 100% .08em;
}

.al-site [data-al-reveal]:not(.is-visible) .surlign,
.al-site [data-al-reveal]:not(.is-visible).surlign {
    background-size: 0% .08em;
}

/* =========================================================
   Presentation steps: quiet numbered marker with a drawn rule
   ========================================================= */
.al-presentation::before {
    display: none;
}

.al-step-number {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.1rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--al-navy);
    font-variant-numeric: tabular-nums;
}

.al-step-number::before {
    content: "";
    display: grid;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2980b9, #8e44ad);
    box-shadow: 0 0 0 4px rgba(41, 128, 185, .1);
    order: 0;
}

.al-step-number::after {
    content: "";
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, rgba(41, 128, 185, .6), rgba(142, 68, 173, 0));
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1s .35s cubic-bezier(.65, 0, .35, 1);
}

.al-step-number.is-visible::after,
.al-step-number:not([data-al-reveal])::after {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .al-site .surlign { transition: none; }
    .al-step-number::after { transform: none; transition: none; }
}

/* Pricing page: tint fades in and out instead of starting on a hard edge */
.al-plan-page:not(.is-in-app) .al-plan-page-pricing {
    background:
        radial-gradient(40% 380px at 15% 40%, rgba(41, 128, 185, .06), transparent 70%),
        radial-gradient(36% 360px at 85% 60%, rgba(142, 68, 173, .05), transparent 70%),
        linear-gradient(180deg, #fff 0, var(--al-soft) 220px, var(--al-soft) calc(100% - 220px), #fff 100%);
}

/* Sections own their stacking context so decorative ::before panels never slip under the section background */
.al-section {
    isolation: isolate;
}

/* Feature pages: platforms strip + related products sit on white, no tinted bands */
.al-logos-light {
    padding: 3rem 0 1rem;
    background: none;
}

.al-features-more {
    padding: 4rem 0 5rem;
}

.al-features-more-title {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--al-muted-2);
}

/* =========================================================
   Colour & hover harmonisation
   ========================================================= */
.al-kicker {
    color: var(--al-ink-2);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--al-line);
    letter-spacing: .08em;
}

.al-section-title,
.al-split-text h3,
.al-page-hero h1,
.al-hero-title {
    color: var(--al-navy);
}

.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-cta,
.al-nav-cta {
    color: #fff !important;
    background: var(--al-primary);
}

.al-nav-cta:hover {
    transform: translateY(-1px);
    background: var(--al-primary-dark);
    box-shadow: 0 12px 24px -12px rgba(41, 128, 185, .6);
}

.al-nav.is-scrolled .al-nav-link:hover,
.al-site .al-nav:not(.is-scrolled):not(.is-open) .al-nav-link:hover {
    background: var(--al-soft);
    color: var(--al-navy) !important;
}

.al-feature-card {
    transition: transform .25s var(--al-ease), border-color .25s var(--al-ease), box-shadow .25s var(--al-ease);
}

.al-feature-card:hover {
    transform: translateY(-2px);
    border-color: #d9dfe8;
    box-shadow: 0 1px 2px rgba(14, 21, 38, .04), 0 24px 48px -30px rgba(14, 21, 38, .25);
}

.al-bento-card:hover {
    box-shadow: 0 1px 2px rgba(14, 21, 38, .04), 0 30px 60px -34px rgba(14, 21, 38, .28);
}

.al-bento-card:hover .al-bento-visual > :first-child {
    transform: translateY(-3px);
}

.al-footer-col a:hover {
    color: var(--al-navy) !important;
}

.al-footer-socials a:hover {
    transform: none;
}

.al-link-arrow {
    color: var(--al-primary) !important;
}

.al-link-arrow:hover {
    color: var(--al-primary-dark) !important;
}

.al-page-hero .al-btn-glass,
.al-hero.is-light .al-btn-glass {
    color: var(--al-ink) !important;
    border-color: var(--al-line);
    background: #fff;
    backdrop-filter: none;
}

.al-page-hero .al-btn-glass:hover,
.al-hero.is-light .al-btn-glass:hover {
    border-color: #cfd6e0;
    background: var(--al-soft);
}

/* Home: steps (white) -> showcase (tinted) -> features + pricing (soft) flow without hard cuts */
#nos-utilisateurs {
    padding-top: 6rem;
    padding-bottom: 5rem;
    background:
        radial-gradient(45% 40% at 20% 40%, rgba(41, 128, 185, .09), transparent 70%),
        radial-gradient(40% 36% at 80% 50%, rgba(142, 68, 173, .07), transparent 70%),
        linear-gradient(180deg, #fff 0, var(--al-soft) 220px, var(--al-soft) 100%);
}

#fonctionnalites {
    padding-top: 4rem;
    background:
        radial-gradient(40% 320px at 12% 30%, rgba(41, 128, 185, .06), transparent 70%),
        radial-gradient(36% 300px at 88% 70%, rgba(142, 68, 173, .05), transparent 70%),
        var(--al-soft);
}

#abonnements {
    padding-top: 4rem;
    background: var(--al-soft);
}

.al-showcase-claim {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3.5rem;
    text-align: center;
}

.al-showcase-claim-title {
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--al-navy);
}

.al-showcase-claim .al-claim {
    width: 100%;
    max-width: 560px;
    box-shadow: 0 24px 50px -30px rgba(21, 58, 87, .45), 0 0 0 1px var(--al-line), 0 0 0 6px rgba(41, 128, 185, .06);
}

.al-showcase-claim-note {
    margin: .9rem 0 0;
    font-size: .85rem;
    color: var(--al-muted);
}

.al-bento-card.is-wide:first-child .al-bento-visual {
    min-height: 0;
}

/* Features pages: conversion pass */
.al-proof-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 1.4rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .88rem;
    color: var(--al-muted);
}

.al-proof-chips li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.al-proof-chips :is(i, svg) {
    font-size: .7rem;
    color: var(--al-primary);
}

.al-split-text .al-check-list {
    margin-top: 1.25rem;
}

.al-split-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}

.al-catalog-section {
    background: linear-gradient(180deg, #fff 0, var(--al-soft) 200px, var(--al-soft) calc(100% - 200px), #fff 100%);
}

.al-catalog {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.al-catalog-item {
    padding: 1.4rem 1.3rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--al-line), 0 18px 36px -32px rgba(21, 58, 87, .4);
    transition: box-shadow .2s var(--al-ease), transform .2s var(--al-ease);
}

.al-catalog-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(41, 128, 185, .25), 0 22px 40px -30px rgba(41, 128, 185, .45);
}

.al-catalog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: .9rem;
    border-radius: 11px;
    font-size: .9rem;
    color: var(--al-primary);
    background: linear-gradient(135deg, #eef6fc, #f5eefa);
}

.al-catalog-item h3 {
    margin-bottom: .35rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--al-navy);
}

.al-catalog-item h3 .al-plan-badge {
    margin-left: .2rem;
    vertical-align: 2px;
}

.al-catalog-item p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--al-muted);
}

.al-inline-cta-section {
    padding: 1rem 0 4rem;
}

.al-inline-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.25rem;
    border-radius: 24px;
    background:
        radial-gradient(60% 120% at 0% 0%, rgba(41, 128, 185, .1), transparent 70%),
        radial-gradient(50% 120% at 100% 100%, rgba(142, 68, 173, .08), transparent 70%),
        var(--al-soft);
    box-shadow: inset 0 0 0 1px var(--al-line);
}

.al-inline-cta-text h2 {
    margin-bottom: .35rem;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
    color: var(--al-navy);
}

.al-inline-cta-text p {
    margin: 0;
    font-size: .92rem;
    color: var(--al-muted);
}

.al-inline-cta .al-claim {
    flex: 0 1 460px;
    box-shadow: 0 18px 40px -28px rgba(21, 58, 87, .45), 0 0 0 1px var(--al-line);
}

.al-inline-cta > .al-btn {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .al-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .al-inline-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .al-inline-cta .al-claim { flex-basis: auto; }
}

@media (max-width: 575.98px) {
    .al-catalog { grid-template-columns: 1fr; }
}

/* Features overview: soft halo behind the product visuals instead of a box */
.al-features-page .al-split-media-frame.is-visual::before,
.al-features-page .al-split.is-reversed .al-split-media-frame.is-visual::before {
    inset: -8% -6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(41, 128, 185, .12), rgba(142, 68, 173, .05) 55%, transparent 100%);
    transform: none;
}

/* 404 */
.al-404 {
    position: relative;
    padding: 3rem 0 6rem;
    text-align: center;
}

.al-404-visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 1rem auto 2.5rem;
    padding: 0 4rem;
}

.al-404-digit {
    font-size: clamp(7rem, 16vw, 11rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
    background: linear-gradient(180deg, var(--al-navy) 0%, #46526b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.al-404-phone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    width: 118px;
    height: 200px;
    padding: 1.6rem .7rem .7rem;
    border-radius: 26px;
    background: linear-gradient(180deg, #eef5fb, #f4eff9);
    box-shadow: inset 0 0 0 5px #1c2233, 0 30px 60px -30px rgba(41, 85, 140, .55);
    animation: al-404-float 6s ease-in-out infinite;
}

.al-404-phone-island {
    position: absolute;
    top: 11px;
    width: 34px;
    height: 9px;
    border-radius: 9px;
    background: #1c2233;
}

.al-404-phone-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2980b9, #8e44ad);
}

.al-404-phone-line {
    width: 60%;
    height: 6px;
    border-radius: 6px;
    background: rgba(29, 36, 51, .18);
}

.al-404-phone-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 22px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 21, 38, .08);
}

.al-404-phone-link.is-broken {
    border: 1px dashed rgba(220, 38, 38, .45);
    background: #fff5f5;
    color: #dc2626;
    font-size: .65rem;
    transform: rotate(-4deg) translateX(6px);
}

.al-404-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .8rem;
    border-radius: 12px;
    background: #fff;
    font-size: .78rem;
    color: var(--al-muted);
    white-space: nowrap;
    box-shadow: 0 0 0 1px var(--al-line), 0 16px 32px -20px rgba(21, 58, 87, .45);
}

.al-404-chip strong {
    color: var(--al-navy);
}

.al-404-chip.is-url {
    top: -4%;
    left: -5.5rem;
    animation: al-404-float 7s ease-in-out -2s infinite;
}

.al-404-chip.is-url :is(i, svg) {
    font-size: .65rem;
    color: #16a34a;
}

.al-404-chip.is-status {
    right: -1rem;
    bottom: 10%;
    font-weight: 600;
    color: var(--al-ink);
    animation: al-404-float 6.5s ease-in-out -4s infinite;
}

.al-404-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
}

@keyframes al-404-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.al-404-title {
    margin-bottom: .75rem;
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--al-navy);
}

.al-404-text {
    max-width: 520px;
    margin: 0 auto 2rem;
    font-size: 1.05rem;
    color: var(--al-muted);
}

.al-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.al-404-claim {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    margin-top: 2rem;
    padding: .9rem 1.25rem;
    border-radius: 14px;
    background: var(--al-soft);
    box-shadow: inset 0 0 0 1px var(--al-line);
}

.al-404-claim p {
    margin: 0;
    font-size: .92rem;
    color: var(--al-ink);
}

.al-404-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.75rem;
    margin-top: 2.5rem;
}

.al-404-links a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--al-muted) !important;
    text-decoration: none !important;
    transition: color .2s var(--al-ease);
}

.al-404-links a :is(i, svg) {
    font-size: .75rem;
}

.al-404-links a:hover {
    color: var(--al-primary) !important;
}

@media (max-width: 575.98px) {
    .al-404-visual { gap: .6rem; padding: 0 1rem; }
    .al-404-phone { width: 86px; height: 150px; }
    .al-404-chip.is-url { left: 0; top: -1.5rem; }
    .al-404-chip.is-status { right: 0; bottom: -1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .al-404-phone, .al-404-chip { animation: none; }
}

/* Help center + blog */
.al-help-hero {
    padding: 3rem 0 2.5rem;
    text-align: center;
}

.al-help-hero h1 {
    margin: 0 auto .75rem;
    max-width: 720px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--al-navy);
}

.al-help-hero p {
    max-width: 560px;
    margin: 0 auto;
    font-size: 1.05rem;
    color: var(--al-muted);
}

.al-help-hero.is-blog {
    padding-bottom: 1.5rem;
}

.al-blog-rss {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--al-muted) !important;
    text-decoration: none !important;
}

.al-blog-rss :is(i, svg) { font-size: .7rem; color: #f59e0b; }
.al-blog-rss:hover { color: var(--al-primary) !important; }

.al-help-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 3.5rem;
}

.al-help-card,
.al-help-category,
.al-help-row {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 0 0 1px var(--al-line), 0 16px 32px -30px rgba(21, 58, 87, .45);
    text-decoration: none !important;
    transition: box-shadow .2s var(--al-ease), transform .2s var(--al-ease);
}

.al-help-card:hover,
.al-help-category:hover,
.al-help-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(41, 128, 185, .3), 0 22px 40px -30px rgba(41, 128, 185, .5);
}

.al-help-card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1.4rem;
}

.al-help-card strong,
.al-help-category strong,
.al-help-row strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--al-navy);
}

.al-help-card > span:last-child,
.al-help-category-text span,
.al-help-row small {
    font-size: .87rem;
    color: var(--al-muted);
}

.al-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-bottom: .75rem;
    border-radius: 12px;
    color: var(--al-primary);
    background: linear-gradient(135deg, #eef6fc, #f5eefa);
}

.al-help-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--al-navy);
}

.al-help-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
}

.al-help-category {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
}

.al-help-category .al-help-icon { margin: 0; }

.al-help-category-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.al-help-category-text small {
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--al-muted);
}

.al-help-chevron {
    flex-shrink: 0;
    font-size: .7rem;
    color: var(--al-muted);
    transition: transform .2s var(--al-ease), color .2s var(--al-ease);
}

.al-help-category:hover .al-help-chevron,
.al-help-row:hover .al-help-chevron {
    color: var(--al-primary);
    transform: translateX(3px);
}

.al-help-list {
    display: grid;
    gap: .6rem;
    margin-bottom: 3rem;
}

.al-help-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
}

.al-help-row > span {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.al-help-row strong { font-size: .95rem; }

.al-help-row-icon {
    font-size: .85rem;
    color: var(--al-primary);
}

.al-help-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 4rem;
    padding: 1.75rem 2rem;
    border-radius: 22px;
    background:
        radial-gradient(60% 120% at 0% 0%, rgba(41, 128, 185, .1), transparent 70%),
        radial-gradient(50% 120% at 100% 100%, rgba(142, 68, 173, .08), transparent 70%),
        var(--al-soft);
    box-shadow: inset 0 0 0 1px var(--al-line);
}

.al-help-contact > div {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.al-help-contact strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--al-navy);
}

.al-help-contact span {
    font-size: .92rem;
    color: var(--al-muted);
}

@media (max-width: 991.98px) {
    .al-help-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .al-help-categories { grid-template-columns: 1fr; }
}

/* Blog listing + articles: premium cards and reading comfort */
.al-site .card {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--al-line), 0 18px 36px -32px rgba(21, 58, 87, .45);
}

.al-site .al-blog-featured {
    box-shadow: 0 0 0 1px rgba(41, 128, 185, .35), 0 22px 44px -30px rgba(41, 128, 185, .5);
}

.al-site .card h2.h4 a,
.al-site .card h2.h4 {
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--al-navy);
}

.al-site .card h2.h4 a:hover { color: var(--al-primary); }

.al-site .blog-post-image {
    border-radius: 14px !important;
}

.al-site .content-wrapper {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--al-ink);
}

.al-site .content-wrapper :is(h2, h3) {
    margin-top: 2.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--al-navy);
}

.al-site .content-wrapper a {
    color: var(--al-primary);
    text-decoration: underline;
    text-decoration-color: rgba(41, 128, 185, .35);
    text-underline-offset: 3px;
}

/* CTA banners: one shared deep-navy surface */
.al-cta,
.al-inline-cta {
    background:
        radial-gradient(55% 90% at 100% 0%, rgba(41, 128, 185, .38), transparent 70%),
        radial-gradient(45% 80% at 0% 100%, rgba(41, 128, 185, .16), transparent 70%),
        #0f1d33;
    box-shadow: 0 30px 60px -40px rgba(14, 21, 38, .6);
}

.al-cta::before {
    opacity: .05;
}

.al-cta p,
.al-inline-cta-text p {
    color: rgba(255, 255, 255, .72);
}

.al-inline-cta-text h2 {
    color: #fff;
}

.al-inline-cta .al-claim {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

.al-features-more .al-feature-icon {
    color: var(--al-primary);
    background: linear-gradient(135deg, #eef6fc, #f5eefa);
    box-shadow: none;
}

/* Homepage proof figures */
.al-proof-stats {
    display: flex;
    justify-content: center;
    gap: 1rem 4.5rem;
    flex-wrap: wrap;
    margin: 3rem auto 0;
}

.al-proof-stats > div {
    text-align: center;
}

.al-proof-stats dt {
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--al-navy);
}

.al-proof-stats dd {
    margin: .45rem 0 0;
    font-size: .88rem;
    color: var(--al-muted);
}

/* Icon scale (site) */
.al-feature-icon { width: 40px; height: 40px; border-radius: 11px; font-size: .95rem; }
.al-help-icon { width: 34px; height: 34px; border-radius: 10px; font-size: .82rem; }
.al-catalog-icon { width: 34px; height: 34px; border-radius: 10px; font-size: .82rem; }
.al-reassurance-icon { width: 36px; height: 36px; border-radius: 10px; font-size: .88rem; }
.al-plan-custom-icon { width: 36px; height: 36px; border-radius: 10px; font-size: .88rem; }
.al-nav-mega-icon { width: 34px; height: 34px; border-radius: 10px; font-size: .82rem; }

/* =========================================================
   Editorial: blog articles and pages
   ========================================================= */
.al-article {
    padding: 2.5rem 1.25rem 2rem;
}

.al-article-head {
    max-width: 760px;
    margin: 0 auto 2.25rem;
    text-align: center;
}

.al-article-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.75rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--al-muted) !important;
    text-decoration: none !important;
}

.al-article-back :is(i, svg) { font-size: .7rem; transition: transform .2s ease; }
.al-article-back:hover { color: var(--al-primary) !important; }
.al-article-back:hover :is(i, svg) { transform: translateX(-3px); }

.al-article-kicker {
    display: block;
    margin-bottom: .9rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--al-primary) !important;
    text-decoration: none !important;
}

.al-article-head h1 {
    margin: 0 0 1.1rem;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
    color: var(--al-navy);
}

.al-article-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem .9rem;
    margin: 0;
    font-size: .9rem;
    color: var(--al-muted);
}

.al-article-meta span + span::before {
    content: "·";
    margin-right: .9rem;
    color: #cbd5e1;
}

.al-article-cover {
    max-width: 1040px;
    margin: 0 auto 3rem;
}

.al-article-cover img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 30px 60px -40px rgba(14, 21, 38, .45);
}

.al-site .al-article-body {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.8;
    color: #334155;
}

.al-article-lead {
    margin-bottom: 2rem;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--al-navy);
}

.al-site .al-article-body .content-body > :first-child { margin-top: 0; }
.al-site .al-article-body .content-body h2 { margin: 2.75rem 0 1rem; font-size: 1.6rem; }
.al-site .al-article-body .content-body h3 { margin: 2rem 0 .75rem; font-size: 1.25rem; }
.al-site .al-article-body .content-body p { margin-bottom: 1.35rem; }
.al-site .al-article-body .content-body :is(ul, ol) { margin-bottom: 1.5rem; padding-left: 1.25rem; }
.al-site .al-article-body .content-body li { margin-bottom: .6rem; padding-left: .25rem; }
.al-site .al-article-body .content-body li::marker { color: var(--al-primary); }
.al-site .al-article-body .content-body strong { color: var(--al-navy); }
.al-site .al-article-body .content-body img { max-width: 100%; height: auto; border-radius: 16px; }
.al-site .al-article-body .content-body :is(p, li)[style*="justify"],
.al-site .al-article-body .content-body .ql-align-justify { text-align: left !important; }
.al-site .al-article-body .content-body p:has(> br:only-child) { display: none; }
.al-site .al-article.is-page .content-body p { margin-bottom: .85rem; }
.al-site .al-article-body .content-body blockquote {
    margin: 2rem 0;
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 3px solid var(--al-primary);
    font-size: 1.15rem;
    color: var(--al-navy);
}

.al-article-toc {
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: var(--al-soft);
    box-shadow: inset 0 0 0 1px var(--al-line);
}

.al-article-toc > p {
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--al-muted);
}

.al-article-toc ul { margin: 0; padding: 0; list-style: none; }
.al-article-toc li { margin: 0 0 .4rem; font-size: .95rem; line-height: 1.5; }
.al-article-toc a { color: var(--al-navy) !important; text-decoration: none !important; }
.al-article-toc a:hover { color: var(--al-primary) !important; }

.al-article-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--al-line);
    text-decoration: none !important;
}

.al-article-author img,
.al-article-author-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.al-article-author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--al-soft);
    color: var(--al-muted);
}

.al-article-author > span:last-child { display: flex; flex-direction: column; line-height: 1.4; }
.al-article-author strong { font-size: 1rem; color: var(--al-navy); }
.al-article-author small { font-size: .88rem; color: var(--al-muted); }

.al-article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--al-line);
    border-bottom: 1px solid var(--al-line);
}

.al-article-share > span {
    font-size: .88rem;
    font-weight: 600;
    color: var(--al-navy);
}

.al-article-share .btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.al-article-cta {
    max-width: 1040px;
    margin: 4rem auto 0;
}

.al-article-related {
    max-width: 1040px;
    margin: 4.5rem auto 0;
}

.al-article-related > h2 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--al-navy);
}

/* Blog cards (listing + related) */
.al-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
}

.al-blog-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-decoration: none !important;
}

.al-blog-card-image {
    display: block;
    overflow: hidden;
    margin-bottom: .5rem;
    border-radius: 18px;
    aspect-ratio: 16 / 10;
    background: var(--al-soft);
}

.al-blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--al-ease);
}

.al-blog-card:hover .al-blog-card-image img {
    transform: scale(1.04);
}

.al-blog-card-date {
    font-size: .8rem;
    color: var(--al-muted);
}

.al-blog-card strong {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--al-navy);
    transition: color .2s ease;
}

.al-blog-card:hover strong {
    color: var(--al-primary);
}

.al-blog-card p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--al-muted);
}

@media (max-width: 991.98px) {
    .al-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .al-blog-grid { grid-template-columns: 1fr; }
    .al-article-cover img { border-radius: 16px; }
}

/* Blog listing */
.al-blog-hero {
    padding: 3.5rem 0 2rem;
    text-align: center;
}

.al-blog-hero h1 {
    max-width: 760px;
    margin: .75rem auto 1rem;
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
    color: var(--al-navy);
}

.al-blog-hero p {
    max-width: 560px;
    margin: 0 auto;
    font-size: 1.08rem;
    color: var(--al-muted);
}

.al-blog-search {
    position: relative;
    max-width: 420px;
    margin: 1.75rem auto 0;
}

.al-blog-search > :is(i, svg) {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    font-size: .85rem;
    color: var(--al-muted);
    pointer-events: none;
}

.al-blog-search input {
    width: 100%;
    height: 48px;
    padding: 0 1rem 0 2.6rem;
    border: 1px solid var(--al-line);
    border-radius: 12px;
    background: #fff;
    font-size: .95rem;
    color: var(--al-ink);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.al-blog-search input:focus {
    border-color: var(--al-primary);
    box-shadow: 0 0 0 4px rgba(41, 128, 185, .12);
}

.al-blog-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 2.75rem;
}

.al-blog-chips a {
    padding: .45rem .95rem;
    border: 1px solid var(--al-line);
    border-radius: 99px;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    color: var(--al-muted) !important;
    text-decoration: none !important;
    transition: border-color .2s, color .2s, background .2s;
}

.al-blog-chips a:hover {
    border-color: var(--al-navy);
    color: var(--al-navy) !important;
}

.al-blog-chips a.is-active {
    border-color: var(--al-navy);
    background: var(--al-navy);
    color: #fff !important;
}

.al-blog-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 3.5rem;
    text-decoration: none !important;
}

.al-blog-featured-image {
    display: block;
    overflow: hidden;
    border-radius: 22px;
    aspect-ratio: 16 / 10;
    background: var(--al-soft);
}

.al-blog-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--al-ease);
}

.al-blog-featured:hover .al-blog-featured-image img {
    transform: scale(1.03);
}

.al-blog-featured-text {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.al-blog-featured-text strong {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.2;
    color: var(--al-navy);
    transition: color .2s;
}

.al-blog-featured:hover strong {
    color: var(--al-primary);
}

.al-blog-featured-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--al-muted);
}

.al-blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    font-size: .8rem;
    color: var(--al-muted);
}

.al-blog-card-category {
    font-weight: 700;
    color: var(--al-primary);
}

.al-blog-tag {
    padding: .2rem .6rem;
    border-radius: 99px;
    background: var(--al-primary-soft, rgba(41, 128, 185, .1));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--al-primary);
}

.al-blog-pagination {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.al-blog-cta {
    margin-top: 5rem;
}

/* Help: back link in hero, contact block in pages */
.al-help-hero .al-article-back {
    margin-bottom: 1rem;
}

.al-article-help {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3.5rem;
    padding: 1.1rem 1.1rem 1.1rem 1.25rem;
    border: 1px solid var(--al-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 21, 38, .04);
}

.al-article-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--al-soft);
    font-size: .9rem;
    color: var(--al-primary);
}

.al-article-help-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.al-article-help-text strong { font-size: .95rem; font-weight: 700; color: var(--al-navy); }
.al-article-help-text small { font-size: .875rem; color: var(--al-muted); }

.al-article-help-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    height: 40px;
    padding: 0 1.1rem;
    border-radius: 10px;
    background: var(--al-navy);
    font-size: .875rem;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}

.al-article-help-btn i { font-size: .7rem; transition: transform .2s ease; }
.al-article-help-btn:hover { background: #0e1526; transform: translateY(-1px); }
.al-article-help-btn:hover i { transform: translateX(2px); }

.al-article.is-page .al-article-head { margin-bottom: 2.5rem; }

@media (max-width: 767.98px) {
    .al-blog-featured { grid-template-columns: 1fr; gap: 1.25rem; }
    .al-article-help { flex-wrap: wrap; }
    .al-article-help-btn { width: 100%; justify-content: center; }
}

/* Home step 02: a wall of real blocks, each in its own theme */
.alv-blockwall {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto;
    padding: 1.5rem 0 2.5rem;
}

.alv-blockwall-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.alv-blockwall-col.is-offset { padding-top: 2.75rem; }

.alv-wb {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .9rem;
    border-radius: 18px;
    font-size: .75rem;
    line-height: 1.35;
    box-shadow: 0 1px 2px rgba(14, 21, 38, .06), 0 18px 40px -22px rgba(14, 21, 38, .35);
}

.alv-wb strong { font-size: .8rem; font-weight: 700; }
.alv-wb small { display: block; font-size: .66rem; opacity: .65; }

.alv-wb.is-light { background: #fff; color: #0e1526; border: 1px solid #edf0f5; }
.alv-wb.is-dark { flex-direction: row; align-items: center; gap: .7rem; background: radial-gradient(120% 120% at 0% 0%, #1e293b, #0b1120 70%); color: #fff; }
.alv-wb.is-pastel { background: linear-gradient(160deg, #fdf2f8, #e0e7ff); color: #3b2a5a; }
.alv-wb.is-sunset { background: linear-gradient(150deg, #fb923c, #db2777 60%, #7c3aed); color: #fff; }

.alv-wb-cover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(140deg, #8e44ad, #2980b9);
    font-size: .9rem;
}

.alv-wb-meta { flex: 1; min-width: 0; }
.alv-wb-meta small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alv-wb-progress { display: block; height: 3px; margin-top: .45rem; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.alv-wb-progress i { display: block; width: 42%; height: 100%; background: #1db954; }
.is-visible .alv-wb-progress i { animation: alv-wb-play 6s linear infinite; }

@keyframes alv-wb-play {
    from { width: 18%; }
    to { width: 88%; }
}

.alv-wb-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1db954;
    font-size: .6rem;
    color: #0b1120;
}

.alv-wb-label { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }

.alv-wb-event { display: flex; align-items: center; gap: .6rem; padding-top: .5rem; border-top: 1px solid #f1f4f8; }
.alv-wb-event > b { display: flex; flex-direction: column; align-items: center; width: 34px; font-size: .9rem; line-height: 1; color: #8e44ad; }
.alv-wb-event > b small { margin-top: 2px; font-size: .55rem; font-weight: 700; opacity: .8; }
.alv-wb-event > span { flex: 1; min-width: 0; }
.alv-wb-event em { padding: .2rem .5rem; border-radius: 99px; background: #f1f4f8; font-size: .62rem; font-style: normal; font-weight: 600; color: #1b2559; }

.alv-wb-stars { font-size: .62rem; color: #f59e0b; }
.alv-wb-stars b { margin-left: .2rem; font-size: .75rem; color: #3b2a5a; }
.alv-wb.is-pastel p { margin: 0; font-size: .76rem; font-weight: 500; }

.alv-wb-image { height: 92px; border-radius: 12px; background: radial-gradient(60% 70% at 70% 30%, #fde68a, transparent), linear-gradient(160deg, #0ea5e9, #1b2559); }
.alv-wb-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.alv-wb-row > b { font-size: .85rem; color: #1b2559; }
.alv-wb-btn { padding: .45rem; border-radius: 10px; background: #0e1526; text-align: center; font-size: .7rem; font-weight: 600; color: #fff; }

.alv-wb-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .4rem .4rem .65rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
    font-size: .66rem;
    color: #94a3b8;
}

.alv-wb-input i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #0e1526;
    font-size: .55rem;
    color: #fff;
}

.alv-wb.is-gallery { flex-direction: row; gap: .35rem; padding: .5rem; }
.alv-wb.is-gallery i { flex: 1; height: 58px; border-radius: 10px; }

.alv-blockwall-add { left: 50%; bottom: 0; z-index: 5; transform: translateX(-50%); white-space: nowrap; }

/* Blocks pop in one after the other */
.alv-blockwall .alv-wb { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.is-visible .alv-blockwall .alv-wb, .alv-blockwall.is-visible .alv-wb { opacity: 1; transform: none; }
.alv-blockwall-col:first-child .alv-wb:nth-child(2) { transition-delay: .16s; }
.alv-blockwall-col:first-child .alv-wb:nth-child(3) { transition-delay: .32s; }
.alv-blockwall-col.is-offset .alv-wb:nth-child(1) { transition-delay: .08s; }
.alv-blockwall-col.is-offset .alv-wb:nth-child(2) { transition-delay: .24s; }
.alv-blockwall-col.is-offset .alv-wb:nth-child(3) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
    .alv-blockwall .alv-wb { opacity: 1; transform: none; transition: none; }
}

/* Header: account menu */
.al-site .al-nav .al-nav-user {
    padding: .2rem;
    transition: box-shadow .2s ease;
}

.al-site .al-nav .al-nav-user::after { display: none; }
.al-site .al-nav .al-nav-user:hover,
.al-site .al-nav .al-nav-user[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(41, 128, 185, .25); }

.al-user-menu {
    min-width: 272px;
    margin-top: .6rem !important;
    padding: .4rem;
    border: 1px solid var(--al-line);
    border-radius: 16px;
    box-shadow: 0 24px 48px -16px rgba(14, 21, 38, .25);
}

.al-user-menu-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .35rem;
    padding: .6rem .6rem .8rem;
    border-bottom: 1px solid var(--al-line);
}

.al-user-menu-head img {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.al-user-menu-head > span:not(.al-user-menu-plan) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.al-user-menu-head strong { font-size: .9rem; color: var(--al-navy); }
.al-user-menu-head small { font-size: .78rem; color: var(--al-muted); }

.al-user-menu-plan {
    flex-shrink: 0;
    padding: .18rem .5rem;
    border-radius: 99px;
    background: var(--al-soft);
    font-size: .7rem;
    font-weight: 700;
    color: var(--al-navy);
}

.al-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--al-ink-2);
}

.al-user-menu .dropdown-item:hover,
.al-user-menu .dropdown-item:focus {
    background: var(--al-soft);
    color: var(--al-navy);
}

.al-user-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--al-soft);
    font-size: .75rem;
    color: var(--al-muted);
    transition: background .2s, color .2s;
}

.al-user-menu .dropdown-item:hover .al-user-menu-icon {
    background: #fff;
    color: var(--al-primary);
    box-shadow: 0 0 0 1px var(--al-line);
}

.al-user-menu-upgrade { color: var(--al-primary) !important; font-weight: 600 !important; }
.al-user-menu-upgrade .al-user-menu-icon { background: var(--al-primary-soft, rgba(41, 128, 185, .1)); color: var(--al-primary); }
.al-user-menu-logout:hover { color: #dc2626 !important; }
.al-user-menu-logout:hover .al-user-menu-icon { color: #dc2626 !important; }
.al-user-menu .dropdown-divider { margin: .35rem .2rem; border-color: var(--al-line); }

/* Tools catalog: one icon style, section headers, compact cards */
.al-site-tools #search .form-control {
    height: 52px;
    padding-left: 3rem;
    border: 1px solid var(--al-line);
    border-radius: 14px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1.1rem center;
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(14, 21, 38, .04);
}

.al-site-tools #search .form-control:focus {
    border-color: var(--al-primary);
    box-shadow: 0 0 0 4px rgba(41, 128, 185, .12);
}

.al-site-tools .al-tools-category {
    margin: 3rem 0 .25rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.al-site-tools .al-tools-category .card-body { padding: 0 0 .9rem; border-bottom: 1px solid var(--al-line); }
.al-site-tools .al-tools-category-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--al-navy); }
.al-site-tools .al-tools-category p { font-size: .875rem; }

.al-site-tools .tool-icon,
.al-site-tools .al-tools-category-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 11px !important;
    background: var(--al-soft) !important;
    font-size: .9rem;
}

.al-site-tools .tool-icon svg,
.al-site-tools .tool-icon i,
.al-site-tools .al-tools-category-icon svg,
.al-site-tools .al-tools-category-icon i { color: var(--al-primary) !important; }

.al-site-tools .al-tools-category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--al-muted) !important;
    transition: background .2s ease, transform .25s ease;
}

.al-site-tools .al-tools-category-toggle svg,
.al-site-tools .al-tools-category-toggle i { font-size: 1.1rem; }
.al-site-tools .al-tools-category:hover .al-tools-category-toggle { background: var(--al-soft); color: var(--al-navy) !important; }
.al-site-tools .al-tools-category-toggle[aria-expanded="true"] { transform: rotate(180deg); }

.al-site-tools [data-tool-id] { padding: .4rem !important; }

.al-site-tools [data-tool-id] > .card {
    align-items: center;
    border: 1px solid var(--al-line) !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.al-site-tools [data-tool-id] > .card:hover {
    border-color: rgba(41, 128, 185, .35) !important;
    box-shadow: 0 12px 28px -18px rgba(14, 21, 38, .3) !important;
    transform: translateY(-1px);
}

.al-site-tools [data-tool-id] .tool-icon-wrapper { padding-left: .9rem; }
.al-site-tools [data-tool-id] .card-body { padding: .85rem 1rem .85rem .85rem; }
.al-site-tools [data-tool-id] .card-body a span { font-size: .925rem; color: var(--al-navy); }
.al-site-tools [data-tool-id] .card-body p { font-size: .8rem; }

.al-site-tools [data-tool-id] .badge {
    border-radius: 7px;
    background: var(--al-soft);
    font-weight: 600;
    color: var(--al-muted);
}

/* Tool pages */
.al-tool-head { min-width: 0; }

.al-tool-title {
    margin: 0 0 .35rem;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--al-navy);
}

.al-tool-desc { max-width: 640px; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--al-muted); }

.al-site-tools .container > .card,
.al-site-tools .container > form > .card {
    border: 1px solid var(--al-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(14, 21, 38, .04), 0 24px 48px -36px rgba(14, 21, 38, .3) !important;
}

.al-site-tools .container > .card .card-body { padding: 1.5rem; }
.al-site-tools .container > .card .form-control { height: 46px; border-radius: 11px; }
.al-site-tools .container > .card textarea.form-control { height: auto; }
.al-site-tools .container > .card .btn-primary { height: 46px; border-radius: 11px; font-weight: 600; }

/* Header links: text-only hover, no pill */
.al-site .al-nav .al-nav-link {
    position: relative;
    border-radius: 0;
    background: transparent !important;
    transition: color .2s ease;
}

.al-site .al-nav .al-nav-link::before {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .3rem;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    opacity: .35;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.al-site .al-nav .al-nav-link.dropdown-toggle::before { right: 1.6rem; }

.al-site .al-nav .al-nav-link:hover,
.al-site .al-nav .al-nav-link[aria-expanded="true"] {
    background: transparent !important;
    color: var(--al-navy) !important;
}

.al-site .al-nav .al-nav-link:hover::before,
.al-site .al-nav .al-nav-link[aria-expanded="true"]::before { transform: scaleX(1); }

/* Features mega menu */
.al-nav .al-mega {
    display: none;
    grid-template-columns: 1.3fr 1fr;
    gap: .5rem;
    width: 620px;
    padding: .5rem !important;
    border: 1px solid var(--al-line) !important;
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(14, 21, 38, .28), 0 1px 2px rgba(14, 21, 38, .04) !important;
}

.al-nav .al-mega.show { display: grid; animation: al-mega-in .22s cubic-bezier(.22, 1, .36, 1); }

@keyframes al-mega-in {
    from { opacity: 0; transform: translateY(-6px); }
}

.al-mega-label {
    display: block;
    margin: .5rem .7rem .4rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.al-mega .al-nav-mega-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .7rem;
    border-radius: 12px;
    text-decoration: none !important;
    transition: background .15s ease;
}

.al-mega .al-nav-mega-item:hover { background: var(--al-soft); }

.al-mega .al-nav-mega-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--al-line);
    border-radius: 11px;
    background: #fff;
    font-size: .85rem;
    color: var(--al-primary);
    box-shadow: 0 1px 2px rgba(14, 21, 38, .05);
    transition: color .15s ease, border-color .15s ease;
}

.al-mega .al-nav-mega-item:hover .al-nav-mega-icon { border-color: rgba(41, 128, 185, .35); }

.al-mega .al-nav-mega-title { display: block; font-size: .9rem; font-weight: 600; color: var(--al-navy); }
.al-mega .al-nav-mega-description { display: block; font-size: .8rem; line-height: 1.4; color: var(--al-muted); }

.al-mega-spotlight {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .25rem .9rem 1rem;
    border-radius: 14px;
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(142, 68, 173, .1), transparent 70%),
        radial-gradient(70% 60% at 0% 100%, rgba(41, 128, 185, .1), transparent 70%),
        var(--al-soft);
    text-decoration: none !important;
    transition: box-shadow .2s ease;
}

.al-mega-spotlight .al-mega-label { margin: .65rem 0 .3rem; }
.al-mega-spotlight:hover { box-shadow: inset 0 0 0 1px rgba(41, 128, 185, .25); }

.al-mega-domain {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    align-self: flex-start;
    margin-bottom: .35rem;
    padding: .35rem .45rem .35rem .65rem;
    border-radius: 9px;
    background: #fff;
    font-size: .78rem;
    font-weight: 600;
    color: var(--al-navy);
    box-shadow: 0 6px 16px -8px rgba(14, 21, 38, .25);
}

.al-mega-domain > i { font-size: .62rem; color: #16a34a; }
.al-mega-domain em { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: #dcfce7; font-size: .55rem; font-style: normal; color: #16a34a; }

.al-mega-spotlight strong { font-size: .92rem; color: var(--al-navy); }
.al-mega-spotlight small { font-size: .8rem; line-height: 1.45; color: var(--al-muted); }
.al-mega-more { margin-top: .3rem; font-size: .8rem; font-weight: 600; color: var(--al-primary); }
.al-mega-more i { font-size: .65rem; transition: transform .2s ease; }
.al-mega-spotlight:hover .al-mega-more i { transform: translateX(3px); }

.al-mega-foot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .7rem .3rem;
    border-top: 1px solid var(--al-line);
}

.al-mega-foot a { font-size: .82rem; font-weight: 600; color: var(--al-navy) !important; text-decoration: none !important; }
.al-mega-foot a:hover { color: var(--al-primary) !important; }
.al-mega-foot a i { font-size: .65rem; }
.al-mega-foot span { display: flex; gap: 1.1rem; }
.al-mega-foot span a { font-weight: 500; color: var(--al-muted) !important; }

.al-nav .al-mega { margin-top: .6rem !important; }
.al-nav.is-scrolled .al-mega { margin-top: 1rem !important; }

/* =========================================================
   Home hero: entrance choreography + live story loop
   ========================================================= */
.al-hero-visual[data-al-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

.al-hero-visual:not(.is-visible) .alv-home-hero > * {
    opacity: 0;
}

.al-hero-visual.is-visible .alv-home-halo {
    animation: alv-halo-in 1.6s cubic-bezier(.22, 1, .36, 1) backwards;
}

.al-hero-visual.is-visible .alv-home-phone.is-center {
    animation: alv-rise-in 1.1s .1s cubic-bezier(.22, 1, .36, 1) backwards;
}

.al-hero-visual.is-visible .alv-home-phone.is-left {
    animation: alv-fan-left 1.1s .5s cubic-bezier(.22, 1, .36, 1) backwards;
}

.al-hero-visual.is-visible .alv-home-phone.is-right {
    animation: alv-fan-right 1.1s .5s cubic-bezier(.22, 1, .36, 1) backwards;
}

.al-hero-visual.is-visible .alv-home-stats { animation: alv-pop-in .8s 1s cubic-bezier(.34, 1.4, .64, 1) backwards; }
.al-hero-visual.is-visible .alv-home-qr { animation: alv-pop-in .8s 1.15s cubic-bezier(.34, 1.4, .64, 1) backwards; }

.al-hero-visual.is-visible .alv-home-domain {
    animation: alv-pop-in .8s 1.35s cubic-bezier(.34, 1.4, .64, 1) backwards, alv-float 6s 2.2s ease-in-out infinite;
}

.al-hero-visual.is-visible .alv-home-lead {
    animation: alv-pop-in .8s 1.5s cubic-bezier(.34, 1.4, .64, 1) backwards, alv-float 6s 2.2s ease-in-out infinite;
    animation-delay: 1.5s, -2s;
}

@keyframes alv-halo-in {
    from { opacity: 0; scale: .7; }
}

@keyframes alv-rise-in {
    from { opacity: 0; translate: 0 70px; scale: .94; filter: blur(10px); }
}

@keyframes alv-fan-left {
    from { opacity: 0; translate: 250px 20px; rotate: 4deg; filter: blur(6px); }
}

@keyframes alv-fan-right {
    from { opacity: 0; translate: -250px 20px; rotate: -4deg; filter: blur(6px); }
}

@keyframes alv-pop-in {
    from { opacity: 0; translate: 0 16px; scale: .88; filter: blur(6px); }
}

/* Phones float very gently once settled */
.is-visible .alv-home-phone .alv-phone { animation: alv-breathe 9s 1.6s ease-in-out infinite; }
@keyframes alv-breathe { 50% { transform: translateY(-5px); } }

/* Taps are driven by the story loop, not a blind CSS loop */
.is-visible .alv-home-phone.is-center .alv-bio-socials + .alv-bio-btn,
.is-visible .alv-home-phone.is-center .alv-bio-socials + .alv-bio-btn::after {
    animation: none;
}

.alv-home-phone.is-center .alv-bio-btn {
    position: relative;
    overflow: hidden;
}

.alv-home-phone.is-center .alv-bio-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 70%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
}

.alv-home-phone.is-center .alv-bio-btn.is-tapped { animation: alv-press-once .45s cubic-bezier(.22, 1, .36, 1); }
.alv-home-phone.is-center .alv-bio-btn.is-tapped::after { animation: alv-tap-once .8s ease-out; }

@keyframes alv-press-once {
    35% { transform: scale(.96); }
}

@keyframes alv-tap-once {
    0% { opacity: .25; transform: scale(.4); }
    100% { opacity: 0; transform: scale(8); }
}

.alv-plus-one {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #2980b9, #8e44ad);
    box-shadow: 0 8px 18px -6px rgba(41, 128, 185, .6);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
    pointer-events: none;
    will-change: transform, opacity;
}

.alv-stats-total.is-bump { animation: alv-bump .6s cubic-bezier(.22, 1, .36, 1); }

@keyframes alv-bump {
    35% { transform: translateY(-2px) scale(1.04); color: var(--al-primary); }
}

.alv-home-stats .alv-source { border-radius: 6px; transition: background-color .3s; }
.alv-home-stats .alv-source.is-hit { animation: alv-source-hit .9s ease; }

@keyframes alv-source-hit {
    20% { background-color: rgba(41, 128, 185, .09); }
}

.alv-home-lead.is-new .alv-float-icon { animation: alv-lead-pop .6s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes alv-lead-pop {
    40% { transform: scale(1.18) rotate(-6deg); }
}

/* Left side: the shop sells under the stats card. Right side: the DJ gets his domain and his bookings */
.alv-home-sale { left: 0; top: 374px; }
.alv-home-hero .alv-home-domain { left: auto; right: 44px; top: 492px; }
.alv-home-hero .alv-home-lead { right: 8px; top: 360px; }
.alv-home-sale strong b { margin-left: .2rem; color: #16a34a; font-weight: 800; }
.alv-home-sale small b { color: var(--al-ink, #1b2559); font-weight: 700; }

.al-hero-visual.is-visible .alv-home-sale {
    animation: alv-pop-in .8s 1.65s cubic-bezier(.34, 1.4, .64, 1) backwards, alv-float 6s 2.4s ease-in-out infinite;
    animation-delay: 1.65s, -4s;
}

.alv-home-sale.is-new .alv-float-icon { animation: alv-lead-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.alv-home-sale.is-new strong b { animation: alv-sale-flash 1.2s ease; }

@keyframes alv-sale-flash {
    0% { opacity: 0; translate: 0 6px; }
    30% { opacity: 1; translate: 0 0; }
}

.alv-plus-one.is-sale {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 8px 18px -6px rgba(22, 163, 74, .55);
}

/* Mobile only keeps the center phone, so the side stories go with their phones */
@media (max-width: 991.98px) {
    .alv-home-hero .alv-home-sale,
    .alv-home-hero .alv-home-domain { display: none; }
}

/* QR code: small, brand blue, straddling the corner of the DJ's phone */
.alv-home-qr {
    top: 58px !important;
    right: 74px;
    width: 100px !important;
    padding: .5rem !important;
    border-radius: 18px !important;
    transform: rotate(6deg) !important;
}

/* Tight fan: side phones tuck behind the center one, cards straddle their outer edges */
@media (min-width: 992px) {
    .alv-home-phone.is-left,
    .alv-home-phone.is-right { top: 72px; }
    .alv-home-phone.is-left { transform: translateX(calc(-50% - 215px)) rotate(-5deg) scale(.8); }
    .alv-home-phone.is-right { transform: translateX(calc(-50% + 215px)) rotate(5deg) scale(.8); }
    .alv-home-hero .alv-home-halo { width: 860px; }
    .alv-home-stats { top: 120px; left: 0; width: 260px !important; padding: 1.25rem !important; transform: rotate(-3deg); }
    .alv-home-sale { left: 20px; top: 505px; }
    .alv-home-hero .alv-home-qr {
        top: 40px !important;
        right: 20px;
        width: 150px !important;
        gap: .55rem;
        padding: .75rem .75rem .7rem !important;
        border-radius: 22px !important;
        transform: rotate(5deg) !important;
    }
    .alv-home-hero .alv-home-qr { overflow: visible; }
    .alv-home-qr .alv-qr-label { padding: .35rem .85rem; font-size: .72rem; }
    .alv-home-qr .alv-ov-scans { gap: .25rem; font-size: .64rem; white-space: nowrap; }
    .alv-home-hero .alv-home-lead { right: 76px; top: 335px; z-index: 6; }
    .alv-home-hero .alv-home-domain { right: auto; left: 560px; top: 548px; }
}

.alv-home-smart {
    position: absolute !important;
    top: 420px;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    width: 250px !important;
    margin: 0 !important;
    padding: 1.2rem .9rem .9rem !important;
    transform: rotate(-3deg);
}

.alv-home-smart .alv-ov-link-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .15rem; }
.alv-home-smart .alv-ov-link-head strong { display: block; font-size: .85rem; }
.alv-home-smart .alv-ov-link-head small { display: block; font-size: .68rem; color: var(--al-muted); }
.alv-home-smart .alv-route-icon { width: 32px; height: 32px; border-radius: 10px; font-size: .8rem; }
.alv-home-smart .alv-rule { margin: 0; }
.alv-home-smart .alv-ov-tag :is(i, svg) { width: auto; height: 1em; }

.al-hero-visual.is-visible .alv-home-smart { animation: alv-pop-in .8s 1.25s cubic-bezier(.34, 1.4, .64, 1) backwards; }
.al-hero-visual:not(.is-visible) .alv-home-smart { opacity: 0; }

@media (max-width: 991.98px) {
    .alv-home-smart { display: none; }
}

.alv-home-hero .alv-home-qr {
    border-color: rgba(41, 128, 185, .18);
    box-shadow: 0 1px 2px rgba(27, 37, 89, .05), 0 18px 34px -22px rgba(41, 128, 185, .45) !important;
}

/* Side phones get tapped too: the shop's buy button and the DJ's booking link */
.alv-home-phone .alv-bio-btn,
.alv-home-phone .alv-pay-side em {
    position: relative;
    overflow: hidden;
}

.alv-home-phone:not(.is-center) .alv-bio-btn::after,
.alv-home-phone .alv-pay-side em::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
}

.alv-home-phone:not(.is-center) .alv-bio-btn.is-tapped,
.alv-home-phone .alv-pay-side em.is-tapped { animation: alv-press-once .45s cubic-bezier(.22, 1, .36, 1); }

.alv-home-phone:not(.is-center) .alv-bio-btn.is-tapped::after,
.alv-home-phone .alv-pay-side em.is-tapped::after { animation: alv-tap-once .8s ease-out; }
.is-visible .alv-home-qr::after { animation-duration: 7s; }

.alv-home-qr::after {
    background: linear-gradient(90deg, transparent, #2980b9, transparent);
    box-shadow: 0 0 12px 2px rgba(41, 128, 185, .35);
}

/* Live sparkline: soft area, a light passing along the line, a pulsing last point */
.alv-spark-live {
    position: relative;
    display: block;
}

.alv-spark .alv-spark-area { stroke: none; opacity: 0; }
.alv-spark .alv-spark-glint {
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 3;
    stroke-dasharray: .1 1.1;
    stroke-dashoffset: .1;
    opacity: 0;
}

.alv-spark-dot {
    position: absolute;
    top: 3px;
    right: 0;
    width: 7px;
    height: 7px;
    margin: -3.5px -3.5px 0 0;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: var(--al-primary);
    box-shadow: 0 0 0 0 rgba(41, 128, 185, .4);
    opacity: 0;
}

.is-visible .alv-spark-live .alv-spark-area { animation: alv-fade-to .8s .9s ease forwards; }
.is-visible .alv-spark-live .alv-spark-glint { animation: alv-glint 6s 2.4s cubic-bezier(.45, 0, .25, 1) infinite; }
.is-visible .alv-spark-dot { animation: alv-fade-to .4s 1s ease forwards, alv-live-dot 2.8s 1.4s ease-out infinite; }
.alv-spark-dot.is-ping { animation: alv-dot-ping .7s cubic-bezier(.34, 1.56, .64, 1); opacity: 1; }

@keyframes alv-fade-to { to { opacity: 1; } }

@keyframes alv-glint {
    0% { stroke-dashoffset: .1; opacity: 0; }
    8% { opacity: 1; }
    40% { stroke-dashoffset: -1; opacity: 1; }
    44%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

@keyframes alv-live-dot {
    0% { box-shadow: 0 0 0 0 rgba(41, 128, 185, .4); opacity: 1; }
    70%, 100% { box-shadow: 0 0 0 7px rgba(41, 128, 185, 0); opacity: 1; }
}

@keyframes alv-dot-ping {
    40% { transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
    .al-hero-visual:not(.is-visible) .alv-home-hero > * { opacity: 1; }
    .alv-plus-one { display: none; }
}

/* =========================================================
   Bento, round 3: every card shows the feature working
   ========================================================= */
.al-bento-chip {
    position: absolute;
    right: -3.2rem;
    bottom: .4rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border: 1px solid var(--al-line);
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 12px 24px -14px rgba(21, 58, 87, .45);
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    color: #15803d;
}

.al-bento-qr-wrap { position: relative; display: block; }
.al-bento-qr-wrap .al-bento-qr { display: block; }

/* Domain: the address switches to the custom domain */
.al-bento-browser {
    width: min(100%, 400px);
    overflow: hidden;
    border: 1px solid rgba(27, 37, 89, .08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(27, 37, 89, .05), 0 24px 40px -28px rgba(21, 58, 87, .4);
}

.al-bento-browser-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--al-line);
    background: #f8fafc;
}

.al-bento-browser-url {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 26px;
    padding: 0 .65rem;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--al-line);
    font-size: .74rem;
    overflow: hidden;
}

.al-bento-browser-url > :is(i, svg) { color: #16a34a; font-size: .6rem; }

.al-bento-url-old,
.al-bento-url-new {
    position: absolute;
    left: 1.6rem;
    white-space: nowrap;
}

.al-bento-url-old { color: var(--al-muted); text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, .6); }
.al-bento-url-new { color: var(--al-ink); }

.al-bento-browser-bar em {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .45rem;
    border-radius: 6px;
    background: #dcfce7;
    color: #15803d;
    font-size: .64rem;
    font-style: normal;
    font-weight: 700;
}

.al-bento-browser-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem .75rem;
    align-items: center;
    padding: .9rem 1rem 1rem;
}

.al-bento-browser-body .alv-bio-avatar {
    width: 36px;
    height: 36px;
    margin: 0;
    font-size: .7rem;
}

.al-bento-browser-lines { display: grid; gap: .35rem; }
.al-bento-browser-lines b { width: 45%; height: 8px; border-radius: 4px; background: #1d2433; opacity: .85; }
.al-bento-browser-lines i { width: 30%; height: 6px; border-radius: 4px; background: #cbd5e1; }

.al-bento-browser-btns {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
}

.al-bento-browser-btns i { height: 22px; border-radius: 7px; background: #eef2f8; }
.al-bento-browser-btns i:first-child { background: linear-gradient(135deg, #2980b9, #8e44ad); }

.is-visible .al-bento-url-old { animation: al-url-old 6s 1s ease-in-out infinite both; }
.is-visible .al-bento-url-new { animation: al-url-new 6s 1s steps(14, end) infinite both; }

@keyframes al-url-old {
    0%, 22% { opacity: 1; transform: none; }
    28%, 94% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: none; }
}

@keyframes al-url-new {
    0%, 30% { clip-path: inset(0 100% 0 0); opacity: 1; }
    55%, 88% { clip-path: inset(0 0 0 0); opacity: 1; }
    93%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* Smartlinks: one link, routed by device */
.al-bento-route {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.al-bento-route-source {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 9px;
    background: var(--al-navy);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 10px 20px -12px rgba(13, 18, 32, .6);
}

.al-bento-route-source :is(i, svg) { color: #fbbf24; }

.al-bento-route-lines {
    width: 80%;
    height: 34px;
    overflow: visible;
}

.al-bento-route-lines path {
    fill: none;
    stroke: #b8c4d6;
    stroke-width: 1.4;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
}

.is-visible .al-bento-route-lines path { animation: al-route-flow 1.2s linear infinite; }

@keyframes al-route-flow {
    to { stroke-dashoffset: -14; }
}

.al-bento-route-targets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
    width: 100%;
}

.al-bento-route-targets span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .35rem .2rem;
    border: 1px solid var(--al-line);
    border-radius: 8px;
    background: #fff;
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
}

.is-visible .al-bento-route-targets span { animation: al-route-hit 3.6s ease-in-out infinite; }
.is-visible .al-bento-route-targets span:nth-child(2) { animation-delay: 1.2s; }
.is-visible .al-bento-route-targets span:nth-child(3) { animation-delay: 2.4s; }

@keyframes al-route-hit {
    0%, 30%, 100% { border-color: var(--al-line); box-shadow: none; }
    8%, 22% { border-color: var(--al-primary); box-shadow: 0 0 0 3px rgba(41, 128, 185, .12); }
}

/* Collect: audience grows */
.al-bento-audience {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .75rem;
    color: var(--al-muted);
}

.al-bento-audience strong { color: var(--al-ink); }

.al-bento-avatars { display: inline-flex; }

.al-bento-avatars i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: -7px;
    border: 2px solid #fff;
    border-radius: 99px;
    font-size: .5rem;
    font-style: normal;
    font-weight: 800;
    color: #1d2433;
}

.al-bento-avatars i:first-child { margin-left: 0; }

/* Sell: a payment lands */
.al-bento-sale { position: relative; padding-top: 2.5rem; }

.al-bento-toast.is-sale {
    top: 0;
    right: auto;
    left: 50%;
    translate: -50% 0;
}

.al-bento-toast.is-sale b { color: #15803d; }

.al-bento-card.is-visible .al-bento-toast { animation: alv-toast 5s 1s cubic-bezier(.22, 1, .36, 1) infinite both; }
.al-bento-card.is-visible .al-bento-toast.is-sale { animation-delay: 2.2s; }

@media (max-width: 575.98px) {
    .al-bento-chip { right: -1rem; }
    .al-bento-url-old, .al-bento-url-new { font-size: .68rem; }
}

.al-bento-toast { white-space: nowrap; }

.al-bento-perks {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.al-bento-perks li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .65rem;
    border: 1px solid var(--al-line);
    border-radius: 99px;
    background: #f8fafc;
    font-size: .76rem;
    font-weight: 600;
    color: var(--al-ink);
}

.al-bento-perks :is(i, svg) {
    font-size: .68rem;
    color: var(--al-primary);
}

/* Plan buttons always fit inside their card */
.al-plan .al-btn-block {
    width: 100%;
    min-width: 0;
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: .9rem;
    white-space: nowrap;
    text-align: center;
}

.al-plan-micro-price {
    font-style: normal;
    white-space: nowrap;
}

.al-plan-micro {
    border: 1px solid rgba(41, 128, 185, .25);
    background: linear-gradient(135deg, rgba(41, 128, 185, .07), rgba(142, 68, 173, .05)), #fff;
    box-shadow: 0 16px 34px -26px rgba(41, 85, 140, .6);
}

.al-plan-micro .al-plan-micro-price {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--al-primary);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
}

.al-plan-micro .al-btn {
    border-color: var(--al-primary) !important;
    color: var(--al-primary) !important;
}

.al-plan-micro .al-btn:hover {
    background: var(--al-primary) !important;
    color: #fff !important;
}

@media (max-width: 575.98px) {
    .al-plan-micro {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: .35rem .9rem;
        padding: 1.1rem;
        text-align: left;
        border: 1px solid rgba(41, 128, 185, .25);
        background: linear-gradient(135deg, rgba(41, 128, 185, .07), rgba(142, 68, 173, .05)), #fff;
        box-shadow: 0 16px 34px -26px rgba(41, 85, 140, .6);
    }

    .al-plan-micro > div {
        display: block;
    }

    .al-plan-micro strong {
        display: block;
        font-size: 1rem;
        line-height: 1.3;
    }

    .al-plan-micro .al-plan-micro-price {
        display: inline-block;
        margin-top: .3rem;
        padding: .15rem .55rem;
        border-radius: 999px;
        background: var(--al-primary);
        color: #fff;
        font-size: .82rem;
    }

    .al-plan-micro span {
        display: block;
        margin-top: .35rem;
        font-size: .85rem;
        line-height: 1.45;
    }

    .al-plan-micro .al-btn {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: .6rem;
        justify-content: center;
        border-color: var(--al-primary) !important;
        background: var(--al-primary) !important;
        color: #fff !important;
    }
}

.al-site .surlign,
.al-site .surlign:hover,
.al-site [data-al-reveal]:not(.is-visible) .surlign,
.al-site [data-al-reveal]:not(.is-visible).surlign,
.al-hero.is-light .al-hero-title .surlign,
.al-hero.is-light .al-hero-title .surlign:hover,
.al-page-hero .surlign,
.al-page-hero .surlign:hover {
    padding: 0 .08em .04em 0;
    margin-right: -.08em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: linear-gradient(90deg, #2980b9 0%, #6d5bd0 55%, #8e44ad 100%);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: none;
}

.al-site .al-nav .al-nav-link::before { content: none; }

.al-site .al-nav .al-nav-link {
    border-radius: 99px;
    transition: color .2s ease, background-color .2s ease;
}

.al-site .al-nav .al-nav-link:hover,
.al-site .al-nav .al-nav-link[aria-expanded="true"] {
    background: rgba(14, 21, 38, .05) !important;
    color: var(--al-navy) !important;
}

.al-mega-spotlight {
    margin: .35rem 0;
    border-left: 1px solid var(--al-line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    transition: none;
}

.al-mega-spotlight:hover {
    background: #fff;
    box-shadow: none;
}

.al-mega-spotlight .al-mega-domain { box-shadow: 0 0 0 1px var(--al-line), 0 4px 12px -6px rgba(14, 21, 38, .12); }
.al-mega-spotlight:hover strong { color: var(--al-primary); }

.al-site .al-nav .al-nav-link:focus { outline: none; box-shadow: none; }
.al-site .al-nav .al-nav-link:focus-visible:not([aria-expanded="true"]) { background: rgba(14, 21, 38, .05) !important; }

.al-compare summary {
    padding: .5rem 1rem;
    border: 0;
    background: transparent;
    color: var(--al-primary);
    font-size: .95rem;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color .2s ease;
}

.al-compare summary:hover { text-decoration-color: currentColor; }

.al-plan-features li.al-plan-more { padding-top: .35rem; }

.al-plan-more :is(button, a) {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--al-primary);
    font: inherit;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
}

.al-plan-more :is(button, a) i { font-size: .75em; transition: transform .2s ease; }
.al-plan-more button:hover i { transform: translateY(2px); }
.al-plan-more a:hover i { transform: translateX(2px); }

.al-page-hero.al-tools-hero { padding-bottom: 1.75rem; }

/* Features overview hero: the three products around one page */
.alv-ov {
    width: 1080px;
    max-width: none;
    height: 620px;
    margin: 0 auto;
}

.alv-ov-phone { position: absolute; top: 0; left: 50%; }
.alv-ov-phone.is-center { z-index: 3; transform: translateX(-50%); }
.alv-ov-phone.is-left,
.alv-ov-phone.is-right { top: 58px; z-index: 1; }
.alv-ov-phone.is-left { transform: translateX(calc(-50% - 215px)) rotate(-5deg) scale(.8); }
.alv-ov-phone.is-right { transform: translateX(calc(-50% + 215px)) rotate(5deg) scale(.8); }
.alv-ov-phone.is-left .alv-phone,
.alv-ov-phone.is-right .alv-phone { box-shadow: 0 30px 60px -40px rgba(41, 85, 140, .35), inset 0 0 0 1.5px #3a4256; }

.alv-ov .alv-home-halo { width: 820px; }

.alv-ov :is(.alv-card, .alv-qr-card, .alv-float) {
    border: 1px solid rgba(27, 37, 89, .07);
    box-shadow: 0 1px 2px rgba(27, 37, 89, .05), 0 24px 48px -28px rgba(41, 85, 140, .35) !important;
}

.alv-ov-tag {
    position: absolute;
    top: -13px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 99px;
    background: var(--al-navy);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.alv-ov-tag :is(i, svg) { color: #7dd3fc; font-size: .65rem; }

.alv-qr-card :is(.alv-ov-tag, .alv-ov-scans) svg {
    width: 1em;
    height: 1em;
    padding: 0;
    border-radius: 0;
    background: none;
}

.alv-ov-qr {
    top: 205px;
    left: 0;
    z-index: 4;
    width: 210px;
    transform: rotate(-5deg);
}

.alv-ov-scans {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: var(--al-muted);
}

.alv-ov-scans i { color: var(--al-primary); }
.alv-ov-scans b { color: var(--al-navy); }

.alv-ov-link {
    position: absolute;
    top: 175px;
    right: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 270px;
    margin: 0;
    padding: 1.3rem 1rem 1rem;
    transform: rotate(4deg);
}

.alv-ov-link-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .2rem; }
.alv-ov-link-head strong { display: block; font-size: .9rem; }
.alv-ov-link-head small { display: block; font-size: .7rem; color: var(--al-muted); }
.alv-ov-link .alv-route-icon { width: 34px; height: 34px; border-radius: 10px; font-size: .85rem; }
.alv-ov-link .alv-rule { margin: 0; }

.alv-ov-stats {
    position: absolute;
    top: 20px;
    left: 70px;
    z-index: 4;
    width: 200px;
    margin: 0;
    padding: .9rem 1rem;
}

.alv-ov-stats .alv-stats-total { display: block; margin: .2rem 0 .35rem; }

.alv-ov-domain { left: 150px; top: 540px; z-index: 5; }
.alv-ov-lead { right: 30px; top: 30px; z-index: 5; }

.al-page-hero-visual.is-visible .alv-ov .alv-home-halo { animation: alv-halo-in 1.6s cubic-bezier(.22, 1, .36, 1) backwards; }
.al-page-hero-visual.is-visible .alv-ov-phone.is-center { animation: alv-rise-in 1.1s .1s cubic-bezier(.22, 1, .36, 1) backwards; }
.al-page-hero-visual.is-visible .alv-ov-phone.is-left { animation: alv-fan-left 1.1s .45s cubic-bezier(.22, 1, .36, 1) backwards; }
.al-page-hero-visual.is-visible .alv-ov-phone.is-right { animation: alv-fan-right 1.1s .45s cubic-bezier(.22, 1, .36, 1) backwards; }
.al-page-hero-visual.is-visible :is(.alv-ov-qr, .alv-ov-link) { animation: alv-pop-in .8s .9s cubic-bezier(.34, 1.4, .64, 1) backwards; }
.al-page-hero-visual.is-visible .alv-ov-stats { animation: alv-pop-in .8s 1.1s cubic-bezier(.34, 1.4, .64, 1) backwards; }
.al-page-hero-visual.is-visible :is(.alv-ov-domain, .alv-ov-lead) { animation: alv-pop-in .8s 1.3s cubic-bezier(.34, 1.4, .64, 1) backwards, alv-float 6s 2.1s ease-in-out infinite; }
.is-visible .alv-ov-phone .alv-phone { animation: alv-breathe 9s 1.6s ease-in-out infinite; }
.is-visible .alv-ov-phone.is-left .alv-phone { animation-delay: -3s; }
.is-visible .alv-ov-phone.is-right .alv-phone { animation-delay: -6s; }

@media (max-width: 1199.98px) { .alv-ov { zoom: .86; } }
@media (max-width: 991.98px) { .alv-ov { zoom: .66; } }
@media (max-width: 767.98px) { .alv-ov { zoom: .5; } }

@media (max-width: 575.98px) {
    .alv-ov { zoom: 1; width: 100%; height: 590px; }
    .alv-ov :is(.alv-ov-qr, .alv-ov-link, .alv-ov-stats) { display: none; }
    .alv-ov-phone.is-left { transform: translateX(calc(-50% - 140px)) rotate(-6deg) scale(.76); }
    .alv-ov-phone.is-right { transform: translateX(calc(-50% + 140px)) rotate(6deg) scale(.76); }
    .alv-ov-domain { left: 0; top: 500px; }
    .alv-ov-lead { right: 0; top: 410px; }
}

/* Product heroes: same stage as the overview, product-specific content */
.alv-ov-side {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    width: 240px;
    margin: 0;
    padding: 1.3rem 1rem 1rem;
}

.alv-ov-side.is-left { top: 190px; left: 0; transform: rotate(-4deg); }
.alv-ov-side.is-right { top: 175px; right: 0; transform: rotate(4deg); }
.alv-ov-side .alv-control-label { margin: .2rem 0 0; }
.alv-ov-side .alv-stats-total { margin: 0 0 .1rem; }
.alv-ov-side .alv-stat-row { padding: .25rem 0 .45rem; }
.alv-ov-side .alv-scene-sources { margin-top: .2rem; }
.alv-ov-side .alv-control-row { margin-top: .2rem; font-size: .76rem; }

.alv-ov-top { left: 70px; top: 40px; z-index: 5; }

.alv-ov-editor { width: 260px; }
.alv-ov-editor .alv-editor-row { margin: 0; padding: .45rem .55rem; font-size: .76rem; }
.alv-ov-editor .alv-editor-row.is-active { transform: translateX(8px) rotate(-1deg); }
.alv-ov-editor .alv-editor-icon { width: 24px; height: 24px; font-size: .68rem; }

/* QR codes hero: printed supports in a fan */
.alv-qr-poster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    width: 270px;
    padding: 1.5rem 1.35rem 1.35rem;
    border: 1px solid rgba(27, 37, 89, .07);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(27, 37, 89, .05), 0 40px 70px -36px rgba(41, 85, 140, .45);
    text-align: center;
}

.alv-qr-poster.is-flyer { background: linear-gradient(180deg, #fff7ed, #fff 60%); }
.alv-qr-poster.is-wifi { background: linear-gradient(180deg, #eef6fc, #fff 60%); }
.alv-qr-poster.is-main { width: 290px; padding-top: 1.75rem; }

.alv-qr-poster-kicker {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--al-muted);
}

.alv-qr-poster-kicker i { color: var(--al-primary); }
.alv-qr-poster strong { margin-top: -.2rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--al-navy); }
.alv-qr-poster > svg,
.alv-qr-poster-code > svg { display: block; width: 100%; height: auto; }
.alv-qr-poster :is(.alv-qr-poster-kicker, .alv-qr-label) svg { width: 1em; height: 1em; }
.alv-qr-poster .alv-qr-label { margin-top: .15rem; }

.alv-qr-poster .alv-bio-avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: .1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #8e44ad, #2980b9);
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
}

.alv-qr-poster-code {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.alv-qr-poster-code::after {
    content: '';
    position: absolute;
    top: 8%;
    left: 6%;
    right: 6%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #2980b9, transparent);
    box-shadow: 0 0 12px 2px rgba(41, 128, 185, .45);
    opacity: 0;
}

.is-visible .alv-qr-poster-code::after { animation: alv-scan 5s 1.6s ease-in-out infinite; }

.alv-ov-qrs { height: 540px; }
.alv-ov-qrs .alv-ov-domain { top: 470px; left: 170px; }
.alv-ov-qrs .alv-ov-phone.is-center { top: 20px; }
.alv-ov-qrs .alv-ov-phone.is-left,
.alv-ov-qrs .alv-ov-phone.is-right { top: 70px; }
.alv-ov-qrs .alv-ov-side .alv-swatches i { width: 22px; height: 22px; }

/* Smartlinks hero: one link, a destination per device */
.alv-dest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 3.1rem 1.3rem 1.3rem;
    color: #fff;
    text-align: center;
}

.alv-dest.is-apple { background: linear-gradient(170deg, #fb5c74 0%, #e3223f 42%, #1c1c22 100%); }
.alv-dest.is-spotify { background: linear-gradient(170deg, #1ed760 0%, #138a3f 42%, #121212 100%); }

.alv-dest-app {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .16);
    font-size: .72rem;
    font-weight: 700;
}

.alv-dest-cover {
    position: relative;
    display: grid;
    place-items: center;
    width: 180px;
    height: 180px;
    margin: .5rem 0 .3rem;
    border-radius: 18px;
    background: linear-gradient(150deg, #fde68a, #f97316 50%, #7c3aed);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
}

.alv-dest strong { font-size: 1.1rem; font-weight: 800; }
.alv-dest small { margin-top: -.4rem; font-size: .75rem; opacity: .75; }

.alv-dest-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
    padding: .6rem 1rem;
    border-radius: 99px;
    background: #fff;
    color: #111318;
    font-size: .74rem;
    font-weight: 700;
}

.alv-dest-device {
    margin-top: auto;
    padding: .3rem .65rem;
    border-radius: 99px;
    background: rgba(0, 0, 0, .3);
    font-size: .66rem;
    font-weight: 600;
}

.alv-dest .alv-phone-island { z-index: 2; }

.alv-sl-hub {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    width: 300px;
    margin: 40px 0 0 !important;
    padding: 1.6rem 1.2rem 1.2rem !important;
}

.alv-sl-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--al-gradient);
    color: #fff;
    font-size: 1.05rem;
}

.alv-sl-url { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--al-navy); }
.alv-sl-sub { margin-top: -.3rem; font-size: .74rem; color: var(--al-muted); }

.alv-sl-clicks {
    align-self: flex-start;
    padding: .3rem .6rem;
    border-radius: 99px;
    background: #ecfdf3;
    font-size: .72rem;
    color: #15803d;
}

.alv-ov-sl { height: 540px; }
.alv-ov-sl .alv-ov-domain { top: 470px; left: 170px; }
.alv-ov-sl .alv-sl-hub:not(.is-compact) { width: 330px; }
.alv-sl-hub .alv-control-label { margin: .35rem 0 0; }
.alv-sl-hub .alv-rule { margin: 0; }
.alv-ov-sl .alv-ov-side .alv-source b { font-variant-numeric: tabular-nums; }

.al-page-hero-visual.is-visible .alv-ov-side { animation: alv-pop-in .8s .9s cubic-bezier(.34, 1.4, .64, 1) backwards; }
.al-page-hero-visual.is-visible .alv-ov-top { animation: alv-pop-in .8s 1.1s cubic-bezier(.34, 1.4, .64, 1) backwards, alv-float 6s 1.9s ease-in-out infinite; }

.alv-sl-hub.is-compact { width: 280px; margin: 0 !important; }

/* CTA visuals of the QR codes and smartlinks pages */
.al-cta-zoom { zoom: .74; }
.al-cta-zoom:has(.alv-qr-poster) { zoom: .64; }
.al-cta-zoom.al-cta-phone-front:has(.alv-qr-poster) { top: 2.6rem; }
.al-cta-zoom.al-cta-phone-back:has(.alv-qr-poster) { top: 4.6rem; }
.al-cta-zoom:has(.alv-qr-poster) ~ .al-cta-chip-2 { right: auto; left: 2%; bottom: 1.5rem; }
.al-cta-zoom .alv-qr-poster { box-shadow: 0 40px 70px -30px rgba(0, 20, 60, .6); }
.al-cta-phone-front.is-hub { top: 2.5rem; margin-left: -30px; rotate: 4deg; zoom: .82; }
.al-cta-phone-front.is-hub ~ .al-cta-chip-2 { right: 1%; bottom: 1rem; }
.al-cta-phone .alv-dest .alv-dest-cover { width: 130px; height: 130px; }
.al-cta-phone .alv-phone.is-mini .alv-dest { gap: .4rem; padding: 2.6rem .9rem .9rem; }
.al-cta-phone .alv-phone.is-mini .alv-dest-btn { padding: .5rem .8rem; font-size: .64rem; }

@media (max-width: 575.98px) {
    .alv-ov :is(.alv-ov-side, .alv-ov-top) { display: none; }
    .alv-ov:is(.alv-ov-sl, .alv-ov-qrs) { height: 560px; }
    .alv-ov:is(.alv-ov-sl, .alv-ov-qrs) .alv-ov-lead { display: none; }
    .alv-ov:is(.alv-ov-sl, .alv-ov-qrs) .alv-ov-domain { top: 500px; left: 0; }
    .alv-ov-sl .alv-sl-hub:not(.is-compact) { width: 290px; }
}

/* API teaser */
.al-api-teaser-code {
    max-width: 760px;
    margin: 0 auto 3.5rem;
    overflow: hidden;
    border-radius: 18px;
    background: var(--al-navy);
    box-shadow: var(--al-shadow-lg);
}

.al-api-teaser-code-head { display: flex; gap: .4rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.al-api-teaser-code-head span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }

.al-api-teaser-code pre {
    margin: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-x: auto;
    color: #e2e8f0;
    font-size: .85rem;
    line-height: 1.7;
}

.al-api-teaser-code :is(code, code span) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: #e2e8f0 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.al-api-teaser-code pre { border: 0; background: transparent !important; }
.al-api-teaser-code code { white-space: pre; }
.al-api-teaser-code code .is-muted { color: #94a3b8 !important; }
.al-api-teaser-code code .is-accent { color: #7dd3fc !important; }

/* Contact */
.al-contact { padding: 0 0 6rem; }
.al-contact-page.is-in-app .al-contact { padding: 1.5rem 0 3rem; }

.al-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 1.5rem;
    max-width: 1040px;
    margin: 0 auto;
    align-items: start;
}

.al-contact-aside { display: grid; gap: .75rem; }

.al-contact-channel {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--al-line);
    border-radius: 16px;
    background: #fff;
    color: var(--al-navy) !important;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

a.al-contact-channel:hover {
    border-color: rgba(41, 128, 185, .35);
    box-shadow: 0 12px 28px -18px rgba(14, 21, 38, .3);
    transform: translateY(-1px);
}

.al-contact-channel strong { display: block; margin-bottom: .15rem; font-size: .95rem; font-weight: 700; }
.al-contact-channel > span:last-child > span { display: block; font-size: .85rem; line-height: 1.5; color: var(--al-muted); }

.al-contact-icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--al-primary-soft);
    color: var(--al-primary);
}

.al-contact-card {
    padding: 1.75rem;
    border: 1px solid var(--al-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 21, 38, .04), 0 24px 48px -36px rgba(14, 21, 38, .3);
}

.al-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.al-contact-card label { font-size: .85rem; font-weight: 600; color: var(--al-navy); }
.al-contact-card .form-control { height: 46px; border-radius: 11px; }
.al-contact-card textarea.form-control { height: auto; min-height: 150px; resize: vertical; }
.al-contact-captcha img { border-radius: 10px; }

@media (max-width: 991.98px) {
    .al-contact-grid { grid-template-columns: 1fr; }
    .al-contact-aside { order: 2; }
}

@media (max-width: 575.98px) {
    .al-contact-row { grid-template-columns: 1fr; }
    .al-contact-card { padding: 1.25rem; }
}

/* =========================================================
   Feature pages: animated section visuals
   ========================================================= */
.al-features-page .al-split-media-frame.is-visual::before,
.al-features-page .al-split.is-reversed .al-split-media-frame.is-visual::before {
    inset: -8% -6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(41, 128, 185, .13), rgba(142, 68, 173, .06) 55%, transparent 100%);
    transform: none;
}

/* Link in bio: clicks per link */
.alv-linkstats { padding: 2rem 0 3rem; }
.alv-ls-card { width: min(100%, 420px); margin: 0 auto; padding: 1.3rem; }
.alv-ls-card .alv-stats-total em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--al-muted); }

.alv-ls-live i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: .15rem;
    border-radius: 50%;
    background: #16a34a;
    vertical-align: middle;
}

.is-visible .alv-ls-live i { animation: alv-ls-blink 1.6s ease-in-out infinite; }
@keyframes alv-ls-blink { 50% { opacity: .25; } }

.alv-ls-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin: .9rem 0 1rem;
}

.alv-ls-kpis span {
    display: flex;
    flex-direction: column;
    padding: .55rem .65rem;
    border-radius: 12px;
    background: var(--al-soft);
}

.alv-ls-kpis b { font-size: .98rem; font-weight: 800; color: var(--al-navy); }
.alv-ls-kpis small { font-size: .66rem; color: var(--al-muted); }

.alv-ls-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0 .75rem;
    font-size: .8rem;
    font-weight: 600;
}

.alv-ls-row .alv-editor-icon { width: 26px; height: 26px; font-size: .7rem; }
.alv-ls-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alv-ls-label em { margin-left: .3rem; padding: .1rem .4rem; border-radius: 99px; background: #fff4e5; font-size: .62rem; font-style: normal; font-weight: 700; color: #c2410c; }
.alv-ls-row b { font-variant-numeric: tabular-nums; color: var(--al-navy); }

.alv-ls-bar {
    position: absolute;
    left: 34px;
    right: 0;
    bottom: .2rem;
    height: 4px;
    border-radius: 99px;
    background: var(--al-line);
}

.alv-ls-bar::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    border-radius: inherit;
    background: var(--al-gradient);
    transform-origin: left;
    transform: scaleX(0);
}

.is-visible .alv-ls-bar::after { animation: alv-ls-grow 1.1s calc(.3s + var(--i) * .15s) cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes alv-ls-grow { to { transform: scaleX(1); } }

.alv-ls-row:first-of-type::after {
    content: '+1';
    position: absolute;
    right: 2.4rem;
    top: .3rem;
    font-size: .7rem;
    font-weight: 800;
    color: #16a34a;
    opacity: 0;
}

.is-visible .alv-ls-row:first-of-type::after { animation: alv-ls-plus 3.2s 1.6s ease-out infinite; }
@keyframes alv-ls-plus {
    0% { opacity: 0; transform: translateY(6px); }
    12% { opacity: 1; transform: none; }
    30%, 100% { opacity: 0; transform: translateY(-10px); }
}

.alv-float-icon.is-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--al-line); }
.alv-float-icon.is-logo img { width: 18px; height: 18px; }
.alv-ls-source { top: .5rem; right: -1rem; }
.alv-ls-pixel { bottom: 1.25rem; left: -1.5rem; }

/* Custom domain: the address switches, setup checks itself */
.alv-dom { padding: 3.25rem 0 4.5rem; }
.alv-dom-browser { width: min(100%, 440px); }
.alv-dom-url { position: relative; display: flex; align-items: center; min-height: 2.1rem; white-space: nowrap; overflow: hidden; }

.alv-dom-old {
    position: absolute;
    left: 2rem;
    color: var(--al-muted);
}

.alv-dom-new {
    display: inline-block;
    max-width: calc(var(--chars) * 1ch + .2rem);
    overflow: hidden;
    color: var(--al-navy);
    border-right: 2px solid transparent;
}

.alv-dom-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 1.8rem 2.5rem 2rem;
    background: linear-gradient(135deg, #fde8dc 0%, #f7efe4 35%, #e4efe6 70%, #f4e4ee 100%);
}

.alv-dom-page .alv-bio-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8e44ad, #2980b9);
    color: #fff;
    font-weight: 800;
}

.alv-dom-page strong { font-size: .92rem; color: #4a3426; }
.alv-dom-page strong :is(i, svg) { color: #2980b9; font-size: .75rem; }
.alv-dom-btn { width: 78%; height: 30px; border-radius: 99px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 2px rgba(74, 52, 38, .08); }
.alv-dom-btn.is-short { width: 52%; }

.alv-dom-steps {
    position: absolute !important;
    right: -1rem;
    bottom: .5rem;
    width: 250px !important;
    margin: 0 !important;
    padding: .9rem 1rem !important;
}

.alv-dom-step { display: flex; align-items: center; gap: .65rem; padding: .35rem 0; font-size: .78rem; }
.alv-dom-step strong { display: block; font-size: .78rem; color: var(--al-navy); }
.alv-dom-step small { display: block; font-size: .68rem; color: var(--al-muted); }

.alv-dom-check {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--al-soft);
}

.alv-dom-ok {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: .6rem;
}

.alv-dom-check .alv-save-spinner { width: 12px; height: 12px; color: var(--al-primary); opacity: 0; }

.alv-dom-tlds { top: 0; left: -1.25rem; flex-direction: column; align-items: flex-start; gap: .35rem; }
.alv-dom-tlds .alv-control-label { margin: 0; }
.alv-dom-tld { display: flex; gap: .3rem; }
.alv-dom-tld b { padding: .25rem .55rem; border-radius: 8px; background: var(--al-soft); font-size: .74rem; }
.alv-dom-tld b.is-active { background: var(--al-navy); color: #fff; }

.alv-dom-old { animation: none; }
.is-visible .alv-dom-old { animation: alv-dom-old 9s 1s infinite both; }
.is-visible .alv-dom-new { animation: alv-dom-type 9s 1s steps(var(--chars)) infinite both, alv-dom-caret 9s 1s infinite both; }
.is-visible .alv-dom-ok { animation: alv-dom-done 9s calc(1s + var(--i) * .9s) infinite both; }
.is-visible .alv-dom-check .alv-save-spinner { animation: alv-spin .8s linear infinite, alv-dom-busy 9s calc(1s + var(--i) * .9s) infinite both; }

@keyframes alv-dom-old {
    0%, 14% { opacity: 1; text-decoration: none; }
    18% { opacity: 1; text-decoration: line-through; color: #be123c; }
    24%, 92% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes alv-dom-type {
    0%, 24% { max-width: 0; }
    44%, 92% { max-width: calc(var(--chars) * 1ch + .2rem); }
    100% { max-width: 0; }
}

@keyframes alv-dom-caret {
    0%, 23% { border-color: transparent; }
    24%, 46% { border-color: var(--al-primary); }
    47%, 100% { border-color: transparent; }
}

@keyframes alv-dom-done {
    0%, 30% { opacity: 0; transform: scale(.4); }
    36%, 92% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

@keyframes alv-dom-busy {
    0%, 14% { opacity: 0; }
    16%, 30% { opacity: 1; }
    34%, 100% { opacity: 0; }
}


/* QR editor: colors and patterns change on their own */
.alv-qred {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 1.25rem;
    width: min(100%, 500px);
    margin: 2.5rem auto;
}

.alv-qred-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 1rem;
    border-radius: 18px;
    background: var(--al-gradient-soft);
}

.alv-qred-stack {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 24px -16px rgba(27, 37, 89, .4);
}

.alv-qred-variant { position: absolute; inset: .6rem; }
.alv-qred-variant svg { display: block; width: 100%; height: 100%; }
.alv-qred-variant:not(:first-child) { opacity: 0; }
.alv-qred-controls .alv-control-label { display: block; margin: 0 0 .45rem; }
.alv-qred-controls .alv-swatches { margin-bottom: 1rem; }
.alv-qred-controls .alv-control-row { margin-top: .35rem; }
.alv-qred .alv-styles i { width: 36px; height: 36px; }
.alv-qred .alv-styles .is-square { background-image: linear-gradient(90deg, var(--al-ink) 50%, transparent 0), linear-gradient(var(--al-ink) 50%, transparent 0); background-size: 6px 6px; }
.alv-qred .alv-styles .is-dots { background-image: radial-gradient(circle, var(--al-ink) 1.5px, transparent 1.9px); background-size: 6px 6px; }
.alv-qred .alv-styles .is-rounded { background-image: radial-gradient(circle, var(--al-accent) 2px, transparent 2.4px); background-size: 6.5px 6.5px; }
.alv-qred-pick i:first-child { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--al-accent); }

.is-visible .alv-qred-variant { animation: alv-qred-show 9s calc(var(--i) * 3s - 9s) infinite both; opacity: 0; }
.is-visible .alv-qred-pick i { animation: alv-qred-pick 9s calc(var(--i) * 3s - 9s) infinite both; box-shadow: none; }
.is-visible .alv-download { animation: alv-qred-dl 3s 2.2s ease-in-out infinite; }

@keyframes alv-qred-show {
    0% { opacity: 0; transform: scale(.94); filter: blur(4px); }
    4%, 30% { opacity: 1; transform: none; filter: none; }
    34%, 100% { opacity: 0; transform: scale(1.03); filter: blur(4px); }
}

@keyframes alv-qred-pick {
    0%, 32% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--al-accent); transform: scale(1.06); }
    34%, 100% { box-shadow: none; transform: none; }
}

@keyframes alv-qred-dl {
    0%, 70%, 100% { transform: none; }
    80% { transform: scale(.96); }
}

/* QR uses: a scan travels from one code to the next */
.alv-qruse .alv-use { position: relative; transition: none; }
.alv-qruse .alv-use-icon :is(i, svg) { width: .75rem; height: .75rem; }
.alv-qruse .alv-qruse-ok :is(i, svg) { width: .55rem; height: .55rem; }
.alv-qruse-code { position: relative; display: block; overflow: hidden; border-radius: 10px; }
.alv-qruse-code svg { display: block; width: 100%; height: auto; }

.alv-qruse-code::after {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #2980b9, transparent);
    box-shadow: 0 0 10px 2px rgba(41, 128, 185, .45);
    opacity: 0;
}

.alv-qruse-ok :is(i, svg) { width: .55rem !important; height: .55rem; font-size: .55rem; }

.alv-qruse-ok {
    position: absolute;
    top: -.6rem;
    right: -.4rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .5rem;
    border-radius: 99px;
    background: #16a34a;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    opacity: 0;
    box-shadow: 0 8px 16px -8px rgba(22, 163, 74, .7);
}

.is-visible .alv-qruse .alv-use { animation: alv-qruse-card 12s calc(var(--i) * 2s - 12s) infinite both; }
.is-visible .alv-qruse .alv-use:nth-child(3n + 2) { animation-name: alv-qruse-card-offset; }
.is-visible .alv-qruse-code::after { animation: alv-qruse-line 12s calc(var(--i) * 2s - 12s) infinite both; }
.is-visible .alv-qruse-ok { animation: alv-qruse-ok 12s calc(var(--i) * 2s - 12s) infinite both; }

@keyframes alv-qruse-card {
    0%, 100% { transform: none; border-color: rgba(230, 236, 245, .9); }
    3%, 14% { transform: translateY(-6px); border-color: rgba(41, 128, 185, .45); box-shadow: 0 26px 44px -24px rgba(41, 128, 185, .55); }
    17% { transform: none; border-color: rgba(230, 236, 245, .9); }
}

@keyframes alv-qruse-card-offset {
    0%, 100% { transform: translateY(22px); border-color: rgba(230, 236, 245, .9); }
    3%, 14% { transform: translateY(16px); border-color: rgba(41, 128, 185, .45); box-shadow: 0 26px 44px -24px rgba(41, 128, 185, .55); }
    17% { transform: translateY(22px); border-color: rgba(230, 236, 245, .9); }
}

@keyframes alv-qruse-line {
    0% { top: 4%; opacity: 0; }
    2% { opacity: 1; }
    9% { top: 92%; opacity: 1; }
    11%, 100% { top: 92%; opacity: 0; }
}

@keyframes alv-qruse-ok {
    0%, 8% { opacity: 0; transform: scale(.6); }
    10%, 15% { opacity: 1; transform: none; }
    17%, 100% { opacity: 0; transform: scale(.8); }
}

/* QR tracking: the printed code stays, the destination changes */
.alv-qrtrack { display: flex; align-items: center; justify-content: center; padding: 2rem 0 3rem; }

.alv-qrtrack-flyer {
    position: absolute;
    left: 0;
    top: 3.5rem;
    z-index: 1;
    zoom: .7;
    rotate: -7deg;
}

.alv-qrtrack-card { z-index: 2; width: min(100%, 350px); margin: 0 0 0 auto !important; padding: 1.2rem !important; }
.alv-qrtrack-card .alv-control-label { display: block; margin: .9rem 0 .4rem; }

.alv-qrtrack-dest {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .7rem;
    border-radius: 11px;
    background: var(--al-soft);
    font-size: .78rem;
    font-weight: 600;
}

.alv-qrtrack-dest > :is(i, svg) { color: var(--al-primary); font-size: .7rem; }
.alv-qrtrack-urls { position: relative; flex: 1; height: 1.2em; overflow: hidden; }
.alv-qrtrack-urls span { position: absolute; inset: 0; white-space: nowrap; }
.alv-qrtrack-urls span + span { opacity: 0; }
.alv-qrtrack-note { display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; font-size: .7rem; font-weight: 600; color: #16a34a; opacity: 0; }

.alv-qrtrack-stats { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.alv-qrtrack-stats .alv-stats-total { font-size: 1.35rem; }
.alv-qrtrack-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; padding-bottom: .3rem; }

.alv-qrtrack-bars i {
    width: 10px;
    height: var(--h);
    border-radius: 4px 4px 2px 2px;
    background: var(--al-gradient);
    transform-origin: bottom;
    transform: scaleY(0);
}

.is-visible .alv-qrtrack-bars i { animation: alv-qrtrack-bar .9s calc(.4s + var(--i) * .08s) cubic-bezier(.22, 1, .36, 1) forwards; }
.is-visible .alv-qrtrack-urls span:first-child { animation: alv-qrtrack-a 8s 1.5s infinite both; }
.is-visible .alv-qrtrack-urls span + span { animation: alv-qrtrack-b 8s 1.5s infinite both; }
.is-visible .alv-qrtrack-note { animation: alv-qrtrack-note 8s 1.5s infinite both; }

.alv-qrtrack-ping { top: 1rem; right: -1rem; z-index: 3; opacity: 0; }
.is-visible .alv-qrtrack-ping { animation: alv-qrtrack-ping 4s 1.2s ease-out infinite; }

@keyframes alv-qrtrack-bar { to { transform: scaleY(1); } }

@keyframes alv-qrtrack-a {
    0%, 40% { opacity: 1; transform: none; }
    46%, 94% { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 1; transform: none; }
}

@keyframes alv-qrtrack-b {
    0%, 40% { opacity: 0; transform: translateY(100%); }
    46%, 94% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(100%); }
}

@keyframes alv-qrtrack-note {
    0%, 44% { opacity: 0; }
    50%, 92% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes alv-qrtrack-ping {
    0% { opacity: 0; transform: translateY(10px) scale(.9); }
    10%, 55% { opacity: 1; transform: none; }
    70%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* Smartlinks targeting: each visitor lights up its rule */
.alv-target { width: min(100%, 440px); }
.alv-target-visitor { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; padding: .6rem .75rem; border: 1px dashed rgba(41, 128, 185, .35); border-radius: 12px; }
.alv-target-visitor .alv-control-label { margin: 0; }
.alv-target-who { position: relative; flex: 1; height: 1.6rem; }

.alv-target-who span {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 99px;
    background: var(--al-navy);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.alv-target-who span:not(:first-child) { opacity: 0; }
.alv-target .alv-rule { position: relative; transition: none; }
.alv-target .alv-rule:nth-of-type(1) { box-shadow: inset 0 0 0 1.5px var(--al-primary); background: #eef6fc; }

.is-visible .alv-target-who span { animation: alv-target-who 9s calc(var(--i) * 3s - 9s) infinite both; opacity: 0; }
.is-visible .alv-target .alv-rule { animation: alv-target-rule 9s calc(var(--i) * 3s - 9s) infinite both; box-shadow: none; background: var(--al-soft); }
.is-visible .alv-target-ab span:first-child { animation: alv-target-ab 6s ease-in-out infinite; }

.alv-target-ab span:first-child { width: 55%; }
.alv-target-ab span + span { flex: 1; }

@keyframes alv-target-who {
    0% { opacity: 0; transform: translateY(8px); }
    5%, 29% { opacity: 1; transform: none; }
    33%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes alv-target-rule {
    0%, 6% { box-shadow: none; background: var(--al-soft); }
    10%, 30% { box-shadow: inset 0 0 0 1.5px var(--al-primary), 0 12px 24px -16px rgba(41, 128, 185, .7); background: #eef6fc; }
    34%, 100% { box-shadow: none; background: var(--al-soft); }
}

@keyframes alv-target-ab {
    0%, 100% { width: 55%; }
    50% { width: 61%; }
}

@media (max-width: 575.98px) {
    .alv-qred { grid-template-columns: 1fr; }
    .alv-qred-stack { width: min(100%, 190px); }
    .alv-ls-source, .alv-ls-pixel, .alv-dom-tlds { display: none; }
    .alv-dom-steps { position: relative !important; right: auto; bottom: auto; width: min(100%, 300px) !important; margin: -1.5rem auto 0 !important; }
    .alv-dom { padding-bottom: 1.5rem; }
    .alv-qrtrack-flyer { display: none; }
    .alv-qrtrack-card { margin: 0 auto !important; }
}

@media (prefers-reduced-motion: reduce) {
    .alv-ls-bar::after, .alv-qrtrack-bars i { transform: none !important; animation: none !important; }
    :is(.alv-dom, .alv-qred, .alv-qruse, .alv-qrtrack, .alv-target, .alv-linkstats) * { animation: none !important; }
}

.al-features-page .alv-customize-panel { left: 0; z-index: 3; width: 262px !important; }
.al-features-page .alv-customize .alv-theme-thumbs i { width: 40px; height: 54px; }
.al-features-page .alv-customize .alv-phone { right: 8%; }

.alv-domain-field em { white-space: nowrap; }

/* Feature pages: simple CTA band after the sections */
.al-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 4.5rem;
    padding: 1.6rem 2rem;
    border: 1px solid rgba(41, 128, 185, .14);
    border-radius: 24px;
    background: linear-gradient(120deg, rgba(41, 128, 185, .07), rgba(142, 68, 173, .07));
}

.al-band strong { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--al-navy); }
.al-band span { display: block; margin-top: .2rem; color: var(--al-muted); }
.al-band .al-btn { flex: none; }

@media (max-width: 767.98px) {
    .al-band { flex-direction: column; align-items: flex-start; padding: 1.4rem; }
    .al-band .al-btn { width: 100%; justify-content: center; }
}

/* "Alternative to" pages: import field + 3 switch steps */
.al-compare-page .al-page-hero .al-claim {
    margin: 0 auto;
    box-shadow: 0 0 0 1px var(--al-line), 0 24px 50px -28px rgba(21, 58, 87, .45);
}

.al-import-claim-icon {
    flex-shrink: 0;
    margin-right: .6rem;
    font-size: .95rem;
    color: var(--al-primary);
}

.al-compare-page .al-proof-chips {
    margin-top: 1.5rem;
}

.al-switch-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: al-step;
}

.al-switch-step {
    position: relative;
    padding: 1.6rem 1.4rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--al-line), 0 18px 36px -32px rgba(21, 58, 87, .4);
}

.al-switch-step-number {
    position: absolute;
    top: 1.2rem;
    right: 1.3rem;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--al-line);
}

.al-switch-step h3 {
    margin-bottom: .4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--al-navy);
}

.al-switch-step p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--al-muted);
}

@media (max-width: 767px) {
    .al-switch-steps {
        grid-template-columns: 1fr;
    }
}

/* "Already on Linktree?" line under hero forms */
.al-hero-import {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .875rem;
    color: rgba(255, 255, 255, .9) !important;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    text-decoration: none !important;
    transition: background-color .2s ease;
}

.al-hero-import:hover {
    background: rgba(255, 255, 255, .2);
}

.al-hero-import b {
    font-weight: 600;
    color: #fff;
}

.al-hero-import :is(i, svg) {
    font-size: .75rem;
}

.al-hero-import-arrow {
    transition: transform .2s ease;
}

.al-hero-import:hover .al-hero-import-arrow {
    transform: translateX(3px);
}

.al-hero-import.is-light {
    color: var(--al-muted) !important;
    background: #fff;
    box-shadow: 0 0 0 1px var(--al-line);
}

.al-hero-import.is-light:hover {
    background: var(--al-soft);
}

.al-hero-import.is-light b,
.al-hero-import.is-light :is(i, svg) {
    color: var(--al-primary);
}

/* Import visual: Linktree card -> animated flow -> Allinks phone */
.al-compare-page .al-page-hero .al-claim {
    margin-top: 2rem;
}

.alv-import {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    min-height: 600px;
}

.alv-import .alv-home-halo {
    top: 30px;
}

.alv-card.alv-import-source {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    width: 230px;
    margin: 0;
    padding: 1.1rem 1rem 1.3rem;
    border-radius: 24px;
    background: #f4f5f2;
    rotate: -4deg;
    filter: saturate(.6);
}

.alv-import-url {
    align-self: stretch;
    margin-bottom: .5rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-size: .68rem;
    color: #6b7280;
    background: #fff;
    text-align: center;
}

.alv-import-url :is(i, svg) {
    margin-right: .2rem;
    font-size: .6rem;
}

.alv-import-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: #9ca3af;
}

.alv-import-name {
    margin-bottom: .35rem;
    font-size: .8rem;
    font-weight: 700;
    color: #374151;
}

.alv-import-link {
    align-self: stretch;
    padding: .6rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    text-align: center;
    color: #374151;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    animation: alv-import-scan 6s infinite;
}

.alv-import-link:nth-of-type(4) { animation-delay: .5s; }
.alv-import-link:nth-of-type(5) { animation-delay: .8s; }
.alv-import-link:nth-of-type(6) { animation-delay: 1.1s; }
.alv-import-link:nth-of-type(7) { animation-delay: 1.4s; }

@keyframes alv-import-scan {
    0%, 6%, 20%, 100% { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
    10% { box-shadow: 0 0 0 2px rgba(41, 128, 185, .55); }
}

.alv-import-flow {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.alv-import-dots {
    display: flex;
    gap: .45rem;
}

.alv-import-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--al-primary);
    opacity: .2;
    animation: alv-import-dot 1.2s infinite;
}

.alv-import-dots i:nth-child(2) { animation-delay: .2s; }
.alv-import-dots i:nth-child(3) { animation-delay: .4s; }

@keyframes alv-import-dot {
    0%, 100% { opacity: .2; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(4px); }
}

.alv-card.alv-import-chip {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .35rem .65rem;
    width: 220px;
    margin: 0;
    padding: .8rem .9rem;
    border-radius: 16px;
}

.alv-import-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: .8rem;
    color: #fff;
    background: var(--al-primary);
}

.alv-import-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.alv-import-chip-text strong {
    font-size: .82rem;
    color: var(--al-navy);
}

.alv-import-chip-text small {
    font-size: .7rem;
    color: var(--al-muted);
}

.alv-import-progress {
    grid-column: 1 / -1;
    height: 5px;
    border-radius: 999px;
    background: var(--al-line);
    overflow: hidden;
}

.alv-import-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--al-primary);
    transform-origin: left;
    animation: alv-import-progress 6s infinite;
}

@keyframes alv-import-progress {
    0% { transform: scaleX(0); }
    35%, 88% { transform: scaleX(1); }
    96%, 100% { transform: scaleX(1); opacity: 0; }
}

.alv-import-target {
    z-index: 2;
}

.alv-import-target .alv-bio > :is(.alv-bio-avatar, .alv-bio-name, .alv-bio-text, .alv-bio-socials, .alv-bio-btn, .alv-bio-tiktok) {
    animation: alv-import-in 6s infinite both;
}

.alv-import-target .alv-bio-avatar { animation-delay: .3s !important; }
.alv-import-target .alv-bio-name { animation-delay: .45s !important; }
.alv-import-target .alv-bio-text { animation-delay: .55s !important; }
.alv-import-target .alv-bio-socials { animation-delay: .7s !important; }
.alv-import-target .alv-bio-btn:nth-of-type(4) { animation-delay: .95s !important; }
.alv-import-target .alv-bio-btn:nth-of-type(5) { animation-delay: 1.2s !important; }
.alv-import-target .alv-bio-btn:nth-of-type(6) { animation-delay: 1.45s !important; }
.alv-import-target .alv-bio-tiktok { animation-delay: 1.7s !important; }

@keyframes alv-import-in {
    0%, 4% { opacity: 0; transform: translateY(10px) scale(.97); }
    14%, 86% { opacity: 1; transform: none; }
    94%, 100% { opacity: 0; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .alv-import *, .alv-import-target .alv-bio > * { animation: none !important; }
}

@media (max-width: 991.98px) {
    .alv-import { gap: 1rem; zoom: .85; }
    .alv-card.alv-import-source { width: 200px; }
}

@media (max-width: 767px) {
    .alv-import { flex-direction: column; min-height: 0; zoom: .9; }
    .alv-card.alv-import-source { display: none; }
    .alv-import-dots { display: none; }
}

/* Mega menu: discreet Linktree import entry under the products */
.al-mega-import {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding: .55rem .75rem .1rem;
    border-top: 1px dashed var(--al-line);
    font-size: .8rem;
    color: var(--al-muted) !important;
    text-decoration: none !important;
}

.al-mega-import :is(i, svg) {
    font-size: .75rem;
    color: var(--al-primary);
}

.al-mega-import b {
    font-weight: 600;
    color: var(--al-primary);
}

.al-mega-import:hover b {
    text-decoration: underline;
}

/* Link in bio page: Linktree import section */
.al-import-section .alv-import {
    min-height: 580px;
}

.al-import-section-actions {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.al-compare-others {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .4rem 1rem;
    margin: 0 0 3rem;
    padding: 0 1rem;
    font-size: .875rem;
    color: var(--al-muted);
}

.al-compare-others a {
    font-weight: 600;
    color: var(--al-primary);
}

/* Link in bio page: built-in coach (insights, completion, share kit) */
.alv-coach {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 430px;
}

.alv-card.alv-coach-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(100%, 380px);
    margin: 0;
    padding: 1.2rem;
}

.alv-coach-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .2rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--al-navy);
}

.alv-coach-title :is(i, svg) {
    font-size: .75rem;
    color: var(--al-primary);
}

.alv-coach-tip {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem .7rem;
    border: 1px solid var(--al-line);
    border-radius: 12px;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--al-muted);
}

.alv-coach-tip b {
    color: var(--al-navy);
}

.alv-coach-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: .7rem;
    color: var(--al-primary);
    background: #eef6fc;
}

.alv-coach-tip.is-success .alv-coach-icon {
    color: #15803d;
    background: #f0fdf4;
}

.alv-card.alv-coach-completion,
.alv-card.alv-coach-story {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .65rem;
    width: auto;
    margin: 0;
    padding: .7rem .9rem;
    border-radius: 16px;
    animation: alv-float 6s ease-in-out infinite;
}

.alv-card.alv-coach-completion {
    top: 18px;
    right: 0;
}

.alv-card.alv-coach-story {
    bottom: 22px;
    left: 0;
    animation-delay: -3s;
}

.alv-coach-completion strong,
.alv-coach-story strong {
    display: block;
    font-size: .8rem;
    color: var(--al-navy);
}

.alv-coach-completion small,
.alv-coach-story small {
    display: block;
    font-size: .68rem;
    color: var(--al-muted);
}

.alv-coach-ring {
    --alv-ring: 0;
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(var(--al-primary) calc(var(--alv-ring) * 1%), #eef6fc 0);
}

.alv-coach-ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #fff;
}

.alv-coach-ring b {
    position: relative;
    font-size: .72rem;
    font-weight: 800;
    color: var(--al-navy);
}

.alv-coach-ring small {
    font-size: .5rem;
}

.alv-coach-story-thumb {
    display: grid;
    place-items: center;
    width: 30px;
    height: 46px;
    border-radius: 7px;
    font-size: .8rem;
    color: #fff;
    background: linear-gradient(160deg, #2980b9, #1d4f7a);
}

@keyframes alv-float {
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .alv-card.alv-coach-completion, .alv-card.alv-coach-story { animation: none; }
}

@media (max-width: 575px) {
    .alv-card.alv-coach-completion { top: -6px; right: -4px; }
    .alv-card.alv-coach-story { bottom: -6px; left: -4px; }
}

.al-compare-others a {
    padding: .25rem .1rem;
}

/* Guide page visuals: completion checklist and share kit */
.alv-card.alv-checklist {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(100%, 360px);
    margin: 0;
    padding: 1.2rem;
}

.alv-checklist-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .4rem;
}

.alv-checklist-head strong {
    display: block;
    font-size: .9rem;
    color: var(--al-navy);
}

.alv-checklist-head small {
    font-size: .72rem;
    color: var(--al-muted);
}

.alv-checklist-step {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--al-muted);
    background: #f6f8fb;
    text-decoration: line-through;
}

.alv-checklist-step :is(i, svg) {
    font-size: .68rem;
    color: #16a34a;
}

.alv-checklist-step.is-todo {
    border: 1px solid var(--al-line);
    color: var(--al-navy);
    background: #fff;
    text-decoration: none;
}

.alv-checklist-step.is-todo :is(i, svg) {
    color: var(--al-primary);
}

.alv-checklist-step .alv-step-arrow {
    margin-left: auto;
    font-size: .6rem;
}

.alv-checklist-step .alv-step-todo-icon,
.alv-checklist-step .alv-step-arrow,
.alv-checklist-step.is-todo .alv-step-done-icon {
    display: none;
}

.alv-checklist-step.is-todo .alv-step-todo-icon,
.alv-checklist-step.is-todo .alv-step-arrow {
    display: inline-block;
}

@property --alv-ring {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

[data-al-checklist] .alv-coach-ring {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    transition: --alv-ring .7s cubic-bezier(.22, 1, .36, 1);
}

[data-al-checklist] .alv-coach-ring::before {
    inset: 4px;
}

[data-al-checklist] .alv-coach-ring b {
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

[data-al-checklist] .alv-checklist-step {
    transition: color .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

[data-al-checklist] .alv-checklist-step.is-active {
    border-color: rgba(41, 128, 185, .45);
    box-shadow: 0 0 0 4px rgba(41, 128, 185, .12);
    transform: translateX(4px);
}

[data-al-checklist] .alv-checklist-step.is-just-done {
    animation: alv-step-done .5s cubic-bezier(.22, 1, .36, 1);
}

[data-al-checklist].is-complete .alv-coach-ring {
    animation: alv-ring-pop .6s cubic-bezier(.22, 1, .36, 1);
}

[data-al-checklist] [data-al-checklist-title],
[data-al-checklist] [data-al-checklist-sub] {
    transition: opacity .2s ease;
}

[data-al-checklist].is-swapping [data-al-checklist-title],
[data-al-checklist].is-swapping [data-al-checklist-sub] {
    opacity: 0;
}

@keyframes alv-step-done {
    40% { transform: scale(1.03); background-color: #ecfdf3; }
}

@keyframes alv-ring-pop {
    40% { transform: scale(1.15); }
}

.alv-share-story {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: 356px;
    padding: 3rem 1rem 1rem;
    border-radius: 26px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 90.7% 13.5%, rgba(255, 255, 255, .08) 0 56px, transparent 56.5px),
        radial-gradient(circle at 7.4% 88.5%, rgba(255, 255, 255, .08) 0 67px, transparent 67.5px),
        linear-gradient(150deg, #2980b9, #1d4f7a);
    box-shadow: 0 0 0 7px #0d1220, 0 30px 60px -24px rgba(13, 18, 32, .6);
}

.alv-share-story-kicker {
    font-size: .72rem;
    opacity: .85;
}

.alv-share-story > strong {
    font-size: 1.05rem;
    font-weight: 800;
}

.alv-share-story-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: 100%;
    margin-top: 1.1rem;
    padding: .9rem .6rem;
    border-radius: 14px;
    color: var(--al-navy);
    background: #fff;
}

.alv-share-story-card small {
    font-size: .6rem;
    color: var(--al-primary);
}

.alv-share-story-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2980b9, #6d5bd0);
}

.alv-share-story-cta {
    margin-top: 1.2rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    color: #1d4f7a;
    background: #fff;
}

.alv-card.alv-share-qr {
    position: absolute;
    z-index: 3;
    top: 30px;
    right: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
    width: auto;
    margin: 0;
    padding: .65rem .85rem;
    border-radius: 16px;
    animation: alv-float 6s ease-in-out infinite;
}

.alv-share-qr-code {
    display: block;
    width: 46px;
    height: 46px;
    color: #1f3a68;
}

.alv-share-qr-code svg {
    width: 100%;
    height: 100%;
}

.alv-share-qr strong,
.alv-share-bio strong {
    display: block;
    font-size: .8rem;
    color: var(--al-navy);
}

.alv-share-qr small,
.alv-share-bio small {
    display: block;
    font-size: .68rem;
    color: var(--al-muted);
}

.alv-share-bio-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af);
}

.al-guide-page .al-page-hero-visual .alv-coach {
    max-width: 620px;
    margin: 0 auto;
}

.al-import-section-actions {
    flex-wrap: wrap;
    gap: .75rem;
}

/* Compare pages: product overview instead of a second card grid */
.al-compare-more .al-page-hero-visual {
    margin-top: 1rem;
    -webkit-mask-image: none;
    mask-image: none;
}

.al-compare-more .al-proof-chips {
    justify-content: center;
    margin: 2.5rem auto 0;
}

.al-compare-more-action {
    margin-top: 1.5rem;
    text-align: center;
}

/* Affiliate page: visuals and earnings simulator */
.alv-aff {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

.alv-aff.alv-aff-solo {
    min-height: 470px;
}

.alv-aff .alv-home-halo { width: 720px; }

.alv-aff-phone {
    position: relative;
    z-index: 2;
}

.alv-aff-badge {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .65rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 10px 24px rgba(15, 23, 42, .18);
    color: var(--al-navy);
    font-size: .62rem;
    font-weight: 600;
    white-space: nowrap;
    transform: translateX(-50%);
}

.alv-aff-badge b { font-weight: 800; color: var(--al-primary); }
.alv-aff-badge :is(i, svg):last-child { font-size: .55rem; color: var(--al-primary); }

.alv-aff-badge .alv-aff-badge-mark {
    flex: none;
    width: .95rem;
    max-width: none;
    height: .95rem;
    border-radius: 28%;
}

.alv-aff-badge.is-pulse {
    animation: alv-aff-pulse 2.6s ease-in-out infinite;
}

@keyframes alv-aff-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 10px 24px rgba(15, 23, 42, .18), 0 0 0 0 rgba(41, 128, 185, .35); }
    50% { box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 10px 24px rgba(15, 23, 42, .18), 0 0 0 10px rgba(41, 128, 185, 0); }
}

.alv-card.alv-aff-earnings {
    position: absolute;
    top: 110px;
    left: calc(50% + 95px);
    z-index: 4;
    width: 290px;
    margin: 0;
    padding: 1.1rem;
}

.alv-aff-earnings .alv-stats-total {
    display: block;
    margin-bottom: .75rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--al-navy);
    letter-spacing: -.02em;
}

.alv-aff-rows {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.alv-aff-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border: 1px solid var(--al-line);
    border-radius: 12px;
    font-size: .74rem;
}

.alv-aff-row > span:nth-child(2) { flex: 1; min-width: 0; }
.alv-aff-row b { display: block; color: var(--al-navy); font-weight: 700; }
.alv-aff-row small { display: block; color: var(--al-muted); font-size: .66rem; }
.alv-aff-row em { color: #16a34a; font-style: normal; font-weight: 800; }

.alv-aff-row.is-new {
    animation: alv-aff-row-in .6s cubic-bezier(.22, 1, .36, 1);
}

@keyframes alv-aff-row-in {
    from { opacity: 0; transform: translateY(-10px) scale(.97); background: #f0fdf4; }
    40% { background: #f0fdf4; }
}

.alv-aff-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2980b9, #8e44ad);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
}

.alv-float.alv-aff-signup {
    top: 70px;
    right: calc(50% + 110px);
}

.alv-float.alv-aff-signup.is-flash {
    animation: alv-aff-flash .7s cubic-bezier(.34, 1.4, .64, 1), alv-float 6s ease-in-out infinite;
}

@keyframes alv-aff-flash {
    40% { transform: scale(1.08); }
}

.alv-float.alv-aff-ref { top: 80px; left: calc(50% + 90px); }
.alv-float.alv-aff-visits { bottom: 120px; right: calc(50% + 100px); }
.alv-float.alv-aff-paid { bottom: 40px; right: 6%; }

.alv-card.alv-aff-link,
.alv-card.alv-aff-payout {
    width: min(100%, 380px);
    margin: 0;
}

.alv-aff-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding: .35rem .35rem .35rem .8rem;
    border: 1px solid var(--al-line);
    border-radius: 12px;
    background: #f8fafc;
    font-size: .8rem;
    color: var(--al-muted);
}

.alv-aff-field b { color: var(--al-navy); }

.alv-aff-copy {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border-radius: 9px;
    background: var(--al-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    transition: background-color .25s ease;
}

.alv-aff-copy [data-copied-label],
[data-al-copy-demo].is-copied .alv-aff-copy [data-copy-label] { display: none; }
[data-al-copy-demo].is-copied .alv-aff-copy [data-copied-label] { display: inline; }
[data-al-copy-demo].is-copied .alv-aff-copy { background: #16a34a; }

.alv-aff-share {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.alv-aff-share span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--al-line);
    border-radius: 11px;
    color: var(--al-navy);
    font-size: .9rem;
}

.alv-aff-note {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    color: var(--al-muted);
}

.alv-aff-note :is(i, svg) { color: var(--al-primary); }

.alv-aff-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: .9rem;
}

.alv-aff-kpis span {
    padding: .65rem .75rem;
    border: 1px solid var(--al-line);
    border-radius: 12px;
}

.alv-aff-kpis small { display: block; color: var(--al-muted); font-size: .66rem; font-weight: 600; }
.alv-aff-kpis b { display: block; color: var(--al-navy); font-size: 1rem; font-weight: 800; }
.alv-aff-kpis .is-ready { border-color: rgba(22, 163, 74, .35); background: #f0fdf4; }
.alv-aff-kpis .is-ready b { color: #15803d; }

.alv-aff-withdraw {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-bottom: .8rem;
    padding: .65rem;
    border-radius: 12px;
    background: var(--al-navy);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.alv-aff-history {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .74rem;
    color: var(--al-navy);
}

.alv-aff-history small { margin-left: auto; color: var(--al-muted); }

@media (max-width: 767px) {
    .alv-aff { flex-direction: column; min-height: 0; gap: 1rem; }
    .alv-card.alv-aff-earnings { position: relative; top: auto; left: auto; margin-top: -120px; }
    .alv-float.alv-aff-signup { top: 20px; right: auto; left: 0; }
    .alv-float.alv-aff-ref { top: 10px; left: auto; right: 0; }
    .alv-float.alv-aff-visits { bottom: 80px; right: auto; left: 0; }
    .alv-float.alv-aff-paid { position: relative; bottom: auto; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .alv-aff-badge.is-pulse, .alv-aff-row.is-new, .alv-float.alv-aff-signup.is-flash { animation: none; }
}

.al-aff-sim {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
    max-width: 880px;
    margin: 0 auto;
    padding: 1.5rem;
    border: 1px solid var(--al-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 60px -40px rgba(21, 58, 87, .35);
}

.al-aff-sim-controls {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .5rem;
}

.al-aff-sim-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--al-navy);
}

.al-aff-sim-label b {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--al-primary);
}

.al-aff-sim input[type="range"] {
    --al-range: 9%;
    width: 100%;
    height: 8px;
    margin-bottom: .75rem;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--al-primary) var(--al-range), #e6ecf5 var(--al-range));
    appearance: none;
    cursor: pointer;
}

.al-aff-sim input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--al-primary);
    box-shadow: 0 2px 8px rgba(21, 58, 87, .35);
    appearance: none;
}

.al-aff-sim input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--al-primary);
    box-shadow: 0 2px 8px rgba(21, 58, 87, .35);
}

.al-aff-sim-plans {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.al-aff-sim-plans button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .65rem .5rem;
    border: 1px solid var(--al-line);
    border-radius: 14px;
    background: #fff;
    color: var(--al-navy);
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.al-aff-sim-plans button small { color: var(--al-muted); font-size: .72rem; font-weight: 600; }
.al-aff-sim-plans button:hover { border-color: rgba(41, 128, 185, .45); }
.al-aff-sim-plans button.is-active { border-color: var(--al-primary); background: #eef6fc; box-shadow: 0 0 0 3px rgba(41, 128, 185, .12); }
.al-aff-sim-plans button:focus-visible { outline: 2px solid var(--al-primary); outline-offset: 2px; }

.al-aff-sim-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    border-radius: 18px;
    background: linear-gradient(150deg, #1b2559, #2980b9);
    color: #fff;
}

.al-aff-sim-result-label { font-size: .85rem; opacity: .8; }

.al-aff-sim-result strong {
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.al-aff-sim-year { margin-top: .35rem; font-size: .95rem; }
.al-aff-sim-year b { font-weight: 800; }
.al-aff-sim-result small { margin-top: 1rem; font-size: .72rem; opacity: .7; }

@media (max-width: 767px) {
    .al-aff-sim { grid-template-columns: 1fr; padding: 1rem; }
}

.alv-aff-flow {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.alv-aff-flow path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.alv-aff-flow-track { stroke: rgba(41, 128, 185, .18); }

.alv-aff-flow-dash {
    stroke: var(--al-primary);
    stroke-dasharray: 5 7;
    animation: alv-aff-dash 1.2s linear infinite;
}

.alv-aff-flow-dot { fill: var(--al-primary); filter: drop-shadow(0 0 6px rgba(41, 128, 185, .6)); }

@keyframes alv-aff-dash { to { stroke-dashoffset: -24; } }

.alv-aff-flow-label {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: var(--al-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 10px 22px -10px rgba(41, 128, 185, .8);
}

.alv-aff .alv-aff-badge.is-pulse { box-shadow: 0 0 0 2px rgba(41, 128, 185, .55), 0 10px 24px rgba(15, 23, 42, .18); }

@media (max-width: 767px) {
    .alv-aff-flow, .alv-aff-flow-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .alv-aff-flow-dash { animation: none; }
    .alv-aff-flow-dot { display: none; }
}

.al-mega-import.is-secondary {
    margin-top: 0;
    padding-top: .35rem;
    border-top: 0;
}

/* Home bento: affiliate card spanning the full row */
.al-bento-card.is-full {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
}

.al-bento-card.is-full .al-bento-visual { flex: 1 1 55%; min-height: 0; }
.al-bento-card.is-full .al-bento-text { flex: 1 1 45%; display: flex; flex-direction: column; justify-content: center; }

.al-bento-affiliate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    height: 100%;
    min-height: 220px;
    padding: 2.5rem 1.5rem;
}

.al-bento-aff-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .8rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(41, 128, 185, .45), 0 10px 24px rgba(15, 23, 42, .14);
    color: var(--al-navy);
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    animation: alv-aff-pulse 2.6s ease-in-out infinite;
}

.al-bento-aff-badge b { color: var(--al-primary); font-weight: 800; }
.al-bento-aff-badge .al-bento-aff-mark { width: 1.05rem; height: 1.05rem; max-width: none; border-radius: 28%; }
.al-bento-aff-arrow { color: var(--al-primary); font-size: .9rem; }

.al-bento-aff-gains {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.al-bento-aff-gains .al-bento-toast { position: static; margin: 0; transform: none; }
.al-bento-card.is-visible .al-bento-aff-gains .al-bento-toast:nth-child(2) { animation-delay: 3.2s; }

@media (max-width: 991px) {
    .al-bento-card.is-full { flex-direction: column; }
}

@media (max-width: 575px) {
    .al-bento-affiliate { flex-direction: column; }
    .al-bento-aff-arrow { transform: rotate(90deg); }
}

.al-bento-note {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--al-line);
    font-size: .78rem;
    line-height: 1.45;
    color: var(--al-muted);
}

.al-bento-note :is(i, svg) { margin-top: .2rem; font-size: .72rem; color: var(--al-primary); }

.alv-coach-completion .alv-coach-ring small {
    display: inline;
    font-size: .5rem;
    color: inherit;
}

.al-bento-card.is-full .al-bento-visual { height: auto; }

/* Affiliate visual inside a split column (features pages) */
.al-split .alv-aff { min-height: 580px; }
.al-split .alv-card.alv-aff-earnings { left: calc(50% + 40px); width: 250px; }
.al-split .alv-float.alv-aff-signup { right: calc(50% + 70px); }

/* Green is kept for meaning only (secure padlock, money gained, live status). Decorative greens use the brand blue */
.alv-float-icon.is-green,
.alv-pill.is-green,
.alv-coach-tip.is-success .alv-coach-icon { background: #e3f0fa; color: var(--al-primary); }
.alv-domain-field em,
.al-bento-url em,
.al-mega-domain em,
.al-bento-browser-bar em { background: #e3f0fa; color: #1f6fa8; }
.al-bento-url em :is(i, svg) { color: #1f6fa8; }
.al-bento-chip,
.alv-sl-clicks { color: #1f6fa8; }
.alv-sl-clicks { background: #eef6fc; }
.alv-checklist-step :is(i, svg),
.alv-dom-ok,
.alv-qruse-ok,
.alv-qrtrack-note { color: var(--al-primary); }
[data-al-copy-demo].is-copied .alv-aff-copy { background: var(--al-navy); }
.alv-aff-kpis .is-ready { border-color: rgba(41, 128, 185, .3); background: #f5f9fd; }
.alv-aff-kpis .is-ready b { color: var(--al-primary); }

/* Phone mockups: some personas use the header block, a rounded cover card with the avatar overlapping it, like on real pages */
.alv-bio-cover {
    position: absolute;
    top: 44px;
    left: 12px;
    right: 12px;
    height: 92px;
    border-radius: 18px;
    background-size: cover;
    box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .45);
}

.alv-phone.has-cover .alv-bio { padding-top: 98px; }
.alv-phone.has-cover .alv-bio-avatar { position: relative; border-color: #fff; }
.alv-phone.has-cover.is-mini .alv-bio-cover { top: 30px; left: 8px; right: 8px; height: 58px; border-radius: 12px; }
.alv-phone.has-cover.is-mini .alv-bio { padding-top: 62px; }

/* Tap feedback on mockup buttons: the ripple starts near the middle (with a little variation) and covers the whole button */
.alv-home-phone .alv-bio-btn::after,
.alv-home-phone .alv-pay-side em::after,
.alv-scene .alv-phone .alv-bio-socials + .alv-bio-btn::after {
    left: var(--al-tap-x, 50%) !important;
}

@keyframes alv-tap-once {
    0% { opacity: .28; transform: scale(.4); }
    100% { opacity: 0; transform: scale(14); }
}

@keyframes alv-tap {
    0%, 8% { opacity: 0; transform: scale(.4); }
    11% { opacity: .24; transform: scale(1); }
    34% { opacity: 0; transform: scale(14); }
    100% { opacity: 0; transform: scale(14); }
}

@keyframes alv-press-once {
    35% { transform: scale(.96); box-shadow: inset 0 0 0 999px rgba(15, 23, 42, .06), 0 2px 6px -4px rgba(27, 37, 89, .35); }
}

@keyframes alv-press {
    0%, 8%, 20%, 100% { transform: none; }
    12% { transform: scale(.97); box-shadow: inset 0 0 0 999px rgba(15, 23, 42, .06); }
}

/* Smartlinks hero: the right phone sits a bit further out so its cover is centred in the visible part of the screen */
@media (min-width: 992px) {
    .alv-ov-sl .alv-ov-phone.is-right { transform: translateX(calc(-50% + 250px)) rotate(5deg) scale(.8); }
}

/* Home affiliate card: the two commissions alternate, so one is always on screen from the first frame */
.al-bento-card .al-bento-aff-gains .al-bento-toast,
.al-bento-card.is-visible .al-bento-aff-gains .al-bento-toast {
    animation: alv-aff-toast 6s ease-in-out infinite both;
}

.al-bento-card .al-bento-aff-gains .al-bento-toast:nth-child(2),
.al-bento-card.is-visible .al-bento-aff-gains .al-bento-toast:nth-child(2) { animation-delay: -3s; }

@keyframes alv-aff-toast {
    0%, 62%, 100% { opacity: 1; transform: none; }
    72%, 88% { opacity: 0; transform: translateY(6px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
    .al-bento-card .al-bento-aff-gains .al-bento-toast { animation: none; opacity: 1; }
}

/* Free plan add-ons heading */
.al-plan-addons-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: 2rem 0 .75rem; padding: 0 .25rem; }
.al-plan-addons-head strong { font-size: 1rem; color: var(--al-ink, #0f172a); }
.al-plan-addons-head span { font-size: .875rem; color: var(--al-muted, #64748b); }