/* ============================================================
   GPTAll — Home ("A Bancada de Sinal")
   Carrega depois de tokens.css e base.css. Componentes específicos
   da página inicial: topo fixo, herói com traço de osciloscópio,
   demonstração de terminal, bloco de modelo, preços, FAQ e rodapé.
   Consome só as custom properties de tokens.css — nenhum valor de
   cor/tipografia/espaço é redeclarado aqui.
   ============================================================ */

@layer layout, components, utilities, animations;

/* -------------- Topo fixo -------------------------------------- */
@layer components {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    background: color-mix(in oklch, var(--color-void) 92%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-graticule-dim);
  }
  .topbar__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  .topbar__logo { display: flex; align-items: center; }
  .topbar__logo img { height: 28px; width: auto; display: block; }
  .topbar__nav {
    display: none;
    align-items: center;
    gap: var(--space-md);
  }
  .topbar__nav a {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
  }
  .topbar__nav a:hover,
  .topbar__nav a:focus-visible { color: var(--color-paper); }
  .topbar__actions { display: flex; align-items: center; gap: var(--space-xs); }
  .topbar__actions .btn { padding: 0 var(--space-sm); font-size: 0.9375rem; min-height: 40px; }

  @media (min-width: 900px) {
    .topbar__nav { display: flex; }
  }

  /* Skip link — visível só ao ganhar foco por teclado. */
  .skip-link {
    position: absolute;
    left: var(--space-xs);
    top: -48px;
    z-index: 1000;
    background: var(--color-signal);
    color: var(--color-void);
    padding: var(--space-half) var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    transition: top var(--duration-fast) var(--ease-sweep);
  }
  .skip-link:focus { top: var(--space-xs); }
}

/* -------------- Herói -------------------------------------------- */
@layer components {
  .hero {
    position: relative;
    padding-top: clamp(var(--space-xl), 9vw, var(--space-2xl));
    padding-bottom: clamp(var(--space-xl), 9vw, var(--space-2xl));
    overflow: hidden;
  }
  /* Grid gravado de fundo — textura de instrumento, nunca decoração isolada. */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, color-mix(in oklch, var(--color-graticule) 14%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in oklch, var(--color-graticule) 14%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 85%);
  }
  .hero__inner { position: relative; display: grid; gap: var(--space-xl); }
  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-half);
    margin-bottom: var(--space-sm);
  }
  .hero__eyebrow::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--color-signal);
    display: inline-block;
  }
  /* Caixa normal desde 2026-08-04. A regra antiga mandava todo título em
     Big Shoulders nascer em maiúsculas — gravação de painel. A referência
     pedida (chatgpt.com / app Codex) nunca grita: o peso e o tamanho fazem a
     hierarquia, a caixa-alta fica só nos rótulos pequenos. */
  .hero__claim { max-width: 22ch; margin-bottom: var(--space-md); }
  .hero__sub { color: var(--color-paper-dim); max-width: 52ch; margin-bottom: var(--space-md); }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }
  .hero__note { color: var(--color-paper-dim); font-size: 0.875rem; }

  /* -------- Bancada: o painel do osciloscópio com o nome travado -------- */
  .scope {
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-graticule-dim);
    padding: clamp(var(--space-md), 5vw, var(--space-lg));
  }
  .scope__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-graticule-dim);
  }
  .scope__channel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-half);
  }
  .scope__channel-dot {
    width: 8px; height: 8px;
    background: var(--color-signal);
    display: inline-block;
  }
  .scope__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-half);
    color: var(--color-signal-deep);
  }
  .scope__status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-signal);
  }

  .scope__screen {
    position: relative;
    background: var(--color-void);
    border: 1px solid var(--color-graticule-dim);
    padding: var(--space-md);
    min-height: 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
  }
  .scope__model {
    font-family: var(--font-mono);
    /* Medição real (T12.4, lida do MartianMono-Medium.ttf com fontTools):
       o avanço da Martian Mono é 0,700 em — larga até para uma monoespaçada.
       "gpt-5.6-luna" mede 7,700 em, ou seja 184,8 px no piso antigo de 1,5rem.
       Largura útil a 360 px = 360 − 40 (.container) − 48 (.scope) − 48
       (.scope__screen) = 224 px: cabia, com só 39 px de folga. Como o texto é
       `white-space: nowrap`, faltar espaço não quebra linha — estoura a
       página em rolagem horizontal. O piso desce para 1,375rem (169,4 px),
       que ainda cabe em 320 px (184 px úteis). Acima de ~397 px o clamp usa o
       4,4vw e nada muda visualmente. */
    font-size: clamp(1.375rem, 4.4vw, 2.375rem);
    color: var(--color-signal);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .scope__model-field { color: var(--color-paper-dim); }
  .scope__trace { width: 100%; max-width: 420px; height: 44px; display: block; }
  .scope__trace path {
    fill: none;
    stroke: var(--color-trace);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: scope-sweep var(--duration-scope, 1400ms) var(--ease-sweep) 220ms forwards;
  }
  .scope__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-sm);
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  .scope__copy-btn {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    border: 1px solid var(--color-graticule-dim);
    padding: var(--space-half) var(--space-xs);
    /* 44px: compromisso de alvo de toque do PRODUCT.md. Era 32px — a
       auditoria T12.4 achou 5 controles abaixo do piso, e justo os que
       mais importam (copiar a chave de API e o nome do modelo). */
    min-height: 44px;
  }
  .scope__copy-btn:hover,
  .scope__copy-btn:focus-visible { color: var(--color-signal); border-color: var(--color-signal); }

  @keyframes scope-sweep {
    to { stroke-dashoffset: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .scope__trace path { animation: none; stroke-dashoffset: 0; }
  }
}

