/* ==========================================================================
   UXL — uxl.one
   CSS puro: @layer, nesting nativo, custom properties, clamp(), propriedades
   lógicas, color-mix(). Sem framework, sem build, sem JS.

   PARA RE-SKINAR: mexe só no @layer tokens.

   Sistema calibrado a partir de awwwards.com (set 2026). O que veio de lá é
   GRAMÁTICA — escala tipográfica, densidade, paleta, raio, ritmo — nunca
   composição nem elementos de marca deles.

   A regra que define o aspeto: só o display é MAIÚSCULAS, a peso 600, com
   line-height 0.94. Tudo o resto é caixa de frase, peso 400, corpo 15px.

   DUAS ARMADILHAS JÁ PAGAS, não repetir:
   1. @layer components ganha SEMPRE a @layer layout, independentemente da
      especificidade. Overrides de cor para .band--dark têm de viver em
      components, senão fica tinta escura sobre fundo escuro.
   2. .band faz a coluna de página com PADDING, não com `margin-inline:auto`
      nos filhos (que centrava parágrafos com medida estreita em vez de os
      alinhar com o título) nem com grid (que impunha modo de display e
      partia secções que já são flex ou grid).
   3. O texto das legendas vive em HTML, nunca dentro do SVG: dentro do SVG
      escala com o viewBox e num telemóvel um rótulo de 12px cai para 3px.
   ========================================================================== */

@layer reset, tokens, base, layout, components;

/* ========================================================================== */
@layer tokens {
  :root {
    /* ---- Paleta -----------------------------------------------------------
       Cinzento quase-neutro, não frio. Superfícies em branco puro: é o
       contraste papel/superfície que dá a profundidade, não sombras. */
    --paper:       #F8F8F8;
    --tint:        #E9E9E9;   /* a banda do topo — na referência o hero é mais
                                 escuro do que o corpo, e é isso que dá o degrau */
    --surface:     #FFFFFF;
    --surface-2:   #F1F1F1;

    --ink:         #222222;   /* nunca #000 */
    --ink-2:       #3F3F3F;   /* corpo secundário — 11.3:1 no papel */
    --mute:        #5E5E5E;   /* etiquetas, legendas — 6.6:1 */
    --line:        #E9E9E9;
    --line-soft:   #F0F0F0;

    /* blocos escuros */
    --dark:        #222222;
    --dark-2:      #2C2C2C;
    --dark-line:   #3E3E3E;
    --on-dark:     #FFFFFF;
    --on-dark-mute:#C9C9C9;

    /* ---- Accent ----------------------------------------------------------
       Laranja, e usado com parcimónia: aparece uma vez por grafismo, sempre
       a marcar a exceção — a coisa que sobrevive ao filtro. Os três cartões
       do hero gozam com o azul/verde/roxo do setor, logo o accent não pode
       ser nenhum deles. */
    --accent:      #F26F0B;

    /* ---- Sinalética do Readiness Assessment ------------------------------
       O único sítio onde a cor carrega significado. Dessaturadas de
       propósito: saturadas entrariam em choque com os cartões do hero. */
    --sig-ready:   #3E7A5E;
    --sig-partial: #B4832B;
    --sig-not:     #A34A3A;

    /* campo dos grafismos */
    --dim:         #C9C9C9;
    --dim-soft:    #E4E4E4;

    /* ---- Tipografia ------------------------------------------------------
       Inter Tight, uma família só, como na referência.
       TODO (perf/privacidade): auto-alojar os .woff2 em /fonts e trocar o
       <link> por @font-face — Inter Tight é SIL OFL, pode alojar-se. */
    --font-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --w-light:   300;   /* o default do corpo na referência */
    --w-body:    400;   /* prosa de leitura — 300 a 15px é fino a mais */
    --w-mid:     500;
    --w-display: 600;

    /* Escala fluida — proporções da referência esticadas para 1440 */
    --t-display:   clamp(2.75rem, 1.1rem + 7.3vw, 8.25rem);   /* 44 → 132 */
    --t-display-2: clamp(2.375rem, 1.2rem + 5.2vw, 6.5rem);   /* 38 → 104 */
    --t-display-3: clamp(2.375rem, 1.4rem + 4.3vw, 5.5rem);   /* 38 →  88 */
    --t-h2:        clamp(1.625rem, 1.2rem + 1.9vw, 2.375rem); /* 26 →  38 */
    --t-h3:        1.25rem;                                    /* 20 */
    --t-stat:      clamp(3.25rem, 2rem + 5.6vw, 4.5rem);      /* 52 →  72 */
    --t-price:     clamp(3.875rem, 2rem + 8.4vw, 8.25rem);    /* 62 → 132 */
    --t-lede:      0.9375rem;                                  /* 15 */
    --t-body:      0.9375rem;                                  /* 15 */
    --t-small:     0.875rem;                                   /* 14 */
    --t-micro:     0.8125rem;                                  /* 13 */
    --t-nano:      0.6875rem;                                  /* 11 */

    --lh-display: 0.94;
    --lh-mid:     1.15;
    --lh-body:    1.55;

    /* ---- Espaço ---------------------------------------------------------- */
    --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
    --s-5: 1.25rem; --s-6: 1.75rem; --s-7: 2.5rem; --s-8: 3.5rem;
    --s-9: clamp(4rem, 2rem + 7vw, 8.5rem);   /* respiro entre secções */

    --measure: 34rem;
    --page:    84rem;    /* 1344 — a coluna de conteúdo a 1440 */
    --gutter:  clamp(1.25rem, .5rem + 2.4vw, 3rem);
    /* Marcadores de lista desenhados em máscara: a cor vem do token. */
    --mark-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7h8.3M7.7 3.3 11.4 7l-3.7 3.7' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --mark-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.7 3.7 10.3 10.3M10.3 3.7 3.7 10.3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");

    --radius:  8px;
    --radius-s: 4px;
  }
}

/* ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important; transition-duration: .01ms !important;
    }
  }

  img, svg { display: block; max-inline-size: 100%; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; }
}

/* ========================================================================== */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--t-body);
    font-weight: var(--w-light);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { font-weight: var(--w-body); letter-spacing: normal; text-wrap: balance; }
  p { text-wrap: pretty; }
  /* O corpo é 300 (como a referência); os parágrafos que se leem a sério
     sobem a 400, senão a 15px fica fino de mais. */
  .prose-col p, .pull, .rule-list p, .unlock-body, .offer .includes li,
  .ready-grid p, .refuse p, .refuse li { font-weight: var(--w-body); }
  strong { font-weight: var(--w-mid); color: var(--ink); }
  em { font-style: normal; color: var(--mute); }
  sup { font-size: .5em; vertical-align: super; }

  .skip {
    position: absolute; inset-inline-start: -9999px;
    &:focus {
      inset-inline-start: var(--gutter); inset-block-start: var(--s-4);
      background: var(--ink); color: var(--surface);
      padding: var(--s-3) var(--s-4); border-radius: var(--radius); z-index: 10;
    }
  }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
}

/* ========================================================================== */
@layer layout {
  main section { padding-inline: var(--gutter); }

  /* O header e o rodapé sangram de margem a margem para que os filetes
     atravessem o ecrã inteiro; o conteúdo volta à coluna de página pelo
     mesmo truque de padding da .band. Antes o filete parava na coluna. */
  .site-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-5);
    padding-inline: max(var(--gutter), calc(50% - var(--page) / 2));
    padding-block: var(--s-5);
    border-block-end: 1px solid var(--line);
  }

  main section {
    max-inline-size: var(--page); margin-inline: auto;
    padding-block: var(--s-9);
  }

  /* A banda do topo: sangra de margem a margem e leva o hero e os specimens.
     É o degrau de tom da referência — header em #F8F8F8, hero em #E9E9E9,
     resto da página em #F8F8F8 outra vez. */
  .ground {
    background: var(--tint);
    padding-block-end: var(--s-9);
  }
  .ground .specimen-section { padding-block-end: 0; }

  /* Banda: sangra de margem a margem, conteúdo volta à coluna de página.
     A coluna é feita com PADDING, não com grid nem margens auto — ver a
     armadilha 2 no topo do ficheiro. Com padding, a banda não impõe modo de
     display nenhum, e secções que são elas próprias flex (.talk) ou grid
     (.two-col) continuam a funcionar e continuam limitadas à página. */
  .band {
    max-inline-size: none;
    background: var(--surface);
    padding-inline: max(var(--gutter), calc(50% - var(--page) / 2));
  }

  .band--dark { background: var(--dark); color: var(--on-dark); }

  .site-foot {
    padding-inline: max(var(--gutter), calc(50% - var(--page) / 2));
    padding-block: var(--s-7);
    border-block-start: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7);
    justify-content: space-between;
    font-size: var(--t-small); color: var(--mute);
  }
}

