/* css/base.css */
/*
 * Base: the document, the page column, focus, and the two utilities every
 * page needs. Loaded first; the component sheets follow in name order.
 *
 * Every value is a var(--…) from design/tokens/. The build refuses a literal
 * color, length or duration in apps/site/css/ — except inside an @media
 * condition, where CSS does not accept var() at all.
 *
 * The column is --page-w-max wide at most (1200, the canvas's; the token
 * was born in spec 58), centred, with token padding inside it. There is no
 * breakpoint token (008 L3): the one breakpoint is written in em, once per
 * sheet that needs it, and is the canvas's 860px collapse point (53.75em);
 * see the comment in site-nav.css.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--brand-deep);
}

a:hover {
  color: var(--ink);
}

code {
  font-family: var(--font-mono);
}

:focus-visible {
  outline: var(--stroke-strong) solid var(--brand);
  outline-offset: var(--stroke-strong);
}

main:focus {
  outline: none;
}

.wrap {
  max-inline-size: var(--page-w-max);
  margin-inline: auto;
  padding-inline: var(--space-10);
}

.icon {
  flex: none;
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
}

.visually-hidden {
  position: absolute;
  inline-size: var(--space-px);
  block-size: var(--space-px);
  margin: calc(var(--space-px) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: var(--layer-toast);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
  padding-inline: var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border: var(--stroke-hairline) solid var(--ink);
  font-weight: var(--weight-semibold);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

@media (max-width: 53.75em) {
  .wrap {
    padding-inline: var(--space-5);
  }
}

/* css/button.css */
/*
 * Button (002-componentes.md, Button; 008 §8.2 and §8.3). Square corners,
 * the control height of the comfortable density, and no fixed width: the
 * label decides, with min-height plus padding. One primary per screen.
 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-h);
  padding-inline: var(--space-6);
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  text-decoration: none;
  transition:
    background-color var(--duration-instant) var(--ease),
    color var(--duration-instant) var(--ease);
}

.button--primary {
  background: var(--brand);
  color: var(--on-brand);
}

.button--primary:hover {
  background: var(--brand-deep);
  color: var(--on-brand);
}

.button--secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.button--secondary:hover {
  background: var(--surface);
  color: var(--ink);
}

/* css/category-table.css */
/*
 * The category table (008 L8; §6.1, S4): "no lugar de" → "o que o Heimdall
 * oferece", one row per module. A real table, with caption and th scope;
 * on the phone each row becomes a stacked card, the column label in Mono
 * above each cell (the label spans are hidden from a screen reader, which
 * has the table's own headers).
 */

.category-table {
  inline-size: 100%;
  border-collapse: collapse;
  border-block-start: var(--stroke-hairline) solid var(--ink);
  text-align: start;
}

.category-table thead th {
  padding-block: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--ink-subtle);
  text-align: start;
}

.category-table tr {
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.category-table tbody th,
.category-table td {
  padding-block: var(--space-6);
  vertical-align: top;
  text-align: start;
}

.category-table tbody th {
  inline-size: 30%;
  padding-inline-end: var(--space-6);
  font-weight: var(--weight-semibold);
}

.category-table td {
  color: var(--ink-muted);
}

.category-table__label {
  display: none;
}

@media (max-width: 53.75em) {
  .category-table thead {
    display: none;
  }

  .category-table tr,
  .category-table tbody th,
  .category-table td {
    display: block;
    inline-size: auto;
  }

  .category-table tr {
    padding-block: var(--space-6);
  }

  .category-table tbody th,
  .category-table td {
    padding: 0;
  }

  .category-table td {
    margin-block-start: var(--space-4);
  }

  .category-table__label {
    display: block;
    margin-block-end: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-label);
    color: var(--ink-subtle);
  }
}

/* css/cta-note.css */
/*
 * The line under every primary button (008 §8.1, L10): the label does not
 * say WhatsApp, so this line does, and offers e-mail as a text link. The
 * link keeps a 44px target by height, not by font size (008 §9.2).
 */

.cta-note {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-subtle);
}

.cta-note a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
}

