/* Bytemerica · /pt — the home, rebuilt 2026-09-22 (noite).
 *
 * Source of truth for the file served at public/home-v3/pt-ordem.<sha8>.css:
 * edit HERE, then run `npx tsx scripts/home-css/build.ts`, which copies it,
 * hashes it, renames it and updates PT_ORDEM_CSS. tests/unit/pt-ordem-css.test.ts
 * fails if the two ever drift.
 *
 * The direction (Feng, 2026-09-22): the restraint of the best product
 * marketing on the web, with Brazil carried by the photographs and by four
 * quiet decisions — cal as the second surface where the genre uses a cool
 * grey, anil as the one action, one course of azulejo where the page changes
 * subject, and the question set in the visitor's own serif voice.
 *
 * Every value here comes from docs/design/homepage-reinvention/tokens.css.
 * What the previous file did with 1,400 lines of scroll-pinned scenes this
 * one does with sections that simply follow one another: the argument is the
 * same and the reader is not held by the ankles while it is made.
 */

/* ============================================================ tokens ==== */
.bm-ordem {
  color-scheme: light;

  --page: #FFFFFF;
  --paper-0: #FBF9F4;
  --paper: #F3EEE3;
  --paper-2: #E9E2D3;
  --paper-3: #D6CEBD;
  --night: #0E2A5A;
  --night-2: #133469;
  --night-3: #1B4380;

  --ink: #151A17;
  --ink-2: #4A5049;
  --ink-3: #6E6A5E;
  --rule: rgba(21, 26, 23, 0.12);
  --rule-2: rgba(21, 26, 23, 0.52);
  --pline: rgba(21, 26, 23, 0.14);
  --dim: #C3CDE0;
  --mute: #9AAAD0;
  --line: rgba(243, 238, 227, 0.12);
  --line-2: rgba(243, 238, 227, 0.24);  /* a hairline on the dark band — decorative, 1.98:1 */
  --rule-2-night: rgba(243, 238, 227, 0.45); /* a CONTROL's edge on the dark band — 3.61:1, the
                                                azulejo twin of --rule-2. Measured over --night. */

  --signal: #2458B0;
  --signal-2: #1D4E9E;
  --signal-3: #E8EEF9;
  --aqua: #F2B705;
  --aqua-2: #DDA600;
  --indigo: #D6457F;

  --f-voice: var(--font-ordem-voice), Georgia, "Times New Roman", serif;
  --f-sys: var(--font-ordem-system), "Helvetica Neue", Arial, sans-serif;
  --f-data: var(--font-ordem-mono), ui-monospace, "SF Mono", Menlo, monospace;

  --t-question: clamp(40px, 5.8vw, 88px);
  --t-head: clamp(30px, 3.2vw, 46px);
  --t-title: 23px;
  --t-lede: clamp(17px, 1.4vw, 20px);
  --t-body: 17px;
  --t-small: 13.5px;
  --t-label: 12px;

  --measure: 68ch;
  --measure-lede: 52ch;
  --measure-question: 15ch;

  --section-y: clamp(72px, 9vw, 120px);
  --block-y: clamp(48px, 6vw, 80px);
  --gut: clamp(24px, 5vw, 72px);
  --maxw: 1296px;
  --nav-h: 72px;

  --r-media: 24px;
  --r-card: 16px;
  --r-field: 8px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-em: cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* ============================================================ base ====== */
.bm-ordem { margin: 0; background: var(--page); color: var(--ink);
  font: 400 var(--t-body)/1.62 var(--f-sys);
  -webkit-font-smoothing: antialiased; overflow-x: clip; width: 100%;
  isolation: isolate; -webkit-text-size-adjust: 100%; }
.bm-ordem *, .bm-ordem *::before, .bm-ordem *::after { box-sizing: border-box; }
.bm-ordem [hidden] { display: none !important; }
.bm-ordem h1, .bm-ordem h2, .bm-ordem h3, .bm-ordem p,
.bm-ordem ol, .bm-ordem ul, .bm-ordem dl, .bm-ordem dd, .bm-ordem figure { margin: 0; }
.bm-ordem ol, .bm-ordem ul { padding: 0; list-style: none; }
.bm-ordem a { color: var(--signal); }
.bm-ordem button, .bm-ordem input, .bm-ordem textarea { font: inherit; color: inherit; }
.bm-ordem :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.bm-ordem .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bm-ordem .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.bm-ordem .skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.bm-ordem .skip-link:focus { position: fixed; left: 16px; top: 16px; z-index: 200; width: auto; height: auto;
  clip: auto; padding: 10px 18px; background: var(--ink); color: var(--page); border-radius: var(--r-field); }

/* The page's one ornament, at the size of a rule: a single course of tiles
   where the page changes subject. Never a wall, never behind text. */
.bm-ordem .tile-rule { display: block; width: 100%; height: auto; }
.bm-ordem .tile-rule.narrow { display: none; }

/* ============================================================ type ====== */
/* The visitor's voice. One per screen, and nothing else at this size. */
.bm-ordem .q { font-family: var(--f-voice); font-style: italic; font-weight: 400;
  font-size: var(--t-question); line-height: 1.03; letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72; text-wrap: balance;
  max-width: var(--measure-question); margin-left: -0.035em; }
/* Ours. A chapter, never a hero. */
.bm-ordem .h { font-family: var(--f-sys); font-weight: 500; font-size: var(--t-head);
  line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; max-width: 18ch; }
.bm-ordem .t { font-family: var(--f-sys); font-weight: 500; font-size: var(--t-title);
  line-height: 1.35; letter-spacing: -0.01em; }
.bm-ordem .lede { font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2);
  max-width: var(--measure-lede); text-wrap: pretty; }
