/* Bytemerica · /en and /zh — the home, rebuilt 2026-09-22 (noite).
 *
 * Source of truth for the file served at public/home-v3/ordem-home.<sha8>.css:
 * edit HERE, then run `npx tsx scripts/home-css/build.ts`, which copies it,
 * hashes it, renames it and updates ORDEM_HOME_CSS. tests/unit/ordem-home-css.test.ts
 * and home-css-source.test.ts fail if the two ever drift.
 *
 * Same system as the /pt home (docs/design/homepage-reinvention/SYSTEM.md),
 * told to someone who is not in Brazil yet. What this file replaces: a dark
 * stage with a tile wall behind the hero, sticky notes at a tilt, a 150px
 * shout, cards floating on drop shadows. What it is now: white ground, cal
 * bands, the question in the visitor's own serif voice, one course of
 * azulejo where the page changes subject, one captioned photograph, and one
 * dark azulejo band at the closing ask.
 *
 * Every value comes from docs/design/homepage-reinvention/tokens.css, and
 * nothing here is a hex literal that is not a token there. No shadow, no
 * gradient. Radius is media 24 / card 16 / field 8 / pill, and nothing
 * between. The reference implementation for anything unclear is the /pt
 * home's sheet, pt-home.css — it is copied here rather than re-invented.
 *
 * Mono is "what the operation prints" and is rationed: one eyebrow (.kicker)
 * per band, plus at most one repeated key inside a single ruled list (the
 * ledger's column, a step's numeral). Sources, figures and form labels are
 * set in the system face instead, which is also what makes them readable.
 */

/* ============================================================ tokens ==== */
.bm-ordem-home {
  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);

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

  /* The faces. The variable names are the shell's and do not change; the
     face behind --font-archivo has been Figtree since 2026-09-22. Chinese
     takes the system faces — Songti SC for the voice, PingFang for text —
     because no CJK webfont is worth the LCP. */
  --f-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-han: "Songti SC", "Noto Serif SC", "SimSun", serif;
  --f-voice: var(--font-newsreader), Georgia, "Times New Roman", serif;
  --f-sys: var(--font-archivo), "Helvetica Neue", Arial, var(--f-cjk);
  --f-data: var(--font-ibm-plex-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;

  --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);
  --d-fast: 150ms;
}

/* ============================================================ base ====== */
.bm-ordem-home { 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%;
  overflow-wrap: break-word; -webkit-text-size-adjust: 100%; }
.bm-ordem-home *, .bm-ordem-home *::before, .bm-ordem-home *::after { box-sizing: border-box; }
.bm-ordem-home h1, .bm-ordem-home h2, .bm-ordem-home h3, .bm-ordem-home p,
.bm-ordem-home ol, .bm-ordem-home ul, .bm-ordem-home dl, .bm-ordem-home dd,
.bm-ordem-home figure, .bm-ordem-home blockquote { margin: 0; }
.bm-ordem-home ol, .bm-ordem-home ul { padding: 0; list-style: none; }
.bm-ordem-home a { color: var(--signal); }
.bm-ordem-home button, .bm-ordem-home input, .bm-ordem-home textarea { font: inherit; color: inherit; }
.bm-ordem-home :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.bm-ordem-home .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* 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-home .tile-rule { display: block; width: 100%; height: auto; }

/* ============================================================ type ====== */
/* The visitor's voice. One per screen, and nothing else at this size. */
.bm-ordem-home .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; }
/* Chinese: the italic is wrong, the optical pull-back is wrong, and Songti SC
   has no medium — 500 or 600 would be synthesised into a shout, so it stays
   at the regular weight the voice is set in everywhere else. */
.bm-ordem-home.cjk .q { font-family: var(--f-han); font-style: normal; font-weight: 400;
  line-height: 1.22; letter-spacing: 0; margin-left: 0;
  font-variation-settings: normal;
  /* Two things `ch` gets wrong for Chinese, both visible at 1440: `ch` is the
     width of "0", so 14ch is about six Han characters and the headline broke
     主体 and 巴西 across lines; and a Han face carries at a smaller size than a
     Latin one, because the glyphs are denser. 60px over 13em gives whole
     words on each line. */
  font-size: clamp(30px, 4.2vw, 60px); max-width: 13em; }
