/* ==========================================================================
   marketing.css — public (logged-out) site layer
   --------------------------------------------------------------------------
   Loaded only by base_public.html, after base.css and ui.css.

   Scope: the marketing site — landing page, feature pages, integrations, FAQ.
   Nothing here may be used by the app shell (base.html), and nothing here
   declares a token: base.css owns :root. The public pages need a larger type
   scale than the app (the app is dense on purpose, a landing page is not), so
   the display sizes below are local and prefixed `.m-`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.m-section {
    padding: 96px 0;
}
.m-section--tight  { padding: 64px 0; }
.m-section--subtle { background-color: var(--surface-subtle); }
.m-section--dark {
    background-color: var(--brand-black);
    color: #FFFFFF;
}
.m-section--dark .m-section-title { color: #FFFFFF; }
.m-section--dark .m-section-lead  { color: rgba(255, 255, 255, 0.72); }

.m-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Type scale — public pages only
   -------------------------------------------------------------------------- */

.m-display {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--brand-black);
    margin: 0 0 var(--space-5) 0;
}
.m-section-title {
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-weight: 800;
    color: var(--brand-black);
    margin: 0 0 var(--space-3) 0;
}
.m-section-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 auto var(--space-6) auto;
    max-width: 640px;
}
.m-section-head { text-align: center; margin-bottom: 56px; }
.m-section-head .m-section-lead { margin-bottom: 0; }

/* The orange word inside a headline. Uses the ink shade — the raw brand
   orange is 2.03:1 on white and unreadable as text. */
.m-accent { color: var(--brand-orange-ink); }

.m-eyebrow {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-orange-ink);
    margin-bottom: var(--space-3);
}
.m-section--dark .m-eyebrow { color: var(--brand-orange); }

/* --------------------------------------------------------------------------
   Buttons — the public site reuses .button from base.css, but its CTAs are
   larger than any control in the app.
   -------------------------------------------------------------------------- */

.m-cta {
    height: auto;
    padding: 16px 30px;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--radius);
}
.m-cta-row {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}
.m-cta-row--center { justify-content: center; }

/* The line under a CTA that removes the last objection. */
.m-cta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-top: var(--space-4);
}
.m-cta-note svg { flex: 0 0 auto; color: var(--success-base); }
.m-section--dark .m-cta-note { color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.m-hero { padding: 88px 0 72px 0; }
.m-hero-grid > *,
.m-split > * { min-width: 0; }

.m-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
}
.m-hero-lead {
    font-size: 19px;
    line-height: 1.62;
    color: var(--text-secondary);
    margin: 0 0 var(--space-6) 0;
    max-width: 540px;
}
.m-hero .m-cta-note { justify-content: flex-start; }