/* ========================================================================== */
@layer components {

  /* ---- Chrome ----------------------------------------------------------- */
  .wordmark {
    display: inline-flex; align-items: baseline; gap: 2px;
    font-size: 1.375rem; font-weight: var(--w-display); letter-spacing: -0.01em;
    text-decoration: none;
    &::after {
      content: ""; inline-size: 5px; block-size: 5px;
      border-radius: 50%; background: var(--accent);
    }
  }

  .head-nav { display: flex; align-items: center; gap: var(--s-6); }

  /* Em telemóvel o email não cabe no header e já está no rodapé. */
  @media (max-width: 40rem) {
    .head-nav { gap: var(--s-4); }
    .head-nav .link-mute { display: none; }
  }

  .link-quiet {
    color: var(--ink); text-decoration: none; font-size: var(--t-small);
    transition: color .18s ease;
    &:hover { color: var(--accent); }
  }
  .link-mute { color: var(--mute); }

  .link-rule {
    text-decoration: none; font-size: var(--t-lede);
    border-block-end: 1px solid var(--line);
    padding-block-end: 3px;
    transition: color .18s ease, border-color .18s ease;
    &:hover { color: var(--accent); border-color: var(--accent); }
  }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-block-size: 44px;
    background: var(--ink); color: var(--surface);
    text-decoration: none; font-size: var(--t-small);
    padding-inline: var(--s-6); border-radius: var(--radius);
    transition: background .18s ease, color .18s ease, transform .12s ease;
    &:hover { background: var(--accent); color: var(--ink); }
    &:active { transform: translateY(1px); }
  }
  .btn--lg { font-size: var(--t-lede); min-block-size: 52px; padding-inline: var(--s-7); }

  /* Etiqueta pequena. Caixa de FRASE, não maiúsculas — é o que separa este
     sistema do tique "eyebrow em caps com tracking". */
  .label { font-size: var(--t-small); color: var(--mute); }
  .label--micro { font-size: var(--t-micro); }

  /* Eyebrow de secção: a etiqueta ganha uma barra laranja à frente — a mesma
     barra do alfabeto dos grafismos. Só nas quatro que ficam por cima de um
     display; as etiquetas de coluna ficam em texto simples, senão a página
     fica aos pontos laranja. */
  .label--mark {
    display: inline-flex; align-items: center;
    font-size: var(--t-micro); color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 5px 12px;
  }
  /* Nos heros centrados a etiqueta tem de se centrar com a marca incluída. */
  /* Num hero centrado o chip tem de se centrar como bloco, não esticar. */
  .hero .label--mark, .statement .label--mark, .price-teaser .label--mark {
    align-self: center;
  }

  /* Uma frase por linha, quando as frases são curtas e paralelas: o texto
     deixa de quebrar onde calha e passa a ter simetria. Em ecrã estreito
     cada frase ainda quebra dentro do seu bloco, e isso está certo. */
  .line { display: block; }

  /* A única etiqueta em maiúsculas do site: os gates da página de preços.
     Maiúsculas aqui é funcional — marca uma condição, não uma secção. */
  .gate {
    font-size: var(--t-nano); color: var(--mute);
    text-transform: uppercase; letter-spacing: .05em;
  }

  .tag {
    font-size: var(--t-nano); color: var(--mute);
    border: 1px solid var(--line); border-radius: var(--radius-s);
    padding: 3px 7px;
  }

  /* ---- Display ---------------------------------------------------------- */
  .display, .display-2, .display-3 {
    font-weight: var(--w-display); text-transform: uppercase;
    line-height: var(--lh-display);
  }
  .display   { font-size: var(--t-display); }
  .display-2 { font-size: var(--t-display-2); }
  .display-3 { font-size: var(--t-display-3); }

  .lede { font-size: var(--t-lede); color: var(--mute); max-inline-size: var(--measure); }

  /* ---- Hero ------------------------------------------------------------- */
  /* Above the fold: o header e o início do conteúdo ficam próximos, como na
     referência, para que se veja já o que vem a seguir. O respiro grande
     fica entre secções, não a seguir à navbar. */
  .hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding-block: var(--s-6) 0;

    .display { margin-block-start: var(--s-5); max-inline-size: 22ch; }
    .lede { margin-block-start: var(--s-6); }
  }

  .specimens {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
  }
  @media (max-width: 62rem) { .specimens { grid-template-columns: 1fr; } }

  .specimen {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: clip;

    .chrome {
      display: flex; gap: 6px; padding: var(--s-3) var(--s-4);
      border-block-end: 1px solid var(--line-soft);
      span { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #E0E0E0; }
    }
    .specimen-body {
      display: flex; flex-direction: column; gap: var(--s-5);
      padding: var(--s-7) var(--s-6) var(--s-8);
    }
    .logo-blank {
      inline-size: 54px; block-size: 14px; border-radius: 2px;
      background: repeating-linear-gradient(135deg, #D8D8D8 0 4px, transparent 4px 8px);
    }
    .specimen-claim {
      font-size: 1.375rem; font-weight: var(--w-mid); line-height: 1.25;
    }
    .skeleton {
      display: grid; gap: 8px;
      i { block-size: 7px; border-radius: 4px; background: #EDEDED; }
      i:nth-child(2) { inline-size: 72%; }
    }
    .cta-blank { inline-size: 104px; block-size: 30px; border-radius: var(--radius); }

    /* azul · verde · roxo — as cores do setor, de propósito */
    &[data-accent="a"] .cta-blank { background: #3B82F6; }
    &[data-accent="b"] .cta-blank { background: #00D962; }
    &[data-accent="c"] .cta-blank { background: #8B5CF6; }
  }

  /* O hero e os specimens são um só bloco: o título faz a pergunta e os
     cartões são a resposta. Um respiro de secção inteiro entre os dois
     partia a demonstração ao meio. */
  .specimen-section { padding-block-start: var(--s-8); }

  .meta-row {
    display: flex; flex-wrap: wrap; gap: var(--s-4);
    align-items: center; justify-content: space-between;
    margin-block-start: var(--s-5);
    .tags { display: flex; gap: var(--s-2); }
  }

  /* ---- Grafismos --------------------------------------------------------
     Não são decoração. Cada um É um argumento da página: se pudesse ser
     trocado por outro sem mudar o que a página afirma, não pertencia aqui.
     Alfabeto: barra, linha, ponto. Sem gradientes, sombras, blur, rotação. */
  .figure {
    display: flex; flex-direction: column; gap: var(--s-6);
    figcaption { font-size: var(--t-small); color: var(--mute); }
  }
  .figure svg { inline-size: 100%; block-size: auto; }

  .figure-marked { position: relative; }
  .figure-note {
    position: absolute; inset-block-start: 100%;
    font-size: var(--t-micro); color: var(--accent);
    transform: translateX(-50%); white-space: nowrap;
    padding-block-start: 6px;
  }

  .fig-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: var(--s-7) var(--s-6);
  }

  /* ---- Stats ------------------------------------------------------------ */
  .stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7);
    .stat-n { font-size: var(--t-stat); font-weight: var(--w-display); line-height: 1; }
    .stat-n span { color: var(--mute); }
    .stat-t { font-size: var(--t-small); color: var(--mute); max-inline-size: 26ch; margin-block-start: var(--s-3); }
  }
  @media (max-width: 52rem) { .stats { grid-template-columns: 1fr; gap: var(--s-6); } }

  /* ---- Statement -------------------------------------------------------- */
  .statement {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    .display-2 { margin-block-start: var(--s-6); }
    .lede { margin-block-start: var(--s-6); max-inline-size: 42rem; }
  }

  /* ---- Prosa editorial em duas colunas ---------------------------------- */
  .prose {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) clamp(2rem, 5vw, 5rem);

    h2 { font-size: var(--t-h2); line-height: var(--lh-mid); font-weight: var(--w-mid); }
    .prose-sub { font-size: var(--t-lede); color: var(--mute); margin-block-start: var(--s-6); max-inline-size: 30rem; }
    .prose-col { display: flex; flex-direction: column; gap: var(--s-6); }
    .prose-col p { color: var(--ink-2); }
    .pull { font-size: 1.1875rem; line-height: 1.4; color: var(--ink); }
  }
  @media (max-width: 58rem) { .prose { grid-template-columns: 1fr; } }

  /* ---- Método (banda escura) -------------------------------------------- */
  .method {
    .method-head {
      display: flex; flex-wrap: wrap; align-items: flex-end;
      justify-content: space-between; gap: var(--s-7);
    }
    .method-head p { font-size: var(--t-lede); max-inline-size: 26rem; }

    .steps {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5);
      margin-block-start: var(--s-9);

      li {
        background: var(--dark-2); border-radius: var(--radius);
        padding: var(--s-6) var(--s-6) var(--s-7);
        display: flex; flex-direction: column; gap: var(--s-3);
        min-block-size: 14rem;
      }
      .step-n { font-size: var(--t-micro); color: var(--accent); }
      h3 { font-size: var(--t-h3); font-weight: var(--w-mid); line-height: 1.25; }
      li p:last-child { font-size: var(--t-small); }
    }

    .method-figure {
      margin-block-start: var(--s-8);
      padding-block-start: var(--s-8);
      border-block-start: 1px solid var(--dark-line);
    }

    .outcome { font-size: 1.1875rem; margin-block-start: var(--s-9); max-inline-size: 44rem; }
  }
  @media (max-width: 68rem) { .method .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 40rem) { .method .steps { grid-template-columns: 1fr; } }

  /* Armadilha 1: estes overrides TÊM de viver em components. */
  .band--dark {
    h1, h2, h3 { color: var(--on-dark); }
    p { color: var(--on-dark-mute); }
    /* `strong` tem cor própria vinda de @layer base, e a cor de `p` não
       atravessa um elemento que define a sua. Sem esta linha, os <strong>
       ficavam #222 sobre #222 — invisíveis. */
    strong { color: var(--on-dark); }
    em { color: var(--on-dark-mute); }
    .label, .label--micro, .gate { color: var(--on-dark-mute); }
    .outcome, .pull { color: var(--on-dark); }
    .rule-list p { border-color: var(--dark-line); color: var(--on-dark); }
    .tag { border-color: var(--dark-line); color: var(--on-dark-mute); }
    .btn { background: var(--surface); color: var(--ink); }
    .btn:hover { background: var(--accent); }
  }

  /* ---- Listas de regras (Built for / Not for, recusas) ------------------- */
  .two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) clamp(2rem, 5vw, 5rem);
  }
  @media (max-width: 58rem) { .two-col { grid-template-columns: 1fr; } }

  /* Marcador de lista: a mesma barra do alfabeto, alinhada com a primeira
     linha. Laranja nas listas afirmativas (o que é, o que garanto), esbatido
     nas negativas — marcar recusas a accent contradizia a regra de que o
     laranja assinala o que sobrevive, não o que fica de fora. */
  .rule-list {
    display: flex; flex-direction: column;
    margin-block-start: var(--s-5);
    p {
      position: relative;
      font-size: 1.0625rem; line-height: 1.35;
      padding-block: var(--s-4);
      padding-inline-start: var(--s-7);
      border-block-start: 1px solid var(--line);

      &::before {
        content: ""; position: absolute;
        inset-inline-start: 0; inset-block-start: calc(var(--s-4) + 0.62em);
        inline-size: 20px; block-size: 2px;
        background: var(--accent);
      }
    }
    p:last-child { border-block-end: 1px solid var(--line); }
  }
  .rule-list--mute p {
    color: var(--mute);
    &::before { background: var(--dim); }
  }
  /* Só o marcador esbatido: o texto das recusas é conteúdo forte, não nota. */
  .rule-list--neg p::before { background: var(--dim); }

  /* ---- Preço na home ---------------------------------------------------- */
  .price-teaser {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    .teaser-price { font-size: var(--t-price); font-weight: var(--w-display); line-height: 1; margin-block-start: var(--s-5); }
    .lede { margin-block-start: var(--s-6); }
    .link-rule { margin-block-start: var(--s-6); }
  }

  /* ---- Página de preços -------------------------------------------------- */
  .offer {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 1rem + 2.4vw, 3.5rem);

    .offer-head {
      display: flex; flex-wrap: wrap; align-items: flex-start;
      justify-content: space-between; gap: var(--s-5) var(--s-7);
      padding-block-end: var(--s-7);
      border-block-end: 1px solid var(--line);
    }
    .offer-name { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); font-weight: var(--w-mid); line-height: 1.1; }
    .offer-meta { font-size: var(--t-small); color: var(--mute); margin-block-start: var(--s-2); }
    .offer-price { font-size: clamp(3rem, 1.6rem + 4.4vw, 4.75rem); font-weight: var(--w-display); line-height: 1; white-space: nowrap; }

    .pilot {
      display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3);
      margin-block-start: var(--s-6); max-inline-size: 46rem;
      p { font-size: var(--t-lede); color: var(--ink-2); }
    }
    .pilot-tag {
      font-size: var(--t-nano); color: var(--surface); background: var(--accent);
      border-radius: var(--radius-s); padding: 4px 8px; white-space: nowrap;
      text-transform: uppercase; letter-spacing: .05em;
    }

    .includes {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4vw, 4rem);
      margin-block-start: var(--s-8);
      ul { display: flex; flex-direction: column; }
      li {
        position: relative;
        font-size: 1rem; padding-block: var(--s-4);
        padding-inline-start: var(--s-7);
        border-block-start: 1px solid var(--line-soft);

        &::before {
          content: ""; position: absolute;
          inset-inline-start: 0; inset-block-start: calc(var(--s-4) + 0.66em);
          inline-size: 20px; block-size: 2px;
          background: var(--accent);
        }
      }
    }

    .offer-foot {
      display: flex; flex-wrap: wrap; align-items: center;
      justify-content: space-between; gap: var(--s-5);
      margin-block-start: var(--s-8);
    }
  }
  @media (max-width: 52rem) { .offer .includes { grid-template-columns: 1fr; } }

  .anchor-note { font-size: var(--t-small); color: var(--mute); max-inline-size: 34rem; }

  .ready-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5);
    margin-block-start: var(--s-9);

    > li {
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--radius); padding: var(--s-6);
      display: flex; flex-direction: column; gap: var(--s-4);
    }
    .ready-head { display: flex; align-items: center; gap: 9px; }
    .dot { inline-size: 9px; block-size: 9px; border-radius: 50%; }
    .dot[data-r="ready"]   { background: var(--sig-ready); }
    .dot[data-r="partial"] { background: var(--sig-partial); }
    .dot[data-r="not"]     { background: var(--sig-not); }
    h3 { font-size: var(--t-h3); font-weight: var(--w-mid); }
    p { font-size: var(--t-small); color: var(--ink-2); }
    .ready-cap { color: var(--mute); }
    svg { inline-size: 121px; block-size: auto; }
  }
  @media (max-width: 58rem) { .ready-grid { grid-template-columns: 1fr; } }

  .unlock-list { display: flex; flex-direction: column; margin-block-start: var(--s-5); }

  .unlock {
    display: grid; grid-template-columns: 18rem 1fr 11rem;
    gap: var(--s-4) clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    padding-block: var(--s-6);
    border-block-start: 1px solid var(--line);

    h3 { font-size: 1.5rem; font-weight: var(--w-mid); line-height: 1.2; }
    .gate { display: block; margin-block-start: var(--s-2); }
    .unlock-body { font-size: var(--t-lede); color: var(--ink-2); max-inline-size: 36rem; }
    .unlock-price { font-size: 1.5rem; text-align: end; white-space: nowrap; }
    .per { font-size: var(--t-lede); color: var(--mute); }
    .anchor-note { margin-block-start: var(--s-3); }
  }
  .unlock-list .unlock:last-child { border-block-end: 1px solid var(--line); }

  @media (max-width: 64rem) {
    .unlock {
      grid-template-columns: 1fr auto;
      .unlock-body { grid-column: 1 / -1; }
      .anchor-note { grid-column: 1 / -1; }
    }
  }

  /* ---- CTA -------------------------------------------------------------- */
  .talk {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: var(--s-7);
    .talk-copy { max-inline-size: 42rem; }
    .lede { margin-block-start: var(--s-6); max-inline-size: 38rem; }
  }
}

