/* ============================================================
   VIP LIST · FABRICATOR
   Acréscimos sobre viplist.css. Não altera nada do arquivo base:
   só componentes novos (dores, prova, Calendly pós-envio) e
   utilitários de acessibilidade.
   ============================================================ */

/* Texto só para leitor de tela */
.visually-hidden-sw {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Preço Black Friday ao lado do VIP, no hero */
.fab-compare {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    border-radius: var(--sw-radius-sm);
    background: var(--sw-surface-1);
    border: 1px dashed var(--sw-line-soft);
    font-size: 14px;
    color: var(--sw-gray-500);
}
    .fab-compare s { color: var(--sw-gray-600); text-decoration-color: var(--sw-danger); text-decoration-thickness: 2px; }
    .fab-compare b { color: var(--sw-amber); font-size: 16px; }

/* ------------------------------------------------------------
   DORES DO FABRICATOR: cena -> como o SlabWare resolve
   ------------------------------------------------------------ */
.fab-pain {
    position: relative;
    height: 100%;
    padding: 28px;
    border-radius: var(--sw-radius);
    background: var(--sw-surface-1);
    border: 1px solid var(--sw-line-soft);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .35s var(--vip-ease), border-color .35s ease;
}
    .fab-pain:hover { transform: translateY(-4px); border-color: rgba(var(--sw-amber-rgb), .5); }

.fab-pain-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(var(--sw-amber-rgb), .12);
    color: var(--sw-amber);
    font-size: 20px;
}
.fab-pain h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sw-white);
    margin: 0;
}
.fab-pain .fab-fix {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sw-gray-400);
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid var(--sw-amber);
}
.fab-pain .fab-tag {
    margin-top: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--sw-gray-600);
}

/* ------------------------------------------------------------
   PROVA: números do site oficial
   ------------------------------------------------------------ */
.fab-proof {
    padding: 44px 0;
    border-bottom: 1px solid var(--sw-line);
}
.fab-proof-item b {
    display: block;
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--sw-amber);
    font-variant-numeric: tabular-nums;
}
.fab-proof-item span {
    font-size: 14px;
    color: var(--sw-gray-500);
}

/* Selo do plano em destaque: aba presa no topo do card,
   fora do fluxo, para os três cards continuarem alinhados */
.vip-plan .plan-flag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 14px 4px;
    border-radius: 0 0 10px 10px;
    background: var(--sw-amber);
    color: #000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}

/* ------------------------------------------------------------
   PÓS-ENVIO: Calendly dentro do card do formulário
   ------------------------------------------------------------ */
.vip-form-card.is-sent .vip-form-success { text-align: left; padding-top: 0; }
.fab-success-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
    .fab-success-head i { font-size: 32px; }
    .fab-success-head h2 { margin: 0; }
.fab-calendly {
    width: 100%;
    height: 640px;
    border: 0;
    border-radius: var(--sw-radius-sm);
    background: var(--sw-white);
}
@media (max-width: 575px) {
    .fab-calendly { height: 720px; }
}
.fab-calendly-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--sw-gray-500);
}

.vip-form-error {
    display: none;
    margin-top: 12px;
    font-size: 14px;
    color: var(--sw-danger);
}
.vip-form-error.is-on { display: block; }

/* Depois do envio a página rola até o card: compensa a topbar fixa */
#formCard { scroll-margin-top: 84px; }
.vip-form-success:focus { outline: none; }
.vip-topbar .sw-btn-amber { text-decoration: none; }

/* ------------------------------------------------------------
   CONTADOR GRANDE (hero, preços, CTA final) até 20/11
   ------------------------------------------------------------ */
.fab-countdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}
.fab-countdown--center { align-items: center; margin-top: 0; }
.fab-countdown-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sw-gray-500);
}
.vip-countdown--big { gap: 10px; }
    .vip-countdown--big .unit {
        min-width: 76px;
        padding: 12px 10px 10px;
        border: 1px solid rgba(var(--sw-amber-rgb), .35);
        background: rgba(var(--sw-amber-rgb), .06);
        border-radius: var(--sw-radius);
    }
    .vip-countdown--big .unit b { font-size: 34px; font-weight: 800; line-height: 1; }
    .vip-countdown--big .unit span { font-size: 11px; margin-top: 6px; }
@media (max-width: 400px) {
    .vip-countdown--big { gap: 6px; }
    .vip-countdown--big .unit { min-width: 0; flex: 1; padding: 10px 6px 8px; }
    .vip-countdown--big .unit b { font-size: 28px; }
}

/* Telas de 320px: o contador do topo não cabia ao lado do logo */
@media (max-width: 360px) {
    .vip-topbar .vip-countdown { gap: 3px; }
    .vip-topbar .vip-countdown .unit { min-width: 36px; padding: 4px 3px; }
    .vip-topbar img { width: 110px; height: auto; }
}

/* ------------------------------------------------------------
   HERO: Calendly embutido (desktop e mobile)
   ------------------------------------------------------------ */
.vip-hero h1 { font-size: clamp(36px, 4.6vw, 58px); }

.fab-book {
    position: relative;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface-1);
    border: 1px solid rgba(var(--sw-amber-rgb), .45);
    box-shadow: var(--sw-shadow-amber);
    padding: 18px;
    scroll-margin-top: 84px;
}
.fab-book-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 6px 14px;
}
.fab-book-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--sw-white);
}
.fab-book-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--sw-gray-500);
}
.fab-book-spots {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--sw-radius-pill);
    background: rgba(var(--sw-amber-rgb), .12);
    color: var(--sw-amber);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* A caixa branca do Calendly. Altura mínima enquanto carrega;
   depois o widget (data-resize) ajusta sozinho à altura real. */
.fab-book-frame {
    position: relative;
    min-width: 280px;
    min-height: 660px;
    border-radius: var(--sw-radius);
    overflow: hidden;
    background: #fff;
}
    .fab-book-frame iframe { display: block; width: 100% !important; border: 0; }
    /* esqueleto enquanto o Calendly não chega */
    .fab-book-frame:not(:has(iframe))::before {
        content: "Loading calendar…";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #6b7280;
    }
    .fab-book-frame .calendly-spinner { display: none; }

.fab-book-note {
    margin: 10px 6px 0;
    font-size: 12px;
    color: var(--sw-gray-600);
}
    .fab-book-note a { color: var(--sw-gray-500); }

@media (max-width: 575px) {
    .fab-book { padding: 10px; margin: 0 -4px; }
    .fab-book-head { padding: 6px 6px 12px; }
    .fab-book-frame { min-height: 900px; }
}

/* ------------------------------------------------------------
   DORES: print real do Drawing + lista simples
   ------------------------------------------------------------ */
.fab-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sw-radius);
    border: 1px solid var(--sw-line-soft);
    background: #fff;
}
.fab-shot figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--sw-gray-600);
}
.fab-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
    .fab-list li {
        padding: 16px 0;
        border-bottom: 1px solid var(--sw-line);
        font-size: 15px;
        line-height: 1.6;
        color: var(--sw-gray-400);
    }
    .fab-list li:first-child { padding-top: 0; }
    .fab-list b {
        display: block;
        margin-bottom: 4px;
        font-size: 17px;
        color: var(--sw-white);
    }

