/* Copiloto ERP — shared website primitives (FR step 7).
 *
 * tokens.css holds the design tokens, the base reset, the type ramp, and the
 * component primitives that already existed (buttons, form fields, cards,
 * badges, plan cards). This file adds the layer that page-local <style> blocks
 * were each reinventing: layout, site chrome, status, operational preview,
 * command rail, and semantic long-form article content.
 *
 * Rules that hold everywhere in here:
 *   - Colors come from tokens.css variables. Never a raw hex — palette_lint.py
 *     fails the build on any hex outside the 21 approved tokens.
 *   - 8px (--radius-container) is the MAXIMUM radius anywhere (DESIGN.md).
 *   - No emoji, no gradients, no glass, no nested cards (FR acceptance
 *     criteria — these are the "generic AI-generated" signals the refresh
 *     exists to remove).
 *   - Sora (--font-display) is for PUBLIC DISPLAY HEADINGS ONLY, per owner
 *     decision #2. Body, UI, forms and tables stay Inter.
 *
 * Article primitives are written to fit the blog's existing semantic DOM
 * (headings that keep their IDs, JSON-LD in extra_head) so that applying them
 * to /blog in Phase 3 step 20a needs no edits to article Markdown.
 */

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

.container {
  max-width: 1120px; /* DESIGN.md spacing.content-max */
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 24px);
}

.section {
  padding-block: clamp(40px, 6vw, 64px);
}
.section + .section {
  padding-top: 0;
}

/* Vertical rhythm without per-page margin juggling. */
.stack > * + * {
  margin-top: 16px;
}
.stack-sm > * + * {
  margin-top: 8px;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* Accessibility: visible only when focused, so keyboard users can skip the
   nav. Approved copy row L1 ("Ir para o conteúdo"). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-weight: 600;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Display headings (public surfaces only) ---------- */

/* Owner decision #7: the landing hero uses a marketing clamp that
   deliberately exceeds DESIGN.md's 28px app-ramp h1. Scoped to .display so it
   can never leak into the app ramp. */
.display {
  font-family: var(--font-display);
  font-size: clamp(29px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.display-sm {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Site header ---------- */

/* Editorial header (Concept C, spec §11 / mockups/public/shell-nav.html): brand
   left, text links + Entrar right, ink links (the CTA is the only blue text).
   Under 768px the inline links give way to the Menu button, which opens a
   dialog sheet. The button and the sheet only appear when the inline script in
   base.html marks <html class="js">: without JavaScript the links stay visible
   and wrap, instead of a Menu button that does nothing. */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  min-height: 64px;
  padding-block: 8px;
  flex-wrap: wrap;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px; /* T31 P-6: 40px hit area, type size unchanged */
  text-decoration: none;
  color: var(--ink);
}
.site-header .brand svg {
  width: 28px;
  height: 28px;
}
.site-header .brand b {
  font-size: 16px;
  font-weight: 700;
}
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* `a:not(.btn)` so the signup CTA keeps its own button colours: a plain
   `.site-nav a` rule outranks `.btn-primary` and paints the label muted on blue
   (about 2:1), which was shipped once and caught only by looking at the page. */
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:not(.btn):hover {
  color: var(--blue);
}
.site-nav a.is-cta:not(.btn) {
  color: var(--blue);
  font-weight: 600;
}

.menu-btn,
.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  color: var(--ink);
  font: 600 14px var(--font);
  cursor: pointer;
}
.menu-btn { display: none; margin-left: auto; }
.menu-close { padding: 0 12px; }
.menu-btn:hover,
.menu-close:hover { background: var(--bg-hover); }
.ic { flex-shrink: 0; display: inline-block; vertical-align: -3px; }

.menu-panel { display: none; }
.menu-scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 32, 42, 0.45);
}
.menu-sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 12px clamp(20px, 4vw, 24px) 20px;
}
.menu-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: 8px;
}
.menu-title { font-weight: 700; color: var(--ink); }
.menu-sheet nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.menu-sheet nav a.is-cta:not(.btn) { color: var(--blue); font-weight: 600; }
.menu-sheet nav .btn { width: 100%; margin-top: 12px; }

@media (max-width: 767px) {
  .site-nav {
    width: 100%;
    margin-left: 0;
    gap: 4px 16px;
    flex-wrap: wrap;
  }
  html.js .site-nav { display: none; }
  html.js .menu-btn { display: inline-flex; }
  html.js .menu-panel:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
  }
}

/* ---------- Site footer ---------- */

/* Three labelled columns (Produto, Suporte, Legal), then the registered entity
   and the non-affiliation line, separated by 1px rules. Titles are 13px/600
   sentence case (spec §13, Q2). Links meet the 40px touch height. */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 0;
  background: var(--surface);
}
.site-footer .footer-inner {
  padding-block: 40px;
  display: grid;
  gap: 24px;
}
.site-footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
/* Was `.site-footer h2`. The titles are <p class="footer-col-title"> inside
   <nav> landmarks now — they label navigation groups, they are not document
   sections, and at 11px they had no business in the heading outline. */
