/* ============================================================================
   Locale fit. Loaded on /de /es /fr /it /hi only — never on English.

   THE PROBLEM. This site was built pixel-perfect from Figma, which means the
   boxes carry the exact widths and heights the design specified: a button is
   `width: 175px`, a table row is `height: 72px`, a legal line is
   `width: 515px`. Those numbers were measured against ENGLISH copy. Spanish
   runs about 25% longer, German longer still, and the moment the text no
   longer fits, the box does not grow — it clips, or the line wraps and lands
   on whatever is underneath.

   THE RULE, and it is Lucas's: give the text a wider box. Same type size, same
   composition, same artwork — the text block just gets more room. Growing a
   section vertically is the last resort, not the first, because the hero art
   and the band backgrounds are drawn to a fixed height and stretching them
   wrecks the design. Every rule below widens, releases a nowrap, or trims
   padding. Only where nothing else works does anything get taller.

   Every value here was measured in the browser against the real translated
   copy in all five languages, not guessed.

   GEOMETRY RULES ARE GATED TO `min-width: 768px` (18 Sep 2026). Everything
   here that WIDENS a box or MOVES it is a correction for the fixed 1512
   layout, and this file loads after the band stylesheets — so an unconditional
   width here silently beats the mobile rule in the band's own file. That is
   how the hero shipped 860px wide on a 393 screen in all five locales. Rules
   that only RELEASE a constraint — `width: auto`, `flex-wrap: wrap`,
   `white-space: normal`, `min-width: 0` — stay unconditional: they help at
   every width and can never cause an overflow.
   ========================================================================= */

/* ---- hero ---------------------------------------------------------------
   The headline column is 536 wide, which is three lines of English at 110px.
   Spanish, German and Italian all ran to five, the column grew past the 584px
   row, and because the row is bottom-aligned the overflow went UP — the first
   line slid under the sticky nav and the eyebrow pill was cut off by the top
   of the section.

   860 is the smallest width at which every one of the five languages comes
   back to three lines or fewer, which is what English does. Type size is
   untouched, the hero stays exactly 946 tall, and the artwork is unmoved.
   There is 1123px of clear space before the payouts panel, so 860 fits. */
/* GATED 18 Sep 2026. This was unconditional, and that was the bug: this file
   loads AFTER atlas-hero.css, so `width: 860px` with no query outranked
   `atlas-hero.css` line 384 — `.afx-hero__left { width: 100% }` inside
   `@media (max-width: 767px)` — and the hero column stayed 860 wide on a 393
   viewport. The headline ran off the right edge on /es /de /fr /it /hi, on
   every page with a hero. The widening is a fix for the FIXED 1512 boxes, so
   it belongs only at the widths where those boxes exist. */
@media (min-width: 768px) {
  .afx-hero__left { width: 860px; }
  .afx-hero__headings { max-width: 860px; }
}

/* ---- buttons ------------------------------------------------------------
   Pinned to their Figma width with a nowrap label, so a longer word is simply
   painted outside the button and clipped by the parent. The designed width
   becomes a floor instead: English is unchanged because its label already
   fits, and the button grows sideways rather than losing its last syllable. */
.afxm__ctabtn { width: auto; min-width: 175px; }
.afxmo-btn,
.afxmo-hero__cta .afxmo-btn { width: auto; min-width: 0; flex: 0 1 auto; }

/* And every other button on the site, for the same reason. Chasing these one
   at a time found four; Hindi then found three more, so the rule is applied to
   the family instead: on a locale page a button sizes to its own label. The
   padding still sets the minimum, so a short label looks exactly as designed.
   English never loads this file, so its measured widths are untouched. */
.afx-btn-lime, .afx-btn-ghost, .afxhw-btn, .po3st__cta, .po2-close__cta,
.afxah-btn, .afxah-btn-ghost, .afxs-cta, .afxp-cta, .afxpo-btn, .sa-btn,
.art-btn, .afxf__cta, .afxt__cta, .afxg__ctas .afx-btn-lime,
.afxg__ctas .afx-btn-ghost, .afxax .afxah-btn-ghost {
  width: auto; max-width: 100%;
}
/* the rows that hold them have to be allowed to reflow */
.afx-hero__ctas, .afxg__ctas, .afxmo-hero__cta, .afxf__ctas, .po3st__ctas,
.afxs-cta__row, .abcta-ctas { flex-wrap: wrap; }