/* Small trust badge above the headline. */
.m-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px 6px 8px;
    border-radius: var(--radius-pill);
    background-color: var(--brand-orange-tint);
    color: var(--brand-orange-ink);
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-5);
}
.m-pill-tag {
    background-color: var(--brand-orange);
    color: var(--brand-black);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    /* Mesmo motivo do .m-tile-label. Poderia entrar na isenção de badge do
       audit em vez de subir 1px, mas afrouxar a trava para acomodar um
       componente é o caminho que, repetido, a esvazia. */
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Mock UI — stand-ins for product screenshots, drawn with tokens.
   Every number inside one is illustrative, never a claim.
   -------------------------------------------------------------------------- */

.m-mock {
    max-width: 100%;
    background-color: var(--container-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.m-mock-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-4);
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--border-strong);
}
.m-mock-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background-color: var(--gray-300);
}
.m-mock-title {
    margin-left: var(--space-2);
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-mock-body { padding: var(--space-5); }

/* A line of the P&L breakdown: label on the left, value on the right. */
.m-ledger { display: flex; flex-direction: column; gap: 2px; }
.m-ledger-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 9px 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
.m-ledger-row:last-child { border-bottom: 0; }
.m-ledger-row > span { min-width: 0; }
.m-ledger-row b { flex: 0 0 auto; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.m-ledger-row--neg b { color: var(--danger-ink); }
.m-ledger-row--total {
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 2px solid var(--gray-200);
    border-bottom: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.m-ledger-row--total b { font-size: 22px; color: var(--success-ink); }

/* KPI tiles inside a mock. */
.m-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    gap: var(--space-3);
}
.m-tile {
    background-color: var(--gray-50);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.m-tile-label {
    /* --text-sm (13px), não --text-xs: 12px fica abaixo do piso de corpo de
       texto, e estes rótulos são caixa-alta com espaçamento entre letras, que
       é o caso em que 1px a menos mais pesa. A isenção de 12px em base.css
       vale para `.badge`, que este não é. */
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.m-tile-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.m-tile-value--good { color: var(--success-ink); }
/* Horizontal progress bar (goals, ABC share). */
.m-bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--gray-200);
    overflow: hidden;
}
.m-bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background-color: var(--brand-orange);
}
.m-bar-fill--good { background-color: var(--success-base); }
/* A ledger row that carries a labelled bar instead of a value on the right. */
.m-ledger-row--bar { display: block; border-bottom: 0; padding-bottom: var(--space-2); }
.m-bar-label { display: flex; justify-content: space-between; margin-bottom: 6px; }

.m-mock-list { display: flex; flex-direction: column; gap: var(--space-3); }
.m-mock-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}
.m-mock-thumb {
    width: 38px; height: 38px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background-color: var(--gray-100);
}
.m-mock-item-body { flex: 1 1 auto; min-width: 0; }
.m-mock-item-title {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.m-mock-item-meta { display: block; font-size: var(--text-sm); color: var(--text-secondary); }
/* A second block under the first inside one mock (tiles, then a ledger). */
.m-mock-gap { margin-top: var(--space-5); }

/* The "exemplo ilustrativo" line under a mock's numbers. Every mock on the
   public site is built from tokens with made-up numbers, and says so. */
.m-mock-caption {
    margin: var(--space-3) 0 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: right;
}

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */

.m-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: var(--space-5);
}
.m-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.m-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.m-center-link { text-align: center; margin: var(--space-6) 0 0 0; }

.m-card {
    background-color: var(--container-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}
.m-card h3,
.m-card-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--brand-black);
    margin: 0 0 var(--space-2) 0;
}
.m-card p {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
.m-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius);
    background-color: var(--brand-orange-tint);
    color: var(--brand-orange-ink);
    margin-bottom: var(--space-4);
}
.m-card-icon svg { width: 22px; height: 22px; }

/* A card that is a link to a feature page. */
.m-card-link {
    position: relative;
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.m-card-link:hover {
    border-color: var(--brand-orange);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
.m-card-more {
    margin-top: var(--space-4);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--brand-orange-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --------------------------------------------------------------------------
   Alternating feature rows (media + copy)
   -------------------------------------------------------------------------- */

.m-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.m-split + .m-split { margin-top: 96px; }
/* A card grid that closes a run of splits inside the same section. */
.m-split + .m-section-head { margin-top: 96px; }
.m-split--flip .m-split-media { order: -1; }
.m-split h2 {
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.2;
    font-weight: 800;
    color: var(--brand-black);
    margin: 0 0 var(--space-4) 0;
    letter-spacing: -0.01em;
}
.m-split p {
    font-size: var(--text-lg);
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4) 0;
}

/* Checked bullet list used inside a split. */
.m-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.m-checks li {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--text-secondary);
}
.m-checks li strong { color: var(--text-primary); font-weight: 700; }
.m-checks svg { flex: 0 0 auto; margin-top: 4px; color: var(--success-base); }
.m-checks + p { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   Numbered steps
   -------------------------------------------------------------------------- */

.m-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-5);
    counter-reset: m-step;
}
.m-step { position: relative; padding-top: 52px; }
.m-step::before {
    counter-increment: m-step;
    content: counter(m-step);
    position: absolute;
    top: 0; left: 0;
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--brand-orange);
    color: var(--brand-black);
    font-weight: 800;
    font-size: var(--text-lg);
}
.m-step h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--brand-black);
    margin: 0 0 var(--space-2) 0;
}
.m-step p { font-size: var(--text-lg); line-height: 1.6; color: var(--text-secondary); margin: 0; }
.m-section--dark .m-step h3 { color: #FFFFFF; }
.m-section--dark .m-step p { color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   Integrations
   -------------------------------------------------------------------------- */

.m-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
}
.m-logo-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background-color: var(--container-bg);
    font-weight: 700;
    color: var(--text-primary);
}
.m-logo-chip img { height: 24px; width: auto; display: block; }

