/* The public site: landing, sign-in, plans and the legal pages.
 *
 * Built on the app's own tokens (copied by tools/build-site.mjs) so the site and the
 * product cannot look like two different companies — including in the dark theme, which
 * comes along for free because the palette is the same file.
 *
 * Deliberately larger than the app: a marketing page is read at arm's length by someone
 * deciding whether to trust you, while the app is read up close by someone working. Same
 * colours, different scale.
 *
 * No JavaScript anywhere on this site. The FAQ is <details>, the sign-in/create toggle is
 * a radio pair driven by :checked. That is not minimalism for its own sake — it is what
 * lets these pages carry a CSP as strict as the app's, with `script-src 'self'` and no
 * exception for inline script, and it is why they can never leak a patient identifier
 * into an analytics call.
 *
 * The site is light-only today. tokens.css carries the dark palette under
 * `:root:where([data-theme='dark'])`, and nothing here sets that attribute — the app's
 * theme-boot.js lives on the app's origin and cannot reach this one. Adding it later is
 * one small same-origin script; until then, light.
 *
 * ⚠ No inline `style` attributes. `style-src 'self'` has no 'unsafe-inline', so an inline
 * style is not merely untidy here — the browser drops it. Utilities below exist for the
 * handful of one-off spacings that would otherwise tempt one.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-1);
  font: var(--size-md)/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
h1 { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.2vw, 2.125rem); }
h3 { font-size: var(--size-lg); font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--s4); top: var(--s4); z-index: 100;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
}

/* ── Frame ─────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 var(--s5); }
.wrap--narrow { max-width: 44rem; }

.site-head {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
@supports (backdrop-filter: blur(8px)) {
  .site-head { background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(8px); }
}
.site-head__inner {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 4rem;
}
.site-nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; flex-wrap: wrap; }
.site-nav a { color: var(--text-2); text-decoration: none; font-size: var(--size-sm); font-weight: 600; }
.site-nav a:hover { color: var(--accent); }

/* ⚠ No `gap` here, and that is the fix rather than the style.
   The markup is `<b>Psi</b>NOTE<span>…</span>`, so `NOTE` is a bare text node — which
   makes it a flex ITEM, which makes it collect the container's gap. The wordmark rendered
   as "Psi NOTE", split down the middle, on every page. The tagline gets its space from a
   margin instead, where it cannot leak into the word. */
.brand {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-serif); font-size: var(--size-xl); font-weight: 600;
  letter-spacing: -0.01em; color: var(--text-1); text-decoration: none;
  white-space: nowrap;
}
.brand b { color: var(--accent); font-weight: 600; }
.brand span {
  margin-left: var(--s3);
  font-family: var(--font); font-size: var(--size-xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3);
}
@media (max-width: 40rem) { .brand span { display: none; } }