/* css/cta-section.css */
/*
 * CTASection (002-componentes.md; 008 §6.1, S7): a white card with a hairline
 * border on the concrete ground, the title, the sub, one primary and its
 * note. No shadow: a card's elevation is its border.
 */

.cta-section {
  padding-block: var(--space-24);
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.cta-section__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-12);
  background: var(--surface);
  border: var(--stroke-hairline) solid var(--border);
}

.cta-section__title {
  max-inline-size: var(--measure-body);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.cta-section__sub {
  max-inline-size: var(--measure-body);
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

.cta-section__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

@media (max-width: 53.75em) {
  .cta-section {
    padding-block: var(--space-16);
  }

  .cta-section__card {
    padding: var(--space-6);
  }

  .cta-section__title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }

  .cta-section__action {
    align-self: stretch;
    align-items: stretch;
  }
}

/* The footer draws its own line above it. */
.cta-section:last-child {
  border-block-end: 0;
}

/* css/hero.css */
/*
 * Hero (002-componentes.md; 008 §6.1, S1). Text on the left, the terminal
 * figure on the right, centred on the text's height; on the phone the figure
 * comes after the note, below the fold. Headline in --text-5xl within
 * --measure-tight, --text-4xl on the phone; no width on any text block but
 * a measure in ch.
 */

.hero {
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-24);
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.hero__title {
  max-inline-size: var(--measure-tight);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.hero__sub {
  max-inline-size: var(--measure-body);
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.hero .cta-note {
  margin-block-start: calc(var(--space-4) * -1);
}

@media (max-width: 53.75em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding-block: var(--space-12) var(--space-16);
  }

  .hero__text {
    gap: var(--space-4);
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__actions {
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .hero .cta-note {
    margin-block-start: calc(var(--space-2) * -1);
  }
}

/* css/kicker.css */
/*
 * The kicker over every section and module title (002, Hero: "Kicker em
 * Mono caixa alta"). The copy is already upper case in the strings, as in
 * 008; this sheet does not transform it.
 */

.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-label);
  color: var(--ink-subtle);
}

.kicker--brand {
  color: var(--brand);
}

/* css/lang-switch.css */
/*
 * The language selector (008 §9.4, L6): two links in Mono, the current one
 * in ink. Each link is a 44px target.
 */

.lang-switch {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-subtle);
}

.lang-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-h);
  min-inline-size: var(--control-h);
  color: var(--ink-subtle);
  text-decoration: none;
}

.lang-switch__link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.lang-switch__link[aria-current="true"] {
  color: var(--ink);
  font-weight: var(--weight-medium);
}

/* css/legal.css */
/*
 * /privacidade (008 §6.3): the policy from docs/legal/, rendered by
 * lib/markdown.mjs. A reading column (--measure-wide), the headings of the
 * scale, and the tables as real tables on the desktop; on the phone each row
 * becomes a stacked card with the column's label in Mono above each cell
 * (008 §9.2), so the page never scrolls sideways.
 */

.legal-page {
  padding-block: var(--space-20) var(--space-24);
}

.legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-inline-size: var(--measure-wide);
}

.legal h1 {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin-block-end: var(--space-4);
}