.m-integration {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border-strong);
}
.m-integration:first-of-type { border-top: 0; }
.m-integration-brand { display: flex; flex-direction: column; gap: var(--space-3); }
/* Sem isto o badge estica na largura da coluna — discreto no desktop, uma
   faixa de ponta a ponta no celular. */
.m-integration-brand .badge { align-self: flex-start; }
.m-integration-brand img { height: 36px; width: auto; align-self: flex-start; }
.m-integration h3 {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--brand-black);
    margin: 0;
}
.m-integration p { font-size: var(--text-lg); line-height: 1.6; color: var(--text-secondary); margin: 0 0 var(--space-4) 0; }

/* --------------------------------------------------------------------------
   FAQ — native <details>, no JS
   -------------------------------------------------------------------------- */

.m-faq { display: flex; flex-direction: column; gap: var(--space-3); }
.m-faq-item {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background-color: var(--container-bg);
    overflow: hidden;
}
.m-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
}
.m-faq-item > summary::-webkit-details-marker { display: none; }
.m-faq-item > summary::after {
    content: '';
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--transition);
}
.m-faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.m-faq-item > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.m-faq-answer {
    padding: 0 var(--space-5) var(--space-5) var(--space-5);
    font-size: var(--text-lg);
    line-height: 1.65;
    color: var(--text-secondary);
}
.m-faq-answer p { margin: 0 0 var(--space-3) 0; }
.m-faq-answer p:last-child { margin-bottom: 0; }

/* Grupos de perguntas. As duas classes abaixo substituem estilos que estavam
   escritos direto no HTML de faq.html — a página agora monta as seções em um
   laço, e um `style=` repetido a cada volta é a forma mais rápida de o valor
   divergir entre um grupo e outro. */
.m-faq-group-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}
.m-faq-group { margin-bottom: 56px; }

/* Link dentro de um parágrafo corrido do site público. Herda o tamanho do
   texto em volta de propósito: cresce junto no bloco de 640px, onde os
   controles sobem para 16px. */
.m-inline-link {
    color: var(--brand-orange-ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Closing CTA band
   -------------------------------------------------------------------------- */

.m-cta-band { padding: 88px 0; background-color: var(--brand-black); text-align: center; }
.m-cta-band h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #FFFFFF;
    margin: 0 0 var(--space-4) 0;
}
.m-cta-band p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 auto var(--space-6) auto;
    max-width: 560px;
}
.m-cta-band .m-cta-note { color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   Page header for the inner (feature) pages
   -------------------------------------------------------------------------- */

.m-page-head {
    padding: 72px 0 56px 0;
    background-color: var(--surface-subtle);
    border-bottom: 1px solid var(--border-strong);
    text-align: center;
}
.m-page-head .m-display { margin-bottom: var(--space-4); }
.m-page-head .m-section-lead { margin-bottom: 0; }

/* Breadcrumb-ish back link. */
.m-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: var(--space-4);
}
.m-back:hover { color: var(--brand-orange-ink); }

/* The visible breadcrumb of a feature page. It mirrors the BreadcrumbList in
   the page's structured data, which is what makes Google show "Recursos ›
   Precificação" under the result instead of the bare URL. */
.m-crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    color: var(--text-muted);
}
.m-crumbs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
}
.m-crumbs a:hover { color: var(--brand-orange-ink); }
.m-crumbs [aria-current] { color: var(--text-primary); font-weight: 600; }
.m-page-head-cta { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Header navigation (public shell)
   -------------------------------------------------------------------------- */

.m-nav-links { display: flex; align-items: center; gap: var(--space-2); }
.m-nav-link {
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}
.m-nav-link:hover { background-color: var(--gray-100); color: var(--text-primary); }
.m-nav-link.active { color: var(--brand-orange-ink); }

/* Dropdown for "Recursos". CSS-only: hover on pointer devices, and the
   summary/details fallback keeps it reachable by keyboard and on touch. */
.m-nav-menu { position: relative; }
.m-nav-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
}
.m-nav-menu > summary::-webkit-details-marker { display: none; }
.m-nav-menu > summary:hover { background-color: var(--gray-100); color: var(--text-primary); }
.m-nav-menu > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.m-nav-menu > summary svg { transition: transform var(--transition); }
.m-nav-menu[open] > summary svg { transform: rotate(180deg); }
.m-nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1100;
    min-width: min(320px, calc(100vw - 2 * var(--space-5)));
    padding: var(--space-2);
    background-color: var(--container-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hover);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.m-nav-panel a {
    display: block;
    padding: 10px var(--space-3);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--text-base);
}
.m-nav-panel a:hover { background-color: var(--gray-100); }
/* Eight modules do not fit one column under the header without running past
   the fold, so the Recursos menu lays them out two by two. */