/* Ours. A chapter, never a hero. */
.bm-ordem-home .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; }
/* The same density rule as the question, and the same arithmetic error to
   undo: `ch` is the width of "0", so 18ch is about eight Han characters. At
   46px in the 540px column the "Antes" head broke 巴西 across two lines, and
   `text-wrap: balance` is free to break between any two Han glyphs. 38px sets
   that head on one line. */
.bm-ordem-home.cjk .h { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: 0;
  line-height: 1.24; max-width: 17em; }
.bm-ordem-home .t { font-family: var(--f-sys); font-weight: 500; font-size: var(--t-title);
  line-height: 1.35; letter-spacing: -0.01em; }
.bm-ordem-home .lede { font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2);
  max-width: var(--measure-lede); text-wrap: pretty; }
.bm-ordem-home .fine { font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
/* What the operation prints. */
.bm-ordem-home .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-home .kicker b { font-weight: 500; color: var(--signal); }
/* The one highlight: a swipe of ipê under a single word. */
.bm-ordem-home .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; }
.bm-ordem-home.cjk .t { letter-spacing: 0; }

/* ============================================================ action ==== */
.bm-ordem-home .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) var(--ease); }
.bm-ordem-home .btn:hover { background: var(--signal-2); }
/* The humane exit is a link, never a second button. */
.bm-ordem-home .link { color: var(--signal); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; }
.bm-ordem-home .link:hover { color: var(--signal-2); }

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

/* ============================================================ hero ====== */
/* The h1 is the LCP element: text only, nothing beside it that loads, and no
   entrance animation anywhere on this page. */
.bm-ordem-home .hero { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 88px); }
.bm-ordem-home .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(40px, 6vw, 96px); align-items: start; }
.bm-ordem-home .hero .kicker { margin-bottom: 28px; }
/* The brand line, between the question and the answer — the one ipê swipe. */
.bm-ordem-home .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-home .hero .lede { margin-top: 26px; }
.bm-ordem-home .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 4vw, 40px); }

/* "How to start", as a ruled list rather than a card: four facts that answer
   the question the visitor arrived with, and they resolve the right edge. */
.bm-ordem-home .start { padding-top: 8px; }
.bm-ordem-home .start dl { margin-top: 20px; border-top: 1px solid var(--rule); }
.bm-ordem-home .start dl > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.bm-ordem-home .start dt { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.bm-ordem-home .start dd { font-size: 16.5px; line-height: 1.45; color: var(--ink); }

/* The credentials. The reason a stranger believes any of this, so they are
   set at reading size on their own cal band, not as grey dust in a corner. */
.bm-ordem-home .creds { background: var(--paper); }
/* Four since 2026-09-25: TikTok, Kwai and Focus Media are the three official
   partnerships, and the year closes the row. Two by two on a tablet. */
.bm-ordem-home .creds-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; padding-block: clamp(32px, 4vw, 48px); }
.bm-ordem-home .creds-in > * { padding-right: 32px; }
.bm-ordem-home .creds-in > * + * { padding-left: 32px; border-left: 1px solid var(--rule); }
.bm-ordem-home .creds b { display: block; font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--ink); }

/* The name strip closes the same cal band: who we work with, set as text. */
.bm-ordem-home .names { background: var(--paper); padding-bottom: clamp(32px, 4vw, 48px); }
.bm-ordem-home .names-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 32px;
  padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--rule); }
.bm-ordem-home .names-row .nlabel { font-family: var(--f-data); font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.bm-ordem-home .names-row ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-left: auto;
  font-size: 16px; color: var(--ink); }

/* ================================================== § 02 from outside === */
/* The pain named on the left, answered on the right — the /pt "antes" shape. */
.bm-ordem-home .antes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 96px); align-items: start; }
.bm-ordem-home .asks { margin-top: 32px; border-top: 1px solid var(--rule); }
.bm-ordem-home .asks li { padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2);
  max-width: var(--measure); }
/* The answer sits under its question, in ink: the question is the visitor's
   voice, the answer is ours, and one line is all it needs. */