.site-footer .footer-col-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li {
  margin: 0;
  font-size: 14px;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--blue);
  font-size: 14px;
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.site-footer a:hover {
  color: var(--blue-hover);
}
.site-footer .footer-legal {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.site-footer .footer-legal span {
  display: block;
}
/* Owner decision #12 — razão social + CNPJ, rendered verbatim as registered
   (all caps, unaccented). Do not "tidy" the casing. */
.site-footer .footer-entity {
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 599px) {
  .site-footer .footer-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

.site-footer .footer-linklike {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--blue);
  font-size: 14px;
}

/* ---------- Status ---------- */

/* Operation lifecycle states. Approved labels are copy rows E22:
   consultando · preparando · aguardando decisão · executando · concluído ·
   falhou. Amber carries "waiting on you", never "error". */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex: none;
}
.status-running {
  color: var(--ink);
}
.status-waiting {
  color: var(--amber-deep);
}
.status-done {
  color: var(--status-verified);
}
.status-failed {
  color: var(--ink); /* danger lives in the dot (spec §6 rule 5) */
}
.status-failed::before {
  background: var(--danger);
}
.status-idle {
  color: var(--muted);
}

/* ---------- Operational preview ---------- */

/* The "show the real ERP outcome" panel. Deliberately plain: a bordered
   surface with a header strip and a record table. No shadow, no gradient —
   it should read as a screenshot of real work, not a marketing graphic. */
.op-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-container);
  overflow: hidden;
}
.op-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--cloud);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.op-panel-body {
  padding: 16px;
}
.op-panel-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--cloud);
}

/* Request/response exchange inside a preview. */
.op-message {
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
}
.op-message-user {
  background: var(--bg-hover);
  color: var(--ink);
}
.op-message-assistant {
  background: var(--teal-soft);
  color: var(--ink);
}

/* Record table. tabular-nums so currency columns align. */
.op-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.op-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.op-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.op-table tr:last-child td {
  border-bottom: 0;
}
.op-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Wide tables must scroll inside their own container, never the page body. */
.op-table-scroll {
  overflow-x: auto;
}