/* Hero em duas faixas: promessa em cima, Calendly largo embaixo */
.vip-hero .fab-countdown { margin-top: 18px; }
.fab-book { max-width: 1060px; margin: 8px auto 0; }
.fab-book-frame { height: 720px; min-height: 0; }
    .fab-book-frame iframe { height: 100% !important; }
@media (max-width: 991px) {
    .fab-book-frame { height: 1080px; }
}
@media (max-width: 575px) {
    .fab-book-frame { height: 1120px; }
}

/* Clipe 2D → 3D do Drawing */
.fab-shot-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 642;
    border-radius: var(--sw-radius);
    border: 1px solid var(--sw-line-soft);
    background: #2b2b2b;
    object-fit: cover;
}

/* ------------------------------------------------------------
   HERO CENTRALIZADO: oferta + escada de preço + prazo
   ------------------------------------------------------------ */
.fab-hero {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fab-hero .vip-eyebrow { margin-bottom: 22px; }
.vip-hero h1.fab-hero-title {
    font-size: clamp(38px, 6.2vw, 76px);
    line-height: 1.02;
    margin: 0 0 22px;
    text-wrap: balance;
}
    .fab-hero-title .amber { display: block; }
.fab-hero-sub {
    max-width: 600px;
    margin: 0 0 34px;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.55;
    color: var(--sw-gray-400);
    text-wrap: balance;
}
    .fab-hero-sub b { color: var(--sw-amber); font-weight: 700; }

/* Escada: $149 -> $129 -> $119 */
.fab-ladder {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 640px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 10px;
    align-items: end;
}
.fab-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 10px 14px;
    border-radius: var(--sw-radius);
    background: var(--sw-surface-1);
    border: 1px solid var(--sw-line-soft);
}
.fab-step-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sw-gray-500);
}
.fab-step-price {
    font-size: clamp(24px, 3.4vw, 32px);
    font-weight: 800;
    line-height: 1;
    color: var(--sw-gray-400);
    font-variant-numeric: tabular-nums;
}
    s.fab-step-price {
        color: var(--sw-gray-600);
        text-decoration-color: var(--sw-danger);
        text-decoration-thickness: 3px;
    }
.fab-step.is-vip {
    padding: 22px 10px 18px;
    border-color: var(--sw-amber);
    background: linear-gradient(180deg, rgba(var(--sw-amber-rgb), .16), rgba(var(--sw-amber-rgb), .04));
    box-shadow: var(--sw-shadow-amber);
}
    .fab-step.is-vip .fab-step-label { color: var(--sw-amber); }
    .fab-step.is-vip .fab-step-price { font-size: clamp(34px, 5vw, 46px); color: var(--sw-amber); }
    .fab-step.is-vip small { font-size: 15px; font-weight: 600; color: var(--sw-gray-500); margin-left: 2px; }
.fab-ladder-note {
    margin: 12px 0 30px;
    font-size: 13px;
    color: var(--sw-gray-600);
}
.fab-hero .fab-countdown { margin: 0; }

@media (max-width: 575px) {
    .fab-ladder { gap: 6px; }
    .fab-step { padding: 12px 4px 10px; }
    .fab-step-label { font-size: 9px; letter-spacing: .5px; }
    .fab-step.is-vip { padding: 16px 4px 14px; }
    .fab-step.is-vip small { font-size: 12px; }
}

/* Destaque em amarelo no que importa */
.hl { color: var(--sw-amber); font-weight: 600; }

/* Vagas restantes + CTA do hero */
.fab-spots {
    width: 100%;
    max-width: 420px;
    margin: 0 0 22px;
}
.fab-spots-text {
    font-size: 15px;
    color: var(--sw-gray-400);
    margin-bottom: 8px;
}
    .fab-spots-text b { color: var(--sw-amber); font-size: 20px; font-weight: 800; }
.fab-spots-bar {
    height: 8px;
    border-radius: var(--sw-radius-pill);
    background: var(--sw-surface-3);
    overflow: hidden;
}
    .fab-spots-bar span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--sw-amber-deep), var(--sw-amber));
        transition: width .8s var(--vip-ease);
    }
.fab-hero-cta {
    display: inline-block;
    padding: 15px 34px;
    font-size: 17px;
    margin-bottom: 36px;
}

/* ------------------------------------------------------------
   CARTÃO DA OFERTA (hero): preços + vagas + prazo + CTA
   ------------------------------------------------------------ */
.fab-offer {
    width: 100%;
    max-width: 680px;
    padding: 22px;
    border-radius: var(--sw-radius-lg);
    background: rgba(13, 13, 13, .85);
    border: 1px solid var(--sw-line-soft);
    text-align: left;
}
.fab-offer .fab-ladder { max-width: none; }
.fab-offer .fab-ladder-note { margin: 10px 0 18px; text-align: center; }

.fab-offer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    margin-bottom: 18px;
    border-top: 1px solid var(--sw-line);
    border-bottom: 1px solid var(--sw-line);
}
.fab-offer .fab-spots { flex: 1; max-width: 260px; margin: 0; }
.fab-offer .fab-spots-text { font-size: 14px; margin-bottom: 8px; }
    .fab-offer .fab-spots-text b { font-size: 18px; }

.fab-mini-cd { display: flex; align-items: center; gap: 10px; }
.fab-mini-cd-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sw-gray-500);
    white-space: nowrap;
}
.fab-mini-cd .vip-countdown .unit { background: var(--sw-surface-3); }

.fab-offer-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 20px;
    font-size: 17px;
}

@media (max-width: 575px) {
    .fab-offer { padding: 14px; }
    .fab-offer-meta { flex-direction: column; align-items: stretch; gap: 14px; }
    .fab-offer .fab-spots { max-width: none; }
    .fab-mini-cd { justify-content: space-between; }
}
@media (max-width: 575px) {
    .fab-offer-cta { font-size: 16px; padding: 14px 12px; white-space: nowrap; }
}

/* Degrau "You save" da escada do hero */
.fab-step.is-save .fab-step-price { color: var(--sw-white); }
.fab-step-sub { font-size: 12px; color: var(--sw-gray-500); }

/* Antes de 20/10: só a data de início, sem contagem regressiva.
   A contagem aparece a partir de 20/10, contando até 20/11. */
html[data-campaign-phase="pre"] .vip-countdown { display: none !important; }
html[data-campaign-phase="pre"] .fab-countdown-label,
html[data-campaign-phase="pre"] .fab-mini-cd-label {
    font-size: 15px;
    letter-spacing: .5px;
    color: var(--sw-amber);
}
html[data-campaign-phase="pre"] .fab-mini-cd { margin-left: auto; }
html[data-campaign-phase="pre"] .vip-topbar-label { color: var(--sw-amber) !important; }
@media (max-width: 991px) {
    html[data-campaign-phase="pre"] .vip-topbar .vip-topbar-label { display: inline !important; font-size: 10px !important; letter-spacing: 1px !important; }
}

/* ------------------------------------------------------------
   RETA FINAL (prazo real): últimos 7 dias e últimas 48h
   ------------------------------------------------------------ */