/* -------------- Faixa de confiança ------------------------------- */
@layer components {
  .trust-strip {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-graticule-dim);
    border-bottom: 1px solid var(--color-graticule-dim);
  }
  @media (min-width: 720px) {
    .trust-strip { grid-template-columns: repeat(3, 1fr); }
  }
  .trust-item { display: flex; gap: var(--space-xs); align-items: flex-start; }
  .trust-item__mark { color: var(--color-signal); font-family: var(--font-mono); flex: 0 0 auto; }
  .trust-item p { color: var(--color-paper-dim); }
  .trust-item strong { color: var(--color-paper); }
}

/* -------------- Seção padrão / cabeçalho de seção ----------------- */
@layer components {
  .section-head { max-width: 640px; margin-bottom: var(--space-lg); }
  .section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
  .section-head__eyebrow {
    display: block;
    color: var(--color-signal-deep);
    margin-bottom: var(--space-half);
  }
  .section-head p { color: var(--color-paper-dim); margin-top: var(--space-xs); }
  .section-head h2 { letter-spacing: var(--tracking-display); }
}

/* -------------- Dor / solução ------------------------------------- */
@layer components {
  .split {
    display: grid;
    gap: var(--space-lg);
  }
  @media (min-width: 860px) {
    .split { grid-template-columns: 1fr 1fr; align-items: start; }
  }
  .split__card { padding: var(--space-md); }
  .split__card--problem { border-left: 2px solid var(--color-graticule); }
  .split__card--solution { border-left: 2px solid var(--color-signal); }
  .split__card h3 { margin-bottom: var(--space-sm); }
  .split__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
  .split__list li { display: flex; gap: var(--space-xs); color: var(--color-paper-dim); }
  .split__list li::before { content: '—'; color: var(--color-graticule); flex: 0 0 auto; }
  .split__card--solution .split__list li::before { content: '✓'; color: var(--color-signal); }
}

/* -------------- Passo a passo -------------------------------------- */
@layer components {
  .steps { counter-reset: step; display: grid; gap: var(--space-md); }
  @media (min-width: 720px) {
    .steps { grid-template-columns: repeat(4, 1fr); }
  }
  .step { position: relative; padding: var(--space-md); }
  .step__number {
    font-family: var(--font-display);
    font-size: 2rem;
    /* Era --color-graticule: 2,62:1 sobre --color-void. Reprova AA e reprova
       até o piso de 3:1 de texto grande (medido na T12.4 com conversão
       OKLCH->sRGB + luminância relativa do WCAG). O número do passo é
       informação (qual passo é este), não ornamento, então precisa passar.
       --color-paper-dim mede 6,76:1 sobre o void e mantém a hierarquia
       abaixo do título do passo. */
    color: var(--color-paper-dim);
    display: block;
    margin-bottom: var(--space-xs);
  }
  .step h3 { margin-bottom: var(--space-half); }
  .step p { color: var(--color-paper-dim); font-size: 0.9375rem; }
  .step code { color: var(--color-signal); }

  /* Grupo de abas de sistema operacional (bash/zsh × PowerShell). */
  .gp-tabs {
    display: inline-flex;
    border: 1px solid var(--color-graticule-dim);
    margin-bottom: var(--space-xs);
  }
  .gp-tab {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: var(--space-half) var(--space-sm);
    color: var(--color-paper-dim);
    /* 44px: compromisso de alvo de toque do PRODUCT.md. Era 36px — a
       auditoria T12.4 achou 5 controles abaixo do piso, e justo os que
       mais importam (copiar a chave de API e o nome do modelo). */
    min-height: 44px;
  }
  .gp-tab.is-active { background: var(--color-panel); color: var(--color-signal); }
  .gp-panel[hidden] { display: none; }
}