.bm-ordem-home .asks .a { display: block; margin-top: 4px; font-weight: 500; color: var(--ink); }
.bm-ordem-home .antes-grid .h { margin-top: 20px; }
.bm-ordem-home .ask { color: var(--ink); }
.bm-ordem-home .after { display: grid; gap: 14px; margin-top: 32px; }
.bm-ordem-home .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-home .after p:last-of-type { color: var(--signal); }
.bm-ordem-home.cjk .after p { letter-spacing: 0; line-height: 1.3; }
/* /zh only. The serif voice is already spoken once on this band by the
   question above it, so this one is set in the system face. */
.bm-ordem-home .edge { margin-top: 28px; font-family: var(--f-sys); font-weight: 500;
  font-size: var(--t-title); line-height: 1.5; letter-spacing: 0; color: var(--ink); }
.bm-ordem-home .antes-grid .lede { margin-top: 24px; }

/* ================================================ § 03 Brazil on one ==== */
.bm-ordem-home .brazil-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px); align-items: center; }
.bm-ordem-home .map { display: block; width: 100%; height: auto; max-width: 460px; margin-inline: auto; }
.bm-ordem-home .map-edges line { stroke: var(--rule); stroke-width: 1; }
.bm-ordem-home .map-arcs path { fill: none; stroke: var(--signal); stroke-width: 1.2; opacity: 0.45; }
.bm-ordem-home .map-node { fill: var(--paper-3); }
.bm-ordem-home .map-live circle:first-child { fill: var(--signal); opacity: 0.16; }
.bm-ordem-home .map-live circle:last-child { fill: var(--signal); }
/* A market figure without its source does not go on the page — so the source
   is set in the reading face, not in 10px mono. */
.bm-ordem-home .figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--rule); }
.bm-ordem-home .figures li { display: grid; gap: 6px; align-content: start; padding: 24px 32px 24px 0;
  border-bottom: 1px solid var(--rule); }
