/* Pesito / Editorial motion system
 * Units' spatial rhythm, expressed with Pesito's existing brand primitives.
 * Loaded after the legacy page styles so every route shares one geometry.
 */
body.editorial-system {
  --editorial-gutter: clamp(12px, 1.6vw, 24px);
  --editorial-rail: 126px;
  --editorial-gap: clamp(12px, 1.55vw, 22px);
  --panel-gap: var(--editorial-gap);
  --panel-radius: 32px;
  --panel-radius-sm: 20px;
  --panel-pad: clamp(24px, 3vw, 44px);
  --panel-border-width: 1px;
  --panel-border: 1px solid var(--frame-ink);
  --card-lift: none;
  --space-chapter: clamp(36px, 6vw, 80px); /* a chapter's opening air */
  /* The current green/ink brand pair clears body-text contrast in both
     themes; the legacy dark green predates the warmer ink token. */
  --fill-verde-vivo: var(--verde-500);
  background: var(--hueso);
  background-image: none;
  overflow-x: clip;
}
/* Public pages use the same two type roles as the red pixel chapter.
   Remap legacy card tokens too, so older component rules stay consistent. */
body.editorial-system:not(.editorial-review) {
  --font-carta: var(--font-body);
  --font-pregon: var(--font-black);
  --voz-pregon-weight: 400;
  --voz-pregon-track: -.025em;
  --voz-carta-track: .025em;
  --voz-carta-track-sc: 0;
}
.editorial-system *, .editorial-system *::before, .editorial-system *::after { box-sizing: border-box; }
.editorial-system main { padding-top: 88px; }
.editorial-system .ed-wrap {
  max-width: none;
  padding: 0 var(--editorial-gutter);
  gap: var(--editorial-gap);
}
.editorial-system .ed-wrap > * { min-width: 0; }
/* Keep the final FAQ panel clear of the viewport edge and device controls. */
.editorial-system.editorial-faq-page .ed-wrap {
  padding-block-end: calc(64px + env(safe-area-inset-bottom, 0px));
}
.editorial-system .ed-grid > * { min-width: 0; }
.editorial-system .container { max-width: 1440px; }
.editorial-system .ed-panel,
.editorial-system .carta,
.editorial-system .faq-item,
.editorial-system .fx-card,
.editorial-system .fee-ladder {
  border-radius: var(--panel-radius);
  box-shadow: none;
}
.editorial-system .ed-panel { padding: var(--panel-pad); }
.editorial-system .ed-panel--media { padding: 0; }
.editorial-system .dot-grid { background-image: none; }
.editorial-system .ed-panel::after { pointer-events: none; }
.editorial-system .marcador {
  background: none;
  box-shadow: none;
  padding: 0;
  color: inherit;
}
.editorial-system h1 { letter-spacing: -.045em; line-height: 1.03; }
.editorial-system :is(h2, h3, .title, .display-m, .carta-title, .banda-titulo) {
  font-family: var(--font-black);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.12;
}
.editorial-system .ed-bar h2,
.editorial-system .ed-bar-title,
.editorial-system .editorial-gallery h2 {
  font-family: var(--font-black);
  letter-spacing: -.035em;
}
/* The reference uses a bold grotesk for headings and a quiet sans for
   controls. Map those roles to Archivo Black and Inter already shipped. */
.editorial-system .eyebrow { font: 600 12px/1.35 var(--font-body); letter-spacing: .06em; border-width: 1px; padding: 7px 16px; }
.editorial-system :is(.ed-chip-label, .carta-dato-label, .carta-caption, .carta-foot span, .carta-foot .carta-label, .voz-carta) {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
.editorial-system :is(.ed-step-num, .carta-num, .carta-head .n) {
  font-family: var(--font-black);
  font-weight: 400;
  letter-spacing: -.025em;
}
/* The legacy step-number rule declares both properties important. */
.editorial-system .how-step-num {
  font-family: var(--font-black) !important;
  font-weight: 400 !important;
  letter-spacing: -.025em !important;
}
.editorial-system :is(.pregon, .carta h4) { font-family: var(--font-black); font-weight: 400; }
.editorial-system .banda-rotulo:not(.eyebrow) {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .06em;
  padding-inline-start: 0;
}
.editorial-system .pullquote {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
}
.editorial-system .body-l { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; }
/* Buttons are main.css's own pills, untouched here: size, weight,
   padding, the flat rest state, the Loteria lift on hover and the
   waitlist CTA's colour wave all come from main.css (owner, 2026-09-22:
   keep everything about the live site's button). */

/* The compact nav is main.css's capsule exactly, tint, edge light,
   scroll thickening and fallbacks included (owner, 2026-09-22: the nav
   bar is perfect and should not have been changed). */
.editorial-system .wordmark,
.editorial-system .brand-mark-text { letter-spacing: -.025em; }
/* The side rail is the new editorial deck (flat Loteria fills, short
   labels, the tilted arrow that straightens on hover, a large centred
   figure, the bare wordmark) in the round, bubbly shapes of main's deck
   (owner, 2026-09-22): cards on the panel radius, the waitlist CTA a
   pill, the language chip a 44px circle and the appearance toggle a pill
   beside it. Every control keeps a 44px hit target. */
.editorial-system .ed-rail-logo { border: 0; padding: 4px 0 10px; background: transparent; border-radius: 0; }
.editorial-system .ed-rail-logo .brand-mark-icon { width: 30px; height: 30px; }
.editorial-system .ed-rail-logo .brand-mark-text { font-size: 24px !important; }
.editorial-system .ed-rail-logo .wordmark { font-size: 30px !important; }
.editorial-system .ed-rail-item[href] {
  position: relative;
  padding: 12px 10px;
  min-height: 0;
  flex: 1 1 0;
  gap: 6px;
  border-radius: var(--panel-radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.18;
  font-weight: 750;
  overflow: hidden;
  text-align: center;
  transition: border-color 240ms, transform 300ms var(--ease-standard);
}
.editorial-system .ed-rail-item--coral { background: var(--coral-500); color: var(--ink-fixed); }
.editorial-system .ed-rail-item--verde-vivo,
.editorial-system .ed-rail-item--verde { background: var(--verde-500); color: var(--ink-fixed); }
.editorial-system .ed-rail-item--bosque { background: var(--azul-700); color: var(--paper-fixed); }
.editorial-system .ed-rail-item--menta { background: var(--amarillo-500); color: var(--ink-fixed); }
.editorial-system .ed-rail-item--rosa { background: var(--rosa-600); color: var(--paper-fixed); }
.editorial-system .ed-rail-item > span:last-child { text-align: center; }
/* A Loteria card stacks number, figure, name. The figure keeps the band of
   its own that main.css gives it, at full strength, and shrinks
   proportionally when a short viewport squeezes the deck. */
.editorial-system .ed-rail-item[href]::before { width: auto; height: auto; aspect-ratio: 1; flex: 0 1 34px; min-height: 18px; margin: 0; opacity: 1; }
.editorial-system .ed-rail-num { font-size: 12px; font-family: var(--font-body); font-weight: 800; }
.editorial-system .ed-rail-num > span { transition: transform 300ms var(--ease-standard); transform: rotate(-40deg); }
.editorial-system .ed-rail-item:hover .ed-rail-num > span { transform: rotate(0); }
.editorial-system .ed-rail-item[aria-current="page"] { border-color: currentColor; background: var(--hueso); color: var(--tinta-900); }
/* The waitlist CTA is the site's own primary button (owner, 2026-09-22):
   same fill, frame, label weight, lift and colour wave as the hero's.
   The rail only sizes it: full rail width, a 44px floor, the label
   centred on one line where it fits. */
.editorial-system .ed-rail .ed-rail-cta.btn { flex: 0 0 auto; width: 100%; min-height: 48px; justify-content: center; text-align: center; padding: 10px 12px; font-size: 13px; line-height: 1.2; }
.editorial-system .ed-rail .ed-rail-cta.btn .btn-flow-label { justify-content: center; }
.editorial-system .ed-rail-foot { flex: 0 0 44px; gap: 7px; }
.editorial-system .ed-rail-langmenu { flex: 0 0 44px; }
.editorial-system .ed-rail-langmenu summary { width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; border-width: 1px; }
.editorial-system .ed-rail-theme { min-height: 44px; height: 44px; border-radius: var(--radius-pill); border-width: 1px; }
/* The rail pops like the site's buttons (owner, 2026-09-22): every page
   card and control lifts a pixel, grows 1.5% and throws the hard offset
   on hover or keyboard focus, and presses back under the pointer. The offset follows
   the page's frame ink, so it reads on the dark canvas too. The rail's
   controls drop their frames to match the borderless cards; the wave and
   the lift are the whole affordance. */
.editorial-system :is(.ed-rail-item[href], .ed-rail-langmenu summary, .ed-rail-lang, .ed-rail-theme) {
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color 240ms;
}
.editorial-system :is(.ed-rail-item[href], .ed-rail-langmenu summary, .ed-rail-lang, .ed-rail-theme):is(:hover, :focus-visible) {
  transform: translateY(-1px) scale(1.015);
  box-shadow: 3px 3px 0 var(--frame-ink);
  filter: none;
}
.editorial-system :is(.ed-rail-item[href], .ed-rail-langmenu summary, .ed-rail-lang, .ed-rail-theme):active {
  transform: translateY(0) scale(.97);
  box-shadow: none;
  transition-duration: var(--dur-instant);
}
.editorial-system .ed-rail .ed-rail-cta.btn,
.editorial-system .ed-rail-langmenu summary,
.editorial-system .ed-rail-lang,
.editorial-system .ed-rail-theme { border: 0; }
@media (prefers-reduced-motion: reduce) {
  .editorial-system :is(.ed-rail-item[href], .ed-rail-langmenu summary, .ed-rail-lang, .ed-rail-theme):is(:hover, :focus-visible, :active) { transform: none; }
}

/* The rail swaps with main's nav capsule at main's width (1280px), so the
   nav keeps main's behaviour at every width it appears. It shows on any
   wide window at least 540px tall. */
@media (min-width: 1280px) and (min-height: 540px) {
  body.editorial-system.has-rail .nav { display: none; }
  body.editorial-system.has-rail .ed-rail {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: var(--editorial-gutter) auto var(--editorial-gutter) var(--editorial-gutter);
    width: var(--editorial-rail);
    padding: 0;
    gap: 10px;
    overflow: visible;
    z-index: 90;
  }
  body.editorial-system.has-rail main,
  body.editorial-system.has-rail .cta-footer-wrap,
  body.editorial-system.has-rail > .ed-footer,
  body.editorial-system.has-rail > .footer {
    margin-left: calc(var(--editorial-rail) + var(--editorial-gutter));
  }
  body.editorial-system.has-rail main { padding-top: var(--editorial-gutter) !important; }
  .editorial-system .ed-rail-item[href]::before { position: static; align-self: center; }
}
/* Shorter windows (a laptop, a browser that is not maximised, an app's
   browser pane): the deck tightens in two steps so every card, name, CTA
   and control fits with nothing clipped, in every language. Type stays at
   12px and every control keeps its 44px target. */
@media (min-width: 1280px) and (min-height: 540px) and (max-height: 819.98px) {
  body.editorial-system.has-rail .ed-rail { gap: 6px; }
  .editorial-system .ed-rail-logo { padding: 0 0 2px; min-height: 44px; display: inline-flex; align-items: center; }
  .editorial-system .ed-rail-logo .wordmark { font-size: 26px !important; }
  .editorial-system .ed-rail-item[href] { padding: 7px 10px; gap: 3px; }
  .editorial-system .ed-rail-item[href]::before { flex-basis: 24px; min-height: 16px; }
  .editorial-system .ed-rail .ed-rail-cta.btn { min-height: 44px; padding: 8px 12px; }
}
/* Below 660px the figure steps up into the number row, centred between
   the number and the arrow, so a two-line name still fits the card. */
@media (min-width: 1280px) and (min-height: 540px) and (max-height: 659.98px) {
  body.editorial-system.has-rail .ed-rail { top: 12px; bottom: 12px; }
  .editorial-system .ed-rail-item[href]::before {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 16px;
    height: 16px;
    min-height: 0;
    flex: none;
    margin: 0 0 0 -8px;
  }
}
@media (max-width: 1279.98px), (max-height: 539.98px) {
  body.editorial-system.has-rail main,
  body.editorial-system.has-rail .cta-footer-wrap,
  body.editorial-system.has-rail > .ed-footer,
  body.editorial-system.has-rail > .footer { margin-left: 0; }
  body.editorial-system.has-rail .nav { display: block; }
}

/* The hero is the live site's split: copy beside the product clip, both
   outlined Lotería panels. Below 960px they stack. */
.editorial-home .ed-grid--hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--editorial-gap);
  position: relative;
}
@media (min-width: 960px) {
  .editorial-home .ed-grid--hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
    min-height: min(720px, calc(100svh - 2 * var(--editorial-gutter)));
  }
  .editorial-home .ed-grid--hero:where(.pesito-vh-frozen) { min-height: min(720px, calc(var(--frozen-svh) * 100 - 2 * var(--editorial-gutter))); }
}
.editorial-home .ed-grid--hero > .ed-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: var(--panel-pad);
  background: var(--hueso);
  border: var(--panel-border);
  color: var(--tinta-900);
  transform: none;
}
.editorial-home .ed-grid--hero .ed-hero-copy::before,
.editorial-home .ed-grid--hero .ed-hero-copy::after { display: none; }
.editorial-home .ed-grid--hero h1 {
  font-family: var(--font-black);
  font-size: clamp(34px, 3.7vw, 62px);
  line-height: 1.02;
  letter-spacing: -.04em;
  max-width: 13ch;
  margin: 18px 0 14px;
  color: inherit;
  text-shadow: none;
}
.editorial-home .ed-grid--hero h1 .marcador::before,
.editorial-home .ed-grid--hero h1 .marcador::after { display: none; }
.editorial-home .ed-grid--hero .hero-kicker { margin-top: 18px; }
/* "Read our dream" is a 44px target (it was 28px, the only hero link
   under the floor). 12px of padding above and below, cancelled by equal
   negative margins, so the eyebrow, headline and sub keep their places.
   The 2px rule moves from the border (which would drop with the
   padding) to an underline drawn where the border was, and clears on
   hover and focus as before. (0,4,1) clears main.css's (0,3,1)
   `text-decoration: none` opt-out. */
.editorial-home .ed-grid--hero .hero-kicker a:not(.btn) {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  text-underline-offset: 8px;
}
.editorial-home .ed-grid--hero .hero-kicker a:not(.btn):is(:hover, :focus-visible) { text-decoration-color: transparent; }
.editorial-home .ed-grid--hero .hero-sub { margin: 0; max-width: 46ch; color: var(--tinta-700); }
.editorial-home .ed-grid--hero :is(.plan-note, .hero-mouseprint) { max-width: 60ch; margin: 14px 0 0; color: var(--tinta-500); font-size: 12px; line-height: 1.55; opacity: 1; }
.editorial-home .ed-grid--hero .hero-ctas { justify-content: flex-start; margin-top: 24px; gap: 12px; }
.editorial-home .ed-grid--hero > .ed-panel--media {
  position: relative;
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  overflow: hidden;
  padding: 0;
  background: var(--ink-fixed);
}
.editorial-home .ed-grid--hero .hero-video { width: 100%; height: auto; min-height: 100%; object-fit: cover; opacity: 1; }
.editorial-home .ed-grid--hero .ed-media-tag { bottom: 12px; right: 16px; left: auto; z-index: 3; background: var(--hueso); font-size: 10px; padding: 6px 12px; }
.editorial-hero-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 20px 24px;
  border: var(--panel-border);
  border-radius: var(--panel-radius-sm);
}
.editorial-hero-support > * { margin: 0 !important; }
.editorial-hero-support .form-disclosure { flex: 1 1 340px; max-width: 64ch; font-size: 11px; }
.editorial-hero-support .hero-store-row { gap: 8px; }
.editorial-hero-support .store-badge { min-height: 44px; }