/* -------------- Bloco de código / terminal ------------------------- */
@layer components {
  .code-block {
    background: var(--color-panel);
    border: 1px solid var(--color-graticule-dim);
    position: relative;
    overflow: hidden;
  }
  .code-block__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-graticule-dim);
  }
  .code-block pre {
    margin: 0;
    padding: var(--space-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .code-block code {
    font-family: var(--font-mono);
    font-size: var(--text-code);
    line-height: var(--leading-code);
    color: var(--color-paper);
    white-space: pre;
  }
  .code-block .tok-key { color: var(--color-paper-dim); }
  .code-block .tok-val { color: var(--color-signal); }

  .copy-btn {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
    border: 1px solid var(--color-graticule-dim);
    padding: var(--space-half) var(--space-xs);
    /* 44px: compromisso de alvo de toque do PRODUCT.md. Era 32px — a
       auditoria T12.4 achou 5 controles abaixo do piso, e justo os que
       mais importam (copiar a chave de API e o nome do modelo). */
    min-height: 44px;
  }
  .copy-btn:hover, .copy-btn:focus-visible { color: var(--color-signal); border-color: var(--color-signal); }

  /* Abaixo de 480px o terminal perde a moldura de crop-marks e vira
     largura total com scroll horizontal interno — ponto historicamente
     frágil nas três marcas irmãs (DESIGN.md, seção Layout). */
  @media (max-width: 480px) {
    .code-block { margin-left: calc(-1 * clamp(1.25rem, 4vw, 2rem)); margin-right: calc(-1 * clamp(1.25rem, 4vw, 2rem)); border-left: none; border-right: none; }
    .code-block.crop-marks::before,
    .code-block.crop-marks::after,
    .code-block .crop-marks__tr,
    .code-block .crop-marks__bl { display: none; }
  }
}

/* -------------- Bloco de modelo (3 nomes: luna, sol, terra) -------- */
@layer components {
  .model-block {
    display: grid;
    gap: var(--space-lg);
  }
  .model-block__cards {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
  }
  @media (min-width: 700px) {
    .model-block__cards { grid-template-columns: 1fr 1fr 1fr; }
  }
  .model-card {
    background: var(--color-panel);
    border: 1px solid var(--color-graticule-dim);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
  }
  .model-card--featured { border-color: var(--color-signal); }
  .model-card__label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
  }
  .model-card__name {
    font-family: var(--font-mono);
    font-size: var(--text-title);
    color: var(--color-signal);
    word-break: break-all;
  }
  .model-card__tagline {
    color: var(--color-paper-dim);
    font-size: var(--text-body);
  }
  .model-block__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
  .model-block__list li { display: flex; gap: var(--space-xs); color: var(--color-paper-dim); }
  .model-block__list li::before { content: '✓'; color: var(--color-signal); flex: 0 0 auto; }
  .model-block__list strong { color: var(--color-paper); }
}