.legal h2 {
  margin-block-start: var(--space-10);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.legal h3 {
  margin-block-start: var(--space-6);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.legal p,
.legal li,
.legal td {
  color: var(--ink-muted);
}

.legal strong {
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.legal ul,
.legal ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline-start: var(--space-6);
}

.legal blockquote {
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: var(--stroke-strong) solid var(--border);
}

.legal-table {
  inline-size: 100%;
  border-collapse: collapse;
  border-block-start: var(--stroke-hairline) solid var(--ink);
  text-align: start;
}

.legal-table thead th {
  padding-block: var(--space-3);
  padding-inline-end: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-subtle);
  text-align: start;
}

.legal-table tr {
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.legal-table tbody th,
.legal-table td {
  padding-block: var(--space-4);
  padding-inline-end: var(--space-4);
  vertical-align: top;
  text-align: start;
}

.legal-table tbody th {
  font-weight: var(--weight-normal);
  color: var(--ink);
}

.legal-table__label {
  display: none;
}

@media (max-width: 53.75em) {
  .legal-page {
    padding-block: var(--space-12) var(--space-16);
  }

  .legal h1 {
    font-size: var(--text-4xl);
  }

  .legal-table thead {
    display: none;
  }

  .legal-table tr,
  .legal-table tbody th,
  .legal-table td {
    display: block;
  }

  .legal-table tr {
    padding-block: var(--space-4);
  }

  .legal-table tbody th,
  .legal-table td {
    padding: 0;
  }

  .legal-table td {
    margin-block-start: var(--space-3);
  }

  .legal-table__label {
    display: block;
    margin-block-end: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-subtle);
  }
}

/* css/module-list.css */
/*
 * ModuleList (008 L13; §6.1, S2): the seven modules, one per row, under a
 * line in ink, each row separated by a hairline. Desktop: three columns —
 * the number; the kicker and the title; the body, the figure and the link.
 * Phone: one column, in that order. No row has a height: the content sets it.
 */

.module-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--stroke-hairline) solid var(--ink);
}

.module-list__item {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: start;
  gap: var(--space-8);
  padding-block: var(--space-10);
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.module-list__number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand);
}

.module-list__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.module-list__title {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.module-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
  color: var(--ink-muted);
}

.module-list__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--control-h);
  font-weight: var(--weight-semibold);
}

@media (max-width: 53.75em) {
  .module-list__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-8);
  }
}

/* css/module-page.css */
/*
 * The module pages (010 §4; the approved canvas: Catalogo, Infraestrutura,
 * Secrets, Banco, AcessoInterno, Releases, Incidentes). What is theirs alone — the breadcrumb, the head-left
 * sections, the feature grid of P2, P3 with its figure, P4's two columns,
 * the two in-session sections of the Database Manager and previous/next.
 * The rest is the site's: the Hero (.hero--text), the numbered list
 * (.step-list--stacked), the act × who table (.category-table), the
 * neighbour list (.module-list--compact), the figure and the CTASection.
 *
 * Grounds: concrete and white alternate, and one green per page (P4 on
 * 01–03 and 05–07, the in-session block on 04). On the green, nothing in a table or a
 * card is green: P4's header is concrete and its cells white, the masking
 * strategies sit on a white card.
 */

/* The breadcrumb (010 §4.2, L14) ---------------------------------------- */

.trail__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.trail__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--control-h);
  font-weight: var(--weight-medium);
}

.trail__item + .trail__item::before {
  content: "›" / "";
  font-weight: var(--weight-normal);
  color: var(--ink-subtle);
}

.trail__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
  font-weight: var(--weight-normal);
  color: var(--ink-muted);
}

.trail + .hero .hero__inner {
  padding-block-start: var(--space-12);
}

/* A section with its title on the left (P2, P4, P5) ---------------------- */

.module-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.75fr);
  align-items: start;
  gap: var(--space-12);
}

.module-section__title {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.module-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.module-section__lead {
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

.module-section__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  min-inline-size: 0;
}

.module-section__body > .data-split {
  align-self: stretch;
}

.section--brand .module-section__lead,
.section--brand .module-section__close,
.section--brand .section__more a,
.section--brand .section__more a:hover {
  color: var(--on-brand);
}

/* P2: what it does, two columns of h3 and body ---------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--stroke-hairline) solid var(--ink);
}

.feature-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-8) var(--space-8) 0;
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.feature-grid__item:nth-child(even) {
  padding-inline: var(--space-8) 0;
  border-inline-start: var(--stroke-hairline) solid var(--border);
}

.feature-grid__item p {
  color: var(--ink-muted);
}

.feature-grid__title {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* The h3 that leads to P3a and P3b (010 §9, "Dentro da sessão"). */
.feature-grid__item--accent,
.feature-grid__item--accent:nth-child(even) {
  padding-inline: var(--space-6);
  background: var(--ground);
  border-inline-start: var(--stroke-strong) solid var(--brand);
}

/* P3: how it works, the text and the figure side by side ------------------ */

.module-how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  gap: var(--space-12);
}