.m-nav-panel--wide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(640px, calc(100vw - 2 * var(--space-5)));
}
.m-nav-panel--wide .m-nav-panel-all {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius) var(--radius);
    color: var(--brand-orange-ink);
}
.m-nav-panel a span {
    display: block;
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Footer sitemap
   -------------------------------------------------------------------------- */

.m-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-strong);
}
.m-footer-col h4 {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
}
.m-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.m-footer-col a { color: var(--text-secondary); text-decoration: none; font-size: var(--text-base); }
.m-footer-col a:hover { color: var(--brand-orange-ink); }
.m-footer-brand img { height: 44px; width: auto; margin-bottom: var(--space-3); }
.m-footer-brand p { font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* --------------------------------------------------------------------------
   Menu no celular
   --------------------------------------------------------------------------
   Abaixo de 861px a faixa de links do header não cabe ao lado do logo e das
   duas ações. Antes ela simplesmente sumia, e as páginas de recurso só eram
   alcançáveis pelo rodapé — ou seja, invisíveis para quem chega pelo celular,
   que é a maior parte do tráfego. Este bloco é a versão móvel da mesma
   navegação: um <details> nativo, sem JavaScript.
   -------------------------------------------------------------------------- */

.m-nav-mobile { display: none; }

.m-nav-mobile > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
}
.m-nav-mobile > summary::-webkit-details-marker { display: none; }
.m-nav-mobile > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.m-nav-mobile > summary .m-icon-close,
.m-nav-mobile[open] > summary .m-icon-open { display: none; }
.m-nav-mobile[open] > summary .m-icon-close { display: block; }

/* O painel ancora no `.header`, não no <details>: `.header` é `position:
   sticky`, o que já o torna bloco de contenção para descendentes absolutos.
   Assim `top: 100%` cai exatamente sob a barra sem nenhuma altura chutada, e o
   painel acompanha o header quando a página rola. Por isso `.m-nav-mobile` NÃO
   pode ser `position: relative` — ele roubaria a âncora. */
.m-nav-mobile[open] > summary::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.4);
}

.m-nav-mobile-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1100;
    max-height: 75vh;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5) var(--space-5);
    background-color: var(--container-bg);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: var(--shadow-hover);
}
.m-nav-mobile-panel h4 {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 var(--space-2) 0;
}
.m-nav-mobile-panel a:not(.button) {
    display: block;
    padding: 12px var(--space-3);
    margin: 0 calc(-1 * var(--space-3));
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--text-lg);
}
.m-nav-mobile-panel a:not(.button):active { background-color: var(--gray-100); }
.m-nav-mobile-panel a:not(.button) span {
    display: block;
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}
.m-nav-mobile-panel hr {
    border: 0;
    border-top: 1px solid var(--border-strong);
    margin: var(--space-4) 0;
}
/* `.button` não é border-box em base.css, então `width: 100%` somava padding
   e borda por fora e o botão vazava a lateral do painel. */
.m-nav-mobile-panel .button { width: 100%; box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* A linha de preço da faixa de fechamento. Discreta de propósito: informa sem
   virar o assunto da página — ver o comentário em partials/marketing_cta.html. */
.m-cta-price {
    margin: var(--space-3) 0 0 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
}
.m-section--dark .m-cta-price,
.m-cta-band .m-cta-price { opacity: 0.85; }

/* --------------------------------------------------------------------------
   Calculadora pública de lucro
   -------------------------------------------------------------------------- */

/* Os passos à esquerda, o resultado à direita e visível enquanto se responde.
   Abaixo de 960px viram uma coluna, e aí o resultado fica depois dos passos —
   que é a ordem em que se lê no celular. */
.calc-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-5);
    align-items: start;
}