/* -------------- Preços --------------------------------------------- */
@layer components {
  .pricing-toggle-wrap {
    display: inline-flex;
    border: 1px solid var(--color-graticule-dim);
    margin: 0 auto var(--space-lg);
  }
  .pricing-toggle {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-md);
    min-height: 44px;
    color: var(--color-paper-dim);
  }
  .pricing-toggle--active { background: var(--color-panel); color: var(--color-signal); }
  .pricing-toggle__save { color: var(--color-signal-deep); margin-left: var(--space-half); }

  .plans {
    display: grid;
    gap: var(--space-md);
  }
  @media (min-width: 720px) {
    .plans { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1080px) {
    .plans { grid-template-columns: repeat(4, 1fr); }
  }
  .plan {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    background: var(--color-panel);
    border: 1px solid var(--color-graticule-dim);
  }
  .plan--featured { border-color: var(--color-signal); position: relative; }
  /* Recuado para dentro e com raio próprio desde que o card ganhou canto
     curvo: em `right: 0` o selo ficava pendurado sobre o vazio além do arco
     (o ponto da borda a 10px do topo dista 17,1px do centro do arco de 16px,
     ou seja, fora do card). Encaixava enquanto o canto era reto. */
  .plan__badge {
    position: absolute;
    top: 0; right: var(--space-sm);
    transform: translateY(-50%);
    background: var(--color-signal);
    color: var(--color-void);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: 2px var(--space-xs);
    border-radius: var(--radius-sm);
  }
  .plan__tier { color: var(--color-paper-dim); margin-bottom: var(--space-half); }
  .plan__name { margin-bottom: var(--space-xs); }
  .plan__price { font-family: var(--font-mono); font-size: 2rem; color: var(--color-signal); margin-bottom: var(--space-half); }
  .plan__price-unit { font-size: 1rem; color: var(--color-paper-dim); }
  .plan__billing { color: var(--color-paper-dim); font-size: 0.875rem; margin-bottom: var(--space-sm); }
  .plan__features { list-style: none; display: flex; flex-direction: column; gap: var(--space-half); margin-bottom: var(--space-md); flex: 1; }
  .plan__features li { display: flex; gap: var(--space-half); color: var(--color-paper-dim); font-size: 0.9375rem; }
  .plan__features li::before { content: '✓'; color: var(--color-signal); flex: 0 0 auto; }

  /* Guarda antivenda: enquanto o link de checkout for pendente (Tarefa 9),
     o botão nasce desativado — nunca aponta para uma âncora "#" nem para
     um marcador de link que o cliente possa clicar sem comprar nada. É a
     correção deliberada ao defeito do CodeMax (link COLE_LINK clicável em
     produção). Ver assets/js/pricing.js. */
  .plan__cta[aria-disabled="true"] {
    background: var(--color-graticule-dim);
    color: var(--color-paper-dim);
    cursor: not-allowed;
    pointer-events: none;
  }
  .plan__pending-note {
    display: none;
    margin-top: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-paper-dim);
    text-align: center;
  }
  .plan__cta[aria-disabled="true"] ~ .plan__pending-note { display: block; }
}

/* -------------- FAQ -------------------------------------------------- */
@layer components {
  .faq-list { display: flex; flex-direction: column; gap: var(--space-xs); }
  .faq-item {
    background: var(--color-panel);
    border: 1px solid var(--color-graticule-dim);
  }
  .faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  /* O ícone +/− vive num ::before, não no nó de texto do <span>. A regra
     anterior era `.faq-item[open] .faq-item__icon { content: '−' }`, que é
     CSS morto: `content` só tem efeito em pseudo-elemento (ou elemento
     substituído). Resultado: o acordeão nunca confirmava o próprio estado
     pelo ícone — o "+" ficava "+" com o item aberto. O `font-size: 0`
     apaga o "+" literal que está no HTML (mantido lá como fallback sem CSS)
     e o pseudo-elemento assume, agora sim reagindo a [open]. */
  .faq-item__icon {
    color: var(--color-signal);
    font-family: var(--font-mono);
    flex: 0 0 auto;
    font-size: 0;
    line-height: 1;
  }
  .faq-item__icon::before { content: '+'; font-size: var(--text-body); }
  .faq-item[open] .faq-item__icon::before { content: '\2212'; }
  /* Resposta de FAQ é o único texto corrido que ocupa o palco inteiro: com o
     --stage-max em 1440px, sem teto de medida a linha passa de 160 caracteres.
     O item permanece full-width (a régua do acordeão é a borda), só o texto
     dentro dele respeita a medida de leitura. */
  .faq-item__body { padding: 0 var(--space-md) var(--space-md); color: var(--color-paper-dim); max-width: 75ch; }
  .faq-item__body code { font-family: var(--font-mono); color: var(--color-signal-deep); }
}

/* -------------- CTA final -------------------------------------------- */
@layer components {
  .final-cta { text-align: center; }
  .final-cta h2 { margin-bottom: var(--space-sm); letter-spacing: var(--tracking-display); }
  .final-cta p { color: var(--color-paper-dim); margin-bottom: var(--space-md); }
}