/* Color-block rhythm replaces nested outlined newspaper cards. */
.editorial-system .ed-wrap > .banda {
  --banda-ink: var(--tinta-900);
  --banda-ink-quiet: var(--tinta-700);
  --regla-tinta: var(--frame-ink);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.editorial-system .ed-wrap > .banda--tinta .banda-cabecera > .eyebrow {
  color: var(--banda-ink);
  border-color: currentColor;
}
.editorial-system .ed-wrap > .banda--tinta > .banda-interior > :not(.cartas):not(.carta):not(.ed-panel) :is(h2, h3, p, .eyebrow, .kicker) {
  /* Older gallery introductions carry inline white text. Their band
     now shares the page canvas, so its text must share the band ink. */
  color: var(--banda-ink) !important;
}
.editorial-system .ed-wrap > .banda > .banda-interior { padding: 0; max-width: none; }
.editorial-system .ed-bar {
  padding: 24px;
  min-height: 100px;
  margin: 0 0 var(--editorial-gap);
  border-width: 1px;
  border-radius: 24px;
}
.editorial-system .ed-bar-arrows svg { width: 24px; height: 36px; }
.editorial-system .carta {
  /* A12: name the three edges so the media bleed and the caption bar
     (main.css `.carta .carta-media`, `.carta.carta--media > .carta-foot`)
     cancel the padding the card actually has, not main's clamp(). */
  --carta-pad-x: 28px;
  --carta-pad-top: 28px;
  --carta-pad-bottom: 28px;
  border-width: 1px;
  padding: var(--carta-pad-top) var(--carta-pad-x) var(--carta-pad-bottom);
  overflow: hidden;
}
.editorial-system .carta.carta--enlace:is(:hover, :active) {
  transform: none;
  box-shadow: none;
  background: var(--hueso-100);
}
/* Both spellings of a link card: the card IS the anchor, or one
   stretched .carta-cubre link inside it holds focus. main.css rings the
   second with a shadow list ending in var(--card-lift), and this layer
   sets that token to `none`, which makes the whole list invalid at
   computed-value time: the pricing pages' guide cards showed no focus
   at all (WCAG 2.4.7). Same green outline as the anchor cards. */
.editorial-system .carta.carta--enlace:focus-visible,
.editorial-system .carta.carta--enlace:has(:is(a, button):focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  box-shadow: none;
}
/* The help page's one-door card: the mailto pill and the caption under
   it had no space between them (the carta is a gap-less flex column),
   so the caption sat on the pill's border. 14px matches the bubble's
   gap above the pill. */
.carta > .btn + .caption { margin-top: 14px; }
.editorial-system .carta .carta-flecha { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; text-transform: none; }
.editorial-system .carta::before, .editorial-system .carta::after { display: none; }
.editorial-system .carta .carta-media { border-radius: 20px; overflow: hidden; }
.editorial-system .carta h3 { font-family: var(--font-black); font-weight: 400; letter-spacing: -.03em; }
.editorial-system .carta .carta-kicker { border-bottom: 0; }
.editorial-system .cartas { gap: var(--editorial-gap); }
.editorial-home .cartas--4up .carta:nth-child(4n+1) { background: var(--amarillo-500); color: var(--ink-fixed); }
.editorial-home .cartas--4up .carta:nth-child(4n+2) { background: var(--verde-700); color: var(--paper-fixed); }
.editorial-home .cartas--4up .carta:nth-child(4n+3) { background: var(--azul-700); color: var(--paper-fixed); }
.editorial-home .cartas--4up .carta:nth-child(4n+4) { background: var(--lila-300); color: var(--ink-fixed); border-color: var(--frame-ink); }
.editorial-home .cartas--4up .carta :is(h3,p,span,.icon) { color: inherit; }
/* The EN stat chips share one figure row and one label row across the
   deck (subgrid): every figure ends on one line and every label starts
   on one line, whatever their length, with no dead gap between them
   (alignment pass A7, 2026-09-22). */
.editorial-home .ed-chips.cartas { grid-auto-rows: auto; }
.editorial-home .ed-chips.cartas > .carta { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 12px; justify-items: center; }
.editorial-home .ed-chips.cartas .carta-dato { font-size: clamp(30px, 3.7vw, 58px); align-self: end; margin: 0; }
.editorial-home .ed-chips.cartas .carta-dato-label { font-size: 14px; line-height: 1.45; max-width: 27ch; align-self: start; }
/* The one figure that is a phrase ("Before you send") steps down so it
   sets in two lines, not three. (0,5,0) beats the size above. */
.editorial-home .ed-chips.cartas .carta-dato.carta-dato--frase { font-size: clamp(26px, 2.3vw, 38px); }
/* The step row is three light Lotería cards in both themes: card 03's
   mint is pinned to its light value (#DFF2E7, main's --verde-100) like
   its lilac and amber siblings, instead of flipping to dark green. The
   page overrides the colourways' fills, so the cards (and the lilac
   chip above) are framed in ink like every other filled block; the
   crimson, cobalt and burnt-orange frames belonged to other fills. All
   three icon plates are bare (card 03 kept a cream plate). */
.editorial-home :is(#how,#como-funciona) .carta:nth-child(1) { background: var(--lila-300); color: var(--ink-fixed); border-color: var(--frame-ink); }
.editorial-home :is(#how,#como-funciona) .carta:nth-child(2) { background: var(--amarillo-500); color: var(--ink-fixed); border-color: var(--frame-ink); }
.editorial-home :is(#how,#como-funciona) .carta:nth-child(3) { background: #DFF2E7; color: var(--ink-fixed); border-color: var(--frame-ink); }
.editorial-home :is(#how,#como-funciona) .carta:nth-child(3) .carta-num { color: inherit; }
.editorial-home :is(#how,#como-funciona) .carta:nth-child(-n+3) :is(h3,p,span,.icon) { color: inherit; }
.editorial-home :is(#how,#como-funciona) .carta:nth-child(-n+3) .carta-bubble { background: transparent; }
.editorial-home :is(#how,#como-funciona) .carta:nth-child(-n+3) .carta-head { border-bottom-color: currentColor; } /* the themed tinta-900 rule turned bone on the light fills in dark mode */
/* The step cards read on one centred axis: the paragraph follows the
   figure and the title onto it, and its 30ch column centres in the card
   (owner, 2026-09-22). Step cartas get this from main.css's base carta
   rule (`:where(.carta) > :is(p, dl)`: prose inherits the card's centred
   axis, and the card centres the 30ch column), so they need no page rule
   here. The two rules below centre the older step-panel markup the same
   way; no homepage uses it since the parity ports. */
.editorial-home :is(#how,#como-funciona) .ed-grid--thirds > .ed-panel { text-align: center; }
.editorial-home :is(#how,#como-funciona) .ed-grid--thirds > .ed-panel > p { margin-inline: auto; text-wrap: pretty; }
/* The trust grid, too: every tile reads on its centred axis (owner,
   2026-09-22). Trust cartas take it from the same base carta rule in
   main.css. The two rules below centre the older trust-signal tiles
   whole; no homepage uses them since the parity ports. */
.editorial-home .trust-grid .trust-signal { text-align: center; align-items: center; }
.editorial-home .trust-grid .trust-signal > p { margin-inline: auto; text-wrap: pretty; }
.editorial-home :is(#features,#funciones) .carta { min-height: 310px; }
.editorial-home :is(#features,#funciones) .carta .icon { width: 48px; height: 48px; }
.editorial-home :is(#security,#seguridad) { padding-block: var(--space-chapter); }
/* Two chapters opened 15-16px under the block above them (8/7px on a
   phone), so they read as a continuation of it: the features head under
   the languages panel and "Frequently asked." under the roadmap pill.
   They take the opening the security chapter already has (96/95px glyph
   gap at 1440, 44/43px at 390). */
.editorial-home :is(#features,#funciones,#faq.editorial-faq) { padding-block-start: var(--space-chapter); }
.editorial-home :is(#story,#historia) { background: var(--amarillo-500); color: var(--ink-fixed); }
.editorial-home :is(#story,#historia) :is(h2,p,.eyebrow,.brand-dot) { color: var(--ink-fixed); }
.editorial-home :is(#story,#historia) .btn { color: var(--ink-fixed); border-color: currentColor; }
@media (hover: hover) {
  .editorial-home :is(#story,#historia) .btn-ghost:hover { background: var(--ink-fixed); color: var(--paper-fixed); }
}
.editorial-home :is(#story,#historia) .carta { border: 0; background: transparent; padding: 0; }
.editorial-home :is(#story,#historia) .carta-media { margin: 0; width: 100%; border-radius: 24px; }
.editorial-home :is(#story,#historia) .carta-foot { border: 0; padding: 12px 0 0; background: transparent; }
.editorial-home :is(#story,#historia) .carta-caption { color: var(--ink-fixed); }
.editorial-home :is(#story,#historia) figcaption { color: var(--ink-fixed) !important; }
.editorial-home :is(#download,#descargar) .ed-panel:first-child { min-height: 480px; display: flex; flex-direction: column; justify-content: center; }

/* Product stories become the horizontal, alternating media/copy chapter. */
.editorial-system .editorial-gallery .ed-showcase {
  border-radius: var(--panel-radius);
  border: var(--panel-border);
  padding: clamp(24px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  background: var(--lila-300);
  color: var(--ink-fixed);
}
.editorial-system .editorial-gallery .ed-showcase:nth-child(2) { background: var(--amarillo-500); flex-direction: column-reverse; }
.editorial-system .editorial-gallery .ed-showcase:nth-child(3) { background: var(--verde-700); color: var(--paper-fixed); }
.editorial-system .editorial-gallery .ed-showcase :is(h2,p,.eyebrow,.body-l,.caption) { color: inherit; }
.editorial-system .editorial-gallery .eyebrow { border-color: currentColor; }
/* The clip's height sets the phone's size; the stage is the phone-shaped
   window (main.css), so height alone sizes it through its aspect ratio. */
.editorial-system .editorial-gallery .showcase-stage { height: min(46vh, 520px); width: auto; max-width: 100%; margin: auto; }
.editorial-system .editorial-gallery:where(.pesito-vh-frozen) .showcase-stage { height: min(calc(var(--frozen-vh) * 46), 520px); }
.editorial-system .editorial-gallery .ed-showcase h2 { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.08; margin-top: 18px; }
.editorial-system .editorial-gallery.is-gallery-active .ed-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
}
.editorial-system .editorial-gallery.is-gallery-active .ed-showcase > * { order: 0; min-width: 0; min-height: 0; }
.editorial-system .editorial-gallery.is-gallery-active .ed-showcase:nth-child(2) { grid-template-rows: minmax(0, 1fr) auto; }
.editorial-system .editorial-gallery.is-gallery-active .ed-showcase:nth-child(2) .ed-showcase-art { grid-row: 1; }
.editorial-system .editorial-gallery.is-gallery-active .ed-showcase-art { display: flex; justify-content: center; }
.editorial-system .editorial-gallery.is-gallery-active .showcase-stage {
  height: 100%;
  width: auto;
  max-height: 46svh;
  max-width: 100%;
}
.editorial-system .editorial-gallery.is-gallery-active:where(.pesito-vh-frozen) .showcase-stage { max-height: calc(var(--frozen-svh) * 46); }

/* Article, legal, waitlist, comparison and team routes share the same
   chapter framing without rearranging their semantic document order. */
.editorial-system:not(.editorial-home):not(.editorial-faq-page) main > :is(.investor-hero,.page-hero,.legal-hero,.story-hero,.compare-hero) {
  padding-block: 0 var(--editorial-gap);
}
.editorial-system:not(.editorial-home):not(.editorial-faq-page) main > section:first-child .ed-panel--outline {
  min-height: min(620px, 75svh);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: var(--amarillo-500);
  color: var(--ink-fixed);
}
.editorial-system:not(.editorial-home):not(.editorial-faq-page) main > section:first-child .ed-panel--outline:where(.pesito-vh-frozen) { min-height: min(620px, calc(var(--frozen-svh) * 75)); }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child {
  min-height: min(600px, 72svh);
  padding: clamp(28px, 4.5vw, 72px) var(--panel-pad); /* A19: tall block inset kept; inline inset = the panel inset, so the h1 shares the text axis of every panel below (was clamp(28px, 4.5vw, 72px) on all sides, 19-28px inside it) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: var(--amarillo-500);
  color: var(--ink-fixed);
}
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child:where(.pesito-vh-frozen) { min-height: min(600px, calc(var(--frozen-svh) * 72)); }
/* The waitlist masthead sizes to its copy: the page's one action (the
   Google Form card under it) has to land in the first screen, and a
   600px slab of empty amber pushed it below the fold at 390 and 1440. */
.editorial-system.wl-page:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child { min-height: 0; }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child :is(h1,p,.eyebrow,.caption,.body-l) { color: inherit; }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child h1 { font-size: clamp(36px, 4.8vw, 72px); }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child .eyebrow { border-color: currentColor; }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child :is(.how-crumb, p a:not(.btn)),
.editorial-system:not(.editorial-home):not(.editorial-faq-page) main > section:first-child .ed-panel--outline :is(.how-crumb, p a:not(.btn)) { color: var(--ink-fixed); }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) main > section:first-child .ed-panel--outline :is(h1,p,.eyebrow) { color: inherit; }
/* The amber hero is a FIXED fill: it is the same amber in both themes.
   Everything inside it (inline breadcrumbs, ghost buttons, the
   pre-launch note, chips) is written against themed tokens, which
   flipped to bone in dark mode and landed at 1.0–1.9:1 on amber.
   Pinning the hero to the light scheme makes every light-dark() token
   inside it resolve to its light value, so the whole island reads the
   same in both themes without restating each child. Muted gray is
   raised a step because tinta-500 is only 3.5:1 on amber at body size. */
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child,
.editorial-system:not(.editorial-home):not(.editorial-faq-page) main > section:first-child .ed-panel--outline {
  color-scheme: light;
  --tinta-500: var(--tinta-700);
  --note-ink: var(--ink-fixed);
}
.editorial-system:not(.editorial-home):not(.editorial-faq-page) main > section:first-child .ed-panel--outline h1 { font-size: clamp(36px, 5.3vw, 80px); }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .investor-section { padding-block: clamp(28px, 4vw, 60px); border: 0; border-radius: var(--panel-radius); }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .banda { margin: var(--editorial-gap) var(--editorial-gutter); width: auto; }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .banda { margin: 0; }
/* A question list is one readable component, not a field of oversized
   pills. The homepage presents six essentials beside its introduction. */
.editorial-system .faq-list,
.editorial-system .ed-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  border: var(--panel-border);
  border-radius: 20px;
  background: var(--hueso);
  overflow: hidden;
}
.editorial-system .faq-list.banda-interior { padding: 0; }
.editorial-system .faq-item {
  min-width: 0;
  border: 0;
  border-bottom: var(--panel-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  scroll-margin-top: 108px;
}
.editorial-system .faq-item:last-child { border-bottom: 0; }
.editorial-system .faq-item:hover,
.editorial-system .faq-item[open]:hover { transform: none; box-shadow: none; }
.editorial-system .faq-item[open] { background: var(--papel-carta); border-color: var(--frame-ink); }
.editorial-system .faq-item summary {
  min-height: 64px;
  padding: 18px 22px;
  gap: 14px;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.018em;
}
.editorial-system .faq-item summary::after {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 400;
}
.editorial-system .faq-item summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -5px; }
.editorial-system .faq-item summary .icon-bubble { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; }
.editorial-system .faq-item summary .icon { width: 20px; height: 20px; }
.editorial-system .faq-answer {
  max-width: 60ch;
  padding: 0 22px 24px;
  color: var(--tinta-700);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  animation-duration: 180ms;
}
.editorial-system .faq-answer p + p { margin-top: 10px; }
.editorial-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  align-items: start;
  gap: clamp(28px, 5vw, 72px);
}
.editorial-faq-intro { min-width: 0; }
.editorial-faq-intro :is(h2, .ed-bar-title) {
  margin: 0;
  font: 400 clamp(32px, 3.6vw, 54px)/1.08 var(--font-black);
  letter-spacing: -.035em;
}
.editorial-faq-intro > p { max-width: 34ch; margin: 20px 0 0; font-size: 16px; line-height: 1.5; }
.editorial-faq-actions { margin-top: 24px; }
.editorial-system .editorial-faq-layout .faq-list { max-width: none; margin: 0; }

/* Captions stay outside the table's visual frame. Round the corner
   cells instead of clipping the table (which also clips its caption). */
.editorial-system .fee-ladder {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  color: var(--tinta-900);
}
.editorial-system .fee-ladder caption {
  padding: 0 0 12px;
  color: var(--tinta-700);
  font: 500 13px/1.5 var(--font-body);
  text-align: left;
}
.editorial-system .fee-ladder :is(th, td) {
  padding: 14px 16px;
  border: 0;
  border-bottom: var(--panel-border);
  background: var(--papel-carta);
  color: var(--tinta-900);
  font-size: 15px;
  line-height: 1.4;
  vertical-align: middle;
  box-shadow: none;
}
.editorial-system .fee-ladder tr > :first-child { border-left: var(--panel-border); width: 30%; }
.editorial-system .fee-ladder tr > :last-child { border-right: var(--panel-border); text-align: right; }
.editorial-system .fee-ladder thead th {
  border-top: var(--panel-border);
  background: var(--tinta-900);
  color: var(--hueso);
  font-size: var(--fs-eyebrow); /* 12px, the phone step (was 11px); NAH keeps 11px below */
  letter-spacing: .035em;
  overflow-wrap: normal;
}
.editorial-system .fee-ladder thead th:first-child { border-top-left-radius: 14px; }
.editorial-system .fee-ladder thead th:last-child { border-top-right-radius: 14px; }
.editorial-system .fee-ladder tbody tr:last-child > :is(th, td) { border-bottom: var(--panel-border); }
.editorial-system .fee-ladder tbody tr:last-child > :first-child { border-bottom-left-radius: 14px; }
.editorial-system .fee-ladder tbody tr:last-child > :last-child { border-bottom-right-radius: 14px; }
.editorial-system .fee-ladder tr[data-capped] > :is(th, td) { background: var(--hueso-100); }
.editorial-system .fee-ladder tr[aria-current="true"] > :is(th, td) { background: var(--verde-100); box-shadow: none; }
.editorial-system .fee-ladder tr[aria-current="true"] > th { box-shadow: inset 3px 0 0 var(--verde-700); }
.editorial-system .fee-ladder .fee-ladder-tag {
  margin-top: 3px;
  font: 500 10px/1.3 var(--font-body);
  letter-spacing: .02em;
  opacity: 1;
  color: var(--tinta-700);
}
.editorial-system .carta:has(> .fee-ladder) { min-width: 0; }
.editorial-system .carta:has(> .fee-ladder) > .eyebrow { align-self: flex-start; width: auto; }
.editorial-system .carta:has(> .fee-ladder) > h3 { max-width: 24ch; line-height: 1.12; }
/* The FAQ's two-column fee and license tables are prose, not numeric
   matrices. Allow translated row labels to wrap inside the answer. */
.editorial-faq-page .rec-table { width: 100%; max-width: 100%; table-layout: fixed; }
.editorial-faq-page .rec-table :is(th, td) { white-space: normal; overflow-wrap: anywhere; }
.editorial-faq-page .rec-table tr > :first-child { width: 44%; }
.editorial-faq-page .rec-table tr > :last-child { padding-inline-end: 0; }
.editorial-system .gallery-device,
.editorial-system .how-device-wrap { max-width: 100%; }

/* Bold phrases and inline links stay in the same sentence. Flex made
   each fragment a separate column and forced translated roadmap lists
   beyond their card at narrow widths. */
.editorial-system .roadmap-list { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.editorial-system .roadmap-list > li {
  display: block;
  position: relative;
  min-width: 0;
  padding-inline-start: 19px;
  overflow-wrap: anywhere;
}
.editorial-system .roadmap-list > li::before { position: absolute; inset-inline-start: 0; top: 7px; margin-top: 0; }

/* Functional FAQ pages use the reference's compact directory hierarchy;
   hero-scale space remains with the narrative pages. */
.editorial-faq-directory {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--editorial-gap);
  align-items: start;
  position: relative;
}
.editorial-faq-directory > * { min-width: 0; }
.editorial-faq-directory > .editorial-faq-directory-content {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.editorial-faq-directory-content > .banda-interior { max-width: none; padding: 0; }
.editorial-system.editorial-faq-page .editorial-faq-directory > .editorial-faq-directory-intro {
  min-height: 0;
  padding: var(--panel-pad); /* A18: one inset with the 'Most asked' .ed-panel and the CTA below it (was clamp(24px, 2.8vw, 40px), a 3-4px step) */
  justify-content: flex-start;
  gap: 0;
}
.editorial-system.editorial-faq-page .editorial-faq-directory-intro h1 {
  font-size: clamp(30px, 3vw, 44px);
  max-width: 18ch;
  margin-top: 16px; /* A18: eyebrow to h1 16px, as on the category pages (was 18px) */
  line-height: 1.08;
}
.editorial-system.editorial-faq-page .editorial-faq-directory-intro .body-l {
  font-size: 15px;
  line-height: 1.55;
}
.editorial-faq-directory-intro > nav:first-child { flex-wrap: wrap; }
.editorial-faq-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.editorial-faq-topics a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 600 13px/1.3 var(--font-body);
  color: var(--tinta-900);
  text-decoration: none;
  transition: background-color 180ms var(--ease-standard), color 180ms var(--ease-standard);
}
.editorial-faq-topics a[aria-current="page"],
.editorial-faq-topics a:hover { background: var(--tinta-900); color: var(--hueso); }
.editorial-faq-topics a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.editorial-faq-page .editorial-faq-directory-content .cartas { grid-template-columns: minmax(0, 1fr); }
.editorial-faq-page .editorial-faq-directory-content .faq-cat {
  min-height: 0;
  padding: 24px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
  text-align: left;
}
.editorial-faq-page .faq-cat .carta-head { display: none; }
.editorial-faq-page .faq-cat > .icon-bubble { width: 38px; height: 38px; grid-column: 1; grid-row: 1 / span 3; margin: 0 !important; }
.editorial-faq-page .faq-cat > .icon-bubble .icon { width: 24px; height: 24px; }
.editorial-faq-page .faq-cat > :is(h2, p, .faq-cat-cta) { grid-column: 2; max-width: none; margin: 0; }
.editorial-faq-page .faq-cat > h2 { font: 400 clamp(21px, 2vw, 28px)/1.15 var(--font-black); letter-spacing: -.025em; }
.editorial-faq-page .faq-cat > p { font-size: 15px; line-height: 1.5; }
.editorial-faq-page .faq-cat .faq-cat-cta { padding-top: 6px; font-size: 13px; }
.editorial-system.editorial-faq-page .ed-wrap > .banda > .banda-interior.carta {
  padding: clamp(20px, 2.5vw, 32px);
}
.editorial-faq-page #faq-most-title { font: 400 clamp(24px, 2.5vw, 34px)/1.15 var(--font-black); letter-spacing: -.025em; }
.editorial-faq-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .65fr);
  gap: 24px 40px;
  align-items: center;
  padding: var(--panel-pad); /* A18: same inset as the intro and 'Most asked' panels (was clamp(24px, 3vw, 40px)) */
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--verde-100);
  color: var(--tinta-900);
}
.editorial-faq-cta-copy { min-width: 0; }
.editorial-faq-cta-copy h2 { max-width: 24ch; margin: 16px 0 0; font-size: clamp(26px, 2.5vw, 38px); color: inherit; }
.editorial-faq-cta-copy > p { max-width: 58ch; margin: 16px 0 0; font-size: 16px; line-height: 1.5; }
.editorial-faq-cta-copy > .eyebrow { margin: 0; }
/* A18: one column of actions pinned to the panel's trailing padding edge (a wrapping row left 2+1 / 1+2 orphans and a
   ragged edge). Each .btn keeps its own width and ends on that edge; only phones (<=767px, below) stretch them, as before. */
.editorial-faq-cta-actions { display: flex; flex-direction: column; align-items: flex-end; justify-self: end; gap: 12px; width: fit-content; min-width: 0; max-width: 100%; }
.editorial-faq-cta-note { grid-column: 1 / -1; max-width: 100ch; margin: 0; font-size: 12px; line-height: 1.55; color: var(--tinta-700); }
.editorial-faq-cta-note > p { margin: 0; }
.editorial-faq-cta-note > p + p { margin-top: 8px; }

/* The signup gateway should read as one action, not an oversized icon
   beside a second, unrelated panel. */
.editorial-system .carta:has(> .wl-gform) {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px);
}
.editorial-system .carta:has(> .wl-gform) > .carta-aside { width: 72px; min-height: 0; padding: 0; margin: 0; }
.editorial-system .carta:has(> .wl-gform) .wl-plate { width: 72px; height: 72px; margin: 0; border-radius: 20px; }
.editorial-system .carta:has(> .wl-gform) .wl-plate .icon { width: 32px; height: 32px; }
.editorial-system .carta .wl-gform { min-width: 0; max-width: 70ch; padding: 0; text-align: left; }
.editorial-system .wl-gform h2 { margin: 0; font-family: var(--font-black); font-size: clamp(26px, 2.5vw, 38px); color: var(--tinta-900); }
.editorial-system .wl-gform > p:not(.wl-gform-hint) { margin: 0; font-size: 16px; line-height: 1.5; }
.editorial-system .wl-gform > .btn { margin-top: 4px; }
.editorial-system .wl-gform-hint { margin: 0; font-size: var(--fs-caption); line-height: 1.5; }
@media (min-width: 960px) {
  .editorial-faq-page .editorial-faq-directory { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .editorial-faq-page .editorial-faq-directory > .editorial-faq-directory-intro { grid-column: 1; grid-row: 1; position: sticky; top: 88px; } /* A18: equals main's 88px top padding, so the intro starts level with the content column (was 100px, 12px low) */
  .editorial-faq-page .editorial-faq-directory > .editorial-faq-directory-content { grid-column: 2; grid-row: 1; }
  .editorial-system .hiw-step--rev > :first-child { order: 2; }
}
@media (min-width: 1280px) and (min-height: 540px) {
  .editorial-faq-page .editorial-faq-directory > .editorial-faq-directory-intro { top: var(--editorial-gutter); } /* level with the rail's top edge and main's top padding (23.04px at 1440, 24px at 1844) */
}
@media (min-width: 960px) and (max-height: 699px) {
  .editorial-faq-page .editorial-faq-directory > .editorial-faq-directory-intro { position: relative; top: auto; }
}

@media (max-width: 767px) {
  .editorial-faq-cta { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .editorial-faq-cta-actions { flex-direction: column; align-items: stretch; justify-self: stretch; width: auto; } /* A18: full-width stack on phones */
  .editorial-system .carta:has(> .wl-gform) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .editorial-faq-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .editorial-faq-intro > p { max-width: 46ch; margin-top: 14px; }
  .editorial-faq-actions { margin-top: 18px; }
  .editorial-system .faq-item summary { padding: 16px; gap: 10px; }
  .editorial-system .faq-answer { padding: 0 16px 20px; font-size: 16px; }
  .editorial-system .fee-ladder :is(th, td) { padding: 12px 10px; font-size: 14px; }
  .editorial-system .fee-ladder thead th { font-size: var(--fs-eyebrow); letter-spacing: .02em; } /* 12px, the eyebrow step (was 11px) */
}
@media (max-width: 380px) {
  .editorial-system .fee-ladder :is(th, td) { padding: 12px 7px; font-size: 13px; }
  /* 11px floor, never 10px. break-word (not anywhere, so column sizing is
     unchanged) lets a word longer than its column wrap instead of being
     clipped by the wrapper: NAH "Mochanehcahuan" at 320. */
  .editorial-system .fee-ladder thead th { font-size: 11px; letter-spacing: .01em; overflow-wrap: break-word; }
}
.editorial-system .ed-footer { padding: 0 var(--editorial-gutter); }
.editorial-system .ed-footer-paper { border: 0; border-radius: 0; margin-top: 40px; padding-top: 32px; }
.editorial-system .ed-footer-wordmark { font-size: clamp(80px, 18vw, 300px); letter-spacing: -.025em; line-height: .95; padding-block: 52px 32px; }
.editorial-system .ed-footer .footer { background: var(--hueso); border-top: var(--panel-border); }
.editorial-system .ed-footer .footer-cols { gap: 28px; }
/* Footer column heads are small capitals like the eyebrow, so they track
   open like it (.06em) instead of the -.025em display tightening. */
.editorial-system .ed-footer .footer-col :is(h3, h4) { letter-spacing: .06em; }
.editorial-system .ed-footer-grid { --grid-cell: 40px; }

@media (max-width: 1049px), (max-height: 649px) {
  .editorial-home .ed-grid--hero h1 { font-size: clamp(34px, 5vw, 56px); }
}
@media (max-width: 640px) {
  body.editorial-system { --panel-radius: 24px; --panel-radius-sm: 16px; --panel-pad: 24px; }
  .editorial-system main { padding-top: 88px; }
  .editorial-system .ed-grid--split, .editorial-system .ed-grid--thirds { grid-template-columns: minmax(0, 1fr); }
  .editorial-home .ed-grid--hero > .ed-hero-copy { padding: 28px 20px 32px; }
  .editorial-home .ed-grid--hero h1 { font-size: clamp(34px, 8.4vw, 48px); margin-top: 20px; }
  .editorial-home .ed-grid--hero .hero-sub { font-size: 16px; }
  .editorial-home .ed-grid--hero .hero-ctas { flex-direction: column; align-items: stretch !important; }
  /* The hero eyebrow on the two primary pages (home and pricing) shares
     one phone treatment: 11px, the site's small-label floor (was 10px on
     the homes, 12px on pricing), tracking .05em and 8px side padding so
     the EN line holds one row from 360px (292px against 294px). A string
     that wraps centres its lines in a 16px-radius label, which still
     draws a one-line eyebrow as a full pill. */
  .editorial-home .ed-grid--hero .eyebrow,
  .editorial-system .ed-wrap > .ed-grid:first-child:has(> :is(.smx-calc, .ed-calc-panel)) > .ed-panel > .eyebrow { font-size: 11px; letter-spacing: .05em; padding: 7px 8px; border-radius: 16px; line-height: 1.4; text-align: center; }
  .editorial-home .ed-grid--hero .ed-media-tag { max-width: calc(100% - 32px); }
  .editorial-hero-support { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); }
  .editorial-hero-support .hero-store-row { flex-wrap: wrap; }
  .editorial-home .ed-chips.cartas--4up { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .editorial-home .ed-chips.cartas .carta { padding: 20px 16px; }
  .editorial-home .ed-chips.cartas .carta-dato-label { font-size: 13px; overflow-wrap: anywhere; }
  .editorial-system .ed-bar { min-height: 82px; padding: 20px 16px; }
  .editorial-system .ed-bar-arrows { display: inline-flex; }
  .editorial-system .ed-bar-arrows svg { width: 12px; height: 22px; }
  .editorial-system .ed-bar-arrows svg + svg { display: none; }
  .editorial-system .ed-bar h2 { font-size: 22px; }
  .editorial-system .carta { --carta-pad-x: 24px; --carta-pad-top: 24px; --carta-pad-bottom: 24px; } /* A12: padding follows the tokens */
  .editorial-system .ed-footer-wordmark { padding: 52px 0 28px; }
  .editorial-system:not(.editorial-home):not(.editorial-faq-page) main > section:first-child .ed-panel--outline { min-height: 450px; }
  /* One phone H1 step for every inner masthead (it ranged 30-38px by
     template): 34px at 390, the home hero's phone size, easing to 28px
     at 320 so "uncomfortable" still fits the 246px column. Nahuatl
     compounds ("timitzpalehuican?" is 316px at 34px) take a smaller
     curve that holds them from 320. The last three selectors restate
     the template rules they override (up to (0,6,1)). */
  .editorial-system:not(.editorial-home) main h1,
  .editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child h1,
  .editorial-system:not(.editorial-home):not(.editorial-faq-page) main > section:first-child .ed-panel--outline h1,
  .editorial-system.editorial-faq-page .editorial-faq-directory-intro h1 { font-size: clamp(28px, 8.7vw, 48px); }
  .editorial-system:not(.editorial-home) main h1:lang(nah),
  .editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-panel:first-child h1:lang(nah),
  .editorial-system:not(.editorial-home):not(.editorial-faq-page) main > section:first-child .ed-panel--outline h1:lang(nah),
  .editorial-system.editorial-faq-page .editorial-faq-directory-intro h1:lang(nah) { font-size: clamp(24px, 7.6vw, 48px); }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-system .ed-rail-num > span { transition: none; transform: none; }
}

/* Incoming translated FAQ pages use the same bounded answer column. */
.editorial-system .editorial-faq-directory-content > .faq-list { margin: 0; max-width: none; }

/* Alignment pass (2026-09-22): faq */

/* A1 · FAQ question rows. main.css gives `.faq-item summary` a flex row with
   `justify-content: space-between` over three items (icon, question, trailing
   mark), which floated each question into the middle of its row: questions in
   one list started up to 227px apart at 1440 (315px at 1844, 70px at 390).
   Pack the row from the start and let the question take the free space, so
   every question starts one gap after its icon and the mark stays on the
   trailing edge. */
.editorial-system .faq-item summary { justify-content: flex-start; }
.editorial-system .faq-item summary > .faq-q { flex: 1 1 auto; min-width: 0; text-align: start; }

/* A1 · Geometric plus. The '+' glyph's ink sat 3.5px below the question's
   cap-height centre (the glyph rides low in its em box). Two centred 2px bars
   sit on the row's centre line instead, the same line as the icon bubble.
   `margin-inline-start: auto` keeps the mark on the trailing edge in summaries
   that have no .faq-q (homepages, how-it-works, send-money, vs pages,
   sin-cuenta). main.css `.faq-item[open] summary::after { transform:
   rotate(45deg) }` still turns it into an x about the same centre. An empty
   `content` also drops the stray "+" from each summary's accessible name. */
.editorial-system .faq-item summary::after {
  content: "";
  flex: 0 0 24px;
  margin-inline-start: auto;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* A1 · Forced colours remove gradient backgrounds from any element that does
   not opt out. `.faq-item` already opts out in main.css's forced-colors block
   (inherited here); restating it on the mark keeps the plus visible if that
   block changes. The bars stay currentColor, the question's own ink. */
@media (forced-colors: active) {
  .editorial-system .faq-item summary::after { forced-color-adjust: none; }
}

/* A1 · From 768px the answer starts on the question's column (22px summary
   padding + 30px icon + 14px gap) instead of under the icon. Below 768 the
   answer keeps the full row width for reading. Rows without an icon
   (homepages, vs pages) are untouched. */
@media (min-width: 768px) {
  .editorial-system .faq-item:has(> summary > .icon-bubble) > .faq-answer { padding-inline-start: calc(22px + 30px + 14px); }
}

/* A1 · 'Most asked' rows (main.css .faq-hub-most-item) had the same
   space-between: each question sat up to 57px (390) and 274px (1844) past
   its intended 16px gap from the icon. */
.editorial-system .faq-hub-most-item { justify-content: flex-start; }
.editorial-system .faq-hub-most-item > .faq-q { flex: 1 1 auto; min-width: 0; text-align: start; }

/* A18 · Category card bubble. The 38px bubble spans grid rows 1-3 from the top,
   so it hung 7.5px below the title line at 390 and 3px at 1440. Lower the
   title by half the difference between the bubble and one title line, so the
   title's first line centres on the bubble for one- and two-line titles alike
   (NAH wraps at 390) and the text below moves only 7px (390) / 3px (1440).
   The em fallback equals 1lh because the title's line-height is 1.15.
   (0,3,1) outranks the (0,3,0) `margin: 0` on `.faq-cat > :is(h2, p, .faq-cat-cta)`. */
.editorial-system.editorial-faq-page .faq-cat > h2 {
  margin-block-start: max(0px, calc((38px - 1.15em) / 2));
  margin-block-start: max(0px, calc((38px - 1lh) / 2));
}
/* On phones the bubble sits above the title instead of in a 38px
   column beside it, so the copy takes the card's full width (262px at
   390, about 35 characters, rose to the full column). The title needs no
   centring offset once it is not beside the bubble. */
@media (max-width: 640px) {
  .editorial-faq-page .editorial-faq-directory-content .faq-cat { grid-template-columns: minmax(0, 1fr); }
  .editorial-faq-page .faq-cat > .icon-bubble { grid-row: auto; }
  .editorial-faq-page .faq-cat > :is(h2, p, .faq-cat-cta) { grid-column: 1; }
  .editorial-system.editorial-faq-page .faq-cat > h2 { margin-block-start: 4px; }
}

/* A18 · Topic chips. The four pills wrapped 3+1 at 1440 in EN ('On the record'
   alone, 1.4px short) and 2+1+1 or 3+1 in the other locales. From 960 they form
   a 2x2 grid of equal cells. `stretch` keeps a row's pills one height when a
   translated label needs two lines (ES/PT/FR/NAH at 960-1279, NAH at 1440),
   and `balance` evens those two lines. Below 960 the wrapping row is left as
   it is. */
@media (min-width: 960px) {
  .editorial-faq-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .editorial-faq-topics a { justify-content: center; text-align: center; text-wrap: balance; }
}

/* A18 · Hub intro rhythm. main.css's legacy `.faq-hub-crumb { margin-bottom:
   24px }` stacked on each hub's own 20px spacer, so the hub crumb sat 44px
   above the eyebrow (24px on the category pages); and `.faq-hub-lede
   { margin-top: 24px }` made h1 to lede 24px on the EN/PT/FR hubs against 16px
   on the category pages. The hubs' inline spacer is now 24px and every
   intro lede sits 16px under its h1 (markup), so hub and category intros
   share one rhythm in all five locales. */
.editorial-faq-directory-intro .faq-hub-crumb { margin-bottom: 0; }
.editorial-faq-directory-intro .faq-hub-lede { margin-top: 16px; }

/* Alignment pass (2026-09-22): articles */

/* A2. <article> wrappers inside .ed-wrap: /en/send-money-to-mexico and its
   FR/PT mirrors, the five "what is Puente Railway" pages and both data
   rooms. The band resets above match only `.ed-wrap > .banda`, so bands one
   level down keep the gutter margin from
   `.editorial-system:not(.editorial-home):not(.editorial-faq-page) .banda`
   (0,4,0), their chapter padding and the 2px rule. article.container also
   adds 24px and a 1440px cap. Making the article a flex column with the page
   gap puts its children on the .ed-wrap column: x172-1417 at 1440, 12-378 at
   390 and 174-1820 at 1844. Specificity (0,3,1). */
.editorial-system .ed-wrap > article:not(.ed-panel) {
  display: flex;
  flex-direction: column;
  gap: var(--editorial-gap);
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}
/* A2. Bands inside that article get the foreground contract of
   `.ed-wrap > .banda`, no bleed and no seam. (0,4,1) beats the (0,4,0) gutter
   rule and `.banda + .banda`. */
.editorial-system .ed-wrap > article:not(.ed-panel) > .banda {
  --banda-ink: var(--tinta-900);
  --banda-ink-quiet: var(--tinta-700);
  --regla-tinta: var(--frame-ink);
  --banda-bleed: 0px;
  --banda-costura: 0px;
  margin: 0;
  width: auto;
}
/* A2. A band that wraps panels (send-money chapters, data room) goes
   transparent, like `.ed-wrap > .banda`. Its panels then span the hero width,
   and the chapters sit 22px apart (12px at 390). */
.editorial-system .ed-wrap > article:not(.ed-panel) > .banda:has(> .banda-interior) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.editorial-system .ed-wrap > article:not(.ed-panel) > .banda > .banda-interior { padding: 0; max-width: none; }
/* A2. A band that holds bare prose (the Puente pages) becomes a framed
   panel, so its text sits on the panel text axis: 216.3 at 1440, 37 at 390,
   219 at 1844. */
.editorial-system .ed-wrap > article:not(.ed-panel) > .banda:not(:has(> .banda-interior)) {
  padding: var(--panel-pad);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
}
/* A2. The legacy .section / .legal-main bottom padding (72-128px) stacked on
   the footer's 40px, which left a 112-182px gap. The rule applies only when a
   footer follows <main>: both data rooms and /en/privacy have no footer, so
   they keep their padding. (0,4,1) beats .section and .legal-main. */
.editorial-system main:is(.section, .legal-main):has(> .ed-wrap):has(~ :is(.cta-footer-wrap, .ed-footer)) { padding-bottom: 0; }

/* A3. Nested .container / .container-inner in the editorial column: the help
   pages in five locales, /en/licenses, /en/terms, /en/privacy, the data rooms,
   the Puente pages, the compare band on the vs templates, and
   /sin-cuenta-bancaria. main.css gives them `padding: 0 24px` and a max-width
   (1440px via `.editorial-system .container`, 1040px for -inner). That adds
   a second gutter, puts /en/help and /ayuda 102px apart at 1440, and at 1844
   pushes the column 127px (/en/help) to 327px (/ayuda) in from x=174.
   .container.reading is included on purpose: `.editorial-system .container`
   (0,2,0) already overrides .reading's 640px, so it never had a reading
   measure. Bare .reading columns keep their 640px, centred. The nav's
   .container.nav-inner and the footer's .container sit outside these
   parents. (0,4,0) */
.editorial-system:not(.editorial-home) .ed-wrap > :is(.container, .container-inner),
.editorial-system:not(.editorial-home) .banda-interior > :is(.container, .container-inner) {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
/* Reading measure for the long prose that A3's full-width column left at
   108-122 characters a line at 1440: the terms and privacy body (lede,
   paragraphs, lists, heads, callouts), the team lede and the team bios.
   The legal column is one 38rem (608px) edge for every block, so the
   lede, paragraphs, lists and callouts end on one line (62-75
   characters); the team lede and bios take 35em. The face's `ch` is
   wide (68ch still set 87-89 characters). The EN panel centres the
   column, H1 included (below). Phones are already narrower. */
.editorial-system .legal-body .ed-panel > :is(.body-l, p, ul, ol, h2, h3, .legal-callout) { max-width: 38rem; }
/* The EN terms and privacy frame that column in a full-width panel, which
   left ~550px of empty panel to its right at 1440. The panel's inline
   padding now centres one 38rem column (crumb, eyebrow and H1 included),
   the axis /terminos and /privacidad already sit on; phones keep the
   panel inset, since the calc goes negative there. */
.editorial-system .legal-body .ed-panel { padding-inline: max(var(--panel-pad), calc((100% - 38rem) / 2)); }
.editorial-system .investor-hero .body-l,
.editorial-system .team-card-body,
.editorial-system .team-card > .team-bio { max-width: 35em; }

/* A16. The send-money hero copy panel centres vertically beside the
   calculator, as `.ed-wrap > .ed-panel:first-child` does for single-panel
   heroes. The copy sat on the top padding with up to 224px more space below
   it than above (ES at 1440); both sides are now equal. The rule is scoped to
   calculator heroes, because the FR/PT/NAH waitlist heroes have the same
   selector shape and must not move. The calculator panel keeps its own flex
   centring. flex-start keeps pills and buttons at their own width. */
.editorial-system:not(.editorial-home):not(.editorial-faq-page) .ed-wrap > .ed-grid:first-child:has(> :is(.smx-calc, .ed-calc-panel)) > .ed-panel:not(.ed-panel--media, .smx-calc, .ed-calc-panel) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
/* A16. The 62ch and 70ch reading columns centre under the centred bar title,
   and their text stays left-aligned. Only in panels with no heading or loose
   paragraph of their own: the ES/NAH "Lo que Pesito no hace" panel (its own
   start-aligned h2) and the ES/NAH fee panel (its 70ch caption is set in a
   smaller type, so it could not share the centred edge) keep one left axis. */
.editorial-system .ed-panel:not(:has(> :is(h2, h3, p:not(.prose-col)))) > :is(.smx-prose, .prose-col) { margin-inline: auto; }
/* A16. main.css `.faq-list { margin-top: 48px }` stacked on the bar margin and
   the gap, leaving 92px between the bar and its list. */
.editorial-system:not(.editorial-home) :is(.banda-interior > .faq-list:first-child, .ed-bar + .faq-list) { margin-top: 0; }
/* A16. A bar belongs to the block it titles: 44px above it (24px at 390),
   22px (12px) down to its block. On how-it-works the bar is an .ed-wrap child.
   On send-money it opens a `.banda-interior.ed-grid`, and its top margin stays
   inside the band. Roadmap bars (in block band interiors) are not matched. */
.editorial-system:not(.editorial-home) :is(.ed-wrap > .ed-bar, .banda-interior.ed-grid > .ed-bar:first-child) { margin-block: var(--editorial-gap) 0; }

/* A20. The related band ran edge to edge in <main> (x149-1440, square
   corners). It is now framed on the band column (172-1417, 12-378, 174-1820),
   and its heading sits on the panel text axis. */
.editorial-system main > .related-searches {
  margin: 0 var(--editorial-gutter);
  padding: var(--panel-pad);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
}
/* A20. The crema section on /en/vs/cash-app and /en/vs/venmo. It sits on
   the page column (12-378, 172-1417, 174-1820), like the related band and
   the footer; the legacy .article-col/.reading columns on these templates
   move there too (see "Alignment pass: verification fixes"). */
.editorial-system main > section.section[style*="background"] {
  width: auto;
  margin-inline: var(--editorial-gutter);
  padding: var(--panel-pad);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
}
.editorial-system main > :is(.related-searches, section.section[style*="background"]) > .container { max-width: none; padding-inline: 0; }
/* A20. Chips in one row share a height (they were 51px beside 76px). */
.editorial-system .related-searches li a { height: 100%; display: flex; align-items: center; }
/* A20. On the left-aligned templates (cash-app, venmo, sin-cuenta) the
   accordion takes the column instead of a centred 960px block, so it starts
   on its heading's left edge. (0,3,0) beats (0,2,0). */
.editorial-system :is(.article-col > .faq-list, .banda-cabecera--izquierda ~ .faq-list) { max-width: none; margin-inline: 0; }
/* A20. Stacked cartas outside a grid get the panel gap (/sin-cuenta-bancaria
   had 0px). */
.editorial-system :is(.container, .banda-interior):not(.ed-grid, .cartas) > .carta + .carta { margin-top: var(--panel-gap); }
/* A20. On /en/licenses, `h2.title.carta-title` rendered at 39.7px because
   `.title` beat the carta title scale; it is 21.6px everywhere else. Narrowed
   to `.title.carta-title`: the planned `.carta > .carta-title` (0,3,0) also
   caught the FAQ category titles (`.editorial-faq-page .faq-cat > h2`,
   21-28px) and the homepage, waitlist, help and guide-link titles. */
.editorial-system .carta > .title.carta-title { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.15; }

/* A27. The comparison caption row and footnote sit on the cell text edge
   (cells pad 8px inline). Table mode only: at 640px card width and below
   (main.css `@container fx-card (max-width: 640px)`) the rows become bordered
   cards, and the caption already sits on the card edge. */
@container fx-card (width > 640px) {
  .editorial-system .fx-compare-standalone :is(.fx-compare-head, .fx-compare-foot) { padding-inline: 8px; }
}
/* A27. Related-guide rows share one height (they were 168px and 144px at
   1440). Multi-column layouts only: in the single column at 600px and below,
   equal rows would pad one-line cards up to the tallest. */
@media (min-width: 601px) {
  .editorial-system .guias-cartas { grid-auto-rows: 1fr; }
}
/* A27. The guides heading centres over its centred card titles. */
.editorial-system .ed-panel:has(> .guias-cartas) > h2 { text-align: center; }

/* Alignment pass (2026-09-22): pricing */
/* Items A4, A5, A7, A15. Companion in-place edits (the EN chip block in
   this file, and markup on the vs, no-tax, send-money and homepages) are
   listed in pricing-inplace.md; every rule below is safe without them. */

/* A4 · Comparison tables. main.css styles only `tbody td`, so the
   planned-pricing tables' row headers (<th scope="row">) kept the UA th
   style: centred, 1px padding, middle-aligned, no row rule. */
.editorial-system .compare-table tbody th[scope="row"] {
  text-align: start;
  vertical-align: top;
  padding: 16px 8px 16px 0;
  font-weight: 600;
  border-bottom: 1px solid var(--hairline);
}
/* A4 · Heads carry the cells' 8px inline padding so each head sits on its
   column's text edge (main.css pads heads 12px 0 and cells 16px 8px).
   (0,2,2) beats main's (0,1,2). The first column stays flush. */
.editorial-system .compare-table thead th { padding: 12px 8px; }
.editorial-system .compare-table thead th:first-child { padding-inline-start: 0; }
@media (max-width: 720px) {
  /* A4 · In the stacked-card variant the row header is the card title.
     main.css stacks only `td`, which left the th a centred table-cell. */
  .editorial-system .compare-table--cards tbody th[scope="row"] {
    display: block;
    width: 100%;
    padding: 12px 0 10px;
    font-size: var(--fs-body-l);
    font-weight: 700;
  }
}

/* A5 · Calculator breakdown rows. main.css makes each row a space-between
   flex row with no gap, so a wrapped value touched its label and the
   value edges were ragged. The key takes the free space; the value hugs
   the trailing edge. The value is capped at half the row (not 60%) so the
   key never drops to a one-word column. */
.editorial-system .fx-result-row { column-gap: 16px; }
.editorial-system .fx-result-row > .fx-result-key { flex: 1 1 0; min-width: 0; }
.editorial-system .fx-result-row > .fx-result-val { flex: 0 1 auto; max-width: 50%; text-align: end; }
/* A5 · `.fx-card` is the `fx-card` inline-size container (main.css). On a
   narrow card the pair stacks instead of squeezing both columns. 420px,
   not 360px: the card is 366px at 1024 and 400px at 1280, where side by
   side the keys still broke into three to five lines. */
@container fx-card (max-width: 420px) {
  .editorial-system .fx-result-row { flex-direction: column; align-items: flex-start; row-gap: 2px; }
  .editorial-system .fx-result-row > .fx-result-val { max-width: none; text-align: start; }
}

/* A7 · Stat cards outside the EN chip grid. main.css centres their
   content (`justify-content: center`), so a label that wraps one more
   line lifted its figure above the row's other figures (8-17px steps).
   The same cards become inline-size containers so their figure can be
   sized to the card (below). The :not(.ed-chips) guard keeps both off
   the EN chips: flex-start would collapse their grid layout, and any
   layout containment (container-type) disables their subgrid. */
.editorial-system :not(.ed-chips) > .carta.carta--dato { justify-content: flex-start; container-type: inline-size; }
/* A7 · The figure was sized from the viewport, so on a narrow 4-up card
   it overran the padding and was clipped by the border (/en/roadmap at
   1280 and 1440). Capped at 22% of the card's content width: the widest
   figures ("$173.7B", "730,000") set at about 4.5em. (0,3,0); the EN
   chips keep their own (0,4,0) size. */
.editorial-system .carta--dato .carta-dato { font-size: min(clamp(36px, 4.4vw, 56px), 22cqi); }
/* A7 · The send-money fee ladder sets its own figure size in the page
   <style> (.smx-ladder .carta-dato), which the cap above would replace
   (and enlarge). These restate that clamp, capped so the longest rung
   fits its card: at 1280 and 1440 the rungs ran into the padding and FR
   "Envoyez $100," was clipped by the border. The cap is per language
   because the rungs differ in length (measured in em, letter-spacing
   included): FR "Envoyez $100," 7.49, PT "Envie $2,000," 7.05, EN
   "Send $100," 5.86. (0,4,0) and (0,5,0) beat the page rule and the cap
   above. */
.editorial-system .smx-ladder .carta--dato .carta-dato { font-size: min(clamp(26px, 2.4vw, 38px), 13cqi); }
.editorial-system .smx-ladder:lang(pt) .carta--dato .carta-dato { font-size: min(clamp(26px, 2.4vw, 38px), 14cqi); }
.editorial-system .smx-ladder:lang(en) .carta--dato .carta-dato { font-size: min(clamp(26px, 2.4vw, 38px), 16.5cqi); }
/* A7 · The note under the / stat cards was 4px under them (inline
   `margin: 4px auto 0`); it takes the panel gap, like EN's note. */
.editorial-home .cartas + .trust-note { margin-top: var(--panel-gap); }

/* A15 · The "Sending from" switch sat directly on the pricing note
   (0px above it, 18px below it). */
.editorial-system * + .region-switch { margin-top: clamp(16px, 1.6vw, 22px); max-width: 100%; }
/* A15 · On a phone both options wrapped to two lines (61px tall) while
   the label kept its one line. The label now takes whatever room the
   options leave (it grows from 0 and never shrinks below its longest
   word), so it wraps onto two short lines first; an option wraps only
   when the label is already at its narrowest. Nothing is clipped by the
   switch's overflow:hidden, and where everything fits (every desktop
   width) the label keeps its one line. A wrapped label centres in its
   cell, clear of the pill's rounded end. (0,2,0) beats main's (0,1,0). */
.editorial-system .region-switch-label { flex: 1 0 0px; justify-content: center; white-space: normal; text-align: center; }
/* A15 · Phones: 8px sides (main: 14px label, 16px options) so both
   options stay on one line (44px) at 360 in ES, EN, PT and FR, and in
   NAH from 390 (its longer label leaves them two lines, 61px, below). */
@media (max-width: 440px) {
  .editorial-system .region-switch-label,
  .editorial-system .region-switch button { padding-inline: 8px; }
}
/* A15 · The amount field was a fixed 5ch, so the currency code floated
   up to 105px after the digits and the underline overshot them. Where
   the field can size to its value it does; the cap fits 5 digits
   (the MXN slider maximum is 50000). Browsers without field-sizing keep
   main's 5ch: a 4ch fallback would clip 50000. */
.editorial-system .fee-calc-amount { gap: 8px; }
@supports (field-sizing: content) {
  .editorial-system .fee-calc-amount input { field-sizing: content; width: auto; min-width: 1ch; max-width: calc(6ch + 4px); }
}
/* A15 · Every ladder column is a money column: one end-aligned edge per
   column. (0,2,1) beats main's `.fee-ladder th, .fee-ladder td` (0,1,1).
   The caption keeps its start alignment. */
.editorial-system .fee-ladder :is(th, td) { text-align: end; }
/* A15 · NAH ladder head. The unbreakable head word "Mochanehcahuan" ran
   past the table's right edge (7.8px at 1280, up to 24px at 960-1160,
   4px at 360-390) once A12 gave the ladder panel the panel inset. The
   table is `table-layout: fixed`, so the head row sets the column widths.
   Ladder fit (2026-09-25). The widest cell in every locale is the
   "family gets" figure ("$35,400.00", "$ 35.400,00", "35 400,00 $"),
   which spilled 3-7px into its padding at 320 and 6-10px at 960 (the
   narrowest desktop table, 321px). Every column is end-aligned, so an
   inner cell's start padding is only the minimum gap to the column
   before it: it drops to 8px (6px on phones, 4px at <=380) while the end
   padding, the visible inset, is unchanged. The first column's start
   padding is the table's outer edge, so it keeps 12px (10px on phones)
   and only drops at <=380. Widths: send 31%, figure 39%, and the fee
   column ("$0.00") takes the rest.
   Heads are 12px at every width (the phone step). NAH stays at the 11px
   floor everywhere: at 12px "MOCHANEHCAHUAN" needs 132px, which a 321px
   table cannot give beside "TICTITLANI" and "ITARIFA". At 11px the word
   needs 121px: its column takes 46.5% (47% on phones), which holds it
   from 370px up, 960 included. Below that it still wraps once
   (break-word on the <=380 heads) rather than running under the
   wrapper's clip. */
.editorial-system .fee-ladder :is(th, td) { padding-inline-start: 8px; }
.editorial-system .fee-ladder tr > :first-child { padding-inline-start: 12px; width: 31%; }
.editorial-system .fee-ladder tr > :last-child { width: 39%; }
.editorial-system .fee-ladder:lang(nah) thead th { font-size: 11px; }
.editorial-system .fee-ladder:lang(nah) thead th:last-child { width: 46.5%; }
@media (max-width: 767px) {
  .editorial-system .fee-ladder :is(th, td) { padding-inline-start: 6px; }
  .editorial-system .fee-ladder tr > :first-child { padding-inline-start: 10px; }
  .editorial-system .fee-ladder:lang(nah) thead th:last-child { width: 47%; }
}
@media (max-width: 380px) {
  .editorial-system .fee-ladder :is(th, td),
  .editorial-system .fee-ladder tr > :first-child { padding-inline-start: 4px; }
  .editorial-system .fee-ladder:lang(nah) thead th:first-child { width: 32.5%; }
  .editorial-system .fee-ladder:lang(nah) thead th:last-child { width: 44%; }
}

/* Alignment pass (2026-09-22): cartas */

/* A12. A panel that is also a carta (the EN #pricing ladder, the
   comparison-page CTA, the roadmap investor panels) takes the panel
   inset, so its text shares the axis of the panels around it.
   `.editorial-system .carta` (0,2,0) was beating `.editorial-system
   .ed-panel` (0,2,0) on source order. The tokens follow the padding so
   any bleed part stays flush. Media cartas keep their own padding. */
.editorial-system .ed-panel.carta:not(.carta--media) {
  --carta-pad-x: var(--panel-pad);
  --carta-pad-top: var(--panel-pad);
  --carta-pad-bottom: var(--panel-pad);
  padding: var(--panel-pad);
}
/* A12. The story photo card (/en/, /pt/, /fr/, /nah/) has no padding
   (the `#story` page rule earlier in this file sets `padding: 0`), but its
   tokens still carried a carta inset (18-24px before, 24-28px with the A12
   in-place edit), so the caption bar bled that far past both sides and
   below the card, and `overflow: hidden` cut the caption off. Zero tokens
   keep the caption inside the card.
   The card is transparent and borderless here, so its 32px corner only
   ever clipped: square it so the caption's first letters, which now sit
   flush with the photo's edge, are not cut by the corner. The photo keeps
   its own 24px radius. */
.editorial-home :is(#story, #historia) .carta {
  --carta-pad-x: 0px;
  --carta-pad-top: 0px;
  --carta-pad-bottom: 0px;
  border-radius: 0;
}

/* A6. List rows. A sentence that ends in an inline <em>, <a>, <code> or
   <abbr> is prose, not the "bold title + secondary line" pattern. main.css
   (`.carta .carta-lista-texto > :first-child:not(:last-child)` and its
   `.lista-icono-texto` twin, both 0,4,0 / 0,3,0) turned the <strong> into a
   block and the trailing <em>/<a> into a 13px block of its own, which broke
   "You would not be buying crypto… / You / would not operate…" (Puente) and
   put "What is Puente Railway →" on its own small line (/en/pesito-vs-
   western-union). These are (0,6,1) and (0,5,1), so they win. */
.editorial-system :is(.carta .carta-lista-texto, .lista-icono-texto):has(> :is(em, i, a, code, abbr):last-child) > :first-child:not(:last-child) {
  display: inline;
  margin: 0;
}
.editorial-system :is(.carta .carta-lista-texto, .lista-icono-texto) > :is(em, i, a, code, abbr):last-child:not(:first-child) {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
/* A6. A bare <li> with no text wrapper (/en/licenses "What we are not")
   must not become a row of flex columns: `display: flex` made each text
   run and each <em> its own column, and at 390 the last column ran past
   the row. Rows that carry a bubble, an svg or a text wrapper stay flex. */
.editorial-system .carta .carta-lista > li:not(:has(> :is(.carta-lista-texto, .icon-bubble, svg))) {
  display: block;
}
/* A6. The row is `align-items: flex-start`, so the first text line sat at
   the top of its bubble (6-7px low on the 32px step bubbles, 12.5px on the
   44px Puente bubbles). Pad the text by half the difference between the
   bubble and one line box so the first line centres on the bubble. */
.editorial-system :is(.carta .carta-lista, .lista-icono) > li > .icon-bubble + :is(.carta-lista-texto, .lista-icono-texto) {
  padding-top: max(0px, calc((44px - 1lh) / 2));
}
.editorial-system :is(.carta .carta-lista, .lista-icono) > li > .icon-bubble--s + :is(.carta-lista-texto, .lista-icono-texto) {
  padding-top: max(0px, calc((32px - 1lh) / 2));
}
.editorial-system :is(.carta .carta-lista, .lista-icono) > li > .icon-bubble--l + :is(.carta-lista-texto, .lista-icono-texto) {
  padding-top: max(0px, calc((56px - 1lh) / 2));
}
/* Phones stack the bubble above the text (main.css, max-width 640px),
   so there is no first line to centre on it. (0,5,1), later in source. */
@media (max-width: 640px) {
  .editorial-system .lista-icono > li > .icon-bubble:is(*, .icon-bubble--s, .icon-bubble--l) + :is(.carta-lista-texto, .lista-icono-texto) { padding-top: 0; }
}
/* A6. A list whose <ul> carries .body-l reads at body-l, like the cartas
   beside it (main.css pins `.carta .carta-lista-texto` to 14px). This lifts
   the comparison-page lists (/en/pesito-vs-remitly, -western-union,
   /en/no-remittance-tax) and also the Puente and /sin-cuenta-bancaria icon
   lists, whose <ul> carries .body-l and whose sibling cartas are 20px. */
.editorial-system .carta .carta-lista.body-l .carta-lista-texto {
  font-size: inherit;
  line-height: 1.5;
}

/* A8. Media labels. Equal 12px insets from the frame's right and bottom
   edges, and a cap on the width, so a long label never reaches the left
   border: the inline <style> rule (0,1,0) on the five homepages anchored
   right and bottom only, which left the pricing label 1px from the left
   border with its first letter cut by the corner at 390. (0,3,0) here,
   later than `.editorial-home .ed-grid--hero .ed-media-tag` (0,3,0), so it
   wins. The 16px radius still draws a one-line label as a pill and keeps
   the first and last letters of a two- or three-line label inside the
   shape. The label's material (background, blur, edge) belongs to the
   Liquid Glass pass, not here. */
.editorial-system .ed-panel--media > .ed-media-tag {
  inset: auto 12px 12px auto;
  width: max-content;
  max-width: min(52ch, calc(100% - 24px));
  padding: 6px 12px;
  font-size: var(--fs-eyebrow); /* 12px: a demo-data disclosure is not set below the label step (was 11px/1.35) */
  line-height: 1.4;
  text-wrap: balance;
  text-align: center; /* a balanced two-line label centres in its pill instead of leaving it hollow on the right */
  border-radius: var(--glass-radius-sm);
}
/* A8. The pricing confirm-sheet panel. `.editorial-system .ed-panel--media
   { padding: 0 }` (0,2,0) cancelled main's `.ed-media--contain` padding, so
   the phone ran from the top border to the bottom border and the label sat
   over its "Swipe to pay" row. The panel gets its inset back, the phone
   steps down to 210px, and the label moves into the flow under the phone,
   centred on it. (0,3,0) and (0,4,0), later than main's (0,2,0) rules. */
.editorial-system .ed-panel--media.ed-media--contain {
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 32px);
}
.editorial-system .ed-panel--media.ed-media--contain .showcase-stage { max-width: 210px; }
.editorial-system .ed-panel--media.ed-media--contain > .ed-media-tag {
  position: static;
  max-width: min(40ch, 100%);
  font-size: var(--fs-caption); /* in flow under the phone, it reads as the clip's caption: 13px */
  text-align: center;
}

/* A13. In a multi-column deck, one title that wraps to two lines pushed
   that card's paragraph 24px below its siblings (/en/ #how, the trust
   grid rows on every homepage, the waitlist promise cards). Each card
   becomes a subgrid of the deck, so every part (header, bubble, title,
   body) shares one row track with the same part of its neighbours: the
   title track is as tall as the tallest title in that visual row, the
   title sits on the bottom of it so it stays attached to its body, and
   every body in the row starts on the same line. A row whose titles all
   fit on one line keeps its height (a reserved 2lh would have added an
   empty line above every title there).
   Only decks whose cards are all plain cartas with the same number of
   parts (three: bubble, title, body; or four: header, bubble, title,
   body), so auto-placement stays one card per column and row. The deck's
   22px gap becomes the subgrid's row gap of 0, and the parts' own margins
   (18 / 14 / 8px) keep the internal rhythm. `justify-items: center`
   replaces the flex column's `align-items: center`. List, stat, wide,
   media, link, interactive and FAQ-category cards are left alone, and so
   are the roadmap phases (their own rule below). From 601px, where these
   decks have two or three columns; below that they are one column. */
@media (min-width: 601px) {
  @supports (grid-template-rows: subgrid) {
    .editorial-system :is(.cartas--3up, .ed-grid--thirds.cartas):not(.roadmap):not(:has(> :not(.carta), > :is(.carta--lista, .carta--dato, .carta--ancha, .carta--media, .carta--enlace, .carta--interactiva, .faq-cat), > .carta > :nth-child(4), > .carta > :last-child:nth-child(-n+2))) > .carta {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
      justify-items: center;
      align-items: start;
    }
    .editorial-system :is(.cartas--3up, .ed-grid--thirds.cartas):not(.roadmap):not(:has(> :not(.carta), > :is(.carta--lista, .carta--dato, .carta--ancha, .carta--media, .carta--enlace, .carta--interactiva, .faq-cat), > .carta > :nth-child(5), > .carta > :last-child:nth-child(-n+3))) > .carta {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
      justify-items: center;
      align-items: start;
    }
    /* The title sits on the bottom of its track, next to its body. Only in
       the subgrid decks above: in a flex column card `align-self` is the
       horizontal axis. */
    .editorial-system :is(.cartas--3up, .ed-grid--thirds.cartas):not(.roadmap):not(:has(> :not(.carta), > :is(.carta--lista, .carta--dato, .carta--ancha, .carta--media, .carta--enlace, .carta--interactiva, .faq-cat), > .carta > :nth-child(4), > .carta > :last-child:nth-child(-n+2))) > .carta > :is(h3, .carta-title):has(+ :is(p, ul, ol, dl)),
    .editorial-system :is(.cartas--3up, .ed-grid--thirds.cartas):not(.roadmap):not(:has(> :not(.carta), > :is(.carta--lista, .carta--dato, .carta--ancha, .carta--media, .carta--enlace, .carta--interactiva, .faq-cat), > .carta > :nth-child(5), > .carta > :last-child:nth-child(-n+3))) > .carta > :is(h3, .carta-title):has(+ :is(p, ul, ol, dl)) {
      align-self: end;
    }
  }
}
/* A13. Roadmap phases (/en/, the locale homepages and every roadmap page)
   carry exactly five parts: head, title, goal, list, metric. A subgrid
   gives each part one shared row, so a one-line title no longer lifts its
   goal and list 21-24px above its neighbours, and the metric rules line
   up even when one metric wraps (20px apart at 1844 before). The phase's
   own 14px flex gap becomes the subgrid's row gap so the internal rhythm
   (30 / 22 / 30px between parts) is unchanged; parts sit at the top of
   their row instead of stretching (a stretched list would spread its
   items), and the metric drops its `margin-top: auto`, which in a grid
   would push a shorter metric to the bottom of the shared row. From 601px,
   where the deck has two or three columns (a third phase that wraps to
   its own row takes the next five rows). */
@media (min-width: 601px) {
  @supports (grid-template-rows: subgrid) {
    .editorial-system .roadmap.cartas--3up > .roadmap-phase:has(> :nth-child(5):last-child) {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 14px;
      align-items: start;
    }
    .editorial-system .roadmap.cartas--3up > .roadmap-phase:has(> :nth-child(5):last-child) > .roadmap-metric {
      margin-top: 0;
    }
  }
}

/* A17. How-it-works step art (/en/how-it-works and the four locale
   mirrors). The caption foot's `margin-top: auto` put all the card's
   slack between the phone and the caption, so the phone hung from the top
   of its frame (0px above it against 67-228px below at 1440). A two-row
   grid centres the phone in the space above the pinned foot, with an
   equal 16px minimum above and below it (the EN/PT/FR pages had 16px
   below and none above; the ES/NAH pages, which lack the inline flex
   gap, let the phone touch the caption rule at 390). The carta's own
   `align-items: center` centres the phone in its row; `justify-items`
   centres it across. (0,3,0) beats the inline page rule (0,1,0). */
.editorial-system .carta.hiw-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  row-gap: 0;
}
.editorial-system .carta.hiw-art > .how-device-wrap { margin-block: 16px; }
.editorial-system .carta.hiw-art > .carta-foot { margin-top: 0; justify-self: stretch; }
/* A17. The ES and NAH captions are a <p>, so `.carta p { max-width: 30ch }`
   (no auto margins) left a 30ch box at the foot's left edge and the
   centred caption sat 141px (1440) / 241px (1844) / 22px (390) off the
   phone's axis. The EN/PT/FR captions are a <span> and never had the cap. */
.editorial-system .carta-foot > p.carta-caption { max-width: none; }

/* Alignment pass (2026-09-22): misc */

/* A9 · Skip link. main.css gives it `z-index: var(--z-toast, 80)`, but the
   rail is 90, the nav capsule 100, the nav sheet 200 and the homepage pixel
   intro 1000, so on focus the rail wordmark (>=1280) or the nav capsule
   (<1280) painted over "Skip to content" on every page: 0 of 9 sample
   points inside the focused link hit it. 1001 puts it above all of them
   (9 of 9). It keeps main's opaque amarillo fill and 2px ink border. */
.editorial-system .skip-link { z-index: 1001; }

/* A14 · Hero eyebrow. The eyebrow is an inline-flex pill with an 8px gap,
   so the region-swap span and the trailing text were two flex items: 8px
   of gap before the first "·" on EN where every other separator has a
   word space (3.7px), and two ragged 2-line columns inside one pill on /,
   /pt/, /fr/ and /nah/ at 1024-1440 and 390. `display: contents` merges
   them into one anonymous text block (scripts/main.js only sets the span's
   textContent, so this is safe), and `nowrap` keeps the "US → MEXICO"
   phrase on one line. Plain wrapping, not balance: the pill keeps its
   max-width when its text wraps, so balanced short lines left 50-150px of
   hollow pill on the right (ES/PT/FR/NAH) and broke before a "·". Wrapped,
   the first line fills the pill (4-28px slack at 1440), no line starts
   with "·", the pill is at most 2 lines from 320 to 1844, and EN (one
   line) does not change. */
.editorial-home .ed-grid--hero .eyebrow > [data-region-swap] { display: contents; white-space: nowrap; }
.editorial-home .ed-grid--hero .eyebrow { max-width: 100%; text-wrap: wrap; }
/* An eyebrow whose phrases sit in .eyebrow-seg spans (joined by
   "&nbsp;· ") wraps only after a separator: never at the hyphen in
   PRE-LAUNCH or inside "LISTA DE ESPERA". `contents` keeps the phrases
   in the pill's one anonymous text block, as for [data-region-swap]. */
.editorial-system .eyebrow > .eyebrow-seg { display: contents; white-space: nowrap; }
/* A14 · A support strip that holds only the store badges (/ and /nah/)
   centres them; `space-between` left them flush left with 850-1279px of
   empty strip beside them. Strips with a disclosure and a note keep
   space-between. */
.editorial-hero-support:has(> :only-child) { justify-content: center; }
/* A14 · The ES hero sits in .banda-interior, not in the gapped .ed-wrap
   column, so its support strip touched the hero (0px). It now takes the
   panel gap like EN/PT/FR/NAH: 22px at 1440, 12px at 390. */
.editorial-home .banda-interior > .ed-grid--hero + .editorial-hero-support { margin-top: var(--panel-gap); }

/* A19 · Team pages (/en/team, /equipo, /pt/equipe, /fr/equipe,
   /nah/equipo) were not on the .ed-wrap panel grid: a 24px .container
   capped at 1440px, bare section headings flush with the card borders,
   and 80-120px section gaps. The sections now sit on the page column
   (172-1417 at 1440, 174-1820 at 1844, 12-378 at 390) as framed panels,
   22px apart (12px at 390), with every heading and card on the panel text
   axis (216.3 / 219 / 37) and 40px to the footer. (0,4,1) beats the
   existing `.investor-section` rule (0,4,0). The narrative hero inset is
   an in-place edit (see misc-inplace.md). */
.editorial-system:not(.editorial-home):not(.editorial-faq-page) main > :is(.investor-hero, .investor-section) { padding-block: 0 var(--editorial-gap); border: 0; }
.editorial-system:not(.editorial-home):not(.editorial-faq-page) main > .investor-section:last-child { padding-bottom: 0; }
.editorial-system main > :is(.investor-hero, .investor-section) > .container { max-width: none; padding-inline: var(--editorial-gutter); }
.editorial-system main > .investor-section > .container {
  width: auto;
  margin-inline: var(--editorial-gutter);
  padding: var(--panel-pad);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
}

/* A21 · Footer. The legacy .container (1440px cap, 24px padding) centred
   the link columns inside the full-bleed paper: at 1844 they started at
   x=301 against panel text at 219, and at 1440 they sat 20px outside the
   panel text axis. The columns, the rule and the mouseprint now start on
   the panel text axis (pad + 1px border): 216.3 at 1440, 219 at 1844,
   206.3 at 1280, 48.1 at 1024, 37 at 390. The giant wordmark moves with
   them. It sat on the old 24px column (0px at <=640, flush with the paper
   edge), so moving only the columns would have opened a 20px step between
   wordmark and columns at 1440. (0,4,0) beats `.editorial-system
   .container` (0,2,0); (0,3,0) beats the wordmark's <=640 `padding: 52px
   0 28px`, and only the inline padding changes. */
.editorial-system .ed-footer .footer > .container {
  max-width: none;
  padding-inline: calc(var(--panel-pad) + var(--panel-border-width));
}
.editorial-system .ed-footer .ed-footer-wordmark { padding-inline: calc(var(--panel-pad) + var(--panel-border-width)); }

/* A22 · An eyebrow in a flex-column panel stretched to the panel width:
   the final CTA pill was 523px for 202-338px of text at 1440 (722px at
   1844), and the roadmap "WHERE WE ARE · Q3 2026" pill 553px for 169px
   (also "LA BRÈCHE" / "STADE ET APPUI" on FR, "ETAPA Y RESPALDO" on ES).
   It now hugs its text (236px, 203px); its left edge does not move.
   Centred cartas are excluded, so their eyebrows stay on the card axis. */
.editorial-system :is(.ed-panel:not(.carta), .carta.carta--lista) > .eyebrow { align-self: flex-start; }
/* A22 · The #download right panel on EN/PT/FR holds three <p> only and
   was top-aligned beside a centred sibling, leaving 193-306px empty below
   it. It now centres (above = below within 0.1px). The section itself is
   the grid, so the panel is a direct child. The ES/NAH right panel opens
   with an eyebrow that lines up with its sibling's eyebrow, so it stays
   top-aligned. */
.editorial-home :is(#download, #descargar) > .ed-panel:last-child:not(:has(> .eyebrow)) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A23 · Side-by-side panels where only one panel opens with an eyebrow:
   /en/our-story and its mirrors ("A free transfer…" / "We have not
   launched."), the roadmap investor 2-up on EN/ES/PT/NAH, and the corridor
   pair on /ruta and /fr/feuille-de-route. The bare panel's heading sat
   44-48px above its sibling's. Its heading now drops by one eyebrow pill
   (32.2px: 12px x 1.35 line + 2 x 7px padding + 2 x 1px border) plus a
   14px gap, so sibling headings are level (the paired pages' inline
   eyebrow-to-heading gap is 14px; it was 12px on story and 16px on
   roadmap, a 2px step). A margin on the heading, not panel padding, so the offset
   holds whatever padding the panel has. Heroes (first .ed-wrap child) and
   media panels are skipped; from 960px, where .ed-grid--split is two
   columns. */
@media (min-width: 960px) {
  .editorial-system:not(.editorial-home) :is(.ed-wrap > .ed-grid--split:not(:first-child), .banda-interior > .ed-grid--split):has(> .ed-panel > .eyebrow:first-child) > .ed-panel:not(.ed-panel--media):not(:has(> .eyebrow:first-child)) > :is(h2, h3):first-child {
    margin-top: calc(32.2px + 14px);
  }
}

/* A24 · Story photo figures (/en/our-story, /en/how-we-make-money and
   their mirrors). The portrait is capped (400px / 320px) and centred, but
   its caption spanned the whole column and overhung it by 36-223px, and
   one caption was start-aligned while the other was centred. The figure
   now shrinks to its photo, and the caption takes exactly the photo's
   width (contain: inline-size keeps it from widening the figure), centred.
   The photo gets an inline-size containment with a 100vw placeholder
   width, so the figure is sized by the photo's max-width (or the column)
   and never by the image file: without it, a lazy image that has not
   loaded yet collapsed the money-page figure to 4px wide at 390 with a
   412px-tall caption. !important beats the inline `text-align` on story
   figure 1.
   Every photo here must carry an explicit `aspect-ratio` (set inline next
   to its width/height attributes). Inline-size containment makes Safari
   derive the photo's ratio from the 100vw placeholder width and the file's
   real height, so without one iPhone stretched the portraits to about
   2.6:1 (owner, 2026-09-23). object-fit: cover is the backstop: a box of
   the wrong shape crops the photo instead of distorting it. */
.editorial-system:not(.editorial-home) .ed-grid > figure { justify-self: center; width: fit-content; max-width: 100%; }
.editorial-system:not(.editorial-home) .ed-grid > figure > picture > img { contain: inline-size; contain-intrinsic-inline-size: 100vw; height: auto; object-fit: cover; }
.editorial-system:not(.editorial-home) .ed-grid > figure > figcaption { contain: inline-size; text-align: center !important; }

/* A25 · Security badges. Five badges in two columns left the fifth alone
   beside an empty cell on /en/, /pt/, /fr/ and /nah/; it now spans both
   columns. On / the single badge column was stretched and vertically
   centred, starting 100px (1440) / 47px (1844) below the h2; it now starts
   level with it. */
.editorial-system .security-badges > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.editorial-system .ed-grid--split:has(> .ed-sec-badges) { align-items: start; }

/* A26 · Store badges on phones. The small "Coming soon to" line wrapped
   in one badge row and not the other (64.5px vs 51.9px tall on one page),
   and at 360 "Google Play" ran past the badge. At <=420 the badge gets
   12px inline padding and an 8px glyph gap, and it never shrinks below
   its one-line content: two badges that fit share the row at equal widths,
   and two that do not fit stack full width. Every badge is 51.9px tall
   with no overflow at 320-768 in all five locales. */
.editorial-system .store-badge-copy > span { white-space: nowrap; }
@media (max-width: 420px) {
  .editorial-system .store-badge { padding-inline: 12px; gap: 8px; min-width: max-content; }
}

/* A29 · Rail language menu (geometry only; the rail's look is unchanged).
   The fixed popover sat at left 16px, 4.5-8px outside the rail column,
   and 0-1px above its chip. It now starts on the rail's left edge and sits
   8px above the 44px chip row. (0,2,1) beats main's (0,1,1). On short
   windows (540-659px tall) the rail's bottom inset is 12px, not the
   gutter, so the offset follows it. */
.editorial-system .ed-rail-langmenu ul {
  left: var(--editorial-gutter);
  bottom: calc(var(--editorial-gutter) + 44px + 8px);
}
@media (min-width: 1280px) and (min-height: 540px) and (max-height: 659.98px) {
  .editorial-system .ed-rail-langmenu ul { bottom: calc(12px + 44px + 8px); }
}

/* Alignment pass: verification fixes */

/* Homepage fee readout (/, /pt/, /fr/, /nah/ at 320-390; EN at 320). The
   value is nowrap ("1 MXN = 0.057045 USD"), so it squeezed the key to
   4-6 lines and pushed the row 3-48px past .fee-calc-out, whose
   overflow:hidden cut it. The row now wraps: the key takes 1-2 lines and
   a value that cannot share its line sits right-aligned under it. Rows
   that fit (every width from 1024) stay on one line. */
.editorial-system .fee-calc-row { flex-wrap: wrap; row-gap: 4px; }
.editorial-system .fee-calc-row > dd { margin-inline-start: auto; }
.editorial-system .fee-calc-row:not(.fee-calc-row--total) > dt { flex: 1 1 16ch; }
/* The total's key keeps a 12ch floor, so once the figure carries its
   currency code ("$3,540.00 MXN") and the pair cannot share a line, the
   figure drops under the key instead of squeezing it to a word a line. */
.editorial-system .fee-calc-row--total > dt { flex: 1 1 12ch; min-width: min-content; }

/* No-bank feature columns (#no-bank on EN/PT/FR/NAH, #sin-banco on /).
   Each column (bubble, h3, p) was independent, so a two-line title pushed
   its body 21px below its neighbours'. From 820px the three parts share
   the row's tracks, and a title sits on the line its body starts from. */
@media (min-width: 820px) {
  @supports (grid-template-rows: subgrid) {
    .editorial-home :is(#no-bank, #sin-banco) :is(.ed-cols-3, .ed-grid--thirds) > * {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-content: start;
      justify-items: start;
    }
    .editorial-home :is(#no-bank, #sin-banco) :is(.ed-cols-3, .ed-grid--thirds) > * > h3 { align-self: end; }
  }
}

/* Two-up decks of plain three-part cartas (bubble, title, body), such as
   the /fr/ use-case deck at 641-900px, where a wrapped title pushed its
   body 22px below its row partner's. Like the A13 3-up rule, the parts
   share the row's tracks. Decks with any other card type or shape
   (lists, stats, media, links, the pixel and feature decks) are left
   alone. */
@media (min-width: 601px) {
  @supports (grid-template-rows: subgrid) {
    .editorial-system .cartas--2up:not(:has(> :not(.carta), > :is(.carta--lista, .carta--dato, .carta--ancha, .carta--media, .carta--enlace, .carta--interactiva, .editorial-pixel-card), > .carta > :nth-child(4), > .carta > :last-child:nth-child(-n+2))) > .carta {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
      justify-items: center;
      align-items: start;
    }
    .editorial-system .cartas--2up:not(:has(> :not(.carta), > :is(.carta--lista, .carta--dato, .carta--ancha, .carta--media, .carta--enlace, .carta--interactiva, .editorial-pixel-card), > .carta > :nth-child(4), > .carta > :last-child:nth-child(-n+2))) > .carta > :is(h3, .carta-title):has(+ :is(p, ul, ol, dl)) { align-self: end; }
  }
}

/* Footer wordmark (A21). The box sits on the column text axis, but the
   "P" has a left side bearing of about 0.076em, so its ink started
   6-23px right of the column text. The indent puts the ink on the axis
   (within 2px at 390-1844); nothing clips. */
.editorial-system .ed-footer .ed-footer-wordmark { text-indent: -0.075em; }

/* How-it-works gallery (/pt/como-funciona at 1024-1440). main.css
   `.carta-foot { margin-top: auto }` pushed a shorter caption band down,
   19.6px below its siblings'. The band now starts under the media and
   fills the rest of the card, so every band in a row starts level. */
.editorial-system .cartas > .carta--media > .carta-foot { margin-top: 0; flex-grow: 1; }

/* A titled band that follows a block with no bar of its own (the gallery
   intro on /en/how-it-works, /pt/como-funciona, /fr/comment-ca-marche)
   sat 22px (12px at 390) below it; every other titled block gets the
   bar's 44px (24px). ES and NAH, which have a bar there, keep 22/12. */
.editorial-system:not(.editorial-home) .ed-wrap > :not(.ed-bar) + .banda > .banda-interior > .section-head:first-child { margin-top: var(--editorial-gap); }

/* A three-card deck in two columns (601-900px) left its third card as a
   half-width orphan against the left edge. It now centres on the row at
   the width of one column. */
@media (min-width: 601px) and (max-width: 900px) {
  .editorial-system .cartas--3up > :nth-child(3):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--editorial-gap)) / 2);
  }
}

/* Unframed head band (/en/help, /ayuda, /en/licenses). With the nested
   container gone (A3), its icon, eyebrow, h1 and lede sat on the column's
   outer edge (12 / 172 / 174px), 25-45px off the footer and every other
   hero's text axis. They now sit on that axis (37 / 216.3 / 219px); the
   cartas and the button below stay on the column. */
.editorial-system:not(.editorial-home) .ed-wrap > .banda--sin-regla:first-child .banda-cabecera { padding-inline: calc(var(--panel-pad) + var(--panel-border-width)); }

/* FAQ pages with a footer (/en/faq, /preguntas, /en/faq/on-the-record and
   mirrors). The wrap's 64px bottom clearance stacked on the footer's own
   40px margin (104px); the footer margin alone now sets the gap, as on
   every other page. Pages without a footer keep the clearance. */
.editorial-system.editorial-faq-page main:has(~ :is(.cta-footer-wrap, .ed-footer)) > .ed-wrap { padding-block-end: 0; }

/* A note card (.carta--lista) beside a centred carta in a 2-up row (the
   /ayuda contact row) sat at the top of its stretched card with 111px
   empty below it. It now centres, like its sibling. */
.editorial-system .cartas--2up > .carta:not(.carta--lista) ~ .carta--lista { justify-content: center; }

/* Legacy article templates (/en/vs/cash-app, /en/vs/venmo,
   /en/pesito-vs-remitly, /en/pesito-vs-western-union,
   /en/no-remittance-tax). Their content sat in the old centred .container
   (1440px cap, 24px padding): at 1844 the headings started at 301 while
   the bands, related band and footer start at 174. The columns now sit on
   the page column (12-378, 172-1417, 174-1820), with the crema panel
   (A20). */
.editorial-system main > :is(article, section).section:not([style*="background"]) > .container:is(.article-col, .reading) {
  width: auto;
  max-width: none;
  margin-inline: var(--editorial-gutter);
  padding-inline: 0;
}

/* With the rail (>=1280px), the waitlist, how-it-works and send-money
   pages in EN/FR/PT added the page's inline `padding-top: var(--panel-gap)`
   to main's gutter, so the hero started at 45px instead of level with the
   rail (23px). (0,3,2) beats the inline (0,2,2). */
@media (min-width: 1280px) {
  body.editorial-system.has-rail main > .ed-wrap { padding-top: 0; }
}

/* A bare ghost-link pill (no .btn) in a panel paragraph (/en/vs/cash-app,
   /en/vs/venmo): its padding spilled out of the line box, 4px under the
   button above and 0.3-0.8px over the caption below. The paragraph now
   holds the pill's padding: 16px above, 13-14px below. */
.editorial-system .ed-panel:not(.carta) > p:has(> a.btn-ghost:only-child:not(.btn)) { padding-block: 12px; }

/* Related-links band: six links wrapped 4+2 at 1280-1440 and 5+1 at 1600,
   leaving empty cells in the framed band. Three columns from 1024 (two at
   768, one on phones), so the rows are full. */
.editorial-system .related-searches ul { grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 16px) / 3)), 1fr)); }

/* Puente pages (/en/what-is-puente-railway and mirrors). A2 framed these
   bands, but the header kept the band rhythm's 48px (28px at 390) down to
   the first body block, more than the panel's own padding. The body's
   inline 16px margin now sets the gap. */
.editorial-system .ed-wrap > article:not(.ed-panel) > .banda:not(:has(> .banda-interior)) > .banda-cabecera { margin-bottom: 0; }

/* Article bands on /en/pesito-vs-remitly, /en/pesito-vs-western-union,
   /en/no-remittance-tax and /sin-cuenta-bancaria were square and unframed
   with a 2px top rule, directly above the framed related band (A20). They
   take the same frame as the related band and the site's panels. */
.editorial-system main > article.section > .banda { border: var(--panel-border); border-radius: var(--panel-radius); }

/* ═════════════════════════════════════════════════════════════════════
   iOS 27 layer (2026-09-23). Three parts, in this order: glass (the
   ticker's pause button, the hero label's defined edge), motion
   (springs, touch-down press, FAQ answers that materialize) and
   controls (segmented region switch and FAQ topics, the hero clip's
   pause button, inserted by scripts/main.js). The owner-locked chrome
   is untouched: nav.nav and all inside it, .nav-sheet, every .btn and
   the side rail. Each part carries its own reduced-motion, reduced
   -transparency, more-contrast and forced-colours fallbacks.
   ═════════════════════════════════════════════════════════════════════ */

/* ---- Hero demo-data label: the iOS 27 defined edge -------------------- */
/* The opaque pill stays (the spec's white pill; A8's geometry). Over the
   clip's pale mint frames its edge was carried by a soft shadow alone and
   the pill dissolved into the floor; a hairline draws the edge in both
   themes. Increased contrast and forced colours need no rule: the token
   turns solid there, and the UA forces the border to CanvasText. */
.ed-grid--hero > .ed-panel--media > .ed-media-tag {
  border: 1px solid var(--hairline-strong);
}

/* ── iOS motion: springs, touch-down press, materialize (2026-09-22) ──
   Appended to editorial-system.css. Three things, CSS only:
     1. Spring easings. Apple describes a spring by damping ratio and
        response, not by a bezier. The curves below are that closed-form
        spring sampled into linear() stops (unit mass, stiffness
        (2π/response)², damping 4π·ratio/response), and each duration is
        its settle time: the instant the curve stays within 0.1% of rest.
     2. A pressed state that starts on touch-down and releases on the
        smooth spring, so taps answer before the finger lifts.
     3. FAQ answers that materialize (blur and scale arriving
        together) on every open instead of popping.
   Locked surfaces are untouched: nav.nav and everything in it (the
   language dropdown, details.lang-menu, lives there and nowhere else),
   .nav-sheet, every .btn, and the whole rail. The rail's cards and
   controls already press through the rail's own rule (owner,
   2026-09-22), and its language menu keeps its own open and close.
   The FAQ topic chips and the region switch are segmented controls
   below, with their own press. .carta--interactiva is left alone too: it frames the calculator's
   field and select, and a frame that shrank every time a finger landed
   in a field would read as a glitch, not an answer. */

:root {
  /* Damping 1.0, response 0.4s: Apple's default spring. No overshoot;
     90% of the way at 248ms, 99% at 423ms, settled at 588ms. */
  --dur-spring-smooth: 588ms;
  /* Without linear() it borrows the nearest site curve at the same
     duration: standard, which has no overshoot either and runs 5% RMS
     off the spring. */
  --ease-spring-smooth: var(--ease-standard);

  /* Press amounts. 0.97 is iOS's button press; anything wider than
     ~480px takes 0.99 so a big card dips rather than lurches, and text
     rows dim or tint like an iOS list row instead of shrinking. */
  --press-scale: .97;
  --press-scale-wide: .99;
  --press-dim: .55;
  --press-tint: color-mix(in srgb, currentColor 12%, transparent);
  /* The press rides its own entry in each target's transition list.
     At rest it holds the release (the smooth spring); :active swaps in
     the touch-down timing below, so going down is near-instant and
     coming back is the spring, and a second tap mid-release starts from
     wherever the card is. */
  --press-timing: var(--dur-spring-smooth) var(--ease-spring-smooth);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring-smooth: linear(0, 0.0048 1.1%, 0.0196 2.3%, 0.0444 3.6%, 0.0815 5.1%, 0.1159 6.3%, 0.1597 7.7%, 0.3641 13.8%, 0.4623 16.9%, 0.5563 20.2%, 0.5975 21.8%, 0.637 23.45%, 0.6733 25.1%, 0.7066 26.75%, 0.7662 30.15%, 0.8176 33.75%, 0.8607 37.55%, 0.8991 42%, 0.9299 46.9%, 0.9536 52.35%, 0.9714 58.6%, 0.9834 65.5%, 0.9914 73.8%, 1);
  }
}
/* More contrast: a pressed row still dims, but only to .85. At .55 the
   most-asked rows' green text fell to 2.6:1 (light) and 3.7:1 (dark)
   while the finger was down; at .85 it holds 4.9:1 and 7.5:1. Forced
   colours take the same dim: those rows opt out of the forced palette
   and keep their own green. */
@media (prefers-contrast: more), (forced-colors: active) {
  :root { --press-dim: .85; }
}

/* Touch-down. Every press below goes down on this timing; the release
   comes from the element's own rest-state list. :where() keeps it at
   zero specificity: nothing else sets this property. */
:where(.carta--enlace, .faq-hub-most-item,
  .store-badge, .inv-demo-mail):active {
  --press-timing: var(--dur-instant) var(--ease-decelerate);
}

/* Link cards (the card is the anchor, or one stretched .carta-cubre
   link covers it; :active reaches the card either way). The press uses
   the independent `scale` property, so it composes with whatever owns
   `transform`: the scroll-driven reveal, and main.css's hover lift where
   the editorial layer has not zeroed it. The rest of the list restates
   main.css. */
.carta.carta--enlace {
  transition:
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    scale var(--press-timing);
}
.carta.carta--enlace:active { scale: var(--press-scale); }
/* Wide cards take the shallow press. Anything past ~480px would sink
   7px or more per side at 0.97. The FAQ hub's topic cards run one to a
   row at the viewport less 24px, so they pass 480px at a 505px viewport
   and stay past it (1063px at 1920px); a wide carta is a row by
   definition. */
@media (min-width: 505px) {
  :is(.faq-cat, .carta--ancha).carta--enlace:active { scale: var(--press-scale-wide); }
}
/* The help and guide cards run one to a row up to main.css's one-column
   breakpoint (600px): help cards at the viewport less 24px, guide cards
   less 74px (481px and 431px at 505px, 576px and 526px at 600px). Two
   to a row they pass 480px again on wide screens: help cards at 1680px
   (479px there, 559px at 1920px), guide cards soon after (529px at
   1920px). Both bands take the shallow press. */
@media (min-width: 505px) and (max-width: 600px), (min-width: 1680px) {
  .carta.carta--enlace:active { scale: var(--press-scale-wide); }
}

/* Store badges. main.css presses them with `transform`, but its later
   :hover rule, at the same specificity, keeps the 1px lift through the
   press, so the press never showed. The press moves to `scale`, which
   hover does not touch, and the lift settles back to the table while
   the finger is down, as main.css meant it to. main.css's :active
   duration (--dur-instant) still carries the way down. */
.store-badge {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    scale var(--press-timing);
}
.store-badge:active { transform: none; scale: var(--press-scale); }

/* The roadmap's book-a-demo pill: a link drawn as a pill, so it presses
   like one. Its hover shadow keeps snapping in as before. */
.inv-demo-mail {
  -webkit-tap-highlight-color: transparent;
  transition: scale var(--press-timing);
}
.inv-demo-mail:active { scale: var(--press-scale); }

/* The FAQ hub's most-asked rows are text links in a ruled list, up to
   800px wide: they dim under the finger like an iOS plain button. */
.faq-hub-most-item {
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    padding-left var(--dur-fast) var(--ease-emphasized),
    opacity var(--press-timing);
}
.faq-hub-most-item:active { opacity: var(--press-dim); }
/* Press: the sheet links and both language lists dim on touch-down
   like the site's other text rows (--press-dim, raised to .85 under
   more contrast), so a tap reads before the next page paints. */
.nav-sheet > a,
.lang-menu ul a,
.ed-rail-langmenu ul a {
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.nav-sheet > a:active,
.lang-menu ul a:active,
.ed-rail-langmenu ul a:active {
  opacity: var(--press-dim);
  transition-duration: var(--dur-instant);
}

/* Question rows are list rows up to 1100px wide. They take the list
   row's highlight: the tint lands at once on touch-down and fades out
   on main.css's 180ms background transition when the finger lifts. */
.editorial-system .faq-item summary { -webkit-tap-highlight-color: transparent; }
.editorial-system .faq-item summary:active {
  background-color: var(--press-tint);
  transition-duration: 0s;
}
/* The plus turns to a cross on the spring the row answers with. */
.editorial-system .faq-item summary::after {
  transition: transform var(--dur-spring-smooth) var(--ease-spring-smooth);
}

/* FAQ answers. main.css fades an answer in with a keyframe that only
   plays the first time a question opens, because a closed <details>
   keeps its content styled; every later open pops. The details'
   content slot is always styled, and closed it holds the from-state
   below, so a transition on it plays on every open, the first one
   included. There is deliberately no @starting-style: it would also
   fire for the answer a page ships open (every FAQ topic page has one,
   and it is the page's largest paint) and hold that text back on load.
   That answer now paints with the page. Closing stays instant: the
   one-open list and the FAQ links close answers while scrolling to a
   question, and an answer that lingered would move the destination
   under the scroll. Where ::details-content is missing, main.css's
   keyframe stays. */
@supports selector(::details-content) {
  .editorial-system .faq-answer { animation: none; }
  .editorial-system .faq-item::details-content {
    opacity: 0;
    scale: .985;
    filter: blur(4px);
    transform-origin: 50% 0;
  }
  .editorial-system .faq-item[open]::details-content {
    opacity: 1;
    scale: none;
    filter: none;
    transition:
      opacity var(--dur-spring-smooth) var(--ease-spring-smooth),
      scale var(--dur-spring-smooth) var(--ease-spring-smooth),
      filter var(--dur-spring-smooth) var(--ease-spring-smooth);
  }
}

/* Reduced motion: every press becomes a dim and every answer a short
   cross-fade. Nothing scales, nothing blurs, nothing travels. The lists
   restate main.css's reduced-motion timings plus the dim. main.css's
   global reduced-motion rule also cuts element transitions to 0.01ms,
   so in practice the dims are instant and only the answer's content
   slot, which that rule does not reach, cross-fades. */
@media (prefers-reduced-motion: reduce) {
  :root { --press-timing: var(--dur-fast) var(--ease-standard); }
  .carta.carta--enlace { transition: opacity var(--press-timing); }
  :is(.store-badge, .inv-demo-mail) { transition: opacity var(--press-timing); }
  :is(.carta.carta--enlace, .store-badge, .inv-demo-mail):active {
    scale: none;
    opacity: var(--press-dim);
  }
  .editorial-system .faq-item summary::after { transition: none; }
  @supports selector(::details-content) {
    .editorial-system .faq-item::details-content { scale: none; filter: none; }
    .editorial-system .faq-item[open]::details-content {
      transition: opacity var(--dur-fast) var(--ease-standard);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   iOS 27 CONTROLS : segmented controls and the hero clip's pause button.

   Appended at the end of editorial-system.css. Every selector here ties
   or beats the rule it replaces on specificity alone and wins the tie on
   source order, so nothing needs !important.

   Two surfaces:
     1. .region-switch          the "Sending from" control on the five
                                homepage pricing panels.
     2. .editorial-faq-topics   the four-topic switcher on the FAQ
                                category pages.

   Both segmented controls follow the same recipe: an opaque track with
   a defined edge, one solid thumb that slides to the selected segment,
   and 44px segments. They sit inside content panels, and glass belongs
   to the chrome layer only, so neither track is glass. Their panels are
   flat fills with nothing behind them to refract, so a blur would only
   cost a backdrop pass. The thumb is solid ink, which is already the
   site's selected-state colour.
   ═══════════════════════════════════════════════════════════════════ */

/* One spring for everything that moves here. Damping 1.0 (no bounce),
   response 0.4s: Apple's move/reposition values. A tap carries no
   momentum, so overshoot would read as a glitch. linear() samples the
   closed-form curve 1 - (1 + wt)e^(-wt) with w = 2*pi/0.4. The curve is
   99.9% settled at 588ms, so 600ms loses nothing, and it is 90% of the
   way there at 250ms, which is what the eye reads as the speed. The
   cubic-bezier is the fallback for engines without linear(). A
   custom property that fails to parse would reset the whole
   transition, not fall back, which is why the override sits behind
   @supports. */
:root {
  --controls-spring: var(--ease-standard);
  --controls-spring-dur: 600ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --controls-spring: linear(0, 0.0596, 0.186, 0.3294, 0.4656, 0.584, 0.6819, 0.7601, 0.821, 0.8677, 0.9029, 0.9292, 0.9487, 0.963, 0.9734, 0.9809, 0.9864, 0.9903, 0.9931, 0.9951, 0.9966, 0.9976, 0.9983, 0.9988, 1);
  }
}

/* ---------- 1. Region switch ----------
   Before: one ink-bordered pill that held the label and both options.
   At 390px the options wrapped to two lines (61px tall), and the control
   sat directly on the note above it (0px gap on all five homepages).

   Now the label becomes a caption above the control, which is the same
   label-over-control pattern the fee calculator uses. The control then
   only has to hold the two options, so they fit on one line from 320px
   up. The grid's outer columns and rows are the track's 4px padding. The
   ::before track and ::after thumb are grid items, so the thumb lands on
   the first segment's cell and never needs its size measured. */
.region-switch {
  --seg-pad: 4px;
  display: grid;
  grid-template-columns: var(--seg-pad) repeat(2, minmax(0, 1fr)) var(--seg-pad);
  grid-template-rows: auto var(--seg-pad) minmax(44px, auto) var(--seg-pad);
  align-items: stretch;
  isolation: isolate;
  /* Full width on a phone, which is how iOS sets a form's segmented
     control. It stops at 22rem on wider panels so each option stays a
     short, easy target and does not become a 300px bar. */
  width: min(100%, 22rem);
  /* The audit's 0px gap: the switch now keeps its own distance from the
     note, on the same scale as the 18px it already had below. */
  margin: clamp(16px, 1.6vw, 22px) 0 18px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}
.region-switch-label {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 0 0 8px;
  border-right: 0;
  color: var(--ink-fixed);
}

/* The track: an opaque fill with a defined edge. It is the panel's own
   verde-vivo lifted with 38% of the fixed paper. The panel is verde-vivo
   in both themes, so the mix uses the fixed paper and not the themed
   one. A dark themed tint would drop ink labels to about 2:1. Measured:
   ink on this track is 7.7:1 in both themes. The 1px ink edge is the
   iOS 27 defined border. On a flat fill a shadow-only edge would
   disappear. */
.region-switch::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 2 / -1;
  z-index: 0;
  border: 1px solid var(--ink-fixed);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper-fixed) 38%, var(--fill-verde-vivo));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper-fixed) 55%, transparent);
}

/* The thumb sits in the first segment's cell and moves one cell per
   index. Columns are equal 1fr, so 100% of its own width plus the 0
   gap is exactly one segment. The index comes from aria-pressed, which
   main.js keeps true. es and nah list MX first, so it keys off position
   and not region. */
.region-switch::after {
  content: "";
  grid-column: 2;
  grid-row: 3;
  z-index: 1;
  --seg-i: 0;
  border-radius: var(--radius-pill);
  background: var(--ink-fixed);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.18), 0 3px 8px rgba(11, 11, 11, 0.14);
  translate: calc(var(--seg-i) * 100%) 0;
  transition:
    translate var(--controls-spring-dur) var(--controls-spring),
    scale var(--dur-instant) var(--ease-standard);
}
.region-switch:has(> button:nth-of-type(2)[aria-pressed="true"])::after { --seg-i: 1; }
/* No option pressed means the script has not run yet or failed. An
   unowned thumb would claim a choice the page did not make. */
.region-switch:not(:has(> button[aria-pressed="true"]))::after { opacity: 0; }

.region-switch button {
  grid-row: 3;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  /* 12px keeps the longest option ("EE. UU. · USD", 90px of text) on one
     line at a 320px viewport: (246 - 8) / 2 - 24 = 95px. */
  padding: 0 12px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-fixed);
  -webkit-tap-highlight-color: transparent;
  /* The label colour rides the same spring as the thumb, so white text
     arrives with the ink and does not flash ahead of it. */
  transition:
    color var(--controls-spring-dur) var(--controls-spring),
    background-color var(--dur-fast) var(--ease-standard),
    opacity var(--dur-instant) var(--ease-standard),
    scale var(--dur-instant) var(--ease-standard);
}
.region-switch button:nth-of-type(1) { grid-column: 2; }
.region-switch button:nth-of-type(2) { grid-column: 3; }
/* The thumb paints the selection as it moves. Once it has settled, the
   selected segment takes the same ink as its own background, in the
   same cell and shape, so nothing visibly changes; the white label then
   sits on its own ink, which is what contrast checkers and assistive
   tools read (they cannot see a pseudo-element). On the way in the ink
   waits out the thumb's spring; on the way out it clears at once and
   the thumb carries the slide. */
.region-switch button[aria-pressed="true"] {
  background-color: var(--ink-fixed);
  color: var(--paper-fixed);
  transition:
    color var(--controls-spring-dur) var(--controls-spring),
    background-color 0s linear var(--controls-spring-dur),
    opacity var(--dur-instant) var(--ease-standard),
    scale var(--dur-instant) var(--ease-standard);
}
.region-switch button:not([aria-pressed="true"]):not(:hover) {
  transition-duration: var(--controls-spring-dur), 0s, var(--dur-instant), var(--dur-instant);
}
/* Hover is a pointer hint only. It never shows on the selected
   segment, where it would muddy the thumb. */
.region-switch button:not([aria-pressed="true"]):hover { background: transparent; }
@media (hover: hover) {
  .region-switch button:not([aria-pressed="true"]):hover {
    background: color-mix(in srgb, var(--ink-fixed) 8%, transparent);
  }
}
/* Touch-down feedback lands on press, not on release. The pressed
   option's label dims and settles in, and the thumb itself gives when
   it is the thing being pressed. */
.region-switch button:active { scale: 0.97; }
.region-switch button:not([aria-pressed="true"]):active { opacity: 0.6; }
.region-switch:has(> button[aria-pressed="true"]:active)::after { scale: 0.97; }
/* Outside the segment, in the track's padding. An inset ink ring would
   vanish on the ink thumb. Ink on the track is 7.7:1, above the 3:1
   non-text minimum. */
.region-switch button:focus-visible {
  outline: 2px solid var(--ink-fixed);
  outline-offset: 2px;
}

/* ---------- 2. FAQ topic switcher ----------
   Before: four outlined pills of four widths that wrapped 3 + 1 at
   1440px and 2 + 2 at 390px, 40px tall, with hover painting the same
   ink fill as the current page.

   Now: a 2 x 2 segmented control of equal cells in a 32rem track. The
   grid gives the same shape in every locale and at every width, and the
   thumb moves in both axes. These are links to sibling pages, so the
   thumb follows the press (:active) and is already sitting on the new
   topic when the next page paints it there.

   Labels stay on one line on every phone. Where half the track cannot
   hold the longest label, the control drops to one column (see the
   end of this section) instead of wrapping it. The only two-line labels
   left are the long Nahuatl topics in the narrow desktop intro column
   (960-1439px), where they balance inside the same 44px cell. */
.editorial-faq-topics {
  --seg-pad: 4px;
  /* --seg-n is the selected index for the one-column layout, and
     --seg-col / --seg-row place it in the 2 x 2 grid. */
  --seg-n: 0;
  --seg-col: 0;
  --seg-row: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(44px, 1fr);
  gap: 0;
  width: 100%;
  max-width: 32rem;
  margin-top: 24px;
  padding: var(--seg-pad);
  /* Concentric: 22px thumb radius + 4px padding. */
  border: 1px solid var(--hairline-strong);
  border-radius: 26px;
  /* An opaque fill: the hueso panel with 6% ink mixed in. That is the
     same small step off the panel that iOS's grey track has on white,
     and it holds in both themes because both tokens flip with the
     theme. It is opaque because the panel is a sticky content card, and
     a blur there would add a backdrop pass on every scroll frame. */
  background: color-mix(in srgb, var(--tinta-900) 6%, var(--hueso));
  box-shadow: inset 0 1px 0 var(--specular-wash);
}
.editorial-faq-topics::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--seg-pad);
  left: var(--seg-pad);
  /* The containing block is the padding box, so this is exactly one
     cell. Rows are 1fr, so both rows are the same height. */
  width: calc((100% - 2 * var(--seg-pad)) / 2);
  height: calc((100% - 2 * var(--seg-pad)) / 2);
  border-radius: 22px;
  background: var(--tinta-900);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.16), 0 3px 8px rgba(11, 11, 11, 0.12);
  translate: calc(var(--seg-col) * 100%) calc(var(--seg-row) * 100%);
  transition:
    translate var(--controls-spring-dur) var(--controls-spring),
    scale var(--dur-instant) var(--ease-standard);
  pointer-events: none;
}
/* The current page decides the resting cell. */
.editorial-faq-topics:has(> a:nth-child(2)[aria-current="page"])::before { --seg-n: 1; --seg-col: 1; --seg-row: 0; }
.editorial-faq-topics:has(> a:nth-child(3)[aria-current="page"])::before { --seg-n: 2; --seg-col: 0; --seg-row: 1; }
.editorial-faq-topics:has(> a:nth-child(4)[aria-current="page"])::before { --seg-n: 3; --seg-col: 1; --seg-row: 1; }
/* A press takes the thumb with it. These rules have the same specificity
   as the ones above and come after them, so the press wins while it
   lasts, and a press dragged off the link lets the thumb spring back. */
.editorial-faq-topics:has(> a:nth-child(1):active)::before { --seg-n: 0; --seg-col: 0; --seg-row: 0; }
.editorial-faq-topics:has(> a:nth-child(2):active)::before { --seg-n: 1; --seg-col: 1; --seg-row: 0; }
.editorial-faq-topics:has(> a:nth-child(3):active)::before { --seg-n: 2; --seg-col: 0; --seg-row: 1; }
.editorial-faq-topics:has(> a:nth-child(4):active)::before { --seg-n: 3; --seg-col: 1; --seg-row: 1; }
.editorial-faq-topics:has(> a[aria-current="page"]:active)::before { scale: 0.97; }
/* No current topic (a stale page, a future hub) means no thumb. */
.editorial-faq-topics:not(:has(> a[aria-current="page"], > a:active))::before { opacity: 0; }

.editorial-faq-topics a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  /* The label is centred, so side padding only matters at the limit.
     4px is what lets "Dinero y comisiones" (128px) hold one line in a
     half-track down to a 360px phone and in the 960px desktop column. */
  padding: 6px 4px;
  border: 0;
  border-radius: 22px;
  /* 1.15 leading lets a label that has to wrap fit two lines in the
     44px cell: 2 x 15px + 12px of padding = 42px. */
  font: 600 13px/1.15 var(--font-body);
  text-align: center;
  text-wrap: balance;
  color: var(--tinta-900);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--controls-spring-dur) var(--controls-spring),
    background-color var(--dur-fast) var(--ease-standard),
    scale var(--dur-instant) var(--ease-standard);
}
.editorial-faq-topics a:hover {
  background: transparent;
  color: var(--tinta-900);
}
@media (hover: hover) {
  .editorial-faq-topics a:not([aria-current="page"]):hover {
    background: color-mix(in srgb, var(--tinta-900) 7%, transparent);
  }
}
.editorial-faq-topics a[aria-current="page"] {
  background: transparent;
  color: var(--hueso);
}
/* While a press is moving the thumb, the label colours follow it. */
.editorial-faq-topics:has(> a:active) > a[aria-current="page"]:not(:active) { color: var(--tinta-900); }
.editorial-faq-topics > a:active { color: var(--hueso); background: transparent; scale: 0.97; }
/* The ring sits in the track's padding. The old 3px offset crossed the
   track's own edge. */
.editorial-faq-topics a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* One column where half the track is narrower than the longest label.
   Below 360px that is es, pt and fr. The Nahuatl topics run to 164px,
   so they need a full-width row on every phone up to 480px. The thumb
   then moves only down, one row per index. */
@media (max-width: 359.98px) {
  .editorial-faq-topics { grid-template-columns: minmax(0, 1fr); }
  .editorial-faq-topics::before {
    width: calc(100% - 2 * var(--seg-pad));
    height: calc((100% - 2 * var(--seg-pad)) / 4);
    translate: 0 calc(var(--seg-n) * 100%);
  }
}
@media (max-width: 479.98px) {
  .editorial-faq-topics:lang(nah) { grid-template-columns: minmax(0, 1fr); }
  .editorial-faq-topics:lang(nah)::before {
    width: calc(100% - 2 * var(--seg-pad));
    height: calc((100% - 2 * var(--seg-pad)) / 4);
    translate: 0 calc(var(--seg-n) * 100%);
  }
}

/* ---------- Motion, transparency, contrast, forced colours ---------- */

/* Reduce Motion: the thumb jumps and the glyphs swap in place. Nothing
   slides, scales or blurs. main.css already drops the old button
   transition. This block has to restate that because the rules above
   come later. */
@media (prefers-reduced-motion: reduce) {
  .region-switch::after,
  .region-switch button,
  .editorial-faq-topics::before,
  .editorial-faq-topics a { transition: none; }
  .region-switch button[aria-pressed="true"] { transition: none; }
  .region-switch button:active,
  .region-switch:has(> button[aria-pressed="true"]:active)::after,
  .editorial-faq-topics > a:active,
  .editorial-faq-topics:has(> a[aria-current="page"]:active)::before { scale: none; }
}

/* Increase Contrast: solid tracks with a 2px edge, the rule main.css
   applies to every panel and button. */
@media (prefers-contrast: more) {
  .region-switch::before {
    background: var(--paper-fixed);
    border-width: 2px;
  }
  .editorial-faq-topics {
    background: var(--hueso);
    border: 2px solid var(--hairline-strong);
  }
  .region-switch button:focus-visible,
  .editorial-faq-topics a:focus-visible { outline-width: 3px; }
}

/* Forced colours: .ed-panel sets forced-color-adjust: none (main.css),
   and that inherits, so the UA does not repaint anything inside a panel.
   Each piece restates itself in system colours. The thumb becomes
   Highlight and the selected label HighlightText. */
@media (forced-colors: active) {
  .region-switch::before,
  .editorial-faq-topics {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .region-switch::after,
  .editorial-faq-topics::before {
    background: Highlight;
    box-shadow: none;
  }
  .region-switch button,
  .editorial-faq-topics a { color: CanvasText; }
  .region-switch-label { color: CanvasText; }
  /* The state rules above name theme colours at a higher specificity
     than the base rules, so each state is restated here at the same
     specificity. Order matters inside this block: hover comes first, so
     the current and pressed labels still win when they are hovered. */
  .editorial-faq-topics a:hover { color: CanvasText; }
  .region-switch button[aria-pressed="true"],
  .editorial-faq-topics a[aria-current="page"],
  .editorial-faq-topics > a:active { color: HighlightText; }
  .region-switch button[aria-pressed="true"] { background-color: Highlight; }
  .editorial-faq-topics:has(> a:active) > a[aria-current="page"]:not(:active) { color: CanvasText; }
  /* CanvasText, not the Highlight that main.css gives every other ring:
     these rings sit next to a Highlight thumb and would merge with it. */
  .region-switch button:focus-visible,
  .editorial-faq-topics a:focus-visible { outline-color: CanvasText; }
}

/* ── Dark-mode reading comfort ──────────────────────────────────────
   Light type on a near-black ground halates: the same weight looks a
   step bolder and the glyph edges bloom. Body copy was bone #F5EFE3 at
   weight 500 on #14110D (≈17:1), which read as glaring and smeared.
   In dark mode only, body copy drops to tinta-700 (#E4DCCC, still
   ≈14:1) at regular weight with a hair of tracking. Headings that set
   their own colour, and every fixed-fill panel (amber, green, cobalt),
   keep their own ink because they declare it; this only changes what
   inherits from <body> on themed surfaces. Users who asked for more
   contrast keep the full-strength ramp. Screen only: print always sets
   the light theme (main.css scopes its dark tokens the same way). */
@media screen and (prefers-color-scheme: dark) and (not (prefers-contrast: more)) {
  html:not([data-theme="light"]) body {
    color: var(--tinta-700);
    font-weight: 400;
    letter-spacing: 0.005em;
  }
  html:not([data-theme="light"]) .body-l { font-weight: 400; }
}
@media screen and (not (prefers-contrast: more)) {
  html[data-theme="dark"] body {
    color: var(--tinta-700);
    font-weight: 400;
    letter-spacing: 0.005em;
  }
  html[data-theme="dark"] .body-l { font-weight: 400; }
}