.fab-urgency {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 8px 16px;
    border-radius: var(--sw-radius-pill);
    background: rgba(220, 53, 69, .14);
    border: 1px solid rgba(220, 53, 69, .55);
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 700;
}
.fab-urgency[hidden] { display: none; }
.fab-urgency-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff4d4d;
    animation: fab-pulse 1.2s ease-in-out infinite;
}
@keyframes fab-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(1.6); }
}
html[data-urgency] .vip-countdown .unit {
    border-color: rgba(220, 53, 69, .6) !important;
    background: rgba(220, 53, 69, .12) !important;
}
html[data-urgency] .vip-countdown .unit b { color: #ff6b6b; }
html[data-urgency] .fab-mini-cd-label,
html[data-urgency] .vip-topbar-label { color: #ff6b6b !important; }
html[data-urgency="final"] .vip-countdown { animation: fab-pulse-soft 1.6s ease-in-out infinite; }
@keyframes fab-pulse-soft { 50% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
    .fab-urgency-dot, html[data-urgency="final"] .vip-countdown { animation: none; }
}

/* Vagas reais baixas (10 ou menos) */
html.spots-low .fab-spots-bar span { background: linear-gradient(90deg, #c92a2a, #ff6b6b); }
html.spots-low .fab-spots-text b,
html.spots-low .fab-book-spots { color: #ff6b6b; }
html.spots-low .fab-book-spots { background: rgba(220, 53, 69, .14); }
/* "left" no título só quando as vagas reais já baixaram */
.spots-left-word { display: none; }
html.spots-low .spots-left-word { display: inline; }

/* ------------------------------------------------------------
   HERO: tela real do Drawing ao lado da oferta
   ------------------------------------------------------------ */
.fab-hero { max-width: 1140px; }
.vip-hero h1.fab-hero-title { max-width: 900px; }
.fab-hero-sub { max-width: 660px; }

.fab-hero-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 28px;
    align-items: center;
    text-align: left;
}
.fab-hero-grid .fab-offer { max-width: none; }

.fab-app {
    border-radius: var(--sw-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sw-line-soft);
    background: #2b2b2b;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--sw-amber-rgb), .08);
}
.fab-app-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #141414;
    border-bottom: 1px solid var(--sw-line);
}
    .fab-app-bar span { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
    .fab-app-bar em {
        margin-left: 8px;
        font-style: normal;
        font-size: 12px;
        font-weight: 600;
        color: var(--sw-gray-500);
    }
.fab-app-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 642;
    background: #2b2b2b;
}

/* Fluxo do fabricator: medir -> desenhar -> 3D -> orçar -> CNC -> instalar */
.fab-flow {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    align-items: center;
}
    .fab-flow li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: var(--sw-radius-pill);
        background: var(--sw-surface-1);
        border: 1px solid var(--sw-line-soft);
        font-size: 13px;
        font-weight: 600;
        color: var(--sw-gray-400);
    }
    .fab-flow li i { color: var(--sw-amber); }
    .fab-flow li + li::before {
        content: "→";
        margin: 0 4px 0 -2px;
        color: var(--sw-gray-600);
        order: -1;
    }

@media (max-width: 991px) {
    .fab-hero-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 575px) {
    .fab-flow li { font-size: 12px; padding: 5px 8px; }
}

/* Fluxo: setas entre as etapas, fora das pílulas */
.fab-flow { gap: 8px 18px; }
    .fab-flow li { position: relative; }
    .fab-flow li + li::before {
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
@media (max-width: 575px) {
    .fab-flow { gap: 8px 16px; }
    .fab-flow li + li::before { left: -13px; }
}

/* Cartão ao lado do vídeo: vagas e prazo empilhados, sem quebrar o texto */
.fab-hero-grid .fab-offer-meta { flex-direction: column; align-items: stretch; gap: 12px; }
.fab-hero-grid .fab-spots { max-width: none; }
.fab-hero-grid .fab-mini-cd { justify-content: space-between; }
html[data-campaign-phase="pre"] .fab-hero-grid .fab-mini-cd { margin-left: 0; }
@media (max-width: 575px) {
    .fab-flow { gap: 6px; }
    .fab-flow li + li::before { content: none; }
}

/* ------------------------------------------------------------
   LOGOS DE CLIENTES (no lugar da faixa que repetia o topo)
   ------------------------------------------------------------ */
.fab-logos {
    padding: 34px 0 30px;
    border-top: 1px solid var(--sw-line);
    border-bottom: 1px solid var(--sw-line);
    background: var(--sw-surface-1);
}
.fab-logos-title {
    margin: 0 0 18px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sw-gray-500);
}
.fab-logos-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 28px;
}
    .fab-logos-row img {
        display: block;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        filter: grayscale(1);
        opacity: .8;
        transition: filter .3s ease, opacity .3s ease;
    }
    .fab-logos-row img:hover { filter: none; opacity: 1; }
@media (max-width: 575px) {
    .fab-logos-row { gap: 14px 16px; }
    .fab-logos-row img { width: 58px; height: 58px; }
}

/* ------------------------------------------------------------
   DEPOIMENTOS
   ------------------------------------------------------------ */
.fab-reviews {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: start;
}
.fab-films { display: flex; gap: 16px; }
.fab-film {
    position: relative;
    margin: 0;
    width: 230px;
}
    .fab-film video {
        display: block;
        width: 100%;
        aspect-ratio: 9 / 16;
        object-fit: cover;
        border-radius: var(--sw-radius);
        border: 1px solid var(--sw-line-soft);
        background: #111;
    }
    .fab-film figcaption {
        margin-top: 10px;
        font-size: 13px;
        color: var(--sw-gray-500);
    }
        .fab-film figcaption b { display: block; color: var(--sw-white); font-size: 15px; }
.fab-film-play {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 0;
    background: var(--sw-amber);
    color: #000;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    cursor: pointer;
    transition: transform .2s ease;
}
    .fab-film-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.fab-film.is-playing .fab-film-play { display: none; }

.fab-quotes { display: grid; gap: 16px; }
.fab-quote {
    margin: 0;
    padding: 22px 24px;
    border-radius: var(--sw-radius);
    background: var(--sw-surface-1);
    border: 1px solid var(--sw-line-soft);
    border-left: 3px solid var(--sw-amber);
}
    .fab-quote img { float: right; width: 44px; height: 44px; border-radius: 50%; margin: 0 0 8px 12px; }
    .fab-quote p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--sw-gray-400); }
    .fab-quote footer b { display: block; color: var(--sw-white); font-size: 15px; }
    .fab-quote footer span { font-size: 13px; color: var(--sw-amber); }

@media (max-width: 991px) {
    .fab-reviews { grid-template-columns: 1fr; }
    .fab-films { justify-content: center; }
}
@media (max-width: 575px) {
    .fab-films { gap: 10px; }
    .fab-film { width: calc(50% - 5px); }
}