.bm-ordem-home .figures li:nth-child(2n) { padding-left: 32px; border-left: 1px solid var(--rule); }
.bm-ordem-home .figures b { font-weight: 500; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bm-ordem-home .figures span { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.bm-ordem-home .figures small { font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); }
.bm-ordem-home .op { margin-top: var(--block-y); }
/* Five across, never three: three would leave the last course two thirds
   long, and a rule carrying nothing on its right reads as unfinished. */
.bm-ordem-home .plates { margin-top: 20px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bm-ordem-home .plates li { display: grid; gap: 4px; align-content: start; padding: 16px 28px 16px 0;
  border-bottom: 1px solid var(--rule); }
.bm-ordem-home .plates span { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.bm-ordem-home .plates b { font-weight: 500; font-size: 16.5px; line-height: 1.4;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.bm-ordem-home .closing { margin-top: var(--block-y); }

/* The page's one full-bleed cut, and it carries a caption in its own
   language. A picture that says nothing is atmosphere; the caption makes it
   the street the plan goes to.

   The height used to be a flat `min(58svh, 520px)`. With the width at 100%,
   that meant the wider the screen, the harder `cover` cropped: the library's
   frames are 3:2, so a 1440 screen showed 54% of the frame's height, a 2000
   screen 39%, a 2560 screen 30% — a strip across the faces with the heads cut
   off. Feng saw it on 2026-09-24 at about 2000px and read it correctly as the
   band not accounting for screen size.

   `36vw` ties the height to the width instead, so the share of the frame on
   screen stops moving: it is 518px at 1440, which is what 520px was, so the
   width this design was drawn at is unchanged, and above it the band grows
   with the page rather than slicing deeper into the picture. The 360px floor
   keeps it from collapsing just above the 860px breakpoint, and `58svh` still
   caps it — a short window is the one case where a full-bleed band and a 3:2
   frame genuinely cannot both be satisfied, and there the viewport wins. */
.bm-ordem-home .cut { width: 100%; }
.bm-ordem-home .cut img { display: block; width: 100%; height: min(58svh, max(360px, 36vw));
  object-fit: cover; object-position: 50% 45%; }
.bm-ordem-home .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); }

/* =============================================== § 04 plan to street ==== */
/* The catalogue, every line of it on one rule. */
.bm-ordem-home .canais { border-top: 1px solid var(--rule); }
.bm-ordem-home .canais li { border-bottom: 1px solid var(--rule); }
.bm-ordem-home .canais :is(a, 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-home .canais b { font-weight: 500; font-size: 19px; color: var(--ink); }
.bm-ordem-home .canais span { font-size: 16px; color: var(--ink-2); }
.bm-ordem-home .canais i { font-style: normal; color: var(--signal); }
.bm-ordem-home .canais a:hover b { color: var(--signal); }

/* ================================================= § 05 market entry ==== */
.bm-ordem-home .entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--rule); }
.bm-ordem-home .entries li { display: grid; gap: 8px; align-content: start;
  padding: 26px 32px 26px 0; border-bottom: 1px solid var(--rule); }
.bm-ordem-home .entries li:nth-child(2n) { padding-left: 32px; border-left: 1px solid var(--rule); }
.bm-ordem-home .entries p { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
/* The repeated numeral inside one ruled list: the operation's own counting. */
.bm-ordem-home .n { font-family: var(--f-data); font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.12em; color: var(--ink-2); }
.bm-ordem-home .entry-note { margin-top: 28px; }
.bm-ordem-home .entry-cta { margin-top: 28px; }

/* ========================================================= § 06 proof === */
/* The ledger is the page's most-made object: five checkable rows. */
.bm-ordem-home .ledger { border-top: 1px solid var(--ink); }
.bm-ordem-home .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-home .ledger dd { display: contents; }
.bm-ordem-home .ledger dt { font-family: var(--f-data); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.bm-ordem-home .ledger .v { font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink); }
.bm-ordem-home .ledger .d { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
/* The client stories (2026-09-25), none named: the section's proof told from
   clients' side. Full width, before the named partner cards: headline and
   figure on the left, the three beats on the right. */
.bm-ordem-home .stories { margin-top: clamp(40px, 5vw, 64px); }
.bm-ordem-home .stories-label { font-family: var(--f-data); font-weight: 500; font-size: var(--t-label);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.bm-ordem-home .stories-note { margin-top: 16px; }
.bm-ordem-home .story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 64px); margin-top: 20px; padding-top: 22px;
  border-top: 1px solid var(--rule); }
.bm-ordem-home .story + .story { margin-top: clamp(28px, 3vw, 40px); }
.bm-ordem-home .story-head { display: flex; flex-direction: column; gap: 12px; }
.bm-ordem-home .story .tg { font-family: var(--f-data); font-weight: 500; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.bm-ordem-home .story h3 { font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; }
.bm-ordem-home .story .kpi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bm-ordem-home .story .kpi b { font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.bm-ordem-home .story .kpi span { font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); }
.bm-ordem-home .story .beats { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.bm-ordem-home .story .beats li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
  gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.bm-ordem-home .story .beats h4 { font-weight: 500; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.bm-ordem-home .story .beats p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.bm-ordem-home.cjk .story h3 { letter-spacing: 0; }
@media (max-width: 860px) {
  .bm-ordem-home .story, .bm-ordem-home .story .beats li { grid-template-columns: minmax(0, 1fr); }
  .bm-ordem-home .story .beats li { gap: 4px; }
}
.bm-ordem-home .cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px); margin-top: var(--block-y); }
.bm-ordem-home .case { display: flex; flex-direction: column; gap: 12px; padding-top: 22px;
  border-top: 1px solid var(--ink); }
.bm-ordem-home .case .tg { font-family: var(--f-data); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }
.bm-ordem-home .case h3 { font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.bm-ordem-home .case .kpi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bm-ordem-home .case .kpi b { font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.bm-ordem-home .case .kpi span { font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); }
.bm-ordem-home .case p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.bm-ordem-home .case blockquote { margin-top: 4px; font-family: var(--f-voice); font-style: italic;
  font-size: 17px; line-height: 1.45; color: var(--ink); }
.bm-ordem-home.cjk .case blockquote { font-family: var(--f-han); font-style: normal; }
.bm-ordem-home .case cite { display: block; margin-top: 8px; font-family: var(--f-data); font-style: normal;
  font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); }
.bm-ordem-home .commitments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px); margin-top: var(--block-y); }
.bm-ordem-home .commitments li { display: grid; gap: 10px; align-content: start; padding-top: 22px;
  border-top: 1px solid var(--rule); }
.bm-ordem-home .commitments p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.bm-ordem-home .proof-note { margin-top: var(--block-y); }

/* ===================================================== how it works ===== */
.bm-ordem-home .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px); border-top: 1px solid var(--rule); }
.bm-ordem-home .steps li { display: grid; gap: 10px; align-content: start; padding-top: 22px; }
.bm-ordem-home .steps p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.bm-ordem-home .steps small { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* ============================================================== FAQ ===== */
.bm-ordem-home .faq-list { border-top: 1px solid var(--rule); }
.bm-ordem-home .faq-list > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px clamp(32px, 4vw, 64px); padding: 24px 0; border-bottom: 1px solid var(--rule); }
.bm-ordem-home .faq-list dt { font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink);
  max-width: 28ch; }