/* -------------- Rodapé ------------------------------------------------- */
@layer components {
  .site-footer {
    border-top: 1px solid var(--color-graticule-dim);
    padding: var(--space-lg) 0 var(--space-xl);
  }
  .site-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    margin-bottom: var(--space-md);
  }
  .site-footer__logo img { height: 24px; width: auto; }
  .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  .site-footer__links a { color: var(--color-paper-dim); font-size: 0.9375rem; }
  .site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--color-paper); }
  /* Aviso de revenda independente: é a mitigação de risco de marca que o
     PRODUCT.md registra como obrigatória, não letra miúda. Sobe de 0.8125rem
     para 0.875rem e o <strong> ganha o tom primário, para o rótulo do aviso
     ter peso de leitura compatível com a função dele. */
  .site-footer__legal { color: var(--color-paper-dim); font-size: 0.875rem; max-width: 72ch; }
  .site-footer__legal strong { color: var(--color-paper); }
  /* Era --color-graticule: 2,62:1 sobre --color-void, reprova AA (mínimo
     4,5:1) — medido na T12.4. --color-paper-dim mede 6,76:1. */
  .site-footer__copy { color: var(--color-paper-dim); font-size: 0.8125rem; margin-top: var(--space-sm); }

  /* CTA fixo — só mobile, replica o padrão que já converte nas irmãs. */
  .sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 400;
    background: color-mix(in oklch, var(--color-panel) 96%, transparent);
    border-top: 1px solid var(--color-graticule-dim);
    backdrop-filter: blur(6px);
    padding: var(--space-xs) clamp(1.25rem, 4vw, 2rem);
  }
  .sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
  .sticky-cta .btn { flex: 0 0 auto; }
  @media (min-width: 900px) {
    .sticky-cta { display: none; }
  }
}

/* -------------- Formulário de trial -------------------------------- */
@layer components {
  .trial-form { max-width: 420px; margin: var(--space-md) auto 0; text-align: left; }
  /* Só reserva de espaço: a cor por estado sai dos tokens no próprio
     trial-form.js, todos medidos acima de 4.5:1 sobre o vidro quase-preto. */
  #trial-form-status { min-height: 1.4em; margin-top: var(--space-xs); }
}

/* -------------- Utilitários ------------------------------------------- */
@layer utilities {
  .u-mt-lg { margin-top: var(--space-lg); }
  .u-hide-sm { display: none; }
  @media (min-width: 720px) {
    .u-hide-sm { display: revert; }
  }
}

/* -------------- Raio por papel de superfície ----------------------------
   Revisão 2026-08-04 (referência: chatgpt.com / app Codex). O canto reto era
   a aresta do painel aparafusado; a calma da referência pede curva. Atribuído
   aqui num bloco único em vez de espalhado, para a regra ficar auditável em um
   lugar só. Consome apenas tokens — nenhum valor de raio nasce aqui. */
@layer components {
  .scope,
  .model-block__stage,
  .faq-item,
  .code-block { border-radius: var(--radius-lg); }

  /* Superfície grande: xl, como o contrato declara em Shapes. */
  .scope__screen,
  .plan { border-radius: var(--radius-xl); }

  /* Estes DOIS precisam de `overflow: hidden`, ao contrário do bloco de código:
     o item ativo é rente à borda interna e pinta acima dela, então o canto do
     filho escapa por cima do arco do pai (raio interno ideal 10−1=9px, filho
     tem 6px). Aqui o recorte é o conserto, não um efeito colateral. */
  .gp-tabs,
  .pricing-toggle-wrap { border-radius: var(--radius-md); overflow: hidden; }
  .sticky-cta { border-radius: var(--radius-md); }

  .scope__copy-btn,
  .copy-btn,
  .gp-tab.is-active,
  .pricing-toggle--active { border-radius: var(--radius-sm); }
}

/* -------------- Faixa de compatibilidade -------------------------------
   Calma deliberada, no registro da referência (chatgpt.com): baixo contraste,
   sem card, sem borda, respiro generoso. É prova social discreta, não seção
   de destaque — se competir com o herói, virou ruído. */
@layer components {
  /* Só o alinhamento: tipografia vem de .t-headline, como nas outras seis
     seções. A classe bespoke anterior omitia font-weight e herdava o 700 do
     <h2> do UA, nascendo mais pesada que as irmãs (que usam 600) — justo na
     seção que o comentário abaixo chama de discreta. */
  .compat__title { text-align: center; }
  .compat__sub {
    color: var(--color-paper-dim);
    text-align: center;
    max-width: 56ch;
    margin: var(--space-xs) auto 0;
  }
  .compat-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm) var(--space-lg);
    margin: var(--space-lg) 0 0;
    padding: 0;
  }
  .compat-strip__item,
  .compat-strip__item a {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-paper-dim);
  }
  .compat-strip__item a:hover,
  .compat-strip__item a:focus-visible { color: var(--color-signal); }

  /* O nome do modelo servido tem peso maior que o das ferramentas: é o
     produto, elas são o contexto. */
  .compat-strip__item--wordmark { color: var(--color-paper); }

  /* Slot do logotipo de terceiro, para quando o arquivo existir.
     A forma PREFERIDA é trocar o conteúdo do <li> por uma tag de imagem com
     texto alternativo (ver assets/img/brands/LEIA-ME.md): ela degrada sozinha,
     imprime, e sobrevive ao modo de alto contraste forçado. Esta regra é o
     caminho alternativo, e por isso não esconde o texto fora da tela: em
     forced-colors o fundo é descartado pelo sistema, então o rótulo volta a
     aparecer em vez de deixar um buraco de 112x28. */
  .compat-strip__item--brand { display: inline-flex; align-items: center; }
  /* O SVG oficial não traz `fill`, então renderiza preto — invisível sobre o
     vidro quase-preto. `brightness(0) invert(1)` zera qualquer cor e devolve
     branco puro, preservando a forma exata do arquivo original: recolorimos a
     exibição, nunca redesenhamos a marca. A opacidade alinha o peso visual ao
     dos rótulos de ferramenta ao lado, para a faixa não ficar desequilibrada. */
  .brand-logo {
    height: 34px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    /* Opacidade cheia: a 0,72 o logotipo somia no fundo escuro e a queixa do
       usuário foi exatamente essa — "não tem logo em lugar nenhum". */
    opacity: 1;
  }
  /* No cabeçalho do osciloscópio, que é o elemento mais visível da página:
     alinhado ao rótulo do canal, na altura da tipografia de label. */
  .brand-logo--scope { height: 20px; }
  .scope__channel-sep { color: var(--color-graticule); margin: 0 2px; }
  /* Em alto contraste forçado o filtro é descartado pelo sistema; sem isto o
     logo voltaria a preto sobre fundo do sistema. */
  @media (forced-colors: active) {
    .brand-logo { filter: none; opacity: 1; }
  }

  .compat__disclaimer {
    color: var(--color-paper-dim);
    font-size: 0.8125rem;
    text-align: center;
    max-width: 78ch;
    margin: var(--space-md) auto 0;
    opacity: 0.8;
  }
}

/* -------------- Marca ambiente atravessando o herói ---------------------
   Percurso pedido: canto superior direito -> canto inferior esquerdo, grande e
   contínuo. Herda o conceito do símbolo flutuante do CodeJato/CodeAll
   (.claude-code-symbol), mas troca a "dança" local por uma travessia diagonal.

   Só transform e opacity são animados (composita na GPU, não repinta layout).
   O herói já tem overflow:hidden, então o percurso é recortado pela seção e
   nunca cria barra de rolagem horizontal. */
@layer animations {
  .brand-drift {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .brand-drift__mark {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(220px, 32vw, 460px);
    height: auto;
    opacity: 0.10;
    will-change: transform;
    animation: brand-drift-diagonal 34s linear infinite;
  }
  /* Começa fora da tela em cima à direita e sai fora embaixo à esquerda.
     As porcentagens são do próprio elemento, então o percurso acompanha o
     tamanho da marca em qualquer viewport, sem media query. */
  @keyframes brand-drift-diagonal {
    from { transform: translate(calc(100vw + 10%), -60%) rotate(0deg); }
    to   { transform: translate(-120%, calc(100% + 60%)) rotate(-38deg); }
  }
  /* Movimento ambiente e infinito é o caso mais claro de respeitar a
     preferência: sem isso ele fica girando para quem pediu para parar. */
  @media (prefers-reduced-motion: reduce) {
    .brand-drift__mark {
      animation: none;
      transform: translate(62vw, 8%) rotate(-12deg);
      opacity: 0.07;
    }
  }
}