/* Page frame shared by the M2 pages (FAQs 295:7441, Privacy 461:5132, Terms, Search, Contact, errors).
   Figma: page background art = the 940:83125 curve (4px line, gradient performance green -> transparent) plus the colour-burn grit photo,
   Page Header 735:13734 / 736:13771 = 370px (76px sticky nav + 294px here), hard-light gradient rgba(3,3,3,.8) -> transparent
   going up, title 64/68 -2% bottom aligned with 80px under it, content column 1420 inside a 1500 / 40px gutter wrap.
   The art starts under the nav (top -76px). Tokens only; the pieces Figma never gives a token (the 76px nav height, art
   file names) are local to .samf-m2-page. Shared page header + art belong in the theme (see result file TOKEN REQUESTS).
   Arabic: art flips (scaleX -1), letter-spacing 0. */
.samf-m2-page {
  --m2-nav-h: 4.75rem;
  --m2-bukra: var(--samf-font-display);
  --m2-rotunda: 'Rotunda Variable', var(--samf-font-body);
  position: relative; z-index: 0; background: var(--samf-color-page); color: var(--samf-color-text);
}
.samf-m2-art { position: absolute; inset: calc(-1 * var(--m2-nav-h)) 0 0 0; overflow: hidden; pointer-events: none; } /* no z-index: it would isolate the colour-burn / hard-light layers from the page colour */
.samf-m2-art::after { content: ""; position: absolute; inset: 0 0 auto 0; block-size: 23.125rem; background: linear-gradient(to top, rgba(27, 30, 4, 0), rgba(3, 3, 3, .8)); mix-blend-mode: hard-light; } /* Page Header veil: 370 from the top of the document */
.samf-m2-art__curve { position: absolute; inset-block-start: 0; inset-inline-start: 50%; inline-size: 163.790875rem; block-size: 263.5rem; margin-inline-start: -81.8954375rem; background: url("../images/samf-page-curve.svg") 0 0 / 100% 100% no-repeat; }
[dir="rtl"] .samf-m2-art__curve { transform: scaleX(-1); }
/* grit photo: colour-burn over the page colour. Layer geometry = Figma percentages of the art box. */
.samf-m2-art__grit { position: absolute; inset-inline: 0; background: url("../images/samf-page-grit.png") 0 0 / 100% 100% no-repeat; mix-blend-mode: color-burn; }
[dir="rtl"] .samf-m2-art__grit { transform: scaleX(-1); }
.samf-m2-art__grit--a { inset-block-start: calc(32.55% + 0px); block-size: 122.55%; }
.samf-m2-art__grit--b { inset-block-start: 44.77%; block-size: 55.23%; inline-size: 125.99%; inset-inline: 0 auto; }
.samf-m2-art__grit--c { inset-block-start: 0; block-size: 100%; }
.samf-m2-page > :not(.samf-m2-art) { position: relative; z-index: 1; }

.samf-m2-wrap { inline-size: 100%; max-inline-size: 1500px; margin-inline: auto; padding-inline: 2.5rem; box-sizing: border-box; }

.samf-pagehead {
  position: relative; display: flex; align-items: flex-end; box-sizing: border-box;
  min-block-size: 18.375rem; padding-block: 0 5rem; color: var(--samf-color-text);
}
.samf-pagehead > .samf-m2-wrap { position: relative; }
.samf-pagehead__title, .samf-pagehead .samf-legal-title {
  margin: 0; max-inline-size: 54.9375rem; font-family: var(--m2-bukra); font-weight: 500;
  font-size: 4rem; line-height: 4.25rem; letter-spacing: -0.02em; overflow-wrap: anywhere; color: var(--samf-color-text);
}
.samf-pagehead__sub { margin: 1rem 0 0; max-inline-size: 40rem; color: var(--samf-color-muted); font-size: var(--samf-fs-body); line-height: 1.43; }
[dir="rtl"] .samf-pagehead__title, [lang="ar"] .samf-pagehead__title, [lang="ar"] .samf-pagehead .samf-legal-title { letter-spacing: 0; }

@media (max-width: 1024px) {
  .samf-m2-wrap { padding-inline: 1.5rem; }
  .samf-pagehead { min-block-size: 12rem; padding-block-end: 3rem; }
  .samf-pagehead__title, .samf-pagehead .samf-legal-title { font-size: 2.75rem; line-height: 3rem; }
}
@media (max-width: 375px) {
  .samf-m2-wrap { padding-inline: 1rem; }
  .samf-pagehead { min-block-size: 8.125rem; padding-block-end: 0; } /* Figma FAQs - Mobile 950:85100: header 230 = 100 nav + 130, title bottom aligned */
  .samf-pagehead__title, .samf-pagehead .samf-legal-title { font-size: 2rem; line-height: 2.25rem; }
}

/* visual-fix-1108 G8 (G5-24, G5-25): phone art against Figma FAQs/Careers mobile (950:85100 / 890:52885). The curve box (2622 x 4218, drawn for the 1728 desktop) was used at its desktop size at every width, so on a phone its horizontal rule ran through the headline / dropdown (y 327 instead of 143). Figma mobile draws the same two-strand curve at about 0.55 scale: the upper rule at y 143, the lower rule at y 180, the lower strand's corner at x ~320 and its diagonal leaving down-left through x ~238 at y 320; the box is anchored to the top of the DOCUMENT (the 100px header is not part of the art offset used by the desktop rule, so the curve is pulled up by the 100px header minus the 76px nav the art box already starts above). The veil is the Page Header's own 230px, not 370. */
@media (max-width: 1399.98px) {
  .samf-m2-art { inset-block-start: -6.25rem; }   /* below 1400 the sticky header is 100 tall and not overlapped, so the page starts at y 100: start the art at document y 0 as Figma does (the desktop rule lands at 304) */
}
@media (max-width: 1024px) { .samf-m2-art::after { block-size: 18.25rem; } }   /* 100 header + 192 page head */
@media (max-width: 575.98px) {
  .samf-m2-art::after { block-size: 14.375rem; }   /* the Page Header's own 230 */
  .samf-m2-art__curve { inset-inline-start: -41.375rem; margin-inline-start: 0; inline-size: 90.09rem; block-size: 144.925rem; inset-block-start: -1.5375rem; }   /* 0.55 x 163.79 / 263.5 rem = 90.09 x 144.925 rem; left -662px; top -24.6px */
}

/* visual-fix-1108 G8 (G5-25): the global header swoosh (body.samf-inner::before in SamfTheme samf-layout.css: 420px teal veil with two thin curve lines and a green wedge, mixed over the header) is not in the Figma M2 frames: they show only the dark Page Header gradient above and the one 4px curve. The M2 art above already draws exactly that, so the swoosh is switched off on the pages that carry it (FAQs, Careers, Contact, Search, legal, error pages). Other inner pages keep it (not mine). */
body.samf-inner:has(.samf-m2-page)::before { display: none; }