/* A before -> after change, the honest way to show a mutation. */
.op-diff {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
}
.op-diff .from {
  color: var(--muted);
  text-decoration: line-through;
}
.op-diff .to {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Command rail ---------- */

/* The lifecycle every message walks: Pedido -> Inspeção -> Confirmação ->
   Execução (copy row L40). Horizontal on desktop, vertical under 600px so the
   labels never truncate. */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rail-step {
  border-top: 2px solid var(--line);
  padding-top: 10px;
}
.rail-step.is-active {
  border-top-color: var(--ink);
}
.rail-step.is-waiting {
  border-top-color: var(--amber);
}
.rail-step.is-done {
  border-top-color: var(--ink);
}
.rail-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.rail-sublabel {
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0 0;
}

@media (max-width: 600px) {
  .rail {
    grid-template-columns: 1fr;
  }
  .rail-step {
    border-top: 0;
    border-left: 2px solid var(--line);
    padding-top: 0;
    padding-left: 12px;
  }
  .rail-step.is-active {
    border-left-color: var(--ink);
  }
  .rail-step.is-waiting {
    border-left-color: var(--amber);
  }
  .rail-step.is-done {
    border-left-color: var(--ink);
  }
}

/* ---------- Long-form article ---------- */

/* Written for the SEO blog's existing semantic DOM. Everything is a bare
   element selector inside .article so article Markdown needs no classes and
   no front-matter change (FR step 20a, Phase 3). Heading IDs are preserved by
   the renderer; :target styling makes anchor links land visibly. */
.article {
  max-width: 720px; /* ~75ch at 16px — long-form measure, not the 1120px shell */
  margin-inline: auto;
}
.article > * + * {
  margin-top: 16px;
}
.article p,
.article li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}
.article h2 {
  font-family: var(--font-display);
  margin-top: 40px;
}
.article h3 {
  margin-top: 28px;
}
.article h2:target,
.article h3:target {
  background: var(--blue-soft);
  border-radius: var(--radius);
  padding-inline: 6px;
}
.article a {
  color: var(--blue);
  text-underline-offset: 2px;
}
.article blockquote {
  border-left: 3px solid var(--teal);
  padding-left: 16px;
  color: var(--muted);
  font-style: normal; /* italics hurt PT-BR accented text at body size */
}
.article pre {
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  overflow-x: auto;
  font-size: 13px;
}
.article pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}
.article img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.article figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.article th,
.article td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.article-meta {
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Landing page ---------- */

/* Concept C composition (mockups/public/landing.html): flat hairline-separated
 * chapters with a numbered margin track, labelled illustrative examples and ONE
 * amber surface. The chapter, operation-rail, decision and example primitives
 * live in the Concept C block further down; this section only composes them.
 *
 * The hero/chapter composition is built from the approved mockup and was
 * reconciled against the Concept C reference assets in spec §12 (2026-10-03).
 */

.btn-lg {
  height: 48px;
  min-height: 48px;
  padding: 0 24px;
  font-size: 16px;
}
a.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px; /* T31 P-6 */
  color: var(--blue);
  font-weight: 600;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* Anchored chapters clear nothing sticky, but keep a small breathing offset. */
#inicio,
#operacao,
#como-funciona,
#planos,
#faq,
#comecar,
#ex-pedidos,
#ex-estoque,
#ex-produtos {
  scroll-margin-top: 16px;
}

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

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  padding-block: 56px 64px;
}
.lp-hero-copy { min-width: 0; }
.lp-hero-copy .display { margin: 0 0 16px; overflow-wrap: break-word; }
.lp-hero-copy .lede { max-width: 60ch; margin: 0; }
.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 24px 0 16px;
}
.lp-hero-note {
  max-width: 60ch;
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.lp-index {
  align-self: start;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.lp-index-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.lp-index ol { list-style: none; padding: 0; margin: 0; }
.lp-index li { margin: 0; border-top: 1px solid var(--line); }
.lp-index li:first-child { border-top: 0; }
.lp-index a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.lp-index a:hover { color: var(--blue); }
.lp-index .ix {
  width: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 959px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px 48px; }
}
/* Spec §12 item 1: in Concept C the hero and the first example share one
   content column to the right of the numbered margin. From 960px the hero
   starts on the chapter content track (64px margin + 24px gap, the same tracks
   as .chapter), so the H1 and every chapter H2 share a left edge; the margin
   track stays empty (the hero is not a numbered chapter). Spec §4 table:
   960-1023 keeps the margin but the hero is ONE content column (index below
   the copy); the index column only opens at 1024. */
@media (min-width: 960px) {
  .lp-hero { grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px; row-gap: 32px; }
  .lp-hero-copy,
  .lp-index { grid-column: 2; }
}
/* 324px = the 300px index width + its 24px margin-left (the 48px copy/index
   gap is column-gap 24px + that margin). Change the three together. */
@media (min-width: 1024px) {
  .lp-hero { grid-template-columns: 64px minmax(0, 1fr) 324px; }
  .lp-index { grid-column: 3; margin-left: 24px; }
}
/* Spec §12 item 1: the chapter number aligns with the first line of the
   chapter H2 (as on the manual, `.chapter-prose h2`). The base h2 margin-top
   (40px, tokens.css) pushed every landing H2 below its number at all widths. */
.chapter-head > h2,
.lp-final .chapter-body > h2 { margin-top: 0; }

/* ---- Parte 01: examples ---- */

.lp-ops-row {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}
.lp-ops-row:first-of-type { border-top: 0; padding-top: 0; }
.lp-ops-row > * { min-width: 0; }
.lp-ops-row h3 { margin: 0 0 8px; }
.lp-request {
  max-width: none;
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-hover);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14px;
}
.lp-where { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.lp-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.lp-pair del { color: var(--muted); text-decoration: line-through; }
.lp-pair ins { color: var(--ink); text-decoration: none; font-weight: 700; }
.lp-pair .lp-big { font-size: 22px; }
.lp-unit { font-size: 13px; color: var(--muted); }
.lp-more-row td { color: var(--muted); }
/* Tables never break mid-word at 390/320: they keep a floor width and scroll
   inside their own focusable region instead of scrolling the page. */
.table-scroll table.op-table { min-width: 560px; }
.example .op-table th,
.example .op-table td { padding: 9px 14px; }
.example .op-table tbody th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 767px) {
  .lp-ops-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---- Parte 02: control ---- */

.lp-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.lp-control-grid > * { min-width: 0; }
.lp-sample-label { margin: 0 0 8px; }
.lp-demo-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.lp-control-side > * + * { margin-top: 24px; }
.decision-title .ic { margin-top: 2px; }
.diff-cell { margin: 0; }
.diff-cell .diff-word { font-size: 13px; font-weight: 600; color: var(--blue); }
/* The ONLY teal on the page: a labelled, illustrative successful sample. */
.sample-result {
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--teal);
}
.sample-result p { margin: 8px 0 0; color: var(--ink); }
.sample-result .lp-sample-head { margin: 0; }
.tag-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: var(--teal-soft);
  color: var(--status-verified);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
}
/* Spec §4 table: the control grid is one column below 1024. */
@media (max-width: 1023px) {
  .lp-control-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Parte 03: plans ---- */

.disclosure {
  max-width: 75ch;
  margin-bottom: 32px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--blue);
}
.disclosure p { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.disclosure p:last-child { margin-bottom: 0; }
/* Reserves the client-rendered grid so the /api/plans response does not push
   the FAQ down after paint (CLS). Released under 960px where cards stack. */
.lp-plans { align-content: start; }
@media (min-width: 960px) {
  .lp-plans { min-height: 400px; }
}
.lp-plans .lp-state { grid-column: 1 / -1; max-width: none; margin-bottom: 0; }
.pricing-error-cta { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.plan-skeleton {
  min-height: 360px;
  padding: 24px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-container);
}
.plan-skeleton .bar {
  height: 12px;
  margin-bottom: 14px;
  background: var(--bg-hover);
  border-radius: var(--radius);
}
.plan-skeleton .bar:nth-child(1) { width: 40%; }
.plan-skeleton .bar:nth-child(2) { width: 70%; }
.plan-skeleton .bar:nth-child(3) { width: 55%; }
.plan-note {
  max-width: 75ch;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.plan-card > .badge { align-self: flex-start; }
.plan-price b.amt { font: inherit; white-space: nowrap; }
.plan-price span { white-space: nowrap; }
.plan-annual-note { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- Parte 04: FAQ ---- */

.lp-faq { max-width: 720px; border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
/* The native disclosure marker stays: replacing it (list-style: none) strips the
   control's affordance from the accessibility tree on Safari. */
.lp-faq summary {
  display: list-item;
  min-height: 48px;
  padding: 12px 2px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.lp-faq details p {
  max-width: none;
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---- Final CTA ---- */

.lp-final-cta { margin: 16px 0; }
.lp-final .lede { margin: 0; }

/* ---------- Utilities ---------- */

/* These two replace the last inline style="" attributes in the templates.
   Under a nonce-based CSP, style attributes are blocked outright — CSP3 makes
   a browser ignore 'unsafe-inline' in any directive that also carries a
   nonce, so there is no "allow just these two" option, and the class is the
   better home anyway. */
.uppercase {
  text-transform: uppercase;
}
.measure-720 {
  max-width: 720px;
}

@media (max-width: 599px) {
  .btn-lg { width: 100%; }
}

/* ---------- Motion ---------- */

/* FR acceptance criteria require the site to remain usable with reduced
   motion. Opacity-only transitions elsewhere; here we stop everything. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Consent UI + privacy page (acquisition-tracking FR §4).

   Kept here rather than in a page-local <style> for the same reason the
   landing block moved: cp-web's CSP has no 'unsafe-inline', so every inline
   block needs a nonce, and a stylesheet needs none. Nothing below is loaded
   conditionally — the markup is what's gated, not the CSS.
   ========================================================================== */

/* A quiet third action next to the two real ones. It must still read as a
   button (it opens a dialog), so it keeps .btn's height and hit area and only
   drops the fill — not a link, which would promise navigation. */
.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--blue); /* an action, not evidence: blue per spec §6 */
  text-decoration: underline;
}
.btn-quiet:hover:not(:disabled) {
  background: var(--blue-soft);
}

/* The footer control is a real <button> styled to sit in a link list. Type
   and colour are inherited so it matches its siblings exactly; the reset is
   explicit because UA button styles otherwise win. */
.footer-linklike {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}

.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(16px, 3vw, 24px);
  background: var(--surface);
  border-top: 1px solid var(--line); /* flat: no shadow (spec §13) */
}
.consent-banner-text {
  flex: 1 1 320px;
  min-width: 0;
}
.consent-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--ink);
}
.consent-body {
  margin: 0;
  max-width: 70ch;
  color: var(--muted);
  font-size: 13px;
}
/* Wrap rather than shrink: on a 390px viewport the three actions become a
   full-width row of their own instead of three cramped targets. */
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(23 32 42 / 45%);
}
.consent-modal-panel {
  width: 100%;
  max-width: 520px;
  /* The panel scrolls, not the page behind it. Without the cap, the preference
     list on a short viewport pushes the Save button off-screen with no way to
     reach it. */
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-container);
}
.consent-modal-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.consent-group {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.consent-group-title {
  font-weight: 600;
  color: var(--ink);
}
.consent-group-body,
.consent-group-state,
.consent-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.consent-group-state { margin-top: 6px; font-weight: 600; color: var(--ink); }
.switch .sw-left { display: flex; flex-direction: column; }
/* The whole row is the label, so the checkbox's hit area covers the title
   text too — a 13px box alone fails WCAG 2.2 SC 2.5.8. */
.consent-toggle {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 40px;
  margin-bottom: 0;
  cursor: pointer;
}
/* Switch (W10): the global input rule rendered this checkbox stretched and
   unstyled. 44x24 track, 6px radius (track and knob), muted border; blue when
   on. `.consent-toggle` is the live markup; `.switch` is the mockup's name for
   the same control (mockups/public/consent.html), so either class works.
   State is NOT carried by colour alone: the knob moves 20px, and when the
   markup includes the optional `.sw-state` label with `.sw-on`/`.sw-off`
   children, the matching word shows. Without :has() support both words stay
   hidden and the knob position is the cue. */
:is(.consent-toggle, .switch) input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  padding: 0;
  flex: none;
  position: relative;
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
:is(.consent-toggle, .switch) input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius);
  background: var(--muted);
  transition: left .12s ease;
}
:is(.consent-toggle, .switch) input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}
:is(.consent-toggle, .switch) input[type="checkbox"]:checked::after {
  left: 23px;
  background: var(--surface);
}
:is(.consent-toggle, .switch) input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  box-shadow: none;
}
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  margin: 0;
  cursor: pointer;
}
.sw-state {
  min-width: 80px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.sw-on, .sw-off { display: none; }
@supports selector(:has(*)) {
  :is(.consent-toggle, .switch):has(input:checked) .sw-on { display: inline; }
  :is(.consent-toggle, .switch):has(input:not(:checked)) .sw-off { display: inline; }
}
.consent-note {
  margin: 0 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.consent-modal .consent-actions {
  padding-top: 16px;
  justify-content: flex-end;
}

/* `hidden` is a presentation-level attribute and any display rule above it
   wins — .consent-banner's `display:flex` would keep a hidden banner on
   screen. Restate it so the attribute means what it says. */
[hidden] {
  display: none !important;
}

/* Privacy page: a plain reading column. Capped at 68ch because the page is
   continuous prose, and full-width body text at 1440 is unreadable. */
.prose-page {
  max-width: 720px;
}
.prose-page p, .prose-page li {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}
.prose-page .prose-lede { color: var(--muted); max-width: 60ch; }
.prose-page .prose-meta { font-size: 14px; color: var(--muted); }
.prose-page .toc-title { font-size: 13px; font-weight: 600; line-height: 1.4; }
.prose-page .toc li { font-size: 14px; line-height: 1.4; margin: 0; }
.prose-page .display { margin: 0 0 16px; }
.prose-head {
  margin-bottom: 32px;
}
.prose-lede {
  color: var(--muted);
  font-size: 16px;
}
.prose-meta {
  color: var(--muted);
  font-size: 14px;
}
.prose-page section {
  margin-top: 32px;
}
.prose-page h2 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}

/* ==========================================================================
   Concept C public primitives (docs/design/2026-10-03-concept-c/spec.md §13).

   Additive: every class above keeps working. Flat sections + 1px dividers;
   radii 6/8 only; no new shadows; 11px uppercase ONLY on `th` and field-group
   legends. Colour semantics follow spec §6 (teal = evidence, amber = decision,
   blue = action, muted = neutral, danger text only on surface/cloud or ink on
   its tint).
   ========================================================================== */

/* Visually hidden, still announced (DiffCell antes/depois text, icon labels). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Editorial chapters (numbered margin) ---------- */

/* Below 960px the number collapses inline above the heading as "Parte NN"
   (.chapter-word shows the word); from 960px it moves to a 64px margin track
   and the word is hidden. .chapter-num is an alias of .chapter-no. */
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  padding-block: 48px;
}
.chapter-no,
.chapter-num {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chapter-word { display: inline; }
.chapter-body { min-width: 0; }
.chapter-head { max-width: 720px; margin-bottom: 32px; }
.chapter-head .lede { margin-bottom: 0; }
@media (min-width: 960px) {
  .chapter {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 24px;
    padding-block: 64px;
  }
  .chapter-no,
  .chapter-num { margin: 0; padding-top: 10px; }
  .chapter-word { display: none; }
}

/* ---------- Operation rail (<ol>, semantic) ---------- */

/* `.rail` stays as an alias vocabulary (recoloured above). Stage markers:
   ink = reached/current, amber = decision, teal = verified, muted solid =
   neutral (response received), muted dashed = unknown, danger = failed.
   Colour never carries state alone: each node has a .rail-tone line with a
   word (and an icon where the caller supplies one). */
.op-rail {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.op-rail > li {
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  margin: 0;
  color: var(--ink);
}
.op-rail .step-no {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.op-rail .rail-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.op-rail .rail-sub,
.op-rail .rail-sublabel { display: block; font-size: 13px; color: var(--muted); }
.op-rail .rail-tone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
}
.op-rail > li.is-current { border-top-color: var(--ink); }
.op-rail > li.is-decision { border-top-color: var(--amber); }
.op-rail > li.is-decision .rail-tone { color: var(--status-decision); }
.op-rail > li.is-verified { border-top-color: var(--teal); }
.op-rail > li.is-verified .rail-tone { color: var(--status-verified); }
.op-rail > li.is-neutral { border-top-color: var(--muted); }
.op-rail > li.is-neutral .rail-tone { color: var(--status-neutral); }
.op-rail > li.is-unknown { border-top: 2px dashed var(--muted); }
.op-rail > li.is-unknown .rail-tone { color: var(--status-neutral); }
.op-rail > li.is-failed { border-top-color: var(--danger); }
.op-rail > li.is-failed .rail-tone { color: var(--danger); }
@media (max-width: 959px) {
  .op-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .op-rail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .op-rail > li { border-top: 0; border-left: 2px solid var(--ink); padding: 0 0 0 14px; }
  .op-rail > li.is-decision { border-left-color: var(--amber); }
  .op-rail > li.is-verified { border-left-color: var(--teal); }
  .op-rail > li.is-neutral { border-left-color: var(--muted); }
  .op-rail > li.is-unknown { border-top: 0; border-left: 2px dashed var(--muted); }
  .op-rail > li.is-failed { border-left-color: var(--danger); }
}

/* ---------- Decision surface (the ONLY card-like amber surface) ---------- */

/* Supersedes .lp-confirm*. One amber surface; everything inside is separated
   by 1px rules, never nested boxes. The amber BORDER is decorative (1.99:1);
   the surface is identified by the amber-deep title + icon + labelled
   actions. DOM order is Cancelar then Confirmar; .decision-actions keeps that
   order at every width (no row-reverse). */
.decision {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: var(--radius-container);
  padding: 18px;
}
.decision-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--status-decision);
  font-size: 14px;
  font-weight: 700;
  max-width: none;
}
.decision-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.decision-chips > * {
  background: var(--surface);
  color: var(--status-decision);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.decision-rows { margin: 0; }
.decision-rows > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.decision-rows dt { font-size: 13px; font-weight: 600; color: var(--muted); }
.decision-rows dd { margin: 0; font-size: 14px; color: var(--ink); }
.decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
/* A changed value inside the surface (DiffCell tone="pending"). */
.decision-diff { padding: 10px 0; border-top: 1px solid var(--line); }
.decision-diff p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
/* Order utilities: the primary action stays LAST in DOM and visual order;
   these only control alignment/wrapping on narrow screens. */
.decision-actions--end { justify-content: flex-end; }
@media (max-width: 599px) {
  .decision-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .decision-actions--stack { flex-direction: column; }
  .decision-actions--stack > .btn { width: 100%; }
}
/* Pending diff cell: neutral blue-soft; the words "novo"/"remover" carry the
   meaning (spec §6 rule 7) — never success/danger tints before confirmation. */
.diff-cell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  background: var(--blue-soft);
  border-radius: var(--radius);
  padding: 6px 10px;
  color: var(--ink);
  font-size: 14px;
}
.diff-cell del { color: var(--muted); text-decoration: line-through; }
.diff-cell ins { text-decoration: none; font-weight: 700; }