/* ==========================================================================
   Adenda — legendas dos grafismos.
   O texto vive em HTML, nunca dentro do SVG: dentro do SVG o tamanho escala
   com o viewBox e num telemóvel um rótulo de 12px caía para 3px.
   ========================================================================== */
@layer components {
  .fig-ends {
    display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
    justify-content: space-between;
    font-size: var(--t-micro); color: var(--mute);
    margin-block-start: var(--s-4);
  }
}

/* ==========================================================================
   Adenda — wordmark e a nota do grafismo dos dezoito.
   ========================================================================== */
@layer components {
  .wordmark {
    display: inline-flex; align-items: center;
    img { block-size: 26px; inline-size: auto; }
    &::after { content: none; }   /* o logótipo novo já é a marca inteira */
  }
  .figure-marked { padding-block-end: 1.75rem; }
}

/* ==========================================================================
   Adenda — correções depois da revisão de 15 set.
   ========================================================================== */
@layer components {
  /* As três frases têm comprimentos diferentes de propósito. Sem uma altura
     mínima, a que quebra em duas linhas desalinhava o resto do cartão e a
     comparação deixava de ser lado a lado. */
  .specimen-claim { min-block-size: 3.4em; }

  /* A nota vive dentro do respiro do próprio grafismo, não a seguir a ele. */
  .figure-marked { padding-block-end: 2.25rem; }
  .figure-note { inset-block-start: auto; inset-block-end: 0; padding-block-start: 0; }
}

@layer layout {
  /* O degrau de tom já separa as duas secções — o respiro de secção inteiro
     a seguir à banda era espaço a dobrar. */
  .ground { padding-block-end: var(--s-8); }
  .evidence { padding-block-start: var(--s-7); }
}

/* ==========================================================================
   Adenda — revisão 15 set (fim de tarde).
   ========================================================================== */
@layer components {
  /* Eyebrow: só contorno, sem fundo. */
  .label--mark { background: transparent; }

  /* "For scale: …" é um anchor de preço, não uma legenda. Estava a ler-se
     como nota de rodapé. Ganha um ponto laranja e sobe de tom — continua no
     mesmo sítio e no mesmo tamanho. */
  .anchor-note {
    position: relative;
    color: var(--ink-2);
    padding-inline-start: var(--s-5);
    &::before {
      content: ""; position: absolute;
      inset-inline-start: 0; inset-block-start: 0.55em;
      inline-size: 7px; block-size: 7px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }
  }
  .band--dark .anchor-note { color: var(--on-dark-mute); }

  /* Glifos dos quatro passos do método — mesmo alfabeto (barra, linha,
     ponto), um elemento laranja em cada, nada mais. */
  .step-glyph {
    inline-size: 56px; block-size: 34px;
    margin-block-end: var(--s-2);
  }
}

