/* 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);
}
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-deep); /* AA at small size; --teal is not */
}
.lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

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

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  flex-wrap: wrap;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.site-header .brand svg {
  width: 32px;
  height: 32px;
}
.site-header .brand b {
  font-size: 16px;
  font-weight: 700;
}
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.site-nav a:hover {
  color: var(--blue);
}
.site-nav a.is-cta {
  color: var(--blue);
}

@media (max-width: 600px) {
  .site-nav {
    width: 100%;
    margin-left: 0;
    gap: 16px;
    flex-wrap: wrap;
  }
}

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

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  background: var(--surface);
}
.site-footer .footer-inner {
  padding-block: 32px;
  display: grid;
  gap: 20px;
}
.site-footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}
/* 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. Values
   below are unchanged, so the rendering is byte-identical. */
.site-footer .footer-col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li {
  margin-bottom: 6px;
  font-size: 13px;
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.site-footer a:hover {
  color: var(--blue);
}
.site-footer .footer-legal {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 12px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}
/* 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: 12px;
  color: var(--muted);
}

/* ---------- 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(--teal-deep);
}
.status-waiting {
  color: var(--amber-deep);
}
.status-done {
  color: var(--success-deep);
}
.status-failed {
  color: 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(--success-deep);
  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(--teal);
}
.rail-step.is-waiting {
  border-top-color: var(--amber);
}
.rail-step.is-done {
  border-top-color: var(--success);
}
.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(--teal);
  }
  .rail-step.is-waiting {
    border-left-color: var(--amber);
  }
  .rail-step.is-done {
    border-left-color: var(--success);
  }
}

/* ---------- 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 ---------- */

/* Everything below was the landing template's page-local <style> block. It
 * lives here now because the page reuses the primitives above (.op-panel,
 * .op-table, .op-diff, .rail, .status, .display, .eyebrow, .lede) and only
 * needs composition on top of them.
 *
 * Composition is where the "generic AI SaaS template" look is won or lost, so
 * the rules are deliberate: no section is a bordered white rectangle, the
 * three operational rows alternate side and carry three DIFFERENT evidence
 * shapes (table / figure / strip), and the grids are asymmetric (5:6, 5:7,
 * 7:5, 7:5, 4:7) rather than equal columns. There is exactly one amber element
 * on the page — the confirmation card — because amber means "waiting on you".
 */

.btn-lg {
  height: 48px;
  padding: 0 24px;
  font-size: 15px;
}

/* Landing header. Under 760px the two in-page anchors drop out and the CTA
   takes a full-width second row — the .bar is already flex-wrap: wrap, so the
   header simply becomes two rows. No hamburger: a disclosure menu is real work
   (focus management, escape handling, aria-expanded that tells the truth) and
   the FR fixes the wrapping treatment instead. */
.site-nav--landing {
  gap: 20px;
}
/* `.site-nav a` is (0,1,1); `.btn-primary` is (0,1,0). The nav rule therefore
   WINS on a .btn inside the nav and paints the CTA label --muted on --blue —
   about 2:1, unreadable, at both breakpoints. Caught by looking at the page,
   not by any test: every contract test here asserts on markup, and the markup
   was correct. Restate the button's own color at nav specificity, hover
   included, or the label goes --blue on --blue on hover. */
.site-nav--landing .nav-cta,
.site-nav--landing .nav-cta:hover {
  color: var(--surface);
}
/* 24px minimum touch height (WCAG 2.2 SC 2.5.8). The nav links measured 22px
   on a 412px mobile viewport. Padding only — the header is align-items:center,
   so nothing reflows. Scoped to the landing nav: the shared footer has the
   same shortfall but fixing it is not required by this page, and every other
   public page would inherit the change. */
.site-nav--landing a {
  padding-block: 4px;
}
@media (max-width: 760px) {
  .site-nav--landing .nav-anchor {
    display: none;
  }
  .site-nav--landing {
    width: 100%;
    margin-left: 0;
    gap: 12px;
  }
  .site-nav--landing .nav-cta {
    width: 100%;
  }
}

/* The sticky-free header is 65px tall; anchored headings must clear it. */
#inicio,
#operacao,
#como-funciona,
#planos,
#faq,
#comecar {
  scroll-margin-top: 24px;
}

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

.lp-hero {
  padding-block: clamp(24px, 4vw, 56px);
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
/* Grid children may not force their track wider than its share — the table and
   the long H1 both will, at 320px, without this. */
.lp-hero-grid > *,
.lp-row > *,
.lp-control-grid > *,
.lp-faq-grid > * {
  min-width: 0;
}
.lp-hero-copy > * + * {
  margin-top: 16px;
}
.lp-hero-copy .lede {
  max-width: 46ch;
}
.lp-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.lp-link {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding-block: 4px; /* 23px -> 24px, WCAG 2.2 SC 2.5.8 */
}
.lp-link:hover {
  text-decoration: underline;
}

.lp-demo {
  margin: 0; /* <figure> carries UA margins */
}
.lp-demo-badge {
  margin-left: auto;
}
.lp-demo-caption {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--cloud);
  font-size: 12px;
  color: var(--muted);
}
.lp-record {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 10px;
}
.lp-record > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  align-items: center;
}
.lp-record > div:last-child {
  border-bottom: 0;
}
.lp-record dt {
  color: var(--muted);
}
.lp-record dd {
  color: var(--ink);
}
.lp-record .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* --success-deep on the assistant message's --teal-soft is 4.47:1 — it misses
   AA for 13px text by 0.03, which is exactly the kind of near-miss no reviewer
   catches by eye and Lighthouse fails outright. Giving the line its own
   --surface plate lifts the same green to 5.0:1 without touching the palette
   or the Phase 1 primitive. Measured, not guessed: WCAG 2.x relative
   luminance, the method review.md §3.1 used. */