.module-how__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.module-how__lead {
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

/*
 * P3 of the Incident Manager: the lead, then the lifecycle (010 §12, Figura
 * 1) across the page, then the output of approving it. The lifecycle is the
 * site's numbered list (.step-list), one state per column under the line in
 * ink: the state in Mono, the commands that leave it under it.
 */

.module-how--cycle {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

.module-how--cycle .module-how__text {
  max-inline-size: var(--measure-wide);
}

.lifecycle {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  min-inline-size: 0;
}

.lifecycle .lifecycle__item {
  gap: var(--space-2);
  padding-block-end: var(--space-2);
}

.lifecycle__state {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.lifecycle__move {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.lifecycle__caption {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* P4: where the data lives, two columns (010 L8) -------------------------- */

.data-split {
  inline-size: 100%;
  border-collapse: collapse;
  border: var(--stroke-hairline) solid var(--border);
  text-align: start;
}

.data-split th {
  padding: var(--space-3) var(--space-5);
  background: var(--ground);
  color: var(--ink);
  border-block-end: var(--stroke-hairline) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-label);
  text-align: start;
}

.data-split td {
  inline-size: 50%;
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  color: var(--ink);
  vertical-align: top;
}

.data-split th + th,
.data-split td + td {
  border-inline-start: var(--stroke-hairline) solid var(--border);
}

.data-split__label {
  display: none;
}

/* P3a and P3b: the Database Manager's green block (010 §9) ---------------- */

.session__part {
  border-block-end: 0;
}

.session__part + .session__part {
  border-block-start: var(--stroke-hairline) solid var(--on-brand);
}

.session__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  gap: var(--space-12);
}

.session__grid--figure-first {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.session__grid--figure-first .session__aside {
  order: -1;
}

.session__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.session__features .feature-grid__item {
  padding: 0;
  border: 0;
}

.session__features .feature-grid__item p,
.session__limit p {
  color: var(--on-brand);
}

.session__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-inline-size: 0;
}

.session__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface);
  color: var(--ink);
}

.session__card :focus-visible {
  outline-color: var(--brand);
}

.session__limit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: var(--measure-wide);
  padding-block-start: var(--space-8);
  border-block-start: var(--stroke-hairline) solid var(--on-brand);
}

.session__limit-title {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* P6 and previous/next ---------------------------------------------------- */

.module-list--compact .module-list__item {
  grid-template-columns: var(--space-16) minmax(0, 1fr) minmax(0, 2fr);
  align-items: baseline;
  padding-block: var(--space-6);
}

.module-list--compact .module-list__title {
  font-size: var(--text-lg);
}

.module-list__name {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
}

.module-pager {
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.module-pager__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-pager__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-block-size: var(--control-h);
  padding-block: var(--space-8);
  padding-inline-end: var(--space-8);
  color: var(--ink);
  text-decoration: none;
}

.module-pager__link--next {
  grid-column: 2;
  align-items: flex-end;
  padding-inline: var(--space-8) 0;
  border-inline-start: var(--stroke-hairline) solid var(--border);
  text-align: end;
}

.module-pager__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.module-pager__link:hover .module-pager__name {
  color: var(--brand-deep);
  text-decoration: underline;
}

/* The phone (the canvas's 860px; see base.css) ---------------------------- */

@media (max-width: 53.75em) {
  .module-section__inner,
  .module-how,
  .session__grid,
  .session__grid--figure-first,
  .feature-grid,
  .module-pager__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .module-section__inner,
  .module-how,
  .module-how--cycle,
  .session__grid {
    gap: var(--space-8);
  }

  .module-section__title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }

  .feature-grid__item,
  .feature-grid__item:nth-child(even) {
    padding: var(--space-5) 0;
    border-inline-start: 0;
  }

  .feature-grid__item--accent,
  .feature-grid__item--accent:nth-child(even) {
    padding-inline: var(--space-5);
    border-inline-start: var(--stroke-strong) solid var(--brand);
  }

  .session__grid--figure-first .session__aside {
    order: 0;
  }

  .data-split thead {
    display: none;
  }

  .data-split tr,
  .data-split td {
    display: block;
    inline-size: auto;
  }

  .data-split td + td {
    border-inline-start: 0;
    border-block-start: var(--stroke-hairline) solid var(--border);
  }

  .data-split__label {
    display: block;
    margin-block-end: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-label);
    color: var(--ink-subtle);
  }

  .module-pager__link,
  .module-pager__link--next {
    grid-column: auto;
    align-items: flex-start;
    padding: var(--space-6) 0;
    border-inline-start: 0;
    text-align: start;
  }

  .module-pager__link + .module-pager__link {
    border-block-start: var(--stroke-hairline) solid var(--border);
  }

  .module-pager__empty {
    display: none;
  }
}