@layer layout {
  /* A página volta a ser toda da mesma cor — o degrau de tom no hero não
     passou no teste do Rúben. */
  .ground { background: transparent; }
}

/* ==========================================================================
   Adenda — barra de objeções, prosa em percurso vertical, diagnóstico e FAQ.
   ========================================================================== */
@layer components {

  /* ---- Barra em loop: as objeções, respondidas ---------------------------
     Não é decoração e não duplica nada da página — é a objection architecture
     a passar. Duas cópias da lista lado a lado e uma translação de -50%:
     é o que faz o ciclo não ter costura. */
  .ticker {
    overflow: clip;
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    font-size: var(--t-micro);
    padding-block: 9px;

    .ticker-track {
      display: flex; inline-size: max-content;
      animation: ticker 64s linear infinite;
    }
    .ticker-run { display: flex; align-items: center; gap: var(--s-7); padding-inline-end: var(--s-7); }
    .ticker-item { display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
    .ticker-q { color: var(--ink); }
    .ticker-a { color: var(--mute); }
    .ticker-sep { inline-size: 14px; block-size: 1px; background: var(--accent); flex: none; }
    &:hover .ticker-track { animation-play-state: paused; }
  }
  @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  @media (prefers-reduced-motion: reduce) {
    .ticker .ticker-track { animation: none; }
    .ticker .ticker-run:nth-child(2) { display: none; }
  }

  /* ---- Prosa em percurso vertical ---------------------------------------
     Antes eram duas colunas com um bloco de texto de cada lado. Agora desce
     em quatro tempos e corta cerca de metade das palavras. */
  .flow {
    display: flex; flex-direction: column;
    h2 { font-size: var(--t-h2); line-height: var(--lh-mid); font-weight: var(--w-body); max-inline-size: 22ch; }
  }

  .beats {
    display: flex; flex-direction: column;
    margin-block-start: var(--s-8);
    max-inline-size: 46rem;

    p {
      font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
      line-height: 1.3; color: var(--mute);
      padding-block: var(--s-6);
      border-block-start: 1px solid var(--line);
    }
    p:last-child {
      color: var(--ink);
      border-block-end: 1px solid var(--line);
    }
  }
  /* A viragem é o último tempo: os dois primeiros são o acordo, o terceiro é
     o problema. Por isso só ele está em tinta cheia. */
  .band--dark .beats p { color: var(--on-dark-mute); border-color: var(--dark-line); }
  .band--dark .beats p:last-child { color: var(--on-dark); }

  .flow-figure { margin-block-start: var(--s-9); }
  .flow-close {
    font-size: var(--t-lede); color: var(--ink-2);
    max-inline-size: 34rem; margin-block-start: var(--s-8);
    margin-inline-start: auto;   /* fecha à direita, a contrapeso do título */
  }

  /* ---- Diagnóstico ------------------------------------------------------- */
  .diagnostic {
    display: grid; grid-template-columns: 1fr 22rem;
    gap: var(--s-8) clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  @media (max-width: 62rem) { .diagnostic { grid-template-columns: 1fr; } }

  .checks {
    display: flex; flex-direction: column;
    margin-block-start: var(--s-6);

    label {
      display: flex; align-items: flex-start; gap: var(--s-4);
      padding-block: var(--s-4);
      border-block-start: 1px solid var(--line);
      font-size: 1.0625rem; line-height: 1.35; color: var(--ink);
      cursor: pointer;
      transition: color .15s ease;
      &:hover { color: var(--accent); }
    }
    label:last-child { border-block-end: 1px solid var(--line); }

    input {
      appearance: none; margin: 0; flex: none;
      inline-size: 18px; block-size: 18px; margin-block-start: 3px;
      border: 1px solid var(--ink-2); border-radius: var(--radius-s);
      background: var(--surface);
      display: grid; place-content: center;
      cursor: pointer;
      &::after {
        content: ""; inline-size: 9px; block-size: 9px; border-radius: 1px;
        background: var(--accent); transform: scale(0);
        transition: transform .12s ease;
      }
      &:checked { border-color: var(--accent); }
      &:checked::after { transform: scale(1); }
    }
  }

  .verdict {
    position: sticky; inset-block-start: var(--s-7);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-7) var(--s-6);
    display: flex; flex-direction: column; gap: var(--s-5);

    .verdict-meter { display: flex; gap: 7px; }
    .verdict-meter i {
      inline-size: 22px; block-size: 8px; border-radius: 2px;
      background: var(--dim-soft);
      transition: background .18s ease;
    }
    .verdict-meter i[data-on="1"] { background: var(--accent); }
    .verdict-line { font-size: 1.25rem; line-height: 1.3; }
    .verdict-note { font-size: var(--t-small); color: var(--mute); }
  }

  /* ---- FAQ --------------------------------------------------------------
     <details> nativo: sem JS, acessível, e o texto fica sempre no DOM —
     que é o que faz um LLM conseguir citá-lo mesmo fechado. */
  .faq {
    display: flex; flex-direction: column;
    margin-block-start: var(--s-6); max-inline-size: 52rem;

    details {
      border-block-start: 1px solid var(--line);
      &:last-of-type { border-block-end: 1px solid var(--line); }
    }
    summary {
      display: flex; align-items: flex-start; gap: var(--s-4);
      padding-block: var(--s-5);
      font-size: 1.25rem; line-height: 1.3;
      cursor: pointer; list-style: none;
      &::-webkit-details-marker { display: none; }
      &::before {
        content: ""; flex: none;
        inline-size: 14px; block-size: 2px; background: var(--accent);
        margin-block-start: 0.58em;
        transition: transform .18s ease;
      }
      &:hover { color: var(--accent); }
    }
    details[open] summary::before { transform: rotate(90deg); }
    .faq-a {
      font-size: var(--t-lede); color: var(--ink-2);
      max-inline-size: 40rem;
      padding-inline-start: calc(14px + var(--s-4));
      padding-block-end: var(--s-6);
    }
  }
}

@layer components {
  /* O grafismo do gap a 1344px esticava o viewBox de 560 em 2,4× e perdia a
     densidade — a distância deixava de se ler como medida e passava a vazio. */
  .flow-figure { max-inline-size: 52rem; }
  .flow h2 { max-inline-size: 28ch; }
}

/* ==========================================================================
   Adenda — 15 set, fim do dia.
   Legibilidade (medida no awwwards), marcadores de lista, botões e navbar
   segundo a Bricx Labs.
   ========================================================================== */
@layer components {

  /* ---- Legibilidade -----------------------------------------------------
     Medição no awwwards: 111 dos 142 elementos com texto estão a #222 —
     títulos, corpo, legendas, assinaturas, rótulos de 7px. O cinzento
     #A7A7A7 aparece cinco vezes, sempre a 12px/300 e sempre em categorias
     de menu, nunca em conteúdo. Ou seja: a hierarquia deles vem de tamanho
     e peso, não de desbotar a cor. Aqui estava ao contrário — todo o texto
     de apoio caía para cinzento e deixava de se ler.
     Os tokens desceram de tom (ver @layer tokens) e o que é CONTEÚDO sobe
     de --mute para --ink-2. Fica em --mute só o que é mesmo metadado. */
  .lede,
  .ticker-a,
  .tag,
  .stat-t,
  .prose-sub,
  .offer-meta,
  .anchor-note,
  .verdict-note,
  .per,
  .ready-cap { color: var(--ink-2); }

  /* No ticker o par pergunta/resposta separa-se por peso, não por cor. */
  .ticker-q { font-weight: var(--w-mid); }

  /* As etiquetas de segmento tinham contorno e texto quase da mesma cor. */
  .tag { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }

  /* ---- Marcadores de lista ----------------------------------------------
     A barra laranja era o mesmo sinal para afirmar e para recusar. Agora:
     seta para o que avança, cruz para o que não fazemos. Desenhados em
     máscara para que a cor venha do token e não do ficheiro. */
  .rule-list p::before,
  .offer .includes li::before,
  .diagnostic summary::before,
  .faq summary::before {
    inline-size: 14px; block-size: 14px;
    background: var(--accent);
    -webkit-mask: var(--mark-arrow) center / 14px 14px no-repeat;
    mask: var(--mark-arrow) center / 14px 14px no-repeat;
  }
  .rule-list p::before,
  .offer .includes li::before {
    inset-block-start: calc(var(--s-4) + 0.62em - 6px);
  }

  /* Recusas e exclusões: cruz, no vermelho do "not ready" do assessment —
     o mesmo vocabulário de sinalética, não uma cor nova. */
  .rule-list--mute p::before,
  .rule-list--neg p::before {
    background: var(--sig-not);
    -webkit-mask-image: var(--mark-cross);
    mask-image: var(--mark-cross);
  }

  /* Na FAQ a seta roda para baixo quando abre, como um disclosure. */
  .faq summary::before {
    margin-block-start: 0.38em;
    transition: transform .2s ease;
  }
  .faq details[open] summary::before { transform: rotate(90deg); }

  /* ---- Ticker -----------------------------------------------------------
     O par pergunta/resposta precisa de ar à volta, senão lê-se como uma
     frase só. O padding final tem de ser igual ao gap, senão o ponto de
     costura do loop salta. */
  .ticker {
    --ticker-gap: clamp(3rem, 6vw, 6.5rem);
    .ticker-run { gap: var(--ticker-gap); padding-inline-end: var(--ticker-gap); }
  }

  /* ---- Botões -----------------------------------------------------------
     Geometria medida na bricxlabs.com: 44px de altura mínima, raio total,
     16px de padding lateral (20px acima de 768), 8px entre ícone e texto,
     14px/500 (16px acima de 768), e a seta que abre no hover com
     cubic-bezier(.19,1,.22,1) a 440ms. */
  .btn {
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: var(--w-mid);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    &:hover { background: var(--ink); color: var(--on-dark); transform: scale(1.02); }
    &:active { transform: scale(.99); }
  }
  @media (min-width: 48rem) {
    .btn { padding-inline: 20px; font-size: 1rem; }
  }

  /* Secundário: o mesmo objeto em 5% de tinta, como o bg-black/5 deles. */
  .btn--ghost {
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    color: var(--ink);
    &:hover {
      background: color-mix(in srgb, var(--ink) 10%, transparent);
      color: var(--ink); transform: none;
    }
  }

  .btn--lg { min-block-size: 52px; padding-inline: 22px; border-radius: 999px; }
  @media (min-width: 48rem) { .btn--lg { padding-inline: 26px; } }

  .btn-icon { inline-size: 18px; block-size: 18px; flex: none; }
  .btn--lg .btn-icon { inline-size: 20px; block-size: 20px; }

  /* A seta nasce com largura zero e abre para 22px. O SVG começa fora do
     recorte (130%) e entra — é o que faz o gesto ler-se como avanço e não
     como um ícone que aparece. */
  .btn-arrow {
    display: grid; place-items: start;
    inline-size: 0; flex: none; overflow: hidden;
    margin-inline-start: -8px;
    transition: inline-size .44s cubic-bezier(.19, 1, .22, 1),
                margin .44s cubic-bezier(.19, 1, .22, 1);

    svg {
      inline-size: 18px; block-size: 18px; margin-inline-start: 4px;
      transform: translateX(130%);
      transition: transform .44s cubic-bezier(.19, 1, .22, 1);
    }
  }
  .btn:hover .btn-arrow, .btn:focus-visible .btn-arrow {
    inline-size: 22px; margin-inline-end: -2px;
  }
  .btn:hover .btn-arrow svg, .btn:focus-visible .btn-arrow svg {
    transform: translateX(2px);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-arrow, .btn-arrow svg { transition: none; }
  }

  /* ---- Navbar -----------------------------------------------------------
     Estrutura da Bricx: links à esquerda, marca absolutamente centrada,
     ações à direita. A marca sai do fluxo para ficar no centro ÓPTICO da
     página e não no meio do que sobra entre os dois grupos. */
  .site-head {
    position: relative;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4);
  }
  .nav-left, .nav-right { display: flex; align-items: center; gap: 4px; }
  .nav-right { margin-inline-start: auto; }

  .site-head .wordmark {
    position: absolute;
    inset-inline-start: 50%; transform: translateX(-50%);
    padding-block: 0;
  }

  .nav-pill {
    display: inline-flex; align-items: center;
    block-size: 30px; padding-inline: 12px;
    border-radius: 999px;
    font-size: var(--t-small); font-weight: var(--w-mid);
    letter-spacing: -0.01em; color: var(--ink);
    text-decoration: none;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    box-shadow: 0 1px 1px rgb(0 0 0 / .03);
    transition: background-color .25s ease;
    &:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); }
  }

  /* Na navbar os botões encolhem para os 32px deles. */
  .site-head .btn {
    min-block-size: 32px; block-size: 32px;
    padding: 0 12px; font-size: var(--t-small);
  }
  .site-head .btn-icon { inline-size: 16px; block-size: 16px; }
  .site-head .btn-arrow svg { inline-size: 15px; block-size: 15px; }

  /* Telemóvel, como eles: os links da esquerda desaparecem, a marca volta ao
     fluxo à esquerda, e o botão secundário fica só o ícone num círculo. */
  @media (max-width: 47.99rem) {
    .nav-left { display: none; }
    .site-head .wordmark { position: static; transform: none; }
    .site-head .btn--ghost {
      inline-size: 36px; padding: 0; justify-content: center;
      .btn-label, .btn-arrow { display: none; }
    }
    .site-head .btn--ghost .btn-icon { inline-size: 18px; block-size: 18px; }
  }

  /* ---- Itens do sprint: título em cima, contexto por baixo --------------
     O travessão obrigava a ler título e contexto como uma frase só. */
  .offer .includes li {
    display: flex; flex-direction: column; gap: 5px;
    strong { font-weight: var(--w-mid); line-height: 1.3; }
    .it-sub { font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; }
  }

  /* ---- Distância do painel ao hero --------------------------------------
     O painel do sprint estava a um respiro de secção do bloco de cima; passa
     a ter o mesmo intervalo curto que o hero tem para o seu próprio conteúdo. */
  .ground:has(+ .offer-section) { padding-block-end: 0; }
  .offer-section { padding-block-start: var(--s-6); }

  /* ---- Título em dois tempos --------------------------------------------
     "The assessment decides / not us": em vez do travessão, a segunda linha
     desce e encosta à direita da primeira. A correção lê-se pelo sítio. */
  .h2-split {
    display: flex; flex-direction: column;
    inline-size: fit-content; max-inline-size: 100%;
  }
  .h2-split .h2-tail { align-self: flex-end; }
}