/* ---------- Labelled example (illustrative, never presented as live) ---------- */

.example {
  background: var(--surface);
  border-block: 1px solid var(--line);
  min-width: 0;
}
.example-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.example-head p { margin: 0; font-size: 13px; color: var(--muted); }
.example-body { padding: 16px; }
.example-foot {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.example .table-scroll { border: 0; border-radius: 0; }
.tag-example {
  background: var(--bg-hover);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  /* T31 P-5: may wrap (WCAG 1.4.12 text spacing at 320px); never wider than
     its line. */
  max-width: 100%;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Status badges / pills ---------- */

/* One vocabulary, two uses. On `.status` (dot + text) the modifier sets the
   colour; on `.badge`/`.status-pill` it also sets a tint. Small text always
   uses the DEEP variant (spec §6 rule 4); danger is ink on its tint (rule 5). */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--muted);
}
.status-decision { color: var(--status-decision); }
.status-verified { color: var(--status-verified); }
.status-neutral { color: var(--status-neutral); }
/* Danger text is ink; the bare --danger colour is for the dot/icon/rule only
   (spec §6 rule 5: --danger text on a tint is 4.37:1). */
.status-danger { color: var(--ink); }
.status-danger::before { background: var(--danger); }
.status-info { color: var(--status-info); }
.badge.status-decision, .status-pill.status-decision { background: var(--amber-soft); }
.badge.status-verified, .status-pill.status-verified { background: var(--teal-soft); }
.badge.status-neutral, .status-pill.status-neutral { background: var(--bg-hover); }
.badge.status-info, .status-pill.status-info { background: var(--blue-soft); }
.badge.status-danger, .status-pill.status-danger {
  background: var(--danger-soft);
  color: var(--ink);
  border-left: 2px solid var(--danger);
}
/* ---------- Notices (nonmodal) ---------- */

