/* Agenda Limpa — shared shell for the secondary marketing pages (/pricing, /setup-help).
   The home page (index.html) deliberately inlines its own copy of these tokens because it
   also inlines every photograph as a data: URI to make zero network requests. Secondary
   pages have no inline imagery, so one cached stylesheet beats N copies of the system —
   and one copy is the only way the pages cannot drift apart. */

:root{
  --canvas:#FBF6EE;--surface:#FFFFFF;--ink:#23211C;
  --muted:#7C7568;            /* 4.56:1 on WHITE only */
  --muted-canvas:#756E61;     /* 4.69:1 on canvas */
  --marigold:#E8A13C;--accent-dark:#C9821A;--accent-soft:#F8E8C7;
  --marigold-edge:#B4750F;    /* CTA boundary — the fill alone is 1.81:1 and fails SC 1.4.11 */
  --line:#ECE4D7;--line-strong:#8E8578;--success:#17795A;
  --font-display:'Plus Jakarta Sans',ui-sans-serif,'Segoe UI',system-ui,Roboto,sans-serif;
  --font-body:'Inter',ui-sans-serif,'Segoe UI',system-ui,Roboto,sans-serif;
  --shell:1100px;--gutter:clamp(1.25rem,5vw,3rem);--radius:16px;
}
/* Same two files the home page uses, so pricing.html and setup-help.html read as the
   same brand. This file still named the PREVIOUS pair, Bricolage Grotesque and
   Instrument Sans, long after index.html moved on. */
@font-face{font-family:'Plus Jakarta Sans';src:local('Plus Jakarta Sans'),url('/plus-jakarta-sans-latin.woff2') format('woff2');font-weight:600 800;font-display:swap}
@font-face{font-family:'Inter';src:local('Inter'),url('/inter-latin.woff2') format('woff2');font-weight:400 600;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-body);
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.024em;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.05;letter-spacing:-.035em}
h2{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1}
h3{font-size:1.1875rem;line-height:1.3}
p{margin:0} img{max-width:100%;display:block}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}

/* one container for every page — no per-section widths */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.sub{color:var(--muted-canvas)}
.prose{max-width:65ch}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── buttons — ink on marigold, always ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:.75rem 1.4rem;border-radius:11px;border:1px solid transparent;font-family:var(--font-body);
  font-size:1rem;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
  transition:background-color .16s ease}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.btn-primary{background:var(--marigold);color:var(--ink);border-color:var(--marigold-edge)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--accent-soft)}
.btn-sm{min-height:44px;padding:.625rem 1.05rem;font-size:.9375rem}
/* `a.btn` is deliberately absent: it is (0,1,1) and would beat .btn's own 48px */
button,summary,[role="button"]{min-height:44px}

/* ── header ── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,246,238,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:.5rem;height:56px}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);flex:none;min-height:44px}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.02em}
.hdr-right{display:flex;align-items:center;gap:.75rem;margin-left:auto}
.hdr-right a:not(.btn){display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;text-decoration:none}
/* MEDIDO a 390px (iPhone 14) em 30/08, com o seletor de idioma ja estilizado: a fileira
   pede 436px -- marca 139 + seletor 104 + "Log in" 50 + "Teste gratis" 71, mais os vaos --
   e a `.shell` oferece 350. O excedente aparecia como "EN" cortado fora da tela e "Log in"
   quebrado em duas linhas dentro de uma barra de 56px.

   O corte e o wordmark, e nao um item de navegacao: ele e a unica peca REDUNDANTE ali --
   o simbolo ao lado continua identificando a marca (e o mesmo do favicon), e a pagina
   ainda diz "Agenda Limpa" no rodape, no titulo e no copyright. Esconder "Log in" caberia
   igual e custaria a unica porta para o app no celular, que e exatamente o que a #854
   reverteu na home depois de descobrir o custo.

   Era 359px, largura em que so o wordmark ja nao cabia. 420 e onde a FILEIRA passa a
   caber: iPhone 14 Pro Max (430) e Pixel (412 com o seletor menor) mostram o wordmark. */
@media (max-width:419px){.wordmark{display:none}}

/* O SELETOR DE IDIOMA. Estas regras existiam so dentro do <style> do index.html, que nao
   carrega este arquivo -- entao toda pagina que usa `site.css` trazia a marcacao do
   seletor SEM estilo nenhum. Os tres <button> caiam como blocos soltos, empilhavam
   verticalmente e estouravam a barra de 56px. Visto em 30/08 a 390px (iPhone 14) em
   `pricing.html` e na pagina nova do gerador; `setup-help.html` escapava so porque nao
   traz o seletor.

   Copiadas do index.html de proposito, e nao movidas: a home e autocontida por decisao
   antiga (ela nao linka site.css), e mexer nela para consertar as outras trocaria um
   defeito visivel por um risco na pagina de maior trafego. O par tem que dizer o mesmo --
   se alguem mudar o visual do seletor, muda nos dois. */
.lang{display:inline-flex;border:1px solid var(--line-strong);border-radius:9px;
  overflow:hidden;flex:none;background:var(--surface)}
.lang button{min-height:44px;min-width:34px;padding:0 .35rem;border:0;background:transparent;
  cursor:pointer;font:inherit;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.lang button+button{border-left:1px solid var(--line-strong)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
@media (min-width:420px){.lang button{min-width:44px}}

/* ── page head ── */
.head{padding:3.5rem 0 2rem}
.head p{margin-top:1rem;max-width:56ch}
.head-center{text-align:center}
.head-center p{margin-inline:auto}

/* ── closing band ── */
.closer{background:var(--accent-soft);border-top:1px solid var(--line);padding:3.5rem 0;text-align:center}
.closer .btn{margin-top:1.5rem}
.closer p{margin-top:.875rem;font-size:.875rem;opacity:.75}

/* ── footer ── */
.ftr{background:var(--ink);color:var(--canvas);padding:2.5rem 0;font-size:.9375rem}
.ftr a{color:var(--canvas);opacity:.85}
.ftr a:hover{opacity:1}
.ftr :focus-visible{outline-color:var(--canvas)}
.ftr-in{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}