/* --- O acordeon de passos --- */
.calc-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.calc-step {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background-color: var(--container-bg);
    overflow: hidden;
    transition: border-color var(--transition);
}
.calc-step.is-open { border-color: var(--brand-orange); }

.calc-step-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* 44px de alvo com folga: o cabeçalho é o que se toca para voltar a um
       passo já respondido, e é o controle mais usado da tela. */
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: 0;
    font-family: inherit;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.calc-step-head:hover { background-color: var(--gray-50); }
.calc-step-head:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* O número do passo. Fica laranja no passo aberto e cinza nos demais, que é a
   única indicação de "onde estou" numa lista de onze. */
.calc-step-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background-color: var(--gray-200);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.calc-step.is-open .calc-step-num {
    background-color: var(--brand-orange);
    color: var(--brand-black);
}
.calc-step-label { flex: 1 1 auto; min-width: 0; }
/* A resposta ecoada no cabeçalho fechado. `tabular-nums` para os valores não
   dançarem de largura enquanto se digita. */
.calc-step-answer {
    flex: 0 0 auto;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.calc-step-body { padding: 0 var(--space-4) var(--space-4) var(--space-4); }
.calc-step-help {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
}
.calc-step-help strong { color: var(--text-primary); }
.calc-step-body .button { margin-top: var(--space-4); }
.calc-step-body .help-text { margin-top: var(--space-2); }

/* Campo com R$ à esquerda ou kg/% à direita. O prefixo e o sufixo são parte do
   controle, não texto solto ao lado: sem isso a pessoa digita "R$ 149,90"
   dentro de um campo numérico e o valor vira zero. */
.calc-field {
    display: flex;
    align-items: stretch;
    max-width: 260px;
}
.calc-prefix,
.calc-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    background-color: var(--gray-50);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.calc-prefix {
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
}
.calc-suffix {
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
}
/* O raio vem da POSIÇÃO do campo dentro do grupo, não de um seletor que
   olha para o vizinho seguinte: o campo arredonda o lado que é borda externa
   e mantém reto o lado colado ao prefixo ou ao sufixo. */
.calc-field .form-control { flex: 1 1 auto; min-width: 0; border-radius: 0; }
.calc-field > .form-control:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.calc-field > .form-control:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

/* O rótulo inteiro é o alvo: a caixa sozinha responde a 24px por decisão, e é
   o texto ao lado que carrega o resto do toque. */
.calc-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}
.calc-check input { width: 24px; height: 24px; flex: 0 0 auto; margin: 0; }

/* --- O painel de resultado --- */
.calc-panel {
    background-color: var(--container-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    padding: var(--space-5);
}
/* Gruda no topo ao rolar: a lista de passos passa por baixo e o número
   continua à vista, que é a razão de a calculadora existir. */
.calc-panel--result {
    position: sticky;
    top: var(--space-5);
    background-color: var(--surface-subtle);
}
.calc-panel-title {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--control-height-sm);
}

