.hero-copy .eyebrow i {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
}

.hero-copy h1 em {
    min-height: 1.08em;
}

.hero-copy h1 em.is-typing::after {
    content: "";
    width: .075em;
    height: .82em;
    display: inline-block;
    margin-left: .08em;
    background: currentColor;
    vertical-align: -.03em;
    animation: typing-caret .75s steps(1) infinite;
}

.sales-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 45;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s, visibility .2s, transform .2s, background-color .2s;
}

.sales-scroll-top i {
    font-size: 21px;
}

.sales-scroll-top:hover {
    background: var(--soft);
    transform: translateY(-2px);
}

.sales-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sales-mobile-overlay,
.sales-mobile-drawer,
.sales-mobile-header-actions {
    display: none;
}

@keyframes typing-caret {
    50% { opacity: 0; }
}

@media (max-width: 700px) {
    body.sales-menu-open {
        overflow: hidden;
        touch-action: none;
    }

    .sales-header {
        height: 66px;
        gap: 7px;
        padding: 0 15px;
    }

    .sales-header .sales-brand > span {
        font-size: 17px;
    }

    .sales-header .sales-menu {
        position: relative;
        z-index: 1;
        order: -1;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 20px;
    }

    .sales-mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }

    .sales-mobile-header-actions button,
    .sales-mobile-header-actions a {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 18px;
        text-decoration: none;
        cursor: pointer;
    }

    .sales-mobile-header-actions button:hover,
    .sales-mobile-header-actions a:hover {
        background: var(--soft);
    }

    .sales-header .sales-menu {
        margin-left: 0;
    }

    .sales-mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: block;
        border: 0;
        background: rgba(8, 10, 14, .56);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .24s ease, visibility .24s ease;
    }

    .sales-mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 100;
        width: min(88vw, 370px);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
        border-right: 1px solid var(--line);
        background: var(--surface);
        color: var(--text);
        box-shadow: 24px 0 60px rgba(0, 0, 0, .2);
        visibility: hidden;
        transform: translateX(-105%);
        transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s;
    }

    .sales-menu-open .sales-mobile-overlay {
        opacity: 1;
        visibility: visible;
    }

    .sales-menu-open .sales-mobile-drawer {
        visibility: visible;
        transform: translateX(0);
    }

    .sales-mobile-drawer > header {
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
    }

    .sales-mobile-drawer .sales-brand img {
        width: 37px;
        height: 37px;
    }

    .sales-mobile-drawer .sales-brand > span {
        font-size: 17px;
    }

    .sales-mobile-drawer > header > button {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface-2);
        color: var(--text);
        font-size: 20px;
    }

    .sales-mobile-intro {
        padding: 20px 18px 12px;
    }

    .sales-mobile-intro > span {
        color: var(--muted);
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .11em;
        text-transform: uppercase;
    }

    .sales-mobile-intro p {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.55;
    }

    .sales-mobile-drawer > nav {
        display: grid;
        gap: 5px;
        padding: 5px 10px 14px;
    }

    .sales-mobile-drawer > nav > a {
        min-height: 58px;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: 11px;
        color: var(--text);
        text-decoration: none;
    }

    .sales-mobile-drawer > nav > a:active,
    .sales-mobile-drawer > nav > a:hover {
        border-color: var(--line);
        background: var(--surface-2);
    }

    .sales-mobile-drawer > nav > a > i:first-child {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: var(--soft);
        color: var(--text);
        font-size: 18px;
    }

    .sales-mobile-drawer > nav > a > i:last-child {
        color: var(--muted);
        font-size: 15px;
    }

    .sales-mobile-drawer > nav span {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .sales-mobile-drawer > nav b {
        font-size: 12px;
    }

    .sales-mobile-drawer > nav small {
        margin-top: 2px;
        color: var(--muted);
        font-size: 9px;
    }

    .sales-mobile-preferences {
        margin: 0 16px;
        padding: 12px 0;
        border-top: 1px solid var(--line);
    }

    .sales-mobile-preferences button {
        width: 100%;
        height: 42px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 11px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: 11px;
        cursor: pointer;
    }

    .sales-mobile-preferences button:hover {
        background: var(--surface-2);
        color: var(--text);
    }

    .sales-mobile-preferences i {
        font-size: 18px;
    }

    .sales-mobile-drawer > footer {
        display: grid;
        gap: 8px;
        margin-top: auto;
        padding: 14px 16px 18px;
        border-top: 1px solid var(--line);
        background: var(--surface);
    }

    .sales-mobile-drawer > footer .button {
        width: 100%;
        height: 44px;
    }

    .sales-scroll-top {
        right: 15px;
        bottom: 15px;
        width: 42px;
        height: 42px;
    }
}