/* O vídeo (1280px) não pode alargar a coluna do grid no celular */
.fab-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.fab-hero-grid > * { min-width: 0; }
@media (max-width: 991px) {
    .fab-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   DRAWING → DXF → CNC
   ------------------------------------------------------------ */
.fab-dxf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 250px);
    gap: 22px;
    align-items: center;
}
.fab-dxf img, .fab-dxf video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sw-radius);
    border: 1px solid var(--sw-line-soft);
    background: #111;
}
.fab-dxf-shop video { aspect-ratio: 9 / 16; object-fit: cover; }
.fab-dxf figcaption { margin-top: 10px; font-size: 13px; color: var(--sw-gray-600); }
.fab-dxf-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--sw-radius);
    background: rgba(var(--sw-amber-rgb), .12);
    border: 1px solid rgba(var(--sw-amber-rgb), .5);
    color: var(--sw-amber);
}
    .fab-dxf-arrow b { font-size: 16px; font-weight: 800; letter-spacing: 1px; }
    .fab-dxf-arrow i { font-size: 22px; }

.fab-dxf-steps {
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
    .fab-dxf-steps li {
        display: flex;
        gap: 14px;
        padding: 20px;
        border-radius: var(--sw-radius);
        background: var(--sw-surface-1);
        border: 1px solid var(--sw-line-soft);
    }
    .fab-dxf-steps .n {
        flex: none;
        width: 32px; height: 32px;
        border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--sw-amber);
        color: #000;
        font-weight: 800;
    }
    .fab-dxf-steps b { display: block; color: var(--sw-white); font-size: 17px; margin-bottom: 4px; }
    .fab-dxf-steps p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sw-gray-400); }

@media (max-width: 991px) {
    .fab-dxf { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .fab-dxf-screen { width: 100%; }
    .fab-dxf-shop { width: min(260px, 70%); }
    .fab-dxf-arrow { flex-direction: row; }
        .fab-dxf-arrow i { transform: rotate(90deg); }
    .fab-dxf-steps { grid-template-columns: minmax(0, 1fr); }
}

/* FAQ: começa compacto e cresce com a conversa (antes abria com um vazio de ~500px) */
.bf-chat { height: auto; }
.bf-chat__log { min-height: 120px; max-height: 460px; }

/* ------------------------------------------------------------
   HERO: manchete com o Professional + 3 números da oferta
   ------------------------------------------------------------ */
.vip-hero h1.fab-hero-title { font-size: clamp(34px, 5.2vw, 64px); margin-bottom: 20px; }
.fab-facts {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
    .fab-facts li {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 10px 18px;
        border-radius: var(--sw-radius-pill);
        background: rgba(var(--sw-amber-rgb), .1);
        border: 1px solid rgba(var(--sw-amber-rgb), .45);
    }
    .fab-facts b { font-size: 26px; font-weight: 800; line-height: 1; color: var(--sw-amber); }
    .fab-facts span { font-size: 14px; font-weight: 600; color: var(--sw-white); }
.fab-ladder-note b { color: var(--sw-amber); font-weight: 700; }
html.spots-low .fab-facts li:last-child { background: rgba(220, 53, 69, .14); border-color: rgba(220, 53, 69, .55); }
html.spots-low .fab-facts li:last-child b { color: #ff6b6b; }
@media (max-width: 575px) {
    .fab-facts { gap: 6px; }
    .fab-facts li { padding: 8px 12px; gap: 6px; }
    .fab-facts b { font-size: 20px; }
    .fab-facts span { font-size: 12px; }
}

/* ============================================================
   HERO NO PADRÃO DAS ARTES (Figma: OUT - Vip List › ADS 1/2)
   mármore preto + pílulas Inter Black + manchete Outfit Black
   com trecho amarelo e brilho + cartão de aparelhos + selo.
   ============================================================ */
.fab-brand-hero {
    background:
        linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
        url("../img/brand/bg-marble.webp") center / cover no-repeat,
        #0c0d0f;
}
.fab-brand-hero .vip-orb { display: none; }

.fab-bh {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.fab-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.fab-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(255, 175, 31, .14);
    border: 1px solid rgba(255, 175, 31, .25);
    box-shadow: 0 0 24px rgba(255, 175, 31, .12);
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ffaf1f;
}
    .fab-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffaf1f; }

.fab-bh-title {
    font-family: "Outfit", sans-serif;
    font-weight: 900;
    font-size: clamp(40px, 5vw, 66px);
    line-height: 1.06;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 22px;
}
    .fab-bh-title .glow {
        color: #ffaf1f;
        text-shadow: 0 0 18px rgba(255, 159, 15, .55), 0 0 42px rgba(255, 123, 0, .35);
    }

.fab-bh-sub {
    font-size: 17px;
    line-height: 1.6;
    color: #d8d8d8;
    margin: 0 0 22px;
    max-width: 520px;
}
    .fab-bh-sub b { color: #ffaf1f; }

.fab-plan-chips {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
    .fab-plan-chips li {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 14px;
        background: rgba(12, 13, 15, .78);
        border: 1px solid rgba(255, 175, 31, .35);
    }
    .fab-plan-chips span { font-size: 13px; font-weight: 700; color: #ccc; }
    .fab-plan-chips b { font-family: "Outfit", sans-serif; font-weight: 900; font-size: 24px; color: #fff; }
    .fab-plan-chips s { font-size: 13px; color: #888; text-decoration-color: #dc3545; text-decoration-thickness: 2px; }
    .fab-plan-chips .is-pro { border-color: #ffaf1f; box-shadow: 0 0 22px rgba(255, 175, 31, .3); }
    .fab-plan-chips .is-pro b { color: #ffaf1f; }

.fab-bh-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.fab-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffcb4b, #ffaf1f);
    color: #111;
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-size: 18px;
    box-shadow: 0 8px 28px rgba(255, 175, 31, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}
    .fab-cta-pill:hover { color: #111; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255, 175, 31, .5); }
.fab-bh-cta .fab-mini-cd { gap: 10px; }
html[data-campaign-phase="pre"] .fab-bh-cta .fab-mini-cd-label { font-size: 14px; }

.fab-bh-art { position: relative; }
.fab-bh-devices { display: block; width: 100%; height: auto; }
.fab-bh-tag {
    position: absolute;
    left: -6%;
    top: -9%;
    width: 42%;
    height: auto;
    transform: rotate(-6deg);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.55));
}

@media (max-width: 991px) {
    .fab-bh { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .fab-bh-art { max-width: 640px; margin: 20px auto 0; }
    .fab-bh-tag { left: -2%; top: -14%; width: 40%; }
}
@media (max-width: 575px) {
    .fab-pill { font-size: 12px; letter-spacing: 3px; padding: 8px 16px; }
    .fab-plan-chips li { padding: 8px 12px; }
    .fab-plan-chips b { font-size: 20px; }
    .fab-cta-pill { width: 100%; justify-content: center; }
    .fab-bh-tag { width: 46%; top: -18%; }
}

/* Três planos sempre lado a lado: nome em cima, preço e riscado embaixo */
.fab-plan-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; gap: 10px; }
    .fab-plan-chips li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; }
    .fab-plan-chips li > span { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
    .fab-plan-chips b { font-size: 28px; line-height: 1.1; }
@media (max-width: 575px) {
    .fab-plan-chips { gap: 6px; }
    .fab-plan-chips li { padding: 8px 10px; }
    .fab-plan-chips li > span { font-size: 10px; letter-spacing: .5px; }
    .fab-plan-chips b { font-size: 22px; }
    .fab-bh-cta .fab-mini-cd { width: 100%; justify-content: center; }
}

html[data-campaign-phase="pre"] .fab-bh-cta .fab-mini-cd { margin-left: 0; }

/* ------------------------------------------------------------
   RESTO DA PÁGINA NA MESMA LINGUAGEM DAS ARTES
   ------------------------------------------------------------ */
.vip-title, .vip-cta-final h2, .fab-hero-title {
    font-family: "Outfit", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -.01em;
}
.vip-title .sw-text-amber, .vip-cta-final h2 .amber {
    text-shadow: 0 0 18px rgba(255, 159, 15, .45), 0 0 40px rgba(255, 123, 0, .25);
}
/* rótulo de seção vira a pílula das artes */
.vip-section .vip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 175, 31, .12);
    border: 1px solid rgba(255, 175, 31, .25);
    font-family: "Inter", sans-serif;
    font-weight: 900;
    letter-spacing: 3px;
}
    .vip-section .vip-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ffaf1f; }

/* fundo de mármore nos blocos de destaque */
#pricing, .vip-cta-final, #reviews {
    background:
        linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75)),
        url("../img/brand/bg-marble.webp") center / cover no-repeat,
        #0c0d0f;
}

/* cards de plano com o selo da campanha no canto */
.vip-plan { overflow: visible; }
.vip-plan .plan-seal {
    position: absolute;
    right: -18px;
    top: -34px;
    width: 150px;
    height: auto;
    transform: rotate(6deg);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.6));
    z-index: 3;
    pointer-events: none;
}
.vip-plan .save-badge { visibility: hidden; }
.vip-plan .plan-name { font-family: "Outfit", sans-serif; font-weight: 900; font-size: 24px; }
.vip-plan.is-featured .plan-flag { left: 28px; transform: none; }
#pricing .row.g-4 { row-gap: 56px !important; padding-top: 18px; }
@media (max-width: 575px) {
    .vip-plan .plan-seal { width: 120px; right: -6px; top: -30px; }
}