/* The mega-menu promo is a fixed 1082 box holding a nowrap headline and the
   button, spaced apart. Widening the button alone made it worse — the row had
   no slack to give, so the button just overflowed further. The headline has to
   be allowed to wrap and the column to shrink before the button can grow. */
.afxm__promoleft { flex: 1 1 auto; min-width: 0; }
.afxm__promohead { white-space: normal; }

/* ---- fine print ---------------------------------------------------------
   515 is one line of English. In Spanish it is two, and the second line falls
   out of the bottom of a section whose height is fixed and whose overflow is
   hidden. Widening keeps it on one line and keeps the section its designed
   height, which is what the background art is drawn to. */
.afxg__legal,
.aff2-promise__legal { width: 900px; max-width: 100%; }
/* The guarantee band is a fixed 1146 with its content in an absolutely
   positioned stage, so nothing inside it can make the section grow — the
   fine print simply falls out of the bottom. Widening took it from two lines
   to one; the remaining 22px is the block above it running longer, so the
   footer cluster is pulled back up by the difference rather than the band
   being stretched and the artwork with it. */
@media (min-width: 768px) { .afxg__legal { margin-top: -28px; } }
.afxhw-calc__foot { width: 940px; max-width: 100%; }
/* absolutely positioned at a measured 999px, which assumed a one-line
   footnote. Two lines reach up into the button above it. */
@media (min-width: 768px) { .afxhw-calc__foot { top: 1022px; } }

/* ---- comparison table ---------------------------------------------------
   Rows are 72px with 24px of vertical padding, leaving exactly one 24px line.
   The rival cells run to two lines in every language, and because each row is
   pulled 1px into the one above they overlap rather than just overflow.
   Trimming the padding to 12 gives two lines the 48px they need INSIDE the
   designed 72px row, so the table keeps its height and its rhythm. */
@media (min-width: 768px) {
  .afxc__feat,
  .afxc__cell { padding: 12px 16px; }
}

/* ---- pricing rule labels ------------------------------------------------
   "Profit Target" fits; "Objetivo de ganancias" does not, and the two-column
   layout ellipsises it — on seven pages. An ellipsis in a rules table is not a
   graceful degradation, it hides the rule. Let the label wrap instead; the row
   has the height for a second line. */
.afxp-duo .afxp-rule__k span { overflow: visible; text-overflow: clip; white-space: normal; }
.afxp-rule__k span { white-space: normal; }
.afxp-rule__k { align-items: flex-start; }

/* ---- footer -------------------------------------------------------------
   A single nowrap row of policy links, which in Spanish is wider than the
   footer and lands one link on top of the next. */
.afxft__base { flex-wrap: wrap; gap: 24px 40px; }
.afxft__baselinks { flex-wrap: wrap; gap: 12px 24px; }

/* ---- models page --------------------------------------------------------
   The step card is 703.5 x 299 with hidden overflow, and the copy sits in a
   fixed 315.8 column beside fixed-size art. There is no width left to give —
   the two cards already tile the 1432 row exactly — so this is the one place
   the box has to get taller instead of wider. It is a plain card on a flat
   background, so growing it costs nothing; the hero could not do this because
   its artwork is drawn to a fixed height. */
.afxmo-step { height: auto; min-height: 299px; }
.afxmo-step__p { max-width: 100%; }
.afxmo-hero__lead { width: auto; max-width: 720px; }

/* ---- stories cards ------------------------------------------------------
   nowrap stat values in a fixed pill. */
.afxs-gcard__stats { flex-wrap: wrap; }
.afxs-gcard__stat { width: auto; min-width: 0; padding-left: 14px; padding-right: 14px; }
.afxs-gcard__statvalue { white-space: normal; }