/* css/not-found.css */
/*
 * The 404 (008 §6.5): headline, one sentence, the primary action with its
 * note, and the way home once the Home exists.
 */

.not-found {
  padding-block: var(--space-24);
}

.not-found__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.not-found__title {
  max-inline-size: var(--measure-tight);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.not-found__body {
  max-inline-size: var(--measure-body);
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

.not-found__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.not-found__home a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
  font-weight: var(--weight-semibold);
}

@media (max-width: 53.75em) {
  .not-found {
    padding-block: var(--space-16);
  }

  .not-found__title {
    font-size: var(--text-4xl);
  }

  .not-found__action {
    align-self: stretch;
    align-items: stretch;
  }
}

/* css/section.css */
/*
 * The Home's sections and their head (kicker, title, body), and the grounds
 * of the approved canvas: concrete by default, white (--surface) for "No
 * lugar de", green (--brand-deep) once per page, and the dark register for
 * "O dado é seu". Green and dark are never the same section, and nothing
 * green sits on the green one: its figures are the dark register.
 *
 * Every ground re-declares color: a section with data-register="dark" gets
 * the dark tokens, but the color the body computed would not follow.
 */

.section {
  padding-block: var(--space-24);
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.section--surface {
  background: var(--surface);
  color: var(--ink);
}

.section--brand {
  background: var(--brand-deep);
  color: var(--on-brand);
  border-block-end-color: var(--brand-deep);
}

.section--brand .kicker,
.section--brand .section-head__body {
  color: var(--on-brand);
}

/* The default ring is --brand, which disappears on the green. */
.section--brand :focus-visible {
  outline-color: var(--on-brand);
}

.section--dark {
  background: var(--surface);
  color: var(--ink);
  border-block-end-color: var(--surface);
}

.section--dark .kicker {
  color: var(--brand-deep);
}

.section--dark a {
  color: var(--brand-deep);
}

.section--dark a:hover {
  color: var(--ink);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section-head__title {
  max-inline-size: var(--measure-body);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.section-head__body {
  max-inline-size: var(--measure-body);
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

.section-head--wide .section-head__title {
  max-inline-size: var(--measure-wide);
}

.section__more a,
.section__closing {
  font-weight: var(--weight-semibold);
}

.section__more a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
}

.section__closing {
  max-inline-size: var(--measure-wide);
  font-weight: var(--weight-normal);
  color: var(--ink-muted);
}

.figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-6);
}

@media (max-width: 53.75em) {
  .section {
    padding-block: var(--space-16);
  }

  .section__inner {
    gap: var(--space-8);
  }

  .section-head__title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }

  .figure-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* css/security.css */
/*
 * /seguranca (008 §6.2; the approved canvas, Seguranca.dc.html).
 *
 * The top is the Hero with no figure. #perimetro is the page's green section
 * (.section--brand, section.css): its two columns are light cards — the
 * Agent's on concrete, the API's on white — and the green shows only in the
 * gap between them; no text inside the table sits on the green. On the phone
 * the cards stack, the label in Mono above the list (008 §9.2).
 *
 * The seven questions are on concrete, one per row under a line in ink:
 * number, question (an h2, a permalink), answer. Nothing folds: the page is
 * printed and read as a PDF.
 *
 * The close is a green block inside the column, the second green of the page,
 * apart from the first by the questions. Its button inverts the primary:
 * --brand-deep on white is the same pair as white on --brand-deep.
 */

.hero--text .hero__inner {
  grid-template-columns: minmax(0, 1fr);
}

/* #perimetro --------------------------------------------------------------- */

.perimeter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.perimeter__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  color: var(--ink);
}

.perimeter__card--agent {
  background: var(--ground);
}

.perimeter__card--api {
  background: var(--surface);
}

.perimeter__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-wrap: wrap;
}