/* Naming for the template lane: the mockups' `.notice.n-info|n-decision|
   n-danger|n-neutral|n-verified` are `.notice.notice-<tone>` here. */
/* Flat: 2px rule + icon + text. Text is ALWAYS ink (rule and icon carry the
   tone), so the danger tone never sets --danger text on a tint. */
.notice {
  display: flex;
  gap: 10px;
  max-width: 75ch;
  margin-bottom: 16px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}
.notice > svg, .notice .ic { flex: none; margin-top: 2px; }
.notice p { margin: 0; font-size: 13px; color: var(--ink); }
.notice p + p { margin-top: 6px; }
.notice .btn { margin-top: 10px; }
.notice-info { border-left-color: var(--blue); }
.notice-info .ic { color: var(--blue); }
.notice-decision { border-left-color: var(--amber); }
.notice-decision .ic { color: var(--status-decision); }
.notice-neutral { border-left-color: var(--muted); }
.notice-neutral .ic { color: var(--muted); }
.notice-verified { border-left-color: var(--teal); }
.notice-verified .ic { color: var(--status-verified); }
.notice-danger {
  border-left-color: var(--danger);
  background: var(--danger-soft);
  padding: 8px 12px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
}
.notice-danger .ic { color: var(--danger); }

/* ---------- Form groups and error placement ---------- */