/* Aplicativo oficial: chamada própria, sem competir com as ações principais. */
.hero-app-download {
    width: min(100%, 360px);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 48%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand) 11%, var(--surface));
    color: var(--text);
    text-align: left;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hero-app-download:hover {
    border-color: color-mix(in srgb, var(--brand) 72%, var(--line));
    background: color-mix(in srgb, var(--brand) 14%, var(--surface));
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.hero-app-download:active {
    border-color: color-mix(in srgb, var(--brand) 65%, var(--line));
    background: color-mix(in srgb, var(--brand) 20%, var(--surface));
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, .16);
    transform: translateY(1px);
    transition-duration: .06s;
}

.hero-app-download:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.hero-app-logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.hero-app-logo img { width: 38px; height: 38px; object-fit: contain; }
.hero-app-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.hero-app-copy small { color: var(--brand); font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.hero-app-copy strong { margin-top: 2px; font-size: 12px; line-height: 1.25; }
.hero-app-copy em { margin-top: 2px; color: var(--muted); font-size: 9px; font-style: normal; }
.hero-app-action { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; padding: 0; border-radius: 50%; background: var(--brand); color: #fff; }
.hero-app-action i { font-size: 16px; }
.hero-app-download:hover .hero-app-action,
.hero-app-download:active .hero-app-action { box-shadow: none; transform: none; }

@media (max-width: 1050px) {
    .hero-app-download { margin-inline: auto; }
}

@media (max-width: 520px) {
    .hero-app-download { align-items: center; padding: 11px; }
}

/* Aplicativo fora do hero: conteúdo informativo com ação própria. */
.sales-app-band {
    max-width: 1240px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 28px auto 0;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.sales-app-identity { min-width: 0; display: flex; align-items: center; gap: 15px; }
.sales-app-logo { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 58px; border-radius: 14px; background: var(--soft); }
.sales-app-logo img { width: 53px; height: 53px; object-fit: contain; }
.sales-app-identity small { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.sales-app-identity h2 { margin: 3px 0 2px; font-size: 17px; line-height: 1.25; }
.sales-app-identity p { margin: 0; color: var(--muted); font-size: 11px; }
.sales-app-button { min-width: 190px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; flex: 0 0 auto; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--brand) 72%, var(--line)); border-radius: 10px; background: var(--brand); color: #fff; text-decoration: none; transition: background .16s ease, transform .08s ease, box-shadow .16s ease; }
.sales-app-button > i { font-size: 19px; }
.sales-app-button > span { display: flex; flex-direction: column; line-height: 1.15; }
.sales-app-button small { color: rgba(255,255,255,.72); font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.sales-app-button strong { margin-top: 2px; font-size: 11px; }
.sales-app-button:hover { background: var(--brand-2); }
.sales-app-button:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.2); transform: translateY(1px); }
.sales-app-button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.sales-app-button.is-preparing-download { position: relative; overflow: hidden; min-width: 190px; cursor: wait; pointer-events: none; }
.apk-download-spinner { position: relative; z-index: 1; animation: apk-download-spin .8s linear infinite; }
.apk-download-status { position: relative; z-index: 1; display: flex; flex-direction: column; line-height: 1.15; }
.apk-download-status small { color: rgba(255,255,255,.72); font-size: 7px; font-weight: 800; letter-spacing: .07em; }
.apk-download-status strong { margin-top: 2px; font-size: 11px; }
.apk-download-progress { position: absolute; z-index: 0; left: 0; bottom: 0; width: 0; height: 3px; background: rgba(255,255,255,.75); animation: apk-download-fill 3s linear forwards; }
.sales-app-button.is-download-complete { cursor: default; border-color: color-mix(in srgb, var(--green) 62%, var(--line)); background: color-mix(in srgb, var(--green) 72%, #18211d); }
.sales-app-button.is-download-complete > i { font-size: 19px; }
@keyframes apk-download-spin { to { transform: rotate(360deg); } }
@keyframes apk-download-fill { to { width: 100%; } }

@media (max-width: 1288px) {
    .sales-app-band { margin-inline: 24px; }
}

@media (max-width: 700px) {
    .sales-app-band { align-items: stretch; flex-direction: column; margin: 18px 16px 0; padding: 16px; }
    .sales-app-button { width: 100%; }
    .sales-app-identity p { line-height: 1.5; }
}

/* Cabeçalho de vidro da página de apresentação. */
.sales-header {
    border-bottom-color: rgba(15, 23, 42, 0.14);
    background: rgba(246, 248, 252, 0.68);
    background-image: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

[data-theme="dark"] .sales-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
    background: rgba(17, 19, 24, 0.68);
    background-image: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

/* Todas as ações textuais da apresentação compartilham a paleta clara. */
[data-theme="light"] .button,
[data-theme="light"] .button.primary,
[data-theme="light"] .button.secondary,
[data-theme="light"] .button.ghost {
    border-color: #59677a;
    background: #64748b;
    color: #ffffff;
}

[data-theme="light"] .button:hover,
[data-theme="light"] .button.primary:hover,
[data-theme="light"] .button.secondary:hover,
[data-theme="light"] .button.ghost:hover {
    border-color: #495768;
    background: #526174;
    color: #ffffff;
}

/* Todas as ações textuais da apresentação compartilham a paleta escura. */
[data-theme="dark"] .button,
[data-theme="dark"] .button.primary,
[data-theme="dark"] .button.secondary,
[data-theme="dark"] .button.ghost {
    border-color: #596779;
    background: #3f4856;
    color: #f8fafc;
}

[data-theme="dark"] .button:hover,
[data-theme="dark"] .button.primary:hover,
[data-theme="dark"] .button.secondary:hover,
[data-theme="dark"] .button.ghost:hover {
    border-color: #68778a;
    background: #4c5868;
    color: #ffffff;
}

@media (max-width: 360px) {
    .sales-header > .sales-brand > span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy h1 em.is-typing::after {
        animation: none;
    }

    .sales-scroll-top {
        transition: none;
    }

    .sales-mobile-overlay,
    .sales-mobile-drawer {
        transition: none;
    }
}

/* Menu mobile da apresentação alinhado ao vidro da sidebar do sistema. */
@media (max-width: 700px) {
    .sales-mobile-overlay {
        left: min(88vw, 370px);
        background: rgba(0, 0, 0, 0.80);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .sales-mobile-drawer {
        border-right-color: rgba(15, 23, 42, 0.16);
        background: rgba(246, 248, 252, 0.68);
        background-image: none;
        box-shadow: 24px 0 60px rgba(15, 23, 42, 0.30), inset -1px 0 0 rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(20px) saturate(145%);
        -webkit-backdrop-filter: blur(20px) saturate(145%);
    }

    [data-theme="dark"] .sales-mobile-drawer {
        border-right-color: rgba(255, 255, 255, 0.12);
        background: rgba(17, 19, 24, 0.68);
        background-image: none;
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.52), inset -1px 0 0 rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(20px) saturate(145%);
        -webkit-backdrop-filter: blur(20px) saturate(145%);
    }

    .sales-mobile-drawer > header,
    .sales-mobile-drawer > footer {
        background: transparent;
        background-image: none;
    }
}

/* Ritmo vertical mais compacto entre as seções da apresentação. */
main > .sales-section {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Compensa o espaço interno das seções ao navegar pelos links do cabeçalho. */
html {
    scroll-padding-top: 46px;
}

main > .sales-hero {
    min-height: 620px;
    padding-top: 48px;
    padding-bottom: 48px;
}

@media (max-width: 700px) {
    main > .sales-section,
    main > .sales-section.outcomes {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    html {
        scroll-padding-top: 40px;
    }

    main > .sales-hero {
        padding-top: 42px;
        padding-bottom: 42px;
    }
}

/* Vidro compartilhado com o cabeçalho e a navegação do sistema. */
.sales-header {
    background: transparent !important;
    background-image: none !important;
    border-bottom-color: rgba(15, 23, 42, .16) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

[data-theme="dark"] .sales-header {
    background: rgba(0, 0, 0, .4) !important;
    background-image: none !important;
    border-bottom-color: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* O Pro usa a mesma proporção, peso e cinza do logotipo do painel. */
.sales-brand b {
    margin-left: .18em;
    color: #8a8a8a !important;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
}

.sales-brand > span {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}

[data-theme="dark"] .sales-brand b {
    color: #afafaf !important;
}

@media (max-width: 700px) {
    .sales-mobile-drawer {
        background: transparent !important;
        background-image: none !important;
        border-right-color: rgba(15, 23, 42, .16) !important;
        box-shadow: 24px 0 60px rgba(15, 23, 42, .30), inset -1px 0 0 rgba(255, 255, 255, .24) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    [data-theme="dark"] .sales-mobile-drawer {
        background: rgba(0, 0, 0, .6) !important;
        background-image: none !important;
        border-right-color: rgba(255, 255, 255, .14) !important;
        box-shadow: 24px 0 60px rgba(0, 0, 0, .52), inset -1px 0 0 rgba(255, 255, 255, .08) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .sales-mobile-drawer > header,
    .sales-mobile-drawer > footer {
        background: transparent !important;
        background-image: none !important;
    }
}

/* Menu mobile do site: mesmo overlay do sistema e contraste legível nos dois temas. */
@media (max-width: 700px) {
    .sales-mobile-overlay {
        background: rgba(0, 0, 0, .4) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    .sales-mobile-drawer,
    .sales-mobile-drawer > header,
    .sales-mobile-drawer > footer {
        color: #0f172a !important;
    }

    .sales-mobile-drawer {
        background: rgba(255, 255, 255, .6) !important;
    }

    .sales-mobile-drawer .sales-brand > span,
    .sales-mobile-drawer > nav > a,
    .sales-mobile-drawer > nav b,
    .sales-mobile-drawer > header > button {
        color: #0f172a !important;
    }

    .sales-mobile-drawer .sales-mobile-intro > span,
    .sales-mobile-drawer .sales-mobile-intro p,
    .sales-mobile-drawer > nav > a > i:last-child,
    .sales-mobile-drawer .sales-mobile-preferences button {
        color: #475569 !important;
    }

    .sales-mobile-drawer > nav small {
        color: #000000 !important;
    }

    .sales-mobile-drawer > nav > a:hover,
    .sales-mobile-drawer > nav > a:active,
    .sales-mobile-drawer .sales-mobile-preferences button:hover {
        border-color: rgba(15, 23, 42, .16) !important;
        background: rgba(15, 23, 42, .08) !important;
    }

    .sales-mobile-drawer > nav > a > i:first-child {
        background: rgba(15, 23, 42, .09) !important;
        color: #0f172a !important;
    }

    .sales-mobile-drawer > header,
    .sales-mobile-drawer .sales-mobile-preferences,
    .sales-mobile-drawer > footer {
        border-color: rgba(15, 23, 42, .16) !important;
    }

    [data-theme="dark"] .sales-mobile-drawer,
    [data-theme="dark"] .sales-mobile-drawer > header,
    [data-theme="dark"] .sales-mobile-drawer > footer {
        color: #f8fafc !important;
    }

    [data-theme="dark"] .sales-mobile-drawer .sales-brand > span,
    [data-theme="dark"] .sales-mobile-drawer > nav > a,
    [data-theme="dark"] .sales-mobile-drawer > nav b,
    [data-theme="dark"] .sales-mobile-drawer > header > button {
        color: #f8fafc !important;
    }

    [data-theme="dark"] .sales-mobile-drawer .sales-mobile-intro > span,
    [data-theme="dark"] .sales-mobile-drawer .sales-mobile-intro p,
    [data-theme="dark"] .sales-mobile-drawer > nav small,
    [data-theme="dark"] .sales-mobile-drawer > nav > a > i:last-child,
    [data-theme="dark"] .sales-mobile-drawer .sales-mobile-preferences button {
        color: #cbd5e1 !important;
    }

    [data-theme="dark"] .sales-mobile-drawer > nav > a:hover,
    [data-theme="dark"] .sales-mobile-drawer > nav > a:active,
    [data-theme="dark"] .sales-mobile-drawer .sales-mobile-preferences button:hover {
        border-color: rgba(255, 255, 255, .14) !important;
        background: rgba(255, 255, 255, .09) !important;
    }

    [data-theme="dark"] .sales-mobile-drawer > nav > a > i:first-child {
        background: rgba(255, 255, 255, .1) !important;
        color: #f8fafc !important;
    }

    [data-theme="dark"] .sales-mobile-drawer > header,
    [data-theme="dark"] .sales-mobile-drawer .sales-mobile-preferences,
    [data-theme="dark"] .sales-mobile-drawer > footer {
        border-color: rgba(255, 255, 255, .14) !important;
    }
}