.calc-tiles { margin-top: var(--space-5); }
.calc-tile-note {
    margin: 4px 0 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

/* Prejuízo. Precisa da especificidade de .m-ledger-row--total b para vencer o
   verde que aquela regra já pinta. */
.m-ledger-row--total b.calc-loss { color: var(--danger-ink); }
.m-tile-value.calc-loss { color: var(--danger-ink); }

.calc-cliff {
    margin: var(--space-5) 0 0 0;
    padding: var(--space-4);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
    background-color: var(--warning-tint);
    color: var(--warning-ink);
    font-size: var(--text-base);
    font-weight: 600;
}
.calc-disclaimer {
    margin: var(--space-5) 0 0 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* --- O conteúdo explicativo abaixo da ferramenta --- */

/* A cascata em prosa: mesma linha do extrato, sem a coluna de valor. */
.calc-explainer-ledger { margin: var(--space-5) 0; }
.calc-explainer-ledger .m-ledger-row { align-items: flex-start; }

.calc-two { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.calc-card-title {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}
/* A fórmula é o miolo da explicação de margem × markup: destacada, porque é o
   que a pessoa vai levar embora. */
.calc-formula {
    margin: 0 0 var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background-color: var(--gray-50);
    border: 1px solid var(--border-color);
    font-weight: 700;
    color: var(--brand-orange-ink);
}
.calc-checks { margin: var(--space-5) 0; }
.calc-inline-cta {
    padding: var(--space-4);
    border-radius: var(--radius);
    background-color: var(--surface-subtle);
    border: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
}

/* The invitation between the calculator and the explainer (partials/
   calculadora_cta.html). A light tinted card, not a band: it continues the
   tool the visitor just used, and the dark closing band stays the only loud
   CTA on the page. No top padding, so it reads as part of the tool. */
.calc-nudge-section { padding-top: 0; }
.calc-nudge {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: 32px 40px;
    border-radius: var(--radius-card);
    background-color: var(--brand-orange-tint);
    border: 1px solid rgba(var(--brand-orange-rgb), 0.45);
}
.calc-nudge-copy { flex: 1 1 auto; min-width: 0; }
.calc-nudge-eyebrow {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-orange-ink);
}
.calc-nudge-title {
    margin: 0 0 var(--space-2) 0;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.calc-nudge-text {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 620px;
}
.calc-nudge-action {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.calc-nudge-note {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.calc-nudge-note svg { flex: 0 0 auto; color: var(--success-base); }

@media (max-width: 960px) {
    .calc-grid { grid-template-columns: 1fr; }
    /* Grudar no topo só faz sentido enquanto o resultado está ao lado dos
       passos. Empilhado, ele taparia o campo que a pessoa está respondendo. */
    .calc-panel--result { position: static; }
    .calc-nudge { flex-direction: column; align-items: stretch; }
    .calc-nudge-action { align-items: flex-start; }
}

@media (max-width: 640px) {
    /* O eco da resposta some: em 360px ele disputa a linha com o rótulo e
       empurra o cabeçalho para fora da tela. O rótulo é o que importa. */
    .calc-step-answer { display: none; }
    .calc-field { max-width: none; }
    .calc-nudge { padding: var(--space-5); }
    .calc-nudge-action .m-cta { width: 100%; box-sizing: border-box; justify-content: center; }
}

@media (max-width: 960px) {
    .m-hero-grid,
    .m-split { grid-template-columns: 1fr; gap: var(--space-6); }
    .m-split--flip .m-split-media { order: 0; }
    .m-split + .m-split { margin-top: 64px; }
    .m-integration { grid-template-columns: 1fr; gap: var(--space-4); }
    .m-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .m-section { padding: 64px 0; }
    .m-hero { padding: 56px 0 48px 0; }
    .m-section-head { margin-bottom: 40px; }
    .m-hero .m-cta-note,
    .m-cta-row { justify-content: center; }
    .m-hero-copy { text-align: center; }
    .m-hero-lead { margin-left: auto; margin-right: auto; }
    .m-footer-grid { grid-template-columns: 1fr; }
    .m-footer-col ul { gap: 0; }

    /* Alvos de toque: 19–24px de altura é menor que a ponta de um dedo. Não é
       preciosismo — é a diferença entre abrir a página e abrir a de baixo. */
    .footer-links { gap: 0; }
    .footer-links a { display: block; padding: 10px 0; }
    /* `min-height`, e não mais padding: 8px levava os dois a exatamente 40px,
       4px abaixo do piso, e um padding que "dá certo" depende da altura da
       linha do texto dentro. Os dois já são inline-flex centrado, então a
       altura mínima basta. Medido por scripts/audit_templates.py. */
    .m-back { min-height: 44px; }
    .m-card-more { min-height: 44px; }
    .m-footer-col a {
        display: block;
        padding: 9px 0;
        font-size: var(--text-lg);
    }
    .m-cta-row .m-cta { width: 100%; justify-content: center; }
}

@media (max-width: 860px) {
    /* A faixa horizontal dá lugar ao menu de disclosure; a navegação continua
       existindo, só muda de forma. */
    .m-nav-links { display: none; }
    .m-nav-mobile { display: block; }

    /* O logo encolhe: em 320px ele disputava a linha com as duas ações e o
       header estourava a largura da tela. */
    .navbar-logo img { height: 38px; }
    .navbar-actions a {
        padding: 9px 14px;
        font-size: var(--text-base);
    }
    .navbar-actions .login-link { display: none; }  /* "Entrar" vive no menu */
    .navbar { gap: var(--space-3); }
}

/* ==========================================================================
   The e-mail gate in front of the calculators (calc_gate.js,
   partials/calculadora_gate.html, docs/public_calculator.md §8).
   The dialog itself is the base .modal-overlay / .modal-content.
   ========================================================================== */

/* The locked calculator looks exactly like the open one — the visitor should
   see what they are about to get — and only the pointer says "click". */
.calc-gate-area { cursor: pointer; border-radius: var(--radius-card); }
.calc-gate-area:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.calc-gate-lead { margin: 0 0 var(--space-4); }

.calc-gate-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.calc-gate-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--danger-ink);
}

.calc-gate-fix {
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    color: var(--brand-orange-ink);
    text-decoration: underline;
    cursor: pointer;
}

/* Off screen, out of the tab order and invisible, but not display:none — the
   bots worth stopping skip a field they can tell is not rendered at all. */
.calc-gate-trap {
    visibility: hidden;
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.calc-gate-consent {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}
.calc-gate-consent a { color: var(--brand-orange-ink); }

@media (max-width: 640px) {
    /* A link that must stay tappable on its own line gets a real target. */
    .calc-gate-fix { min-height: 44px; }
}

/* ==========================================================================
   Blog (templates/blog/, docs/blog.md)
   ========================================================================== */

/* --- The index --- */
.m-post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.m-post-card .m-card-title { font-size: var(--text-2xl); line-height: 1.25; }
.m-post-empty { gap: var(--space-4); }
.m-post-empty .m-cta-row { margin-top: var(--space-2); }

/* Date and reading time, on the index card and under the article title. */
.m-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
}

/* --- The article header: left-aligned, the width of the text below it --- */
.m-page-head--article { text-align: left; padding: 56px 0 40px 0; }
.m-page-head--article .m-crumbs { justify-content: flex-start; margin-bottom: var(--space-2); }
.m-page-head--article .m-display { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.15; }
.m-page-head--article .m-post-meta { margin: 0; }

/* --- The article body. Plain HTML elements, styled only inside .m-prose so
   an article never has to carry a class on every paragraph. --- */
.m-prose {
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-primary);
}
.m-prose > :first-child { margin-top: 0; }
.m-prose p,
.m-prose ul,
.m-prose ol { margin: 0 0 var(--space-5) 0; }
.m-prose ul,
.m-prose ol { padding-left: var(--space-5); }
.m-prose li { margin-bottom: var(--space-2); }
.m-prose h2 {
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 800;
    color: var(--brand-black);
    margin: 48px 0 var(--space-4) 0;
}
.m-prose h3 {
    font-size: var(--text-xl);
    line-height: 1.3;
    font-weight: 700;
    color: var(--brand-black);
    margin: var(--space-6) 0 var(--space-3) 0;
}
.m-prose strong { font-weight: 700; color: var(--brand-black); }
.m-prose a { color: var(--brand-orange-ink); font-weight: 600; }

/* A conclusion or a caveat pulled out of the flow. */
.m-prose-note {
    padding: var(--space-4) var(--space-5);
    background-color: var(--brand-orange-tint);
    border-left: 4px solid var(--brand-orange);
    border-radius: var(--radius);
}

/* Every table sits in this box. A fee table is read across a row, so on a
   phone it scrolls inside the box instead of pushing the page sideways — the
   same trade the ABC curve makes in the app. */
.m-prose-table {
    overflow-x: auto;
    margin: 0 0 var(--space-5) 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
}
.m-prose-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-lg);
    line-height: 1.5;
}
.m-prose-table th,
.m-prose-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}
.m-prose-table th {
    background-color: var(--surface-subtle);
    font-weight: 700;
    color: var(--brand-black);
}
.m-prose-table tr:last-child td { border-bottom: 0; }
/* Money and percentages line up on the decimal side. */
.m-prose-table .m-num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- The calculator at the end of every article --- */
.m-post-tool {
    margin: 56px 0 var(--space-5) 0;
    padding: var(--space-6);
    background-color: var(--surface-subtle);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
}
.m-post-tool p {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 var(--space-5) 0;
}

@media (max-width: 640px) {
    .m-page-head--article { padding: 40px 0 32px 0; }
    .m-prose { font-size: 17px; }
    .m-post-tool { padding: var(--space-5); }
    .m-post-tool .m-cta { width: 100%; box-sizing: border-box; justify-content: center; }
    .m-post-meta { font-size: var(--text-sm); }
}