.site-foot {
  border-top: 1px solid var(--border);
  margin-top: var(--s6);
  padding: var(--s6) 0;
  font-size: var(--size-sm); color: var(--text-2);
  background: var(--surface);
}
.site-foot__cols { display: grid; gap: var(--s5); grid-template-columns: 2fr 1fr 1fr; }
.site-foot h3 { font-size: var(--size-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.site-foot a { color: var(--text-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }
@media (max-width: 44rem) { .site-foot__cols { grid-template-columns: 1fr; } }

/* ── Sections ──────────────────────────────────────────────────── */

.section { padding: calc(var(--s6) * 1.25) 0; }
.section + .section { border-top: 1px solid var(--border); }

/* The heading and its lead paragraph SHARE the width instead of stacking.
 *
 * Stacked, a 46ch paragraph under a full-width heading left roughly half the column empty
 * and pinned every line to the left edge — which is what read as unfinished. Side by side,
 * the measure stays comfortable and the row is balanced. Collapses to one column below
 * 52rem, where two columns would give neither enough room. */
.section__head {
  display: grid; gap: var(--s4) var(--s6);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: end;
}
.section__lead { font-size: var(--size-lg); color: var(--text-2); margin: 0; text-wrap: pretty; }
@media (max-width: 52rem) {
  .section__head { grid-template-columns: 1fr; align-items: start; }
}
.eyebrow {
  font-size: var(--size-xs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3);
}

.hero { padding: calc(var(--s6) * 1.75) 0 calc(var(--s6) * 1.25); }
.hero__grid {
  display: grid; gap: var(--s6);
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
}
.hero h1 { text-wrap: balance; }
.hero p { font-size: var(--size-lg); color: var(--text-2); margin-top: var(--s4); text-wrap: pretty; }
.hero__actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
@media (max-width: 56rem) { .hero__grid { grid-template-columns: 1fr; } }

/* ── Buttons, at the site's scale ──────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 0.6875rem 1.25rem;
  font: inherit; font-size: var(--size-md); font-weight: 600;
  color: var(--text-1); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 9px;
  text-decoration: none; cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.btn:hover { background: var(--sunken); border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn--block { width: 100%; }

/* ── Cards ─────────────────────────────────────────────────────── */

.cards { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: var(--s5); }
/* Four items: `auto-fit` puts three on one row and orphans the fourth. */
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 46rem) { .cards--2 { grid-template-columns: 1fr; } }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: var(--s2); }
/* A short accent rule above the title, instead of the geometric glyphs that were there:
   at 1.5rem those read as specks of dirt rather than as icons. */
.card--ruled { border-top: 3px solid var(--accent); }
.card p { font-size: var(--size-sm); color: var(--text-2); }

/* A claim and the thing it costs, side by side. The refusals are the argument. */
.trade { display: grid; gap: var(--s4); margin-top: var(--s5); }
.trade__row {
  display: grid; gap: var(--s3) var(--s5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: var(--s4) 0;
  border-top: 1px solid var(--border);
}
.trade__row:last-child { border-bottom: 1px solid var(--border); }
.trade__no { font-weight: 650; }
.trade__no::before { content: '✕'; color: var(--danger); margin-right: var(--s2); }
.trade__yes { color: var(--text-2); font-size: var(--size-sm); }
.trade__yes::before { content: '→'; color: var(--ok); margin-right: var(--s2); font-weight: 700; }
@media (max-width: 44rem) { .trade__row { grid-template-columns: 1fr; } }

/* Numbered steps, counted by CSS so the markup carries no numbers to fall out of order. */
.steps { counter-reset: step; list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: var(--s4); align-items: start; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--size-sm); font-weight: 700;
}
.steps h3 { font-size: var(--size-md); margin-bottom: 2px; }
.steps p { font-size: var(--size-sm); color: var(--text-2); margin: 0; }

/* ── FAQ ───────────────────────────────────────────────────────── */

.faq { margin-top: var(--s5); border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; padding: var(--s4) 2rem var(--s4) 0; position: relative;
  font-weight: 650; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: var(--s4);
  font-family: var(--font-mono); color: var(--accent); font-size: var(--size-lg); line-height: 1;
}
.faq details[open] summary::after { content: '–'; }
.faq details > p { padding: 0 0 var(--s4); color: var(--text-2); font-size: var(--size-sm); max-width: 60ch; }

/* ── Notices, matching the app's left-rule idiom ───────────────── */

.note {
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--sunken);
  padding: var(--s3) var(--s4);
  font-size: var(--size-sm); color: var(--text-2);
}
.note--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note--info { border-left-color: var(--accent); background: var(--accent-soft); }
.note strong { color: var(--text-1); }

/* Anything the owner still has to decide. Impossible to publish by accident. */
.preencher {
  display: inline-block;
  background: var(--danger-soft); color: var(--danger);
  border: 1px dashed var(--danger);
  border-radius: var(--radius-sm);
  padding: 0 var(--s2);
  font-family: var(--font-mono); font-size: 0.9em; font-weight: 700;
}

/* ── Forms ─────────────────────────────────────────────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel__head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); }
.panel__body { padding: var(--s5); display: grid; gap: var(--s4); }

label { display: block; font-size: var(--size-sm); font-weight: 600; color: var(--text-2); margin-bottom: var(--s1); }
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 0.625rem var(--s3);
  font: inherit; font-size: var(--size-md);
  color: var(--text-1); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus-visible {
  outline-offset: 0; border-color: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.field-hint { font-size: var(--size-sm); color: var(--text-3); margin-top: var(--s1); }

/* The sign-in / create-account toggle, without a line of JavaScript.
   Two radios outside the forms, `:checked ~` doing the switching. */