/* botões principais no formato pílula das artes */
.sw-btn-amber { border-radius: 999px !important; font-family: "Inter", sans-serif; font-weight: 900; }
html[data-billing="annual"] .vip-plan .plan-seal { display: none; }

/* ------------------------------------------------------------
   SELO "BEST VIP DEAL" ANIMADO
   1) carimba ao carregar  2) brilho dourado passa a cada 3,5s
   3) balanço leve contínuo. O brilho usa o próprio selo como
   máscara, então só aparece em cima do desenho.
   ------------------------------------------------------------ */
.fab-seal {
    position: absolute;
    left: -4%;
    top: -10%;
    width: 40%;
    z-index: 3;
    filter: drop-shadow(0 14px 26px rgba(0,0,0,.6));
    animation: seal-stamp .7s cubic-bezier(.2,1.6,.4,1) .4s both,
               seal-sway 4s ease-in-out 1.2s infinite;
    transform-origin: 50% 50%;
}
    .fab-seal img { display: block; width: 100%; height: auto; }
    .fab-seal::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 35%, rgba(255,235,170,.95) 48%, rgba(255,255,255,.9) 50%, rgba(255,235,170,.95) 52%, transparent 65%);
        background-size: 250% 100%;
        background-position: 150% 0;
        -webkit-mask: var(--seal) center / contain no-repeat;
                mask: var(--seal) center / contain no-repeat;
        mix-blend-mode: screen;
        animation: seal-shine 3.5s ease-in-out 1.4s infinite;
        pointer-events: none;
    }
@keyframes seal-stamp {
    0%   { opacity: 0; transform: scale(2.4) rotate(-22deg); }
    60%  { opacity: 1; transform: scale(.92) rotate(-4deg); }
    100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}
@keyframes seal-sway {
    0%, 100% { transform: rotate(-6deg) scale(1); }
    50%      { transform: rotate(-2deg) scale(1.04); }
}
@keyframes seal-shine {
    0%   { background-position: 150% 0; }
    45%, 100% { background-position: -60% 0; }
}
@media (max-width: 991px) {
    .fab-seal { left: 0; top: -12%; width: 38%; }
}
@media (max-width: 575px) {
    .fab-bh-art { margin-top: 40px; padding-left: 4px; }
    .fab-seal { left: 2%; top: -16%; width: 42%; }
}
@media (prefers-reduced-motion: reduce) {
    .fab-seal, .fab-seal::after { animation: none; transform: rotate(-6deg); }
}

/* os selos dos cards de plano ganham o mesmo brilho, mais discreto */
.vip-plan .plan-seal { animation: seal-sway 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vip-plan .plan-seal { animation: none; } }
/* brilho: faixa estreita e mais suave (a versão cheia lavava o selo) */
.fab-seal::after {
    background: linear-gradient(105deg, transparent 44%, rgba(255,230,160,.55) 48.5%, rgba(255,255,255,.75) 50%, rgba(255,230,160,.55) 51.5%, transparent 56%);
    background-size: 300% 100%;
}

/* Vídeo real do Drawing dentro da tela do notebook do cartão.
   Posição medida no Figma (tela 590x370 em x130/y497 do PNG 1380x960). */
.fab-bh-art .fab-laptop-screen {
    position: absolute;
    left: 9.42%;
    top: 51.77%;
    width: 42.75%;
    height: 38.54%;
    object-fit: cover;
    object-position: left center;
    z-index: 2;
    border-radius: 2px;
    background: #2b2b2b;
}

/* ------------------------------------------------------------
   UM SISTEMA NO LUGAR DE CINCO: 3 cartões com tela real
   ------------------------------------------------------------ */
.fab-proofs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.fab-proof-card {
    display: flex;
    flex-direction: column;
    padding: 18px 18px 24px;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface-1);
    border: 1px solid var(--sw-line-soft);
}
.fab-proof-shot {
    margin: 0 0 18px;
    height: 230px;
    border-radius: var(--sw-radius);
    overflow: hidden;
    background: #f3f3f3;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
    .fab-proof-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.fab-proof-shot--phone { background: linear-gradient(180deg, #1a1a1a, #0d0d0d); align-items: flex-start; padding-top: 14px; }
    .fab-proof-shot--phone img { width: auto; height: 120%; object-fit: contain; object-position: center top; }
.fab-plan-tag {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 175, 31, .12);
    border: 1px solid rgba(255, 175, 31, .35);
    color: #ffaf1f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
}
.fab-proof-card h3 {
    font-family: "Outfit", sans-serif;
    font-weight: 900;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 8px;
}
.fab-proof-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sw-gray-400); }
@media (max-width: 991px) {
    .fab-proofs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}
.fab-proof-shot picture { display: contents; }
.fab-proof-shot:not(.fab-proof-shot--phone) img { object-position: center bottom; }
.fab-proof-shot--phone img { width: auto !important; height: 330px !important; max-width: none; object-fit: contain; }