@layer components {
  /* Par de ações no fecho: o primário e o secundário lado a lado, a quebrar
     para baixo em ecrã estreito. */
  .cta-pair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

  /* Variante curta dos beats: mesma mecânica de fios, escala de lede.
     Serve para sequências de apoio, não para a viragem de uma secção. */
  .beats--sm {
    margin-block-start: var(--s-6);
    max-inline-size: 42rem;
    p {
      font-size: var(--t-lede);
      line-height: var(--lh-body);
      color: var(--ink-2);
      padding-block: var(--s-4);
    }
    p:last-child { color: var(--ink); }
  }
}

@layer components {
  /* Na banda escura o vermelho do "not ready" cai para 2.6:1 contra o #222.
     Clareia só o marcador — o token de sinalética mantém-se no papel. */
  .band--dark .rule-list--neg p::before,
  .band--dark .rule-list--mute p::before {
    background: color-mix(in srgb, var(--sig-not) 55%, #FFFFFF);
  }
}

@layer components {
  /* ---- Três falhas de contraste que a auditoria apanhou ------------------ */

  /* 1. As legendas dentro da banda escura ficaram no cinzento do papel
     (#5E5E5E sobre #222 = 2.4:1). Na banda escura o cinzento é outro. */
  .band--dark {
    figcaption, .fig-ends, .figure-note, .stat-t, .lede, .anchor-note {
      color: var(--on-dark-mute);
    }
  }

  /* 2. "1 of 18" estava em laranja sobre papel: 2.8:1. O laranja é para
     marcar, não para escrever — a nota passa a tinta e o marcador fica. */
  .figure-note { color: var(--ink-2); }

  /* 3. Branco sobre o laranja dá 3.0:1. Tinta sobre o mesmo laranja dá 5.0:1
     e a etiqueta continua a ler-se como etiqueta. */
  .offer .pilot-tag { color: var(--ink); }
}

/* ==========================================================================
   Adenda — 15 set, ronda final.
   ========================================================================== */
@layer components {

  /* ---- 1. Respiro entre a navbar e o primeiro eyebrow ------------------- */
  .hero { padding-block-start: var(--s-7); }

  /* ---- 10. Navbar que se esconde a descer e volta a subir ---------------- */
  .site-head {
    position: sticky; inset-block-start: 0; z-index: 30;
    background: var(--paper);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                background-color .3s ease, box-shadow .3s ease;
  }
  .site-head[data-nav="down"] { transform: translateY(-101%); }
  .site-head[data-nav="up"] {
    background: color-mix(in srgb, var(--paper) 72%, transparent);
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    box-shadow: 0 1px 0 var(--line), 0 10px 24px rgb(0 0 0 / .04);
  }
  @media (prefers-reduced-motion: reduce) {
    .site-head, .site-head[data-nav="down"] { transform: none; transition: none; }
  }

  /* ---- 7. Built for / Not for: isto é conteúdo, não uma tabela ----------- */
  .rule-list p {
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    line-height: 1.4;
    padding-block: var(--s-5);
  }
  .rule-list p::before { inset-block-start: calc(var(--s-5) + 0.58em - 7px); }

  /* ---- 5. A secção da prosa ---------------------------------------------
     Três problemas de uma vez: tudo encostado à esquerda com o lado direito
     vazio, a figura sem zona própria, e o parágrafo de fecho a bater de
     frente com o rótulo "What they understand" logo acima.
     O fecho sobe para contrapeso do título, a figura ganha uma placa, e os
     rótulos dos extremos passam a viver dentro dela. */
  .flow-head {
    display: grid; grid-template-columns: 1.1fr .9fr;
    gap: var(--s-7) clamp(2.5rem, 6vw, 6rem);
    align-items: end;
  }
  .flow-head h2 { max-inline-size: none; }
  .flow .flow-close {
    margin-inline-start: 0; margin-block-start: 0;
    max-inline-size: 32rem;
  }
  @media (max-width: 62rem) {
    .flow-head { grid-template-columns: 1fr; align-items: start; }
  }

  .flow .beats { max-inline-size: none; }

  .flow-figure { max-inline-size: none; margin-block-start: var(--s-9); }
  .plate {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 1rem + 2.2vw, 3rem);

    figcaption {
      font-size: var(--t-h3); font-weight: var(--w-mid);
      color: var(--ink); margin-block-end: 2px;
    }
    .plate-sub {
      font-size: var(--t-small); color: var(--ink-2);
      margin-block-end: var(--s-7);
    }
    svg { margin-block-end: var(--s-4); }
    .fig-ends { margin-block-start: 0; }
  }

  /* ---- 8. O painel do diagnóstico ---------------------------------------
     Antes era discreto de mais e o medidor sozinho não dizia nada até se
     marcar a primeira caixa. Agora tem uma cara desenhada — a boca é um
     path que muda — e tanto ela como as barras tomam a cor da sinalética
     do Readiness Assessment, que é o mesmo juízo feito mais tarde. */
  .verdict {
    inset-block-start: calc(64px + var(--s-5));
    padding: var(--s-7) var(--s-6);
    gap: var(--s-5);

    --sig: var(--mute);
    &[data-state="ready"]   { --sig: var(--sig-ready); }
    &[data-state="partial"] { --sig: var(--sig-partial); }
    &[data-state="not"]     { --sig: var(--sig-not); }

    .verdict-label {
      font-size: var(--t-nano); color: var(--mute);
      text-transform: uppercase; letter-spacing: .06em;
    }
    .verdict-face svg { display: block; }
    .vf-ring  { stroke: var(--sig); transition: stroke .3s ease; }
    .vf-eye   { fill: var(--sig); transition: fill .3s ease; }
    .vf-mouth { stroke: var(--sig); transition: stroke .3s ease, d .3s ease; }

    .verdict-meter i[data-on="1"] { background: var(--sig); }
    .verdict-line {
      font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
      font-weight: var(--w-mid);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .verdict .vf-ring, .verdict .vf-eye, .verdict .vf-mouth { transition: none; }
  }

  /* ---- 11a. As cinco superfícies como objeto, não como aposto ------------ */
  .surfaces {
    margin-block-start: var(--s-7);
    max-inline-size: 46rem;

    .surfaces-lede {
      font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
      line-height: 1.3;
    }
    .surfaces-tags { margin-block-start: var(--s-5); }
    .beats--sm { margin-block-start: var(--s-6); }
  }
  .tags { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }

  /* ---- 11b. Os três estados, visualmente separados ---------------------- */
  .ready-grid > li {
    position: relative; overflow: hidden;
    gap: var(--s-5);
    border-color: color-mix(in srgb, var(--sig) 32%, var(--line));

    &::before {
      content: ""; position: absolute;
      inset-block-start: 0; inset-inline: 0;
      block-size: 3px; background: var(--sig);
    }
  }
  .ready-grid > li[data-r="ready"]   { --sig: var(--sig-ready); }
  .ready-grid > li[data-r="partial"] { --sig: var(--sig-partial); }
  .ready-grid > li[data-r="not"]     { --sig: var(--sig-not); }

  .ready-grid > li h3 { color: var(--sig); }

  .ready-list {
    display: flex; flex-direction: column; list-style: none;
    li {
      position: relative;
      font-size: var(--t-small); line-height: 1.5; color: var(--ink-2);
      padding-block: var(--s-3);
      padding-inline-start: var(--s-6);
      border-block-start: 1px solid var(--line-soft);

      &::before {
        content: ""; position: absolute;
        inset-inline-start: 0; inset-block-start: calc(var(--s-3) + 0.62em - 6px);
        inline-size: 12px; block-size: 12px;
        background: var(--sig);
        -webkit-mask: var(--mark-arrow) center / 12px 12px no-repeat;
        mask: var(--mark-arrow) center / 12px 12px no-repeat;
      }
    }
  }
  .ready-cap { font-size: var(--t-small); color: var(--mute); margin-block-start: auto; }
}

@layer components {
  /* Os <h3> e <p> dentro do cartão herdavam regras pensadas para o cartão. */
  .ready-list { gap: 0; }

  /* Fecho da prosa: a 15px lia-se como legenda ao lado de um display. */
  .flow .flow-close { font-size: 1.0625rem; line-height: 1.6; }
  .flow-figure { margin-block-start: var(--s-8); }

  /* O painel do diagnóstico ganha presença: a cara maior, uma aresta de cor
     no topo como nos cartões do assessment, e sombra para descolar do papel. */
  .verdict {
    padding-block-start: var(--s-6);
    position: sticky; overflow: hidden;
    box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 28px rgb(0 0 0 / .05);

    &::before {
      content: ""; position: absolute;
      inset-block-start: 0; inset-inline: 0;
      block-size: 3px; background: var(--sig);
      transition: background .3s ease;
    }
    .verdict-face svg { inline-size: 76px; block-size: 76px; }
  }
}

@layer components {
  /* O âmbar da sinalética dá 3.4:1 a 20px — chega para um ponto ou um fio,
     não para texto. O título do cartão usa uma variante escurecida; o resto
     do cartão mantém o âmbar medido. */
  .ready-grid > li { --sig-ink: var(--sig); }
  .ready-grid > li[data-r="partial"] { --sig-ink: #8A6318; }
  .ready-grid > li h3 { color: var(--sig-ink); }
}

/* ==========================================================================
   Adenda — rodapé, calendário do sprint e acertos finais.
   ========================================================================== */
@layer components {

  /* ---- 2. Rodapé: marca à esquerda, tagline ao centro, email à direita --- */
  .site-foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-5) var(--s-7);
    padding-block: var(--s-6);
  }
  .foot-mark {
    justify-self: start;
    display: inline-flex; align-items: center;
    img { block-size: 20px; inline-size: auto; opacity: .9; }
  }
  .foot-line { justify-self: center; text-align: center; color: var(--ink-2); }
  .foot-mail { justify-self: end; }

  @media (max-width: 44rem) {
    .site-foot {
      grid-template-columns: 1fr; justify-items: start; gap: var(--s-4);
    }
    .foot-line, .foot-mail { justify-self: start; text-align: start; }
  }

  /* ---- 3. Etiqueta do piloto -------------------------------------------
     Tinta sobre laranja dá 5:1, que a 11px em maiúsculas ainda se lê com
     esforço. Passa ao mesmo objeto dos eyebrows — contorno, tinta cheia — e
     o laranja fica no ponto, que é sinal e não suporte de texto. */
  .offer .pilot-tag {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; color: var(--ink);
    border: 1px solid var(--line);
    font-size: var(--t-micro); text-transform: none; letter-spacing: 0;
    padding: 5px 12px;

    i {
      inline-size: 6px; block-size: 6px; border-radius: 50%;
      background: var(--accent); flex: none;
    }
  }

  /* ---- 4. "The assessment decides. Not us." -----------------------------
     Sem travessão e sem desencontro de linhas: duas frases, e a segunda
     recua um tom. O ponto final faz o trabalho que o travessão fazia mal. */
  .h2-quiet { color: var(--mute); }

  /* ---- 5. As três frases das superfícies à mesma escala ------------------ */
  .surfaces .beats--sm p {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    line-height: 1.3;
  }

  /* ---- 1. A saída dentro do painel do diagnóstico ------------------------ */
  .verdict-cta {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin-block-start: var(--s-2);
  }
  .verdict-cta .btn { min-block-size: 38px; padding: 0 14px; font-size: var(--t-small); }

  /* ---- 6. O calendário do sprint ----------------------------------------
     Duas placas: a pré-semana em duas colunas (o vosso lado / o nosso), e as
     quatro semanas numa grelha de cinco dias com filetes entre colunas. */
  .sprint-map {
    .plate { margin-block-start: var(--s-7); }
    .prework .prework-cols {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: var(--s-6) clamp(2rem, 5vw, 5rem);
      margin-block-start: var(--s-6);

      h3 { font-size: var(--t-h3); font-weight: var(--w-mid); margin-block-end: var(--s-3); }
      p { font-size: var(--t-lede); line-height: var(--lh-body); color: var(--ink-2); }
      .prework-note { color: var(--mute); margin-block-start: var(--s-3); }
    }

    .weeks { padding: 0; overflow: hidden; }
    .week {
      padding: clamp(1.25rem, 1rem + 1.4vw, 2rem) clamp(1.25rem, 1rem + 1.4vw, 2rem) 0;
      border-block-start: 1px solid var(--line);
      &:first-child { border-block-start: 0; }
    }

    .days {
      display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
      margin-block-start: var(--s-5);
    }
    .day {
      padding: 0 var(--s-5) clamp(1.25rem, 1rem + 1.4vw, 2rem);
      border-inline-start: 1px dashed var(--line);
      &:first-child { border-inline-start: 0; padding-inline-start: 0; }

      .day-n {
        font-size: var(--t-nano); color: var(--mute);
        text-transform: uppercase; letter-spacing: .06em;
      }
      h4 {
        font-size: 1rem; font-weight: var(--w-mid); line-height: 1.25;
        margin-block-start: var(--s-2);
      }
      .day-t { font-size: var(--t-micro); color: var(--accent); margin-block-start: 2px; }
      p:last-child {
        font-size: var(--t-small); line-height: 1.5; color: var(--ink-2);
        margin-block-start: var(--s-3);
      }
    }
  }

  /* A etiqueta da semana usa o mesmo chip dos eyebrows. */
  .week-tag {
    display: inline-flex; align-items: center;
    font-size: var(--t-micro); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-s);
    padding: 5px 12px;
  }

  /* Abaixo de 62rem os cinco dias empilham em duas colunas e depois numa. */
  @media (max-width: 68rem) {
    .sprint-map .days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) 0; }
    .sprint-map .day:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  }
  @media (max-width: 40rem) {
    .sprint-map .days { grid-template-columns: 1fr; }
    .sprint-map .day { border-inline-start: 0; padding-inline-start: 0; padding-block-end: var(--s-5); }
    .sprint-map .prework .prework-cols { grid-template-columns: 1fr; }
  }
}