.field-group {
  min-width: 0;
  margin: 0 0 24px;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.field-group > legend {
  padding: 0 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 599px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
/* Per-field message directly under the control: ink text + danger icon. */
.field-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink);
}
.field-msg .ic { flex: none; margin-top: 1px; color: var(--danger); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* ---------- Tables ---------- */

/* A scroll wrapper is keyboard-reachable only if the MARKUP gives it
   tabindex="0" role="region" aria-label="<table caption>"; CSS cannot add
   that. Applies to .table-scroll and the older .op-table-scroll. */
.table-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-container);
}
.table-scroll:focus-visible,
.op-table-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.table-caption,
.op-table caption {
  caption-side: top;
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
/* Scoped to cells so definition-list `.num` values (.lp-record) keep their alignment. */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.op-table tbody th {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--ink);
}

/* ---------- Long-form measure ---------- */

.measure { max-width: 68ch; }
.measure-lede { max-width: 60ch; }

/* ---------- Reduced motion (addition to the block above) ---------- */

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--line); border-right-color: var(--blue); }
}

/* ---------- Signup (T12): stage list, surface, tabs, plan choice ---------- */

.signup {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.signup.no-aside { grid-template-columns: minmax(0, 1fr); }
.signup-aside { min-width: 0; }
.signup-main { max-width: 560px; min-width: 0; }
.signup.is-wide .signup-main { max-width: none; }
.signup-surface {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-container);
}
.signup.is-wide .signup-surface { padding: 0; background: none; border: 0; }
.signup-surface h1 { margin-top: 0; }
.signup h1[tabindex="-1"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.stages { list-style: none; margin: 0; padding: 0; }
.stages li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.stages li:first-child { border-top: 0; }
.st-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--muted);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.stages li.is-current { color: var(--ink); font-weight: 600; }
.stages li.is-current .st-mark { border-color: var(--blue); color: var(--blue); }
.stages li.is-done .st-mark { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-deep); }
.stages li.is-choice .st-mark { border-color: var(--muted); background: none; color: var(--ink); }
.st-text { display: flex; flex-direction: column; }
.st-count { display: none; }
.st-state { font-size: 13px; font-weight: 400; color: var(--muted); }
.stages li.is-done .st-state { color: var(--status-verified); }
.plan-summary { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.plan-summary-title { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.plan-summary-main { margin: 0 0 2px; color: var(--ink); }
.plan-summary-sub { margin: 0; font-size: 13px; }
.signup.is-wide .plan-summary { margin: 0 0 24px; }
@media (max-width: 959px) {
  .signup { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .stages li:not(.is-current) { display: none; }
  .stages li { padding: 0; border-top: 0; }
  .st-count { display: inline; }
  .st-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
  .st-mark { display: none; }
  .stages li.is-current .st-state { display: none; }
  .signup-surface { padding: 20px; }
  .plan-summary { margin-top: 12px; padding-top: 12px; }
}

.tabs { display: flex; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tab-btn {
  flex: 1;
  min-height: 44px;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: 600 14px var(--font);
  color: var(--muted);
  cursor: pointer;
}
.tab-btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue); }

.disclosure-line {
  max-width: 60ch;
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 2px solid var(--blue);
  font-size: 14px;
  color: var(--ink);
}
.pay-note { margin: 8px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pay-note p { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.pay-note .disclosure-line { max-width: none; margin-bottom: 0; }
.field-row.c3 { grid-template-columns: minmax(0, 1fr) 120px; }
@media (max-width: 599px) { .field-row.c3 { grid-template-columns: minmax(0, 1fr); } }
.field-hint { font-size: 13px; color: var(--muted); }
input[readonly] { background: var(--bg-hover); color: var(--muted); }

.form-alert {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--danger);
}
.form-alert .ic { margin-top: 2px; color: var(--danger); }
.form-alert p, .form-alert li { margin: 0; font-size: 13px; color: var(--ink); }
.form-alert ul { margin: 6px 0 0; padding-left: 18px; }
.form-alert .al-title { font-size: 14px; font-weight: 600; }
.form-alert a { color: var(--blue); }
.form-alert li a { display: inline-flex; align-items: center; min-height: 40px; } /* T31 P-6 */
.link-btn {
  min-height: 40px;
  padding: 0;
  background: none;
  border: 0;
  font: 600 14px var(--font);
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}
.btn { min-height: 40px; height: auto; padding-block: 8px; }

.billing-toggle {
  display: inline-flex;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
}
.billing-opt {
  min-height: 40px;
  padding: 0 16px;
  background: var(--surface);
  border: 0;
  font: 600 14px var(--font);
  color: var(--ink);
  cursor: pointer;
}
.billing-opt + .billing-opt { border-left: 1px solid var(--muted); }
.billing-opt[aria-pressed="true"] {
  background: var(--blue-soft);
  color: var(--blue);
  /* T31 P-7: a shape cue besides colour — 2px blue bar + underline. */
  box-shadow: inset 0 -2px 0 var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.billing-opt[aria-pressed="true"] .billing-save { display: inline-block; text-decoration: none; }
.billing-opt:disabled { background: var(--bg-hover); color: var(--muted); cursor: not-allowed; }
.billing-save { margin-left: 6px; font-size: 13px; font-weight: 600; }
.preselect-note { margin: 0 0 16px; font-size: 13px; color: var(--muted); }

fieldset.plans { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
fieldset.plans > legend { margin-bottom: 12px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.plan-card.selectable { position: relative; cursor: default; }
.plan-card .plan-name { font-size: 17px; font-weight: 600; } /* T31 P-10: H3 is Inter 600 */
/* T31 P-4: catalog-controlled names may be one unbroken token. */
.plan-card .plan-name, .plan-card .plan-tagline { overflow-wrap: anywhere; min-width: 0; }
.plan-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plan-pick label { margin: 0; cursor: pointer; min-width: 0; }
.plan-pick label::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-container); }
.plan-pick .badge { margin-left: auto; position: relative; }
.plan-card:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.plan-card:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.plan-card:has(input:disabled) .plan-pick label { cursor: not-allowed; color: var(--muted); }
.plan-warn {
  display: flex;
  gap: 6px;
  margin: 0;
  padding-left: 8px;
  border-left: 2px solid var(--amber);
  font-size: 13px;
  color: var(--ink);
}
.plan-bullets li::before { width: 5px; height: 5px; top: 9px; background: var(--muted); }
.plan-trial { margin: 0; }

.progress-sub .btn { margin-top: 4px; }
.progress-sub .btn[disabled] { cursor: not-allowed; }

/* Human-readable recovery pages (404 / 410). */
.err-page { max-width: 560px; margin-inline: auto; padding-block: 64px; }
.err-page > * + * { margin-top: 16px; }
.err-code { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0; }
.err-page .link-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}
.err-page .link-list li { margin: 0; border-bottom: 1px solid var(--line); }
.err-page .link-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  color: var(--blue);
}

/* ---------- Manual / tutorial / privacy long-form (T13, T15) ---------- */

/* Page head above the numbered chapters (manual). */
.doc-head { padding-top: 40px; }

/* Contents list: links are the chapter/section ids. Two columns from 600px,
   one below; every link keeps a 36px hit area. */
.toc {
  max-width: 720px;
  margin: 0 0 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.toc-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.toc ol { columns: 2; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0; break-inside: avoid; font-size: 14px; }
.toc a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.toc .ix {
  width: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 599px) { .toc ol { columns: 1; } }

.chapter-prose { max-width: 720px; }
.chapter-prose h2 { margin: 0 0 12px; }
.chapter-prose h3 { margin: 24px 0 8px; font-size: 17px; color: var(--ink); }
.chapter-prose p, .chapter-prose li {
  max-width: none;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}
.steps { margin: 0 0 16px; padding-left: 24px; }
.steps li { margin-bottom: 12px; }
.steps b { font-weight: 600; }
:target { scroll-margin-top: 16px; }
.chapter:target .chapter-no { color: var(--blue); }

/* Tutorial / generic reading column. */
.prose { max-width: 720px; }
.prose h2 { margin: 40px 0 12px; font-size: 22px; line-height: 1.3; }
.prose p, .prose li { max-width: none; color: var(--ink); font-size: 16px; line-height: 1.6; }
.prose ol, .prose ul { padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose .display { margin: 0 0 24px; }

/* T31 P-6: 40px hit areas for small standalone links (type size unchanged). */
.tutorial-outline a,
.blog-breadcrumb-item a,
.blog-article-provenance dd a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* T31 P-3: while the fixed consent banner is shown, consent.js publishes its
   height as --consent-banner-h on <html> (class has-consent-banner). The body
   reserves that space at the end of the page and every scroll-into-view
   (Tab, :target, focus()) keeps a focused control above the banner. */
html.has-consent-banner {
  scroll-padding-bottom: calc(var(--consent-banner-h, 0px) + 16px);
}
html.has-consent-banner body {
  padding-bottom: var(--consent-banner-h, 0px);
}
html.has-consent-banner :is(a[href], button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-bottom: 16px;
}

/* Reserved heights for blocks that fill after first paint (CLS <= 0.1). */
#plan-cards { min-height: 120px; }
@media (min-width: 960px) { #plan-cards { min-height: 400px; } }
#progress-list { min-height: 360px; }