.perimeter__card--agent .perimeter__label {
  color: var(--brand-deep);
}

.perimeter__card--api .perimeter__label {
  color: var(--ink-muted);
}

.perimeter__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
}

.perimeter__card--api .perimeter__list {
  color: var(--ink-muted);
}

/* The seven questions ------------------------------------------------------ */

.objection-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--stroke-hairline) solid var(--ink);
}

.objection {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.objection__number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand);
}

.objection__question {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.objection__answer {
  color: var(--ink-muted);
}

/* The close ---------------------------------------------------------------- */

.security-close {
  padding-block-end: var(--space-24);
}

.security-close__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-12);
  background: var(--brand-deep);
  color: var(--on-brand);
}

.security-close__notice {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.security-close__title {
  max-inline-size: var(--measure-body);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.security-close__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.security-close .button--primary {
  background: var(--on-brand);
  color: var(--brand-deep);
}

.security-close .button--primary:hover {
  background: var(--ground);
  color: var(--brand-deep);
}

.security-close .cta-note,
.security-close .cta-note a,
.security-close .cta-note a:hover {
  color: var(--on-brand);
}

/* The default ring is --brand, which disappears on the green. */
.security-close :focus-visible {
  outline-color: var(--on-brand);
}

/* On screen, the print footer does not exist. */
.print-footer {
  display: none;
}

@media (max-width: 53.75em) {
  .perimeter {
    grid-template-columns: minmax(0, 1fr);
  }

  .perimeter__card {
    padding: var(--space-6);
  }

  .objection {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-6);
  }

  .security-close {
    padding-block-end: var(--space-16);
  }

  .security-close__card {
    padding: var(--space-6);
  }

  .security-close__title {
    font-size: var(--text-2xl);
  }

  .security-close__action {
    align-self: stretch;
    align-items: stretch;
  }
}

/*
 * The print sheet (008 §6.2, §9.5): only /seguranca has one. No nav, no
 * footer, no CTA — the buttons, the notes under them and the close's call
 * go; the close's notice stays, because it says what the page is. Every
 * ground goes white and every text goes ink: a printer drops backgrounds,
 * and white text on a dropped green is a blank page. At the end, the page's
 * URL and the date of review.
 */
@media print {
  [data-page="security"] .skip-link,
  [data-page="security"] .site-header,
  [data-page="security"] .site-footer,
  [data-page="security"] .button,
  [data-page="security"] .cta-note,
  [data-page="security"] .hero__actions,
  [data-page="security"] .security-close__title,
  [data-page="security"] .security-close__action {
    display: none;
  }

  [data-page="security"],
  [data-page="security"] .section,
  [data-page="security"] .section--brand,
  [data-page="security"] .perimeter__card,
  [data-page="security"] .security-close__card {
    background: none;
    color: var(--ink);
  }

  [data-page="security"] .section--brand .section-head__body,
  [data-page="security"] .perimeter__label,
  [data-page="security"] .perimeter__list,
  [data-page="security"] .security-close__notice {
    color: var(--ink);
  }

  [data-page="security"] .hero__inner,
  [data-page="security"] .section,
  [data-page="security"] .security-close {
    padding-block: var(--space-6);
  }

  [data-page="security"] .perimeter__card,
  [data-page="security"] .security-close__card {
    padding: var(--space-4);
    border: var(--stroke-hairline) solid var(--border);
  }

  [data-page="security"] .objection {
    break-inside: avoid;
  }

  [data-page="security"] .print-footer {
    display: block;
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-3);
    border-block-start: var(--stroke-hairline) solid var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink);
  }
}

/* css/site-footer.css */
/*
 * SiteFooter (008 §5.5): the signature, the line, the legal name; then the
 * links, the contact in text and the language. Every link is a 44px target.
 */