@layer components {
  /* O laranja a 13px dá 3.0:1 — o mesmo erro do "1 of 18". A duração passa
     a tinta e o laranja fica no ponto, que é o seu trabalho. */
  .sprint-map .day .day-t {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-2);

    &::before {
      content: ""; inline-size: 5px; block-size: 5px;
      border-radius: 50%; background: var(--accent); flex: none;
    }
  }

  /* O título do assessment em duas linhas, não em quatro. */
  .readiness .h2-quiet { white-space: nowrap; }
}

/* ==========================================================================
   Adenda — 15 set, noite. Grelha única, cartões e o fecho.
   ========================================================================== */
@layer components {

  /* ---- 5. A GRELHA — a correção de fundo ---------------------------------
     Havia duas colunas de conteúdo no site ao mesmo tempo:
       · 1344px — header, rodapé e todas as .band (truque do padding)
       · 1259px — todas as outras secções (max-width 84rem MENOS o gutter)
     Por isso é que as secções não batiam certo umas com as outras. Agora
     toda a gente usa o mesmo truque: a caixa sangra, e o padding devolve o
     conteúdo à mesma coluna de 1344. Uma coluna, sem exceções. */
  main section {
    max-inline-size: none;
    margin-inline: 0;
    padding-inline: max(var(--gutter), calc(50% - var(--page) / 2));
  }

  /* ---- Raio dos cartões --------------------------------------------------
     Medido no awwwards: os cartões deles são 14px, não 8. A 8 o cartão
     parece uma caixa de formulário; a 14 parece um objeto. */
  .offer, .plate, .ready-grid > li, .verdict, .week-card, .specimen {
    border-radius: 14px;
  }

  /* ---- 1. O painel do sprint volta a respirar ---------------------------- */
  .offer-section { padding-block-start: var(--s-8); }

  /* ---- 3. O cartão do Positioning Sprint --------------------------------
     O fundo passa a ter trabalho: uma grelha de medição em tinta a 2%, que
     é o mesmo vocabulário das matrizes de pontos do assessment, mais um
     halo quente atrás do preço. Tudo em camadas, nada em imagens. */
  .offer {
    position: relative; isolation: isolate; overflow: hidden;
    border-color: color-mix(in srgb, var(--ink) 9%, transparent);
    box-shadow:
      0 1px 2px rgb(0 0 0 / .04),
      0 18px 44px -12px rgb(0 0 0 / .10);

    &::before {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background:
        radial-gradient(60% 70% at 88% 6%,
          color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 62%),
        repeating-linear-gradient(to right,
          color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(to bottom,
          color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 64px),
        linear-gradient(to bottom, #FFFFFF 0%, #FCFCFC 100%);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
    }
    /* o fundo da carta por baixo da grelha */
    background: var(--surface);
  }

  /* ---- 2. A etiqueta do piloto: laranja translúcido ---------------------- */
  .offer .pilot-tag {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    color: var(--ink);
  }

  /* ---- 9. O statement volta ao papel ------------------------------------
     Não havia razão para a secção das cinco palavras ter fundo branco e a
     prosa logo a seguir não ter. Mesma superfície, o degrau é de escala. */
  .statement { background: transparent; }
}

@layer components {
  /* ---- 4. Week by week, redesenhado -------------------------------------
     Antes eram quatro faixas iguais dentro de uma placa: nenhuma hierarquia
     e nenhum contraste. Agora cada semana é um cartão próprio, com um
     numeral grande a marcar a posição, o nome da semana como título, e o
     custo de tempo à direita — que é a informação que o leitor procura.
     Dentro, os dias deixam de ter todos o mesmo peso: os que te custam
     tempo trazem um filete laranja e um chip de duração; os assíncronos
     ficam esbatidos. Segue a lógica do awwwards: um cartão branco de raio
     14 sobre o papel, sem borda a competir. */
  .sprint-map .weeks {
    display: flex; flex-direction: column; gap: var(--s-5);
    margin-block-start: var(--s-7);
  }

  .week-card {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
    box-shadow: 0 1px 2px rgb(0 0 0 / .03), 0 14px 30px -18px rgb(0 0 0 / .10);
    padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  }

  .week-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--s-5);
    padding-block-end: var(--s-5);
    border-block-end: 1px solid var(--line-soft);

    .week-n {
      font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
      font-weight: var(--w-display); line-height: .85;
      letter-spacing: -0.03em;
      color: color-mix(in srgb, var(--ink) 13%, transparent);
      font-variant-numeric: tabular-nums;
    }
    .week-k {
      font-size: var(--t-nano); color: var(--mute);
      text-transform: uppercase; letter-spacing: .07em;
    }
    h3 {
      font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
      font-weight: var(--w-mid); line-height: 1.1;
      margin-block-start: 3px;
    }
    .week-cost {
      font-size: var(--t-small); color: var(--ink-2);
      text-align: end; white-space: nowrap;
    }
  }

  .sprint-map .days {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0; margin-block-start: var(--s-5);
  }

  .sprint-map .day {
    padding: var(--s-4) var(--s-5) 0 0;
    border-inline-start: 0;
    border-block-start: 2px solid var(--line);

    /* o filete do topo é o sinal: laranja quando te custa tempo, tinta
       cheia quando é a entrega, e um traço fino quando é assíncrono */
    &[data-kind="live"]  { border-block-start-color: var(--accent); }
    &[data-kind="done"]  { border-block-start-color: var(--ink); }
    &[data-kind="async"] { border-block-start-color: var(--dim); }

    & + .day { padding-inline-start: var(--s-5); }

    .day-n {
      font-size: var(--t-nano); color: var(--mute);
      text-transform: uppercase; letter-spacing: .07em;
    }
    h4 {
      font-size: 1rem; font-weight: var(--w-mid); line-height: 1.25;
      margin-block-start: var(--s-2);
    }
    .day-t {
      display: inline-flex; align-items: center;
      font-size: var(--t-nano); color: var(--ink);
      border: 1px solid var(--line); border-radius: 999px;
      padding: 3px 9px; margin-block-start: var(--s-2);
    }
    &[data-kind="live"] .day-t {
      background: color-mix(in srgb, var(--accent) 13%, transparent);
      border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    }
    .day-c {
      font-size: var(--t-small); line-height: 1.5; color: var(--ink-2);
      margin-block-start: var(--s-3);
    }
    /* os dias sem custo de tempo recuam um degrau */
    &:not([data-kind]) h4 { color: var(--ink-2); font-weight: var(--w-body); }
  }

  @media (max-width: 68rem) {
    .sprint-map .days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-5); }
    .sprint-map .day, .sprint-map .day + .day { padding-inline-start: 0; padding-inline-end: 0; }
  }
  @media (max-width: 40rem) {
    .sprint-map .days { grid-template-columns: 1fr; }
    .week-head { grid-template-columns: auto 1fr; }
    .week-head .week-cost { grid-column: 2; text-align: start; }
  }

  /* ---- 6. Rodapé: onde estamos ------------------------------------------ */
  .foot-where {
    display: block; color: var(--mute); margin-block-start: 2px;
  }

  /* ---- 8. O fecho -------------------------------------------------------
     Era um bloco branco com o título à esquerda e os botões à direita: lia-se
     como um rodapé a mais. Passa a ser a segunda banda escura da página e
     fecha o arco que a banda do método abriu. Centrado — o mesmo gesto do
     hero e do preço — com um halo quente atrás e três números a substituir
     as três frases que estavam a encher. */
  .talk {
    position: relative; isolation: isolate; overflow: hidden;
    display: block;
    padding-block: clamp(4.5rem, 3rem + 7vw, 9rem);
    text-align: center;
  }
  .talk-glow {
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(52% 58% at 50% 6%,
        color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%),
      repeating-linear-gradient(to right,
        rgb(255 255 255 / .035) 0 1px, transparent 1px 72px);
  }
  .talk-inner {
    display: flex; flex-direction: column; align-items: center;
    max-inline-size: 52rem; margin-inline: auto;
  }
  .talk .display-2 { margin-block-start: var(--s-5); }
  .talk-lede {
    font-size: var(--t-lede); color: var(--on-dark-mute);
    max-inline-size: 38rem; margin-block-start: var(--s-6);
  }
  .talk-actions { justify-content: center; margin-block-start: var(--s-7); }

  .talk-terms {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s-5) clamp(2rem, 5vw, 4.5rem);
    list-style: none;
    margin-block-start: var(--s-9);
    padding-block-start: var(--s-7);
    border-block-start: 1px solid var(--dark-line);
    inline-size: 100%;

    li { display: flex; align-items: baseline; gap: var(--s-3); }
    .talk-n {
      font-size: 1.75rem; font-weight: var(--w-display); line-height: 1;
      color: var(--accent); font-variant-numeric: tabular-nums;
    }
    span:last-child { font-size: var(--t-small); color: var(--on-dark-mute); }
  }
  .talk-foot {
    font-size: var(--t-small); color: var(--mute);
    margin-block-start: var(--s-5);
  }

  /* Botões sobre escuro: o primário inverte, o secundário é vidro. */
  .btn--light {
    background: var(--on-dark); color: var(--ink);
    &:hover { background: var(--on-dark); color: var(--ink); transform: scale(1.02); }
  }
  .btn--ghost-dark {
    background: rgb(255 255 255 / .09); color: var(--on-dark);
    &:hover { background: rgb(255 255 255 / .16); color: var(--on-dark); transform: none; }
  }

  /* O eyebrow da banda escura tem de ter contorno visível sobre #222. */
  .band--dark .label--mark {
    color: var(--on-dark);
    border-color: var(--dark-line);
  }
}