.bm-ordem .body { max-width: var(--measure); color: var(--ink-2); }
.bm-ordem .fine { font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
/* What the operation prints. Three per screen at most. */
.bm-ordem .kicker { font-family: var(--f-data); font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  display: flex; gap: 10px; align-items: baseline; }
.bm-ordem .kicker b { font-weight: 500; color: var(--signal); }
/* The one highlight: a swipe of ipê under a single word. */
.bm-ordem .ipe { background: linear-gradient(transparent 58%, var(--aqua) 58%, var(--aqua) 92%, transparent 92%);
  padding: 0 0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ============================================================ action ==== */
.bm-ordem .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-pill);
  background: var(--signal); color: #fff; font: 500 16px/1 var(--f-sys); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; transition: background var(--d-fast, 150ms) var(--ease); }
.bm-ordem .btn:hover { background: var(--signal-2); }
/* The key cap inside the button. 3px was the last radius outside the set. */
.bm-ordem .btn kbd { font-family: var(--f-data); font-size: 11px; border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--r-field); padding: 1px 6px; opacity: .85; }
/* The humane exit is a link, never a second button. */
.bm-ordem .link { color: var(--signal); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; }
.bm-ordem .link:hover { color: var(--signal-2); }

/* ============================================================ nav ======= */
.bm-ordem .nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top, 0px); }
/* Between groups, and it must stay clearly wider than the gap inside one.
   It was 24 here against 26 inside .nav-links — inverted, so eight items read
   as one flat row. Same fix as the shell nav. */
.bm-ordem .nav-in { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 40px); height: var(--nav-h);
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.bm-ordem .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.bm-ordem .brand .mk { height: 26px; width: auto; }
.bm-ordem .brand .wm { height: 20px; width: auto; }
.bm-ordem .nav-links { display: flex; gap: clamp(10px, 1.4vw, 20px); margin-left: auto; }
.bm-ordem .nav-links a, .bm-ordem .nav-login { font-size: 15px; color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.bm-ordem .nav-links a:hover, .bm-ordem .nav-login:hover { color: var(--ink); }
/* gap 0: each code already sits in a 44 x 44 target and carries its own air. */
.bm-ordem .lang { display: flex; gap: 0; font-family: var(--f-data); font-size: 12px; letter-spacing: .08em; }
.bm-ordem .lang a { color: var(--ink-2); text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: 4px; }
.bm-ordem .lang a:hover { color: var(--ink); }
/* One filled button on the page. The nav's is a link. */
.bm-ordem .nav-cta { font-size: 15px; font-weight: 500; color: var(--signal); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.bm-ordem .nav-cta:hover { color: var(--signal-2); }
.bm-ordem .act, .bm-ordem .prog { display: none; }
.bm-ordem .menu-btn { display: none; align-items: center; border: 1px solid var(--rule-2);
  background: transparent; border-radius: var(--r-pill); padding: 9px 16px; font-size: 14px;
  color: var(--ink); cursor: pointer; min-height: 44px; }
.bm-ordem .mmenu { position: fixed; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  left: 0; right: 0; z-index: 59; background: var(--page); border-bottom: 1px solid var(--rule);
  padding: 8px var(--gut) 22px; display: grid; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; }
.bm-ordem .mmenu a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 17px;
  text-decoration: none; color: var(--ink); }
.bm-ordem .mmenu .mlang { display: flex; gap: 20px; padding-top: 16px; }
.bm-ordem .mmenu .mlang a { border: 0; padding: 0; font-family: var(--f-data); font-size: 13px; color: var(--ink-2); }

/* ============================================================ hero ====== */
.bm-ordem .hero { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 88px); }
.bm-ordem .hero .kicker { margin-bottom: 28px; }
.bm-ordem .hero .q { margin-bottom: 0; }
/* The line that names the pain, between the question and the answer. */
.bm-ordem .pain { margin-top: 24px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45;
  color: var(--ink); max-width: 30ch; font-weight: 400; }
.bm-ordem .hero-sub { margin-top: 28px; color: var(--ink-2); max-width: var(--measure-lede); font-size: 16.5px; }

/* The sentence the visitor edits. The page's one interaction. */
.bm-ordem .intent { margin-top: clamp(28px, 4vw, 44px); position: relative;
  scroll-margin-top: calc(var(--nav-h) + 24px); }
.bm-ordem .said-line { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; min-height: 26px; flex-wrap: wrap; }
.bm-ordem .said { font-family: var(--f-voice); font-style: italic; font-size: 19px; color: var(--ink-2); }
.bm-ordem .moves { font-weight: 500; font-size: 19px; color: var(--signal); opacity: 0;
  transform: translateX(-8px); transition: opacity .6s var(--ease-em), transform .6s var(--ease-em); }
.bm-ordem .said-line.moved .moves { opacity: 1; transform: none; }
.bm-ordem .blanks { font-family: var(--f-voice); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1.7; color: var(--ink); max-width: 900px; }
.bm-ordem .bl { font: inherit; color: var(--signal); background: none; border: 0;
  border-bottom: 2px solid var(--signal); padding: 0 2px 2px; cursor: pointer; position: relative;
  border-radius: 0; }
.bm-ordem .bl .car { display: inline-block; margin-left: 6px; font-size: .42em; vertical-align: .38em; color: var(--signal); }
.bm-ordem .bl:hover, .bm-ordem .bl[aria-expanded="true"] { color: var(--signal-2); border-bottom-color: var(--signal-2); }
.bm-ordem .menu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--rule); }
.bm-ordem .menu .ml { width: 100%; font-family: var(--f-data); font-size: var(--t-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.bm-ordem .menu button { border: 1px solid var(--rule-2); background: transparent; border-radius: var(--r-pill);
  min-height: 44px; padding: 0 18px; font-size: 15px; color: var(--ink); cursor: pointer; }
.bm-ordem .menu button:hover, .bm-ordem .menu button:focus-visible { border-color: var(--signal); color: var(--signal); }
.bm-ordem .menu button[aria-selected="true"] { background: var(--signal-3); border-color: var(--signal); color: var(--signal-2); }
.bm-ordem .field { position: relative; min-height: 120px; }
.bm-ordem .field textarea, .bm-ordem .field .hl { font-family: var(--f-voice); font-style: italic;
  font-weight: 400; font-size: clamp(20px, 2vw, 28px); line-height: 1.7; padding: 4px 0 8px;
  margin: 0; border: 0; white-space: pre-wrap; overflow-wrap: break-word; width: 100%; }
.bm-ordem .field textarea { position: relative; z-index: 2; display: block; background: transparent;
  resize: none; outline: none; color: var(--ink); caret-color: var(--signal); min-height: 120px; overflow: hidden; }
.bm-ordem .field textarea::placeholder { color: var(--ink-3); }
.bm-ordem .field .hl { position: absolute; inset: 0; z-index: 1; color: transparent; pointer-events: none; }
.bm-ordem .hl mark { background: none; color: inherit; border-bottom: 2px solid var(--signal); padding-bottom: 1px; }
.bm-ordem .intent-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 26px; }
.bm-ordem .free-toggle { background: none; border: 0; padding: 0; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: 15.5px; min-height: 44px; }
.bm-ordem .free-toggle:hover { color: var(--ink); }
.bm-ordem .fly { position: fixed; z-index: 80; pointer-events: none; font-family: var(--f-voice);
  font-style: italic; color: var(--ink); white-space: nowrap; transform-origin: 0 0; padding: 0 2px;
  background: var(--signal-3); border-radius: 2px; }

/* The plan, answered in words (Feng, 2026-09-22: no ticket). */
.bm-ordem .plan-result { margin-top: 32px; padding: 24px 28px; background: var(--paper);
  border-radius: var(--r-card); max-width: 44em; animation: ordem-pr .45s var(--ease-em) both; }
@keyframes ordem-pr { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bm-ordem .pr-line { margin-top: 16px; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.bm-ordem .pr-line:first-child { margin-top: 0; }
.bm-ordem .pr-k { display: block; font-family: var(--f-data); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.bm-ordem .pr-note { margin-top: 16px; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.bm-ordem .pr-actions { margin-top: 20px; }

/* The credentials. The reason a stranger believes any of this, so they are
   set at reading size on their own band, not as grey dust in a corner. */
.bm-ordem .creds { background: var(--paper); }
.bm-ordem .creds-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; padding-block: clamp(32px, 4vw, 48px); }
.bm-ordem .creds-in > * { padding-right: 32px; }
.bm-ordem .creds-in > * + * { padding-left: 32px; border-left: 1px solid var(--rule); }
.bm-ordem .creds b { display: block; font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--ink); }
.bm-ordem .creds span { display: block; margin-top: 6px; font-family: var(--f-data);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* ============================================================ sections == */
.bm-ordem .sec { padding-block: var(--section-y); }
.bm-ordem .sec.on-cal { background: var(--paper); }
.bm-ordem .sec.on-night { background: var(--night); color: #fff; }
.bm-ordem .sec.on-night .lede, .bm-ordem .sec.on-night .fine { color: var(--dim); }
.bm-ordem .sec.on-night .kicker { color: var(--mute); }
.bm-ordem .sec.on-night .kicker b { color: var(--aqua); }
.bm-ordem .sec-head { display: grid; gap: 20px; margin-bottom: var(--block-y); }

/* Act 02 — the pain named, then answered. Two columns of plain type. */
.bm-ordem .antes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 96px); align-items: start; }
.bm-ordem .before-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.bm-ordem .before-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px;
  align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.bm-ordem .before-list b { font-weight: 400; color: var(--ink); }
/* A count is content, not a placeholder, so it is set in ink-2. (--ink-3
   measured 3.1:1 on cal while it was #8C8778; it is #6E6A5E now, 4.67:1.) */
.bm-ordem .before-list .n { font-family: var(--f-data); font-size: var(--t-label); color: var(--ink-2);
  letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.bm-ordem .after { display: grid; gap: 14px; }
.bm-ordem .after p { font-family: var(--f-sys); font-weight: 500; font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.16; letter-spacing: -0.02em; color: var(--ink); }
.bm-ordem .after p:last-of-type { color: var(--signal); }

/* The one full-bleed cut on the page, and it carries a caption. */
.bm-ordem .cut { margin: 0; width: 100%; }
.bm-ordem .cut img { display: block; width: 100%; height: min(58svh, 520px); object-fit: cover; }
/* A caption is a sentence, and a sentence set in uppercase mono at 11.5px is
   a label nobody reads — 11.5 is also below --t-label, the scale's floor. The
   /en and /zh homes already set theirs as prose; this matches them. */
.bm-ordem .cut figcaption { max-width: var(--maxw); margin-inline: auto; padding: 14px var(--gut) 0;
  font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* Act 03 — the catalogue, every line of it on one rule. */
.bm-ordem .canais { display: grid; gap: 0; border-top: 1px solid var(--rule); margin-top: var(--block-y); }
.bm-ordem .canais li { border-bottom: 1px solid var(--rule); }
.bm-ordem .canais a, .bm-ordem .canais div { display: grid;
  grid-template-columns: minmax(0, 17ch) minmax(0, 1fr) auto; gap: 8px 32px; align-items: baseline;
  padding: 22px 0; min-height: 44px; text-decoration: none; color: inherit; }
.bm-ordem .canais b { font-weight: 500; font-size: 19px; color: var(--ink); }
.bm-ordem .canais span { font-size: 16px; color: var(--ink-2); }
.bm-ordem .canais i { font-style: normal; color: var(--signal); }
.bm-ordem .canais a:hover b { color: var(--signal); }

/* Act 05 — proof. The ledger is the page's most-made object. */
.bm-ordem .ledger { margin-top: var(--block-y); border-top: 1px solid var(--ink); }
.bm-ordem .ledger > div { display: grid; grid-template-columns: minmax(0, 112px) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 10px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.bm-ordem .ledger .k { font-family: var(--f-data); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); }
.bm-ordem .ledger .v { font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink); }
.bm-ordem .ledger .d { font-size: 15.5px; color: var(--ink-2); }
.bm-ordem .cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px); margin-top: var(--block-y); }
.bm-ordem .case { display: flex; flex-direction: column; gap: 12px; padding: 28px;
  background: var(--page); border-radius: var(--r-card); }
.bm-ordem .sec.on-cal .case { background: var(--paper-0); }
.bm-ordem .case .tg { font-family: var(--f-data); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--signal); }
.bm-ordem .case h3 { font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.bm-ordem .case p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.bm-ordem .case blockquote { margin: 4px 0 0; font-family: var(--f-voice); font-style: italic;
  font-size: 17px; line-height: 1.45; color: var(--ink); }
.bm-ordem .case cite { display: block; margin-top: 8px; font-family: var(--f-data); font-style: normal;
  font-size: 11px; letter-spacing: .04em; color: var(--ink-2); }

/* Act 04 — partners. */
.bm-ordem .par-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 96px); align-items: start; }
.bm-ordem .facts { display: grid; gap: 12px; margin-top: 28px; }
.bm-ordem .facts li { display: flex; gap: 12px; color: var(--ink-2); }
.bm-ordem .facts li::before { content: ""; width: 7px; height: 7px; margin-top: .62em;
  border-radius: 50%; background: var(--signal); flex-shrink: 0; }
.bm-ordem .par-photo { margin: 0; }
.bm-ordem .par-photo img { display: block; width: 100%; height: auto;
  border-radius: var(--r-media); }
/* The caption sits under the frame, not over it, and is set as prose — the
   same treatment the full-bleed cut above it takes. */
.bm-ordem .par-photo figcaption { margin-top: 14px; font-size: var(--t-small);
  line-height: 1.5; color: var(--ink-2); }

/* The closing ask — the page's one dark band, and where it ends. */
.bm-ordem .s-fim { background: var(--night); color: #fff; padding-block: var(--section-y); }
.bm-ordem .s-fim .q { color: #fff; }
.bm-ordem .s-fim .kicker { color: var(--mute); }
.bm-ordem .s-fim .kicker b { color: var(--aqua); }
.bm-ordem .s-fim .said { color: var(--dim); }
.bm-ordem .s-fim .moves { color: var(--aqua); }
.bm-ordem .s-fim .blanks { color: #fff; }
.bm-ordem .s-fim .bl { color: var(--aqua); border-bottom-color: var(--aqua); }
.bm-ordem .s-fim .bl .car { color: var(--aqua); }
.bm-ordem .s-fim .bl:hover, .bm-ordem .s-fim .bl[aria-expanded="true"] { color: var(--aqua-2); border-bottom-color: var(--aqua-2); }
.bm-ordem .s-fim .btn { background: var(--aqua); color: var(--ink); }
.bm-ordem .s-fim .btn:hover { background: var(--aqua-2); }
.bm-ordem .s-fim .free-toggle, .bm-ordem .s-fim .alt { color: var(--dim); }
.bm-ordem .s-fim .alt .link, .bm-ordem .s-fim .link { color: var(--aqua); }
.bm-ordem .s-fim .menu { border-top-color: var(--line-2); }
.bm-ordem .s-fim .menu .ml { color: var(--mute); }
/* These chips are how the visitor answers, and on the dark band they had the
   decorative hairline as their edge: 1.98:1, under WCAG 1.4.11's 3:1. Worse,
   the selected chip was marked only by a --night-3 plate at 1.44:1 against the
   band, so the single signal that an option had been chosen was invisible. The
   light-ground twin (:205) does this correctly with --rule-2 and an anil edge;
   ipê is anil's opposite number here, at 7.71:1. Ratios computed from the hex
   values, not copied. */
.bm-ordem .s-fim .menu button { border-color: var(--rule-2-night); color: #fff; }
.bm-ordem .s-fim .menu button:hover, .bm-ordem .s-fim .menu button:focus-visible { border-color: var(--aqua); color: var(--aqua); }
.bm-ordem .s-fim .menu button:hover, .bm-ordem .s-fim .menu button:focus-visible { border-color: var(--aqua); color: var(--aqua); }
.bm-ordem .s-fim .menu button[aria-selected="true"] { background: var(--night-3); border-color: var(--aqua); color: #fff; }
.bm-ordem .s-fim .field textarea { color: #fff; caret-color: var(--aqua); }
.bm-ordem .s-fim .field textarea::placeholder { color: var(--mute); }
.bm-ordem .s-fim .hl mark { border-bottom-color: var(--aqua); }
.bm-ordem .s-fim .plan-result { background: var(--night-2); }
.bm-ordem .s-fim .pr-line { color: #fff; }
.bm-ordem .s-fim .pr-k, .bm-ordem .s-fim .pr-note { color: var(--dim); }
.bm-ordem .s-fim :focus-visible { outline-color: var(--aqua); }
.bm-ordem .alt { margin-top: 28px; font-size: 16px; color: var(--ink-2); line-height: 2.2; }

/* ============================================================ index ===== */
.bm-ordem .idx { border-top: 1px solid var(--rule); padding-block: var(--block-y) var(--section-y); }
.bm-ordem .idx-grid { display: grid; grid-template-columns: 0.85fr 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); }
.bm-ordem .idx h2 { font-family: var(--f-data); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.bm-ordem .idx ul { display: grid; gap: 2px; }
.bm-ordem .idx a { text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; min-height: 44px; }
.bm-ordem .idx a:hover { color: var(--signal); }
.bm-ordem .idx details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.bm-ordem .idx summary { cursor: pointer; font-weight: 500; font-size: 16px; list-style: none;
  display: flex; justify-content: space-between; gap: 12px; }
.bm-ordem .idx summary::-webkit-details-marker { display: none; }
.bm-ordem .idx summary::after { content: "+"; font-family: var(--f-data); color: var(--ink-2); }
.bm-ordem .idx details[open] summary::after { content: "–"; }
.bm-ordem .idx details p { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
.bm-ordem .radar li { display: grid; gap: 3px; }
.bm-ordem .radar time { font-family: var(--f-data); font-size: 11px; color: var(--ink-3); }
.bm-ordem .radar a { font-size: 15.5px; line-height: 1.45; min-height: 44px; }
.bm-ordem .blog-index { margin-top: 36px; }

/* ============================================================ footer ==== */
.bm-ordem .foot { background: var(--paper); padding-block: var(--block-y) calc(var(--block-y) + 40px); }
.bm-ordem .foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.bm-ordem .sig { font-size: 21px; line-height: 1.25; }
.bm-ordem .sig .voice { font-family: var(--f-voice); font-style: italic; color: var(--ink-2); }
.bm-ordem .sig b { font-weight: 500; margin-left: 8px; color: var(--ink); }
/* docs/copy-decisions.md, 2026-09-20 [B] with [C: LGPD art. 41 §1]: one public
   mailbox, shown in the footer of all three locales. /en and /zh get it from
   the shell; /pt has its own footer and was the one locale without it. */
.bm-ordem .foot .email { display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 6px; font-size: 15px; color: var(--signal); text-decoration: underline;
  text-underline-offset: 4px; }
.bm-ordem .foot .email:hover { color: var(--signal-2); }
.bm-ordem .foot .co { margin-top: 8px; font-family: var(--f-data); font-size: 11px;
  line-height: 1.8; color: var(--ink-2); }
.bm-ordem .foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
.bm-ordem .foot-links a { color: var(--ink-2); text-decoration: none; display: inline-flex;
  align-items: center; min-height: 44px; }
.bm-ordem .foot-links a:hover { color: var(--ink); }
.bm-ordem .foot-links .fl-lang { font-family: var(--f-data); font-size: 12px; }

/* ============================================================ dock ====== */
.bm-ordem .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; gap: 10px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--rule);
  transform: translateY(110%); transition: transform .35s var(--ease); }
.bm-ordem .dock.show { transform: none; }
.bm-ordem .dock .btn { flex: 1; }
.bm-ordem .dock a.wa { display: inline-flex; align-items: center; padding: 0 18px;
  border: 1px solid var(--rule-2); border-radius: var(--r-pill); text-decoration: none;
  font-size: 15px; color: var(--ink); }

/* ============================================================ narrow ==== */
@media (max-width: 1080px) {
  .bm-ordem .nav-links { display: none; }
  .bm-ordem .creds-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .bm-ordem .creds-in > *:nth-child(3) { padding-left: 0; border-left: 0; }
  .bm-ordem .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .bm-ordem { --nav-h: 58px; font-size: 16px; }
  .bm-ordem .nav-login, .bm-ordem .lang, .bm-ordem .nav-cta { display: none; }
  .bm-ordem .brand .wm { display: none; }
  .bm-ordem .menu-btn { display: inline-flex; margin-left: auto; }
  .bm-ordem .dock { display: flex; }
  .bm-ordem .antes-grid, .bm-ordem .par-grid, .bm-ordem .idx-grid,
  .bm-ordem .cases { grid-template-columns: minmax(0, 1fr); }
  .bm-ordem .creds-in { grid-template-columns: minmax(0, 1fr); }
  .bm-ordem .creds-in > * { padding-right: 0; }
  .bm-ordem .creds-in > * + * { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--rule); }
  .bm-ordem .ledger > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bm-ordem .canais a, .bm-ordem .canais div { grid-template-columns: minmax(0, 1fr) auto; }
  .bm-ordem .canais span { grid-column: 1 / -1; }
  .bm-ordem .cut img { height: min(46svh, 360px); }
  .bm-ordem .tile-rule.wide { display: none; }
  .bm-ordem .tile-rule.narrow { display: block; }
  .bm-ordem .foot { padding-bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-ordem *, .bm-ordem *::before, .bm-ordem *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important; }
}