.site-footer {
  padding-block: var(--space-12);
  border-block-start: var(--stroke-hairline) solid var(--border);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8);
}

.site-footer__id {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__signature {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.site-footer__wordmark {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--wordmark-tracking);
}

.site-footer__by {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--signature-tracking);
  color: var(--ink-subtle);
}

.site-footer__line {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.site-footer__legal {
  font-size: var(--text-xs);
  color: var(--ink-subtle);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 0 var(--space-6);
  font-size: var(--text-sm);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h);
  color: var(--ink-muted);
}

.site-footer__link:hover {
  color: var(--ink);
}

.site-footer__link[aria-current="page"] {
  color: var(--ink);
  font-weight: var(--weight-medium);
}

.site-footer__sep {
  color: var(--ink-subtle);
}

/* css/site-nav.css */
/*
 * SiteNav (008 §5.4, §9.2, §9.3; L15): wordmark, the Plataforma menu,
 * Segurança, the language and the primary action on the desktop; wordmark
 * and a 44×44 menu button on the phone.
 *
 * The collapse point. There is no breakpoint token (008 L3, dependency 8),
 * and an @media condition cannot read var() anyway. 53.75em is the canvas's
 * 860px at the browser's 16px default — the width the PT-BR bar needs with
 * every item present (008 §9.3): symbol and wordmark, Plataforma with its
 * chevron, Segurança, PT · EN and a 20-character primary button, with the
 * token gaps and padding. In em, so it moves with the reader's font size.
 * Re-measure against PT-BR when an item is added (Docs, when D8 gives it an
 * address).
 */

.site-header {
  position: relative;
  background: var(--ground);
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-3);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-h);
  color: var(--ink);
  text-decoration: none;
}

.site-header__brand:hover {
  color: var(--ink);
}

/* 24px, the size the symbol takes in the Console's sidebar (002, AppShell). */
.site-header__symbol {
  flex: none;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  color: var(--brand);
}

.site-header__wordmark {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--wordmark-tracking);
}

/* Desktop ------------------------------------------------------------------ */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--control-h);
  color: var(--ink-muted);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  border-block-end: var(--stroke-strong) solid transparent;
}

.site-nav__link::-webkit-details-marker {
  display: none;
}

.site-nav__link:hover {
  color: var(--ink);
}

.site-nav__link[aria-current="page"],
.site-nav__link.is-current {
  color: var(--ink);
  font-weight: var(--weight-semibold);
  border-block-end-color: var(--brand);
}

.site-nav__platform {
  position: relative;
}

.site-nav__chevron {
  transition: transform var(--duration-fast) var(--ease);
}

.site-nav__platform[open] .site-nav__chevron {
  transform: rotate(180deg);
}

/* Not modal: it floats over the page, does not trap focus, and sizes itself
   to its longest PT-BR item, wrapping instead of truncating (008 §9.3). */
.site-nav__panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(var(--space-4) * -1);
  z-index: var(--layer-raised);
  display: flex;
  flex-direction: column;
  inline-size: max-content;
  max-inline-size: var(--measure-body);
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--surface);
  border: var(--stroke-hairline) solid var(--border);
  box-shadow: var(--shadow-raised);
}

.site-nav__panel-link {
  display: flex;
  align-items: center;
  min-block-size: var(--control-h);
  padding-inline: var(--space-4);
  color: var(--ink);
  text-decoration: none;
}

.site-nav__panel-link:hover {
  background: var(--surface-active);
  color: var(--ink);
}

.site-nav__panel-link[aria-current="page"] {
  font-weight: var(--weight-semibold);
}

/* Phone -------------------------------------------------------------------- */

.site-nav__phone {
  display: none;
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-h);
  block-size: var(--control-h);
  color: var(--ink);
  border: var(--stroke-hairline) solid var(--border);
  cursor: pointer;
  list-style: none;
}

.site-nav__toggle::-webkit-details-marker {
  display: none;
}

.site-nav__close,
.site-nav__phone[open] .site-nav__open {
  display: none;
}