@layer components {
  /* A frase da prosa é a tese da página: ganha escala de display e ocupa a
     maior parte da grelha. O parágrafo de fecho encolhe para nota lateral. */
  .flow-head { grid-template-columns: 1.6fr .9fr; }
  .flow-head h2 {
    font-size: clamp(2rem, 1.1rem + 3.6vw, 3.875rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    font-weight: var(--w-body);
  }
  @media (max-width: 62rem) { .flow-head { grid-template-columns: 1fr; } }
}

@layer components {
  /* `.band--dark .btn` (0,2,0) estava a ganhar às variantes de classe única:
     na banda escura TODOS os botões ficavam brancos. As variantes passam a
     ter o mesmo prefixo para poderem decidir. */
  .band--dark .btn--light {
    background: var(--on-dark); color: var(--ink);
    &:hover { background: var(--on-dark); color: var(--ink); }
  }
  .band--dark .btn--ghost-dark {
    background: rgb(255 255 255 / .10); color: var(--on-dark);
    &:hover { background: rgb(255 255 255 / .18); color: var(--on-dark); transform: none; }
  }

  /* O intervalo até à linha dos números estava a abrir um buraco. */
  .talk-terms { margin-block-start: var(--s-8); padding-block-start: var(--s-6); }
}

@layer components {
  /* A navbar em repouso ganha ar; no estado colado mantém o mesmo valor, é
     a mesma barra e não deve saltar de altura ao aparecer. */
  .site-head { padding-block: var(--s-5); }

  /* A barra em loop passa a quase-preto quente: o laranja da marca levado
     até ao fundo da escala, para a barra ler-se como um objeto separado do
     papel e não como mais uma faixa branca por cima do header. */
  .ticker {
    background: #190E06;
    border-block-end: 1px solid #2E1B0C;
    color: #FFFFFF;

    .ticker-q { color: #FFFFFF; }
    .ticker-a { color: #BCA894; }
  }
}

@layer components {
  /* A linha que diz onde é que o leitor está.
     A demonstração acima responde "do que é que isto fala"; esta responde
     "o que é que isto vende". São perguntas diferentes e cabem as duas na
     mesma dobra — a segunda em voz baixa, para não competir com o display.
     Sem formato nem duração: descreve a casa, não o produto do momento. */
  .hero-what {
    font-size: var(--t-small);
    color: var(--ink-2);
    margin-block-start: var(--s-6);
    padding-block-start: var(--s-5);
    border-block-start: 1px solid var(--line);
    max-inline-size: 44ch;
  }
}

@layer components {
  /* ---- A assinatura da casa ---------------------------------------------
     Estava a meio do hero, entre o lede e os specimens, e cortava o
     raciocínio: o eyebrow abre a demonstração, o display faz a pergunta, o
     lede explica-a — e depois entrava uma descrição da empresa no meio.
     Sobe para antes de tudo. É quem fala, não parte do argumento.

     Visualmente não pode ser mais um chip, senão duplica o eyebrow logo
     abaixo. Ganha antes a orb da marca — a mesma do favicon — e um degrau
     de tinta dentro da própria frase: a categoria em tinta cheia, o resto
     recuado. Distingue-se por matéria, não por caixa. */
  .hero .hero-what {
    /* nada de flex aqui: em inline-flex cada porção de texto à volta do
       <strong> vira um item e o gap abre buracos dentro da frase. */
    display: block;
    font-size: 1rem;
    color: var(--ink-2);
    margin-block: 0 var(--s-7);
    padding-block-start: 0;
    border-block-start: 0;
    max-inline-size: none;

    strong { color: var(--ink); font-weight: var(--w-mid); }
  }

  .orb {
    display: inline-block; vertical-align: 1px;
    margin-inline-end: 10px;
    inline-size: 9px; block-size: 9px; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #FFB870 0%, #F26F0B 52%, #C4530A 100%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  @media (max-width: 40rem) {
    .hero .hero-what { font-size: var(--t-small); margin-block-end: var(--s-6); }
  }
}

@layer components {
  /* ---- O fio entre a assinatura e a demonstração ------------------------
     Entre "quem fala" e "o que se vai demonstrar" havia só espaço vazio, e
     espaço vazio não diz qual dos dois vem primeiro nem que estão ligados.
     Um fio vertical desce da assinatura e dissolve-se antes do eyebrow:
     liga os dois e, ao mesmo tempo, separa-os melhor do que o vazio separava
     — porque agora a separação tem começo e fim. Nasce em laranja, da orb, e
     apaga-se no papel. */
  .hero .hero-what {
    margin-block-end: 0;

    &::after {
      content: "";
      display: block;
      inline-size: 1px; block-size: 52px;
      margin: var(--s-5) auto 0;
      background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--accent) 60%, transparent) 0%,
        color-mix(in srgb, var(--ink) 14%, transparent) 46%,
        transparent 100%);
    }
  }
  .hero .label--mark { margin-block-start: var(--s-5); }

  @media (max-width: 40rem) {
    .hero .hero-what::after { block-size: 38px; margin-block-start: var(--s-4); }
  }
}

