/* As páginas da plataforma (Plataforma 1): a página com os planos, o cadastro, os termos e a
   privacidade. Usa as cores e os componentes da base (style.css), na paleta Flash. */

.platform-header {
    background: var(--card);
    border-bottom: var(--border);
}

.platform-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    min-height: 4rem;
}

.platform-brand {
    font-family: var(--font-title);
    font-size: 1.375rem;
    color: var(--ink);
    text-decoration: none;
}

.platform-header nav {
    display: flex;
    gap: 1.25rem;
}

.platform-header nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-weight: 700;
}

/* Entrar (Plataforma 4): o dono que já assina acha o estúdio pelo e-mail. Contornado, para não
   competir com "Assinar", que é o botão cheio da página. */
.platform-header nav a.platform-login {
    padding: 0 1rem;
    border: var(--border);
    border-radius: var(--radius);
    text-decoration: none;
}

.find-studio {
    max-width: 480px;
}

.platform-main {
    display: grid;
    /* A área principal ocupa a altura da tela (o rodapé embaixo): na página curta, a grade
       repartiria a sobra entre as linhas. */
    align-content: start;
    gap: 3rem;
    max-width: 1100px;
}

.platform-main h1,
.platform-main h2 {
    font-family: var(--font-title);
    font-weight: 400;
    line-height: 1.2;
}

.platform-main h1 {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
}

.platform-main h2 {
    font-size: clamp(1.375rem, 3.5vw, 1.875rem);
    margin-bottom: 0.75rem;
}

.platform-main h3 {
    font-size: 1.125rem;
}

.platform-hero {
    display: grid;
    gap: 1rem;
    max-width: 48rem;
    padding-top: 1rem;
}

.platform-lead {
    font-size: 1.125rem;
    color: var(--ink-soft);
}

.feature-grid,
.plan-grid {
    display: grid;
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.feature-grid li,
.plan-card {
    padding: 1.25rem;
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius);
}

.feature-grid p {
    margin-top: 0.25rem;
    color: var(--ink-soft);
}

.plan-grid {
    margin: 1rem 0;
}

.plan-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-featured {
    border-width: 3px;
    border-color: var(--action);
}

.plan-card .tag {
    align-self: flex-start;
}

.plan-summary {
    color: var(--ink-soft);
}

.plan-price strong {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 400;
}

.plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.platform-faq details {
    padding: 0.75rem 0;
    border-bottom: 2px solid var(--line);
}

.platform-faq summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 700;
    cursor: pointer;
}

.platform-faq details p {
    margin-top: 0.5rem;
    color: var(--ink-soft);
}

.platform-doc {
    display: grid;
    gap: 0.75rem;
    max-width: 46rem;
}

.platform-doc h2 {
    margin-top: 1rem;
    font-size: 1.25rem;
}

.platform-doc ul {
    padding-left: 1.25rem;
}

/* A tabela dos suboperadores do contrato: rola sozinha no celular, sem empurrar a página. */
.platform-table-wrap {
    overflow-x: auto;
}

.platform-table {
    width: 100%;
    border-collapse: collapse;
}

.platform-table th,
.platform-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line, #ddd);
    text-align: left;
    vertical-align: top;
}

.draft-notice {
    padding: 0.75rem 1rem;
    background: var(--highlight);
    border: var(--border);
    border-radius: var(--radius);
}

.platform-footer {
    padding: 1.5rem 0;
    background: var(--sand);
    border-top: var(--border);
    color: var(--ink-soft);
}

.platform-footer .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    list-style: none;
    text-align: center;
}

.platform-footer .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--action);
}

@media (min-width: 700px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .plan-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .platform-footer .footer-links {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
}

.signup {
    display: grid;
    align-content: start;
    gap: 1rem;
    max-width: 64rem;
}

/* O cadastro: as etapas, o resumo do plano (no topo no celular, à direita no computador) e os
   campos com a ajuda embaixo da caixa. */
html:not(.js) .js-only { display: none; }

.signup-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etapa;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.signup-steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    counter-increment: etapa;
}

.signup-steps li::before {
    content: counter(etapa);
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--border);
    border-radius: 50%;
    font-weight: 700;
}

.signup-steps li[aria-current="step"] {
    color: var(--ink);
    font-weight: 700;
}

.signup-steps li[aria-current="step"]::before {
    background: var(--action);
    border-color: var(--action);
    color: var(--on-action);
}

.signup-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.signup-summary {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius);
}

.signup-summary h2 {
    margin: 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.5rem;
}

.signup-summary p { margin: 0; }

.cycle-switch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.cycle-switch a {
    display: grid;
    place-items: center;
    min-height: 2.75rem;
    padding: 0.4rem 0.3rem;
    text-align: center;
    line-height: 1.2;
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.cycle-switch a + a { border-left: var(--border); }

.cycle-switch a[aria-current="true"] {
    background: var(--ink);
    color: var(--card);
}

.signup-price strong {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 400;
}

.signup-promises {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.signup-promises li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.signup-promises li::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    background: var(--ok);
    mask: var(--icon-check) center / contain no-repeat;
}

.signup-included summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
}

.signup-included ul {
    display: grid;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
}

.signup-field {
    display: grid;
    gap: 0.375rem;
}

.signup-field label { font-weight: 700; }

.signup-field .helptext,
.signup-preview {
    margin: 0;
    font-size: 0.9375rem;
}

.signup-preview { color: var(--ink-soft); overflow-wrap: anywhere; }

.input-with-suffix {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.input-with-suffix input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-suffix {
    display: flex;
    flex: none;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--sand);
    border: var(--border);
    border-left: 0;
    border-radius: 0 var(--radius-field) var(--radius-field) 0;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* No celular o domínio não cabe inteiro ao lado da caixa: ele fica só na prévia "Seu site:",
   logo embaixo, que quebra a linha. */
@media (max-width: 37.49rem) {
    .input-suffix { display: none; }

    .input-with-suffix input { border-radius: var(--radius-field); }
}

.show-password {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-height: 2.75rem;
}

.signup-pay-note {
    margin: 0;
    text-align: center;
    font-size: 0.9375rem;
}

@media (min-width: 900px) {
    .signup-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        grid-template-areas: "form summary";
    }

    .signup-form { grid-area: form; }

    .signup-summary {
        grid-area: summary;
        position: sticky;
        top: 1.5rem;
    }
}

.signup-plan strong {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 400;
}

.signup-form {
    display: grid;
    gap: 1.25rem;
}

.signup-form fieldset {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius);
}

.signup-form legend {
    padding: 0 0.5rem;
    font-weight: 700;
}

.signup-form fieldset > div {
    display: grid;
    gap: 0.25rem;
}

.signup-form input:not([type=checkbox]) {
    width: 100%;
}

.signup-terms label {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

/* A página da plataforma (Plataforma 8): as capturas, o caminho do cliente, os passos e a
   comparação dos planos. A tabela fica na tela larga; no celular, a lista por plano. */
.platform-main section + section { margin-top: 3rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-shot { margin-top: 1.5rem; }
.shot {
    display: block;
    width: 100%;
    height: auto;
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
    background: var(--card);
}
.shot-picture,
.shot-phone { display: block; }
.shot-phone .shot { max-width: 20rem; margin-inline: auto; }
.feature-list { display: grid; gap: 2rem; padding: 0; list-style: none; }
.feature { display: grid; gap: 1rem; align-items: center; }
.feature p { margin-top: 0.25rem; color: var(--ink-soft); }
.client-path,
.steps { display: grid; gap: 1.5rem; padding: 0; list-style: none; counter-reset: step; }
.client-path li { display: grid; gap: 0.5rem; }
.client-path p,
.step p { color: var(--ink-soft); }
.step {
    padding: 1.25rem;
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius);
    counter-increment: step;
}
.step h3::before { content: counter(step) ". "; }
.compare-table { display: none; width: 100%; border-collapse: collapse; }
.compare-table th,
.compare-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line, #ddd); text-align: left; }
.compare-table td { text-align: center; }
.compare-list { display: grid; gap: 0.75rem; }
.compare-list details { padding: 1rem; background: var(--card); border: var(--border); border-radius: var(--radius); }
.compare-list summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.compare-list ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.case-list { display: grid; gap: 1.5rem; padding: 0; list-style: none; }
.case {
    padding: 1.25rem;
    background: var(--card);
    border: var(--border);
    border-radius: var(--radius);
}
.case blockquote { margin: 0; font-size: 1.05rem; }
.case-who { margin-top: 0.75rem; color: var(--ink-soft); }
.platform-end { text-align: center; }
.platform-end .hero-actions { justify-content: center; }

@media (min-width: 48rem) {
    .platform-hero { max-width: none; grid-template-columns: 1fr 1.2fr; align-items: center; }
    .hero-shot { margin-top: 0; }
    .feature { grid-template-columns: 1fr 1.6fr; }
    /* Nas linhas pares, a captura vai para a esquerda, e a coluna larga vai com ela. */
    .feature:nth-child(even) { grid-template-columns: 1.6fr 1fr; }
    .feature:nth-child(even) > div { order: 2; }
    .client-path,
    .steps { grid-template-columns: repeat(3, 1fr); }
    .case-list { grid-template-columns: repeat(2, 1fr); }
    .compare-table { display: table; }
    .compare-list { display: none; }
}
.compare-table thead th:not(:first-child) { text-align: center; }
/* No celular, a captura não passa de 18rem: a página fica mais curta e a tela continua legível. */
@media (max-width: 47.99rem) {
    .shot-picture .shot { max-width: 18rem; margin-inline: auto; }
}
.hero-text { display: grid; gap: 1rem; align-content: start; }
.compare-no { color: var(--ink-soft); }
@media (min-width: 900px) {
    #o-que-faz .feature-grid { grid-template-columns: repeat(3, 1fr); }
}
/* O campo invisível do "Quero conhecer" (Plataforma 8): para os robôs, fora da tela. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* O botão do modo escuro e claro (03/11/2026): só o ícone, quadrado, no fim do menu. */
.platform-header .theme-toggle {
    display: flex;
}

.theme-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: var(--border);
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    cursor: pointer;
}

.theme-icon-btn:hover {
    background: var(--sand);
}