.site-nav__phone[open] .site-nav__close {
  display: block;
}

.site-nav__sheet {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--layer-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--ground);
  border-block-end: var(--stroke-hairline) solid var(--border);
  box-shadow: var(--shadow-raised);
}

.site-nav__group {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.site-nav__sheet-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.site-nav__sheet-link {
  display: flex;
  align-items: center;
  min-block-size: var(--control-h);
  color: var(--ink);
  text-decoration: none;
  border-block-end: var(--stroke-hairline) solid var(--border);
}

.site-nav__sheet-link[aria-current="page"] {
  font-weight: var(--weight-semibold);
}

@media (max-width: 53.75em) {
  .site-nav {
    display: none;
  }

  .site-nav__phone {
    display: block;
  }
}

/* css/step-list.css */
/*
 * The numbered list of marketing (008 L9; §6.1, S6). An <ol>, so a screen
 * reader says "list, 4 items"; the number is the list's own counter, in Mono
 * and in brand, as the canvas draws it. Four columns under a line in ink on
 * the desktop, one on the phone; no item has a height.
 */

.step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-block-start: var(--stroke-hairline) solid var(--ink);
}

.step-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) 0;
  border-inline-start: var(--stroke-hairline) solid var(--border);
  counter-increment: step;
}

.step-list__item:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.step-list__item:last-child {
  padding-inline-end: 0;
}

.step-list__item::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--brand);
}

@media (max-width: 53.75em) {
  .step-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .step-list__item,
  .step-list__item:first-child {
    padding: var(--space-5) 0;
    border-inline-start: 0;
    border-block-end: var(--stroke-hairline) solid var(--border);
  }
}

/*
 * Stacked: one step per row beside its number, for the "Como funciona" of a
 * module page (010 §4.1, L9), where the list shares the row with a figure.
 * The step's text is one span, so its Mono terms flow inside the sentence
 * instead of becoming items of the row.
 */
.step-list--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.step-list--stacked .step-list__item,
.step-list--stacked .step-list__item:first-child {
  flex-direction: row;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-inline-start: 0;
  border-block-end: var(--stroke-hairline) solid var(--border);
  color: var(--ink-muted);
}

.step-list--stacked .step-list__item::before {
  flex: none;
  min-inline-size: var(--space-8);
}

.step-list__text {
  min-inline-size: 0;
}

/* css/terminal.css */
/*
 * TerminalFigure (008 L1, §6.4, §9.2). Mono output in a block with a hairline
 * border, no shadow (a figure does not float). Dark on the Hero and in the
 * rule section — the dark register of design/tokens/, set on the figure by
 * data-register="dark" — and light in the module blocks.
 *
 * The output is never wrapped or cut: a long line scrolls inside the block,
 * and the block is a Tab stop, so the page never scrolls sideways.
 */

.terminal {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  background: var(--surface);
  color: var(--ink);
  border: var(--stroke-hairline) solid var(--border);
  font-family: var(--font-mono);
}

.terminal__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--stroke-hairline) solid var(--border);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-subtle);
}

.terminal__output {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  white-space: pre;
  tab-size: 2;
}

.terminal__prompt {
  color: var(--ink-subtle);
  user-select: none;
}

.terminal__caption {
  padding: var(--space-3) var(--space-4);
  border-block-start: var(--stroke-hairline) solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--ink-subtle);
}

/* A caption above the output (010 §9, P3b): the line goes under it. */
.terminal__caption--top {
  border-block-start: 0;
  border-block-end: var(--stroke-hairline) solid var(--border);
}

/*
 * An output in parts: one scrollable block (the Tab stop), each part's
 * <pre> inside it, and the part's label — copy, in the page's language —
 * in the head's Mono above it.
 */
.terminal__parts {
  overflow-x: auto;
}

.terminal__parts .terminal__output {
  overflow-x: visible;
  inline-size: max-content;
  min-inline-size: 100%;
}

.terminal__part {
  padding: var(--space-3) var(--space-4) 0;
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-subtle);
}

.terminal__part:not(:first-child) {
  border-block-start: var(--stroke-hairline) solid var(--border);
}