.tabs { display: flex; border-bottom: 1px solid var(--border); }
.tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.tabs__label {
  flex: 1; text-align: center; cursor: pointer;
  padding: var(--s4) var(--s3);
  font-weight: 650; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
#tab-entrar:checked ~ .tabs .tabs__label[for="tab-entrar"],
#tab-criar:checked ~ .tabs .tabs__label[for="tab-criar"] {
  color: var(--accent); border-bottom-color: var(--accent);
}
.tabs__panel { display: none; }
#tab-entrar:checked ~ .tabs__panel--entrar,
#tab-criar:checked ~ .tabs__panel--criar { display: block; }

/* ── Plans ─────────────────────────────────────────────────────── */

.plans { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: var(--s5); }
.plan { display: flex; flex-direction: column; }
.plan--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan__tag {
  align-self: flex-start;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 2px var(--s3);
  font-size: var(--size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.plan__price { font-family: var(--font-mono); font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; margin: var(--s3) 0 0; }
.plan__per { font-size: var(--size-sm); color: var(--text-3); }
.plan__list { list-style: none; margin: var(--s4) 0 var(--s5); padding: 0; display: grid; gap: var(--s2); font-size: var(--size-sm); color: var(--text-2); }
.plan__list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s2); }
.plan__list li::before { content: '✓'; color: var(--ok); font-weight: 700; }
.plan .btn { margin-top: auto; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Spacing utilities ─────────────────────────────────────────────
 *
 * Small and deliberately few. They exist because `style-src 'self'` blocks inline style
 * attributes outright, so "just this once" is not available on this site. */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--s5); }
.mt-5 { margin-top: var(--s5); }

/* The professional registration is the only two-column form on the site. It collapses to
   one column on a narrow screen, where the pairs (Cidade / UF) would otherwise squeeze a
   two-letter field and a city name into the same width. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.span-2 { grid-column: 1 / -1; }
@media (max-width: 32rem) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Per-FIELD errors, because the registration has seven of them and "algo está errado"
   makes the person hunt. --danger is already proved against every surface by
   tools/contrast.mjs, which walks this file too. */
.field-error { font-size: var(--size-sm); color: var(--danger); font-weight: 600; margin-top: var(--s1); }

/* ── Fragments of the product, drawn rather than photographed ──────
 *
 * Faithful imitations of real interface built in HTML and CSS, not screenshots. The
 * reasons are practical: they follow the theme, they cannot go stale when the app moves
 * on, they weigh nothing, and — the one that decided it — a screenshot of a working
 * chart carries a patient name, and a patient name on a public marketing page is a leak
 * that no amount of care afterwards undoes.
 *
 * They are illustrations. The page never calls them a screen of the product.
 */

.mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s4);
  display: grid; gap: var(--s3);
}
.mock__label {
  font-size: var(--size-xs); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
}

/* One booked slot out of the agenda grid — short name, as the grid really shows it. */
.mock-slot {
  border-left: 3px solid var(--ok);
  background: var(--ok-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--s2) var(--s3);
}
.mock-slot__time { font-family: var(--font-mono); font-size: var(--size-xs); color: var(--text-3); }
.mock-slot__name { font-size: var(--size-sm); font-weight: 650; }

/* The month's figures, with the two tints and the meter. */
.mock-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.mock-fig { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s2) var(--s3); }
.mock-fig--accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.mock-fig--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 32%, var(--border)); }
.mock-fig__k { font-size: var(--size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
.mock-fig__v { font-family: var(--font-mono); font-size: var(--size-lg); font-weight: 500; }
.mock-fig--accent .mock-fig__v { color: var(--accent); }
.mock-fig--ok .mock-fig__v { color: var(--ok); }
.mock-meter { height: 8px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--border); overflow: hidden; }
.mock-meter span { display: block; height: 100%; width: 62%; background: var(--ok); }

/* A score with its band — and the mark is a shape, not only a colour, exactly as the
   app draws it, so it survives a black-and-white printout and colour blindness. */
.mock-score { display: flex; align-items: baseline; gap: var(--s3); }
.mock-score__n { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 500; }
.mock-score__band {
  font-size: var(--size-xs); font-weight: 700;
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid var(--warn); border-radius: 999px; padding: 1px var(--s2);
}
.mock-score__cite { font-size: var(--size-xs); color: var(--text-3); }

/* The supersession notice — the single strongest differentiator, and it appeared
   nowhere on the page before. */
.mock-fix {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--s2) var(--s3);
  font-size: var(--size-sm); color: var(--text-2);
}
.mock-fix strong { color: var(--accent); }
.mock-struck { text-decoration: line-through; color: var(--text-3); }