@layer components {
  /* ---- A assinatura ganha corpo -----------------------------------------
     A frase passa a viver dentro de um contentor com pouco padding, e cada
     segmento sai do corrido para uma etiqueta própria. Assim cada um pesa
     por si em vez de se diluir numa enumeração com vírgulas.
     As etiquetas dos segmentos são PREENCHIDAS, não contornadas: o contorno
     já é a linguagem dos eyebrows logo abaixo e dois objetos contornados
     seguidos anulavam-se. Aqui o contraste entre cheio e vazio é o que
     separa "quem somos" de "o que vem a seguir". */
  .hero .hero-what {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    justify-content: center; gap: 7px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-radius: 999px;
    padding: 6px 8px 6px 16px;
    box-shadow: 0 1px 2px rgb(0 0 0 / .03);
    font-size: var(--t-small);
    color: var(--ink-2);

    .hw-text { white-space: nowrap; }
    strong { color: var(--ink); font-weight: var(--w-mid); }
  }

  .hw-segs { display: inline-flex; align-items: center; gap: 5px; }

  .hw-seg {
    display: inline-flex; align-items: center;
    font-size: var(--t-nano); font-weight: var(--w-mid);
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
  }
  /* Os três ao mesmo tom: tingir só o primeiro criava uma hierarquia que não
     existe — lia-se como "software, e também estes dois". O calor da linha
     vem da orb, que já chega. */

  .orb { margin-inline-end: 0; vertical-align: baseline; }

  /* O fio continua a nascer do contentor, agora por fora dele. */
  .hero .hero-what::after { display: none; }
  .hero .hero-thread {
    display: block; inline-size: 1px; block-size: 52px;
    margin: var(--s-5) auto 0;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--accent) 60%, transparent) 0%,
      color-mix(in srgb, var(--ink) 14%, transparent) 46%,
      transparent 100%);
  }

  @media (max-width: 34rem) {
    .hero .hero-what { border-radius: 16px; padding: 10px 12px; }
    .hero .hero-what .hw-text { white-space: normal; }
  }

  /* ---- Os eyebrows deixam de parecer botões ------------------------------
     Feedback direto de um leitor. A causa era geometria de botão: 5/12 de
     padding e uma borda clara de mais para se ler como etiqueta. Aperta o
     padding, escurece a borda, e desce um ponto no tamanho — uma etiqueta
     é mais pequena e mais densa do que um alvo de clique. */
  .label--mark {
    font-size: 0.75rem;
    font-weight: var(--w-mid);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 24%, transparent);
    padding: 3px 9px;
  }
  .band--dark .label--mark {
    border-color: color-mix(in srgb, #FFFFFF 30%, transparent);
  }
}

@layer components {
  /* ---- As sub-descrições -------------------------------------------------
     Medido em c-heading__short-desc no awwwards: 18px / 400 / 28px de
     entrelinha / #222 cheio, centrado. Nada de cinzento — é a mesma
     conclusão da auditoria de legibilidade: a hierarquia deles vem de
     escala e entrelinha, não de desbotar a cor.
     A estrutura do bloco deles é a mesma que temos: rótulo pequeno em cima,
     display ao meio, short-desc em baixo. */
  .lede {
    font-size: 1.125rem;
    font-weight: var(--w-body);
    line-height: 1.5556;
    color: var(--ink);
  }
  .band--dark .lede { color: var(--on-dark); }
}