/* One system instead of five — layout do site novo: vídeo grande + lista */
.fab-os { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.fab-os-cap { margin: 12px 0 0; font-size: 13px; color: var(--sw-gray-600); }
.fab-os-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 16px; }
    .fab-os-list li { display: flex; gap: 14px; align-items: flex-start; }
    .fab-os-list i {
        flex: none; width: 40px; height: 40px; border-radius: 12px;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,175,31,.12); border: 1px solid rgba(255,175,31,.3); color: #ffaf1f; font-size: 18px;
    }
    .fab-os-list b { display: block; color: #fff; font-family: "Outfit", sans-serif; font-weight: 900; font-size: 18px; margin-bottom: 2px; }
    .fab-os-list div { font-size: 15px; line-height: 1.55; color: var(--sw-gray-400); }
.fab-os-trust { font-size: 13px; color: var(--sw-gray-500); margin: 0 0 22px; }
    .fab-os-trust i { color: #ffaf1f; }
@media (max-width: 991px) { .fab-os { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Três celulares em leque (telas reais do app) */
.fab-phones { position: relative; height: 560px; }
.fab-phones .ph { position: absolute; top: 0; width: 44%; display: block; }
    .fab-phones .ph img { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.fab-phones .ph-1 { left: 0;   top: 40px; transform: rotate(-6deg); z-index: 1; }
.fab-phones .ph-2 { left: 28%; top: 0;    z-index: 3; }
.fab-phones .ph-3 { left: 56%; top: 40px; transform: rotate(6deg);  z-index: 2; }
.fab-phones::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 20%; bottom: 10%;
    background: radial-gradient(circle, rgba(255,175,31,.22), transparent 70%); z-index: 0;
}
@media (max-width: 991px) { .fab-phones { height: 470px; max-width: 520px; margin: 0 auto; } }
@media (max-width: 575px) { .fab-phones { height: 330px; } }
#one-system { overflow-x: clip; }
@media (max-width: 575px) { .fab-phones .ph { width: 42%; } .fab-phones .ph-3 { left: 54%; } }
.fab-os-shot { display: block; width: 100%; height: auto; background: #fff; }
/* print principal + janela de perfil sobreposta no canto */
.fab-os-stack { position: relative; padding-bottom: 70px; }
.fab-os-callout { position: absolute; right: -18px; bottom: 0; width: 46%; display: block; }
    .fab-os-callout img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(255,175,31,.55);
        box-shadow: 0 20px 50px rgba(0,0,0,.7), 0 0 30px rgba(255,175,31,.18); }
@media (max-width: 575px) { .fab-os-callout { right: 0; width: 62%; } .fab-os-stack { padding-bottom: 90px; } }

/* ------------------------------------------------------------
   CORREÇÃO "título escondido atrás da barra" (02/10)
   1) âncoras (#book, #join, #pricing...) param abaixo da barra fixa
   2) o Calendly carregando não empurra a página (scroll anchoring)
   3) barra do topo opaca: nada aparece "cortado" por trás dela
   ------------------------------------------------------------ */
html { scroll-padding-top: 76px; }
.fab-book, .fab-book-frame, .fab-book-frame iframe { overflow-anchor: none; }
.vip-topbar { background: #0d0d0d; }

/* Job Tracker */
.fab-jt-shot .fab-app img { display: block; width: 100%; height: auto; background: #f7f7f7; }
.fab-jt-shot figcaption { margin-top: 10px; font-size: 13px; color: var(--sw-gray-600); }
.fab-jt-points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
    .fab-jt-points li { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: var(--sw-radius); background: var(--sw-surface-1); border: 1px solid var(--sw-line-soft); }
    .fab-jt-points i { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,175,31,.12); border: 1px solid rgba(255,175,31,.3); color: #ffaf1f; font-size: 17px; }
    .fab-jt-points b { display: block; color: #fff; font-family: "Outfit", sans-serif; font-weight: 900; font-size: 16px; margin-bottom: 4px; }
    .fab-jt-points div { font-size: 14px; line-height: 1.55; color: var(--sw-gray-400); }
@media (max-width: 991px) { .fab-jt-points { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px) { .fab-jt-points { grid-template-columns: minmax(0,1fr); } }

/* Job Tracker: texto + calendário com abas (calplayer do site) */
.fab-jt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 44px; align-items: center; }
.fab-jt-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .fab-jt-checks li { display: flex; gap: 10px; align-items: center; color: #e6e6e6; font-size: 16px; font-weight: 600; }
    .fab-jt-checks i { color: #ffaf1f; font-size: 18px; }
.fab-cal { display: grid; gap: 14px; min-width: 0; }
.fab-cal-tabs { justify-self: start; display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.fab-cal-tab { padding: 7px 18px; border: 0; border-radius: 7px; background: transparent; color: #9a9a9a; font-weight: 700; font-size: 14px; cursor: pointer; transition: color .2s, background .2s; }
    .fab-cal-tab:hover { color: #fff; }
    .fab-cal-tab.is-on { background: #ffaf1f; color: #0b0b0c; }
.fab-cal-stage { position: relative; aspect-ratio: 1600 / 550; border-radius: var(--sw-radius-lg); overflow: hidden; background: #fff;
    border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 70px -18px rgba(0,0,0,.8), 0 0 40px rgba(255,175,31,.1); }
.fab-cal-shot { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
    .fab-cal-shot.is-on { opacity: 1; visibility: visible; }
    .fab-cal-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
@media (max-width: 991px) { .fab-jt { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Formulários em leque (formdeck do site) */
.fab-jt + .fab-jt { margin-top: 72px; }
.fab-jt--flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr); }
.fab-jt-h3 { font-family: "Outfit", sans-serif; font-weight: 900; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; color: #fff; margin: 0 0 14px; }
.fab-deck { display: grid; gap: 22px; min-width: 0; }
.fab-deck-stage { position: relative; width: 86%; aspect-ratio: 1100 / 828; }
.fab-deck-card {
    position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #fff;
    border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px -18px rgba(0,0,0,.85);
    transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity 1s ease, filter 1s ease;
}
    .fab-deck-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fab-deck-card[data-pos="0"] { transform: none; opacity: 1; z-index: 7; }
.fab-deck-card[data-pos="1"] { transform: translate(6%, -4%) rotate(3deg) scale(.95); opacity: 1; z-index: 6; filter: brightness(.6); }
.fab-deck-card[data-pos="2"] { transform: translate(11%, 4%) rotate(-2.6deg) scale(.91); opacity: 1; z-index: 5; filter: brightness(.4); }
.fab-deck-card[data-pos="3"], .fab-deck-card[data-pos="4"], .fab-deck-card[data-pos="5"], .fab-deck-card[data-pos="6"] {
    transform: translate(14%, 0) rotate(1.4deg) scale(.88); opacity: 0; z-index: 1; }
.fab-deck-nav { display: flex; align-items: center; gap: 14px; }
    .fab-deck-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #fff; font-size: 18px; cursor: pointer; }
    .fab-deck-nav button:hover { border-color: #ffaf1f; color: #ffaf1f; }
.fab-deck-label { font-size: 14px; font-weight: 700; color: #ffaf1f; }
@media (max-width: 991px) {
    .fab-jt--flip { grid-template-columns: minmax(0, 1fr); }
    .fab-jt--flip .fab-jt-copy { order: -1; }
    .fab-deck-stage { width: 88%; }
}
@media (prefers-reduced-motion: reduce) { .fab-deck-card { transition: none; } }

/* ============================================================
   IGUAL AO SITE ATUAL (www.slabware.com, medido em 05/10/2026)
   - Open Sans em tudo (o site não usa Outfit/Inter)
   - botões amarelos retangulares, raio 6px, Open Sans 600
   - cartões de preço: fundo rgba(13,13,13,.65), raio 40, padding 40;
     destaque todo amarelo com texto preto e sombra amarela
   - selo de desconto: fundo preto, texto amarelo, sem raio
   - hero dentro de um cartão escuro arredondado, como a home
   ============================================================ */
body, .fab-bh-title, .vip-title, .fab-pill, .vip-eyebrow, .vip-section .vip-eyebrow,
.vip-plan .plan-name, .fab-plan-chips b, .fab-cta-pill, .fab-jt-h3, .fab-os-list b,
.fab-jt-points b, .fab-proof-card h3, .vip-cta-final h2, .sw-btn-amber, .fab-hero-title {
    font-family: "Open Sans", system-ui, sans-serif !important;
}
.fab-bh-title, .vip-title, .vip-cta-final h2, .fab-jt-h3 { font-weight: 800 !important; letter-spacing: -1px; }
.fab-bh-title .glow, .vip-title .sw-text-amber, .vip-cta-final h2 .amber { text-shadow: none !important; }
.fab-pill, .vip-section .vip-eyebrow { font-weight: 700; letter-spacing: 2px; }

/* botões como no site */
.sw-btn-amber, .fab-cta-pill, .vip-hero .fab-cta-pill {
    border-radius: 6px !important; font-weight: 600 !important; box-shadow: none !important;
    background: #ffaf1f !important; color: #000 !important;
}
.sw-btn-amber:hover, .fab-cta-pill:hover { background: #ffcb4b !important; transform: none; }
.vip-shine::after { display: none; }

/* hero: cartão escuro arredondado como a home */
.fab-bh { background: rgba(13,13,13,.72); border-radius: 32px; padding: 56px 48px; border: 1px solid rgba(255,255,255,.06); }
@media (max-width: 575px) { .fab-bh { padding: 28px 18px; border-radius: 22px; } }

/* cartões de preço como o site */
.vip-plan {
    background: rgba(13,13,13,.65) !important; border-radius: 40px !important; padding: 40px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}
.vip-plan.is-featured { background: #ffaf1f !important; color: #000; box-shadow: 0 12px 40px rgba(255,175,31,.25) !important; border-color: #ffaf1f !important; }
.vip-plan.is-featured .plan-name, .vip-plan.is-featured .plan-tag, .vip-plan.is-featured .plan-users,
.vip-plan.is-featured .plan-features li, .vip-plan.is-featured .plan-features b,
.vip-plan.is-featured .price-vip, .vip-plan.is-featured .price-vip .per, .vip-plan.is-featured .price-year,
.vip-plan.is-featured .plan-features .plan-sub { color: #000 !important; }
.vip-plan.is-featured .plan-features i { color: #000 !important; }
.vip-plan.is-featured .price-regular { color: rgba(0,0,0,.55) !important; }
.vip-plan .price-vip .val { font-size: 76px; font-weight: 700; }
.vip-plan .save-badge { visibility: visible !important; background: #000 !important; color: #ffaf1f !important; border-radius: 0 !important; font-size: 15px; font-weight: 600; padding: 6px 10px; }
.vip-plan.is-featured .plan-flag { background: #000; color: #ffaf1f; }
.vip-plan.is-featured .plan-cta a { background: #000 !important; color: #ffaf1f !important; border-color: #000 !important; }
.vip-plan .plan-cta .btn-outline-warning { border-radius: 6px; font-weight: 600; }

/* "Everything in Starter / Basic" em destaque */
.vip-plan .plan-features .plan-everything {
    margin: 0 -10px 4px; padding: 10px 12px; border-radius: 10px;
    background: rgba(255,175,31,.14); border: 1px solid rgba(255,175,31,.45);
}
    .vip-plan .plan-features .plan-everything b { color: #ffaf1f !important; font-size: 15px; }
    .vip-plan .plan-features .plan-everything i { color: #ffaf1f !important; }
.vip-plan.is-featured .plan-features .plan-everything { background: #000; border-color: #000; }

/* usuários: $49 em todos os planos, em destaque */
.vip-plan .plan-users { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,.08); color: #fff !important; font-weight: 700; font-size: 13px; }
.vip-plan.is-featured .plan-users { background: rgba(0,0,0,.12); }
.vip-plan .plan-extra--hl {
    margin: 0 0 22px !important; padding: 10px 12px; border-radius: 10px; font-size: 14px !important;
    color: #e6e6e6 !important; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,175,31,.5);
}
    .vip-plan .plan-extra--hl b { color: #ffaf1f; }
    .vip-plan .plan-extra--hl i { color: #ffaf1f; margin-right: 4px; }
.vip-plan.is-featured .plan-extra--hl { color: #000 !important; background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.4); }
    .vip-plan.is-featured .plan-extra--hl b, .vip-plan.is-featured .plan-extra--hl i { color: #000; }

/* faixa de números como a pílula do site */
.fab-proof { padding: 30px 0; border: 0; }
.fab-proof .row { max-width: 760px; margin: 0 auto; padding: 14px 10px; border-radius: 14px; background: rgba(13,13,13,.8); border: 1px solid rgba(255,255,255,.08); }
.fab-proof-item b { font-size: 26px !important; }
.fab-proof-item span { font-size: 12px; }
.vip-plan .plan-seal { display: none !important; }
.fab-cta-pill, .sw-btn-amber { font-weight: 700 !important; }

/* ============================================================
   PRICING REFEITO (05/10): cabeçalho centralizado no estilo da página
   Pricing do site, controles numa linha, botão logo abaixo do preço.
   ============================================================ */
.fab-pr-head { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.fab-pr-title { font-family: "Open Sans", sans-serif; font-weight: 800; font-size: clamp(48px, 7vw, 85px); letter-spacing: -1px; line-height: 1; color: #ffaf1f; margin: 0 0 14px; }
.fab-pr-sub { font-size: clamp(18px, 2vw, 22px); color: #fefefe; margin: 0 0 6px; }
    .fab-pr-sub b { color: #ffaf1f; }
.fab-pr-note { font-size: 15px; color: #adb5bd; margin: 0; }
.fab-pr-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin: 0 0 44px; }
.fab-pr-controls .vip-billing-toggle[hidden] { display: none !important; }

/* sem o retângulo quadrado do brilho de hover */
.vip-plan::after { display: none !important; }
.vip-plan:hover { transform: translateY(-4px); }

/* cabeçalho do cartão limpo: nome, descrição, usuários */
.vip-plan .plan-name { font-size: 26px !important; }
.vip-plan .plan-tag { min-height: 20px; }

/* preço riscado + selo "Save" na mesma linha, acima do preço grande */
.fab-pr-was { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 6px; }
.fab-pr-was .price-regular { margin: 0 !important; font-size: 17px; }
.vip-plan .price-vip .val { font-size: 88px !important; }
.vip-plan .price-year { min-height: 22px; }

/* botão logo abaixo do preço, cheio, como o "Buy Now" do site */
.vip-plan .plan-cta { margin: 18px 0 6px !important; }
.vip-plan .plan-cta a {
    display: block; width: 100%; text-align: center; padding: 13px 16px !important; border-radius: 6px !important;
    background: #ffaf1f !important; color: #000 !important; border: 0 !important; font-weight: 700 !important; font-size: 16px;
}
.vip-plan .plan-cta a:hover { background: #ffcb4b !important; }
.vip-plan.is-featured .plan-cta a { background: #000 !important; color: #ffaf1f !important; }

/* funções com respiro; "usuário extra" sempre no rodapé do cartão */
.vip-plan .plan-features { margin-top: 18px !important; }
.vip-plan .plan-extra--hl { margin-top: auto !important; margin-bottom: 0 !important; }
.vip-plan > .d-flex.justify-content-between { margin-bottom: 0 !important; }

/* ============================================================
   CALENDÁRIO REFEITO (05/10): faixa da janela VIP + marcos + contador
   ============================================================ */
.fab-cal2 { background: radial-gradient(70% 60% at 50% 0%, rgba(255,175,31,.08), transparent 70%), #0d0d0d; border-top: 1px solid #222; border-bottom: 1px solid #222; }
.fab-win { max-width: 1060px; margin: 0 auto; }
.fab-win-bar { display: grid; grid-template-columns: 3fr 1fr; height: 54px; border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.fab-win-vip, .fab-win-after { display: flex; align-items: center; padding: 0 20px; font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.fab-win-vip { background: linear-gradient(90deg, #ff9f0f, #ffaf1f 60%, #ffcb4b); color: #000; }
.fab-win-after { background: rgba(220,53,69,.18); color: #ff6b6b; border: 1px solid rgba(220,53,69,.45); border-left: 0; border-radius: 0 14px 14px 0; justify-content: center; }
.fab-win-vip i, .fab-win-after i { margin-right: 6px; }
.fab-win-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0; }
    .fab-win-steps li { padding: 22px 20px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
    .fab-win-steps time { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; color: #fff; margin-bottom: 8px; letter-spacing: -.5px; }
    .fab-win-steps b { display: block; font-size: 17px; color: #fff; margin-bottom: 4px; }
    .fab-win-steps span { font-size: 14px; line-height: 1.5; color: #adb5bd; }
    .fab-win-steps .is-key { border-color: rgba(255,175,31,.5); background: rgba(255,175,31,.08); }
        .fab-win-steps .is-key time { color: #ffaf1f; }
    .fab-win-steps .is-after { border-color: rgba(220,53,69,.45); background: rgba(220,53,69,.08); }
        .fab-win-steps .is-after time { color: #ff6b6b; }
.fab-win-cd { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 44px; text-align: center; }
@media (max-width: 991px) {
    .fab-win-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .fab-win-steps time { font-size: 24px; }
}
@media (max-width: 575px) {
    .fab-win-bar { grid-template-columns: 1fr; height: auto; }
    .fab-win-vip, .fab-win-after { padding: 12px 16px; font-size: 14px; }
    .fab-win-after { border: 1px solid rgba(220,53,69,.45); border-top: 0; border-radius: 0 0 14px 14px; }
    .fab-win-bar { border-radius: 14px 14px 0 0; overflow: visible; }
    .fab-win-vip { border-radius: 14px 14px 0 0; }
    .fab-win-steps { grid-template-columns: minmax(0,1fr); }
}
.fab-pr-sub { text-wrap: balance; }
.fab-cal2-title { font-size: clamp(40px, 5.6vw, 68px) !important; text-wrap: balance; }

/* ============================================================
   MENOS "CARA DE IA" (05/10)
   - rótulo de seção vira texto simples (sem pílula, sem bolinha)
   - ícones sem quadradinho
   - sem brilho, sem selo balançando, sem faixa de luz
   ============================================================ */
.vip-section .vip-eyebrow, .vip-eyebrow, .fab-pill {
    background: none !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; border-radius: 0 !important;
    font-size: 13px !important; font-weight: 700 !important; letter-spacing: 2px !important;
    color: #ffaf1f !important; text-transform: uppercase;
}
.vip-section .vip-eyebrow::before, .fab-pill .dot { display: none !important; }
.fab-pills { margin-bottom: 14px !important; }

.fab-os-list i, .fab-jt-points i {
    width: auto !important; height: auto !important; background: none !important; border: 0 !important;
    font-size: 20px !important; margin-top: 2px;
}
.fab-seal, .fab-seal::after, .vip-plan .plan-seal { animation: none !important; }
.fab-seal { transform: rotate(-6deg); }
.fab-seal::after { display: none; }
.fab-bh-art .fab-app, .fab-cal-stage, .fab-os-stack .fab-app { box-shadow: 0 20px 50px rgba(0,0,0,.55) !important; }
.fab-step.is-vip, .fab-plan-chips .is-pro { box-shadow: none !important; }
.vip-orb { display: none !important; }
.fab-urgency-dot { animation: none !important; }

/* etapas do DXF: 4 colunas (Import · Draw · Export · Cut), 06/10 */
.fab-dxf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 991px) { .fab-dxf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 575px) { .fab-dxf-steps { grid-template-columns: minmax(0, 1fr) !important; } }

/* ============================================================
   WHY SLABWARE (06/10) — formato do "Why Moraware?": faixa de cor,
   3 cartões (ícone, título, uma linha), chamada e botão
   ============================================================ */
.sw-why { background: #ffaf1f; padding: 84px 0 76px; }
.sw-why-title { text-align: center; margin: 0 0 40px; font: 800 clamp(34px, 4.4vw, 54px)/1.05 "Open Sans", sans-serif !important; letter-spacing: -1px; color: #000 !important; }
.sw-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sw-why-card { background: #0d0d0d; border-radius: 24px; padding: 36px 30px; text-align: center; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.sw-why-card i { font-size: 46px; color: #ffaf1f; display: block; margin-bottom: 16px; }
.sw-why-card h3 { margin: 0 0 10px; font: 800 21px/1.25 "Open Sans", sans-serif !important; color: #fff; }
.sw-why-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #c9c9c9; }
.sw-why-card p b { color: #ffaf1f; }
.sw-why-cta { text-align: center; margin-top: 40px; }
.sw-why-cta p { margin: 0 0 14px; font: 800 clamp(20px, 2vw, 26px)/1.2 "Open Sans", sans-serif; color: #000; }
.sw-why-btn { display: inline-block; padding: 13px 30px; border-radius: 6px; background: #000; color: #ffaf1f !important; font: 700 16px "Open Sans", sans-serif; text-decoration: none !important; }
.sw-why-btn:hover { background: #1a1a1a; }
@media (max-width: 991px) { .sw-why-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; } .sw-why { padding: 60px 0 56px; } }