.lp-record-status {
  margin-top: 10px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 6px 10px;
}

/* ---- Section rhythm ---- */

/* Hairline-separated bands on the page background. Deliberately NOT tinted
   panels: the evidence inside them is .op-panel (white on cloud), which is the
   contrast that makes it read as a real record rather than decoration. */
.lp-band {
  padding-block: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.lp-head {
  max-width: 640px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.lp-head > * + * {
  margin-top: 8px;
}
.lp-head .lede {
  margin-bottom: 0;
}

/* ---- Operational rows ---- */

.lp-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.lp-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.lp-row:last-of-type {
  padding-bottom: 0;
}
.lp-row h3 {
  margin-top: 0;
}
.lp-row--flip {
  grid-template-columns: 7fr 5fr;
}
.lp-row--flip .lp-row-copy {
  order: 2;
}
.lp-row--flip .lp-row-evidence {
  order: 1;
}
.lp-request {
  display: inline-block;
  background: var(--blue-soft);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--ink);
  margin-bottom: 0;
}
.lp-more {
  color: var(--muted);
  font-size: 12px;
}
.lp-diff-where {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.lp-diff-figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 26px;
  margin-bottom: 0;
}
.lp-diff-figure .to {
  font-size: 32px;
  letter-spacing: -0.01em;
}
.lp-diff-unit {
  font-size: 14px;
  color: var(--muted);
}
.lp-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  margin-bottom: 0;
}
.lp-strip-name {
  font-weight: 600;
  color: var(--ink);
}
.lp-strip-badge {
  margin-left: auto;
}

/* ---- Control rail + confirmation ---- */

.lp-rail {
  margin-block: clamp(24px, 3vw, 40px);
}
.lp-rail .rail-label,
.lp-rail .rail-sublabel {
  margin-bottom: 0;
}
.lp-control-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.lp-control-body {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 0;
}

/* The only amber on the page. Marketing density (18px) per review.md §7 — the
   app's confirmation panel uses 16px and the two must not drift into each
   other. */
.lp-confirm {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: var(--radius-container);
  padding: 18px;
}
.lp-confirm-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--amber-deep);
  margin-bottom: 10px;
}
.lp-confirm-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lp-chip {
  background: var(--surface);
  border: 1px solid var(--amber);
  color: var(--amber-deep);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.lp-confirm-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.lp-confirm-preview > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.lp-confirm-preview > div:last-child {
  border-bottom: 0;
}
.lp-confirm-preview dt {
  color: var(--muted);
}
.lp-confirm-preview dd {
  color: var(--ink);
}
.lp-confirm-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* ---- Plans ---- */

/* Reserves the client-rendered grid so the /api/plans response cannot push the
   FAQ down the page after paint (the CLS gate). Released under 560px, where
   the cards stack and a fixed height would leave a hole. */
.lp-plans {
  min-height: 420px;
  align-content: start;
}
.pricing-error-cta {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* ---- FAQ ---- */

.lp-faq-grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.lp-faq-grid .lp-head {
  margin-bottom: 0;
}
.lp-faq {
  border-top: 1px solid var(--line);
}
.lp-faq details {
  border-bottom: 1px solid var(--line);
}
/* The native disclosure marker stays. Replacing it means list-style: none,
   which on Safari strips the control's affordance from the accessibility tree
   as well as the screen. */
.lp-faq summary {
  cursor: pointer;
  padding: 16px 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.lp-faq details p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  padding-left: 18px;
}

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

.lp-final {
  text-align: center;
}
.lp-final .lede {
  max-width: 52ch;
  margin-inline: auto;
}

/* ---- Responsive ---- */

@media (max-width: 960px) {
  .lp-hero-grid,
  .lp-control-grid,
  .lp-faq-grid {
    grid-template-columns: 1fr;
  }
  .lp-row,
  .lp-row--flip {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  /* Copy before evidence on every row once stacked — a flipped row would
     otherwise show its table before the question it answers. */
  .lp-row--flip .lp-row-copy {
    order: 1;
  }
  .lp-row--flip .lp-row-evidence {
    order: 2;
  }
}

@media (max-width: 560px) {
  .btn-lg {
    width: 100%;
  }
  .lp-hero-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .lp-record > div,
  .lp-confirm-preview > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .lp-strip-badge {
    margin-left: 0;
  }
  .lp-plans {
    min-height: 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;
}

/* ---------- 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;
  }
}