.bm-ordem-home .faq-list dd { font-size: 16px; line-height: 1.6; color: var(--ink-2);
  max-width: var(--measure); }

/* ====================================================== the closing ===== */
/* The page's one dark azulejo band, and the one ask on it. */
.bm-ordem-home .close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 5vw, 88px); align-items: start; }
.bm-ordem-home .on-night .q { color: #fff; }
.bm-ordem-home .on-night .pain { color: #fff; }
.bm-ordem-home .on-night .pain .byte { color: var(--aqua); }
.bm-ordem-home .points { display: grid; gap: 10px; margin-top: 28px; font-size: 16px; color: var(--dim); }
.bm-ordem-home .points li { display: flex; gap: 12px; }
.bm-ordem-home .points li::before { content: ""; width: 7px; height: 7px; margin-top: 0.62em;
  border-radius: 50%; background: var(--aqua); flex-shrink: 0; }
.bm-ordem-home .alt { margin-top: 28px; font-size: 16px; color: var(--dim); }
.bm-ordem-home .on-night .link { color: var(--aqua); }
.bm-ordem-home .on-night .link:hover { color: var(--aqua-2); }
.bm-ordem-home .on-night .btn { background: var(--aqua); color: var(--ink); }
.bm-ordem-home .on-night .btn:hover { background: var(--aqua-2); }
.bm-ordem-home .on-night :focus-visible { outline-color: var(--aqua); }

/* The form: three fields, a pill, and nothing that floats. */
.bm-ordem-home .form { display: grid; gap: 20px; }
.bm-ordem-home .field { display: grid; gap: 8px; min-width: 0; }
.bm-ordem-home .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bm-ordem-home .field label { font-size: var(--t-small); line-height: 1.5; color: var(--dim); }
.bm-ordem-home .field :is(input, textarea) { width: 100%; min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--rule-2); border-radius: var(--r-field); background: var(--page); color: var(--ink);
  font: 400 16px/1.5 var(--f-sys); }
.bm-ordem-home .field :is(input, textarea)::placeholder { color: var(--ink-3); }
.bm-ordem-home .voice-field textarea { font-family: var(--f-voice); font-style: italic; font-size: 17px;
  line-height: 1.6; min-height: 104px; resize: vertical; }
.bm-ordem-home.cjk .voice-field textarea { font-family: var(--f-han); font-style: normal; }
/* tokens.css has no negative colour; ipê is the page's one attention mark
   and it is what an invalid field and its message wear. */
.bm-ordem-home .field :is(input, textarea)[aria-invalid="true"] { border-color: var(--aqua-2); border-width: 2px; }
.bm-ordem-home .field-error { font-size: var(--t-small); line-height: 1.5; font-weight: 500; color: var(--aqua); }
.bm-ordem-home .form .btn { width: 100%; }
.bm-ordem-home .form .btn:disabled { opacity: 0.65; cursor: not-allowed; }
.bm-ordem-home .hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.bm-ordem-home .thanks { display: grid; gap: 10px; padding-block: 40px; }
.bm-ordem-home .thanks h3 { font-weight: 500; font-size: var(--t-title); line-height: 1.35; color: #fff; }
.bm-ordem-home .thanks p { color: var(--dim); }
.bm-ordem-home .thanks :focus-visible { outline-offset: 6px; }

/* ================================================ partners and radar ==== */
.bm-ordem-home .partners { padding-block: var(--block-y); }
.bm-ordem-home .partners-row { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 16px 32px; }
.bm-ordem-home .partners-row p { max-width: var(--measure); color: var(--ink-2); font-size: 16px; }
.bm-ordem-home .radar { padding-block: var(--block-y) var(--section-y); }
.bm-ordem-home .radar-head { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px 24px; }
.bm-ordem-home .radar-list { margin-top: 24px; border-top: 1px solid var(--rule); }
.bm-ordem-home .radar-list li { border-bottom: 1px solid var(--rule); }
.bm-ordem-home .radar-list a { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px 32px; padding: 18px 0; min-height: 44px; text-decoration: none; color: var(--ink); }
.bm-ordem-home .radar-list a span { font-size: 16.5px; line-height: 1.45; }
.bm-ordem-home .radar-list a small { flex-shrink: 0; font-size: var(--t-small); color: var(--ink-2);
  max-width: 35%; text-align: right; }
.bm-ordem-home .radar-list a:hover span { color: var(--signal); }

/* ============================================================ narrow ==== */
@media (max-width: 1080px) {
  .bm-ordem-home .hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 48px); }
  .bm-ordem-home .creds-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .bm-ordem-home .creds-in > *:nth-child(3) { padding-left: 0; border-left: 0; }
  .bm-ordem-home .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-ordem-home .brazil-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the map keeps its own centre rather than sitting against the
     left gutter with two thirds of the band carrying nothing. */
  .bm-ordem-home .map { max-width: 440px; }
  /* Five narrow plates would each break their figure over two lines; below
     this the course becomes five rows, label left and figure right. */
  .bm-ordem-home .plates { grid-template-columns: minmax(0, 1fr); }
  .bm-ordem-home .plates li { display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 4px 24px; padding-right: 0; }
}
@media (max-width: 860px) {
  .bm-ordem-home { font-size: 16px; }
  .bm-ordem-home .antes-grid, .bm-ordem-home .close-grid, .bm-ordem-home .cases,
  .bm-ordem-home .commitments, .bm-ordem-home .figures, .bm-ordem-home .entries,
  .bm-ordem-home .steps, .bm-ordem-home .plates,
  .bm-ordem-home .faq-list > div { grid-template-columns: minmax(0, 1fr); }
  .bm-ordem-home .creds-in { grid-template-columns: minmax(0, 1fr); }
  .bm-ordem-home .creds-in > * { padding-right: 0; }
  .bm-ordem-home .creds-in > * + * { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--rule); }
  .bm-ordem-home .figures li:nth-child(2n), .bm-ordem-home .entries li:nth-child(2n) { padding-left: 0; border-left: 0; }
  .bm-ordem-home .figures li, .bm-ordem-home .entries li, .bm-ordem-home .plates li { padding-right: 0; }
  .bm-ordem-home .ledger > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bm-ordem-home .canais :is(a, div) { grid-template-columns: minmax(0, 1fr) auto; }
  .bm-ordem-home .canais span { grid-column: 1 / -1; }
  .bm-ordem-home .names-row ul { margin-left: 0; }
  .bm-ordem-home .cut img { height: min(46svh, 360px); }
  .bm-ordem-home .field-row { grid-template-columns: minmax(0, 1fr); }
  .bm-ordem-home .actions .btn { width: 100%; }
  .bm-ordem-home .radar-list a { flex-direction: column; gap: 6px; }
  .bm-ordem-home .radar-list a small { max-width: none; text-align: left; }
  /* The shell's dock is fixed at the foot; keep it off the last content. */
  .bm-ordem-home .radar, .bm-ordem-home .partners:last-child { padding-bottom: calc(var(--block-y) + 80px); }
}
@media (prefers-reduced-motion: reduce) {
  .bm-ordem-home *, .bm-ordem-home *::before, .bm-ordem-home *::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
  .bm-ordem-home :focus-visible { outline-color: Highlight; }
}