/* Sponsors and FAQ as flat HUD rows (unit S2-ROWS). Loads after sm-hud.css, sm-page.css, sm-lastyear.css and sm-ar.css.
   Scoped under .sm, reads only --hud-* tokens. No art, no motion. Content column = Last year's (.ly-in).
   Grounds: Sponsors flat N1 (opens with the footer's seam), FAQ flat N2 (a rung change, no rule).
   Arabic roles take their size by pixel parity (EN 25 = AR 20/28 Bold, EN 37.5 = AR 30/42 Regular), each written at (0,4,0). */

.sm .rows-stage { position: relative; scroll-margin-block-start: 64px; }
.sm .rows-in { box-sizing: border-box; inline-size: min(1296px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
:where(.sm .rows-stage) :where(p, h2) { margin: 0; }   /* zero specificity: the role margins below win */

/* ── Sponsors ───────────────────────────────────────────────────────────────────────────────────── */
.sm .sp-stage { background: var(--hud-n1); padding-block: 72px 72px; border-block-start: 2px solid var(--hud-frame); }
.sm .sp-stage::before {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: -2px; block-size: 2px; pointer-events: none;
  background:
    linear-gradient(var(--hud-corner), var(--hud-corner)) left top / 12px 2px no-repeat,
    linear-gradient(var(--hud-corner), var(--hud-corner)) right top / 12px 2px no-repeat;
}
.sm .sp-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.sm .sp-stage:has(.sp-shelves) { padding-block-end: 96px; }
.sm .sp-copy { min-inline-size: 0; }
.sm .sp-label { line-height: 25px; letter-spacing: var(--hud-track); }
.sm .sp-title { margin-block-start: 18px; max-inline-size: 30ch; font-size: 37.5px; line-height: 44px; letter-spacing: 2px; text-wrap: balance; }
.sm .sp-become { box-sizing: border-box; inline-size: 100%; max-inline-size: 560px; margin-block-start: 40px; padding: 20px 24px 22px; }
.sm .sp-become-q { line-height: 25px; letter-spacing: 2px; }
.sm .sp-sub { margin-block-start: 12px; max-inline-size: 52ch; }
.sm .sp-become-body { margin-block-start: 12px; }
.sm .sp-contact { margin-block-start: 12px; }
.sm .sp-phone { margin-block-start: 4px; }
.sm .sp-tel { display: inline-flex; align-items: center; min-block-size: 44px; line-height: 25px; letter-spacing: 2px; color: var(--hud-l3); text-decoration: underline; text-decoration-color: var(--hud-ifc); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sm .sp-tel:focus-visible { outline: 2px solid var(--hud-ifc); outline-offset: 4px; }

/* logo wall (frames/img/partners/partners.json, spliced in by build_page.mjs at <!-- partners:shelves -->): tier shelves of solid frames, full width under the copy and the panel.
   Logos are supplied marks: fitted, never pixelated or recoloured. */
.sm .sp-shelves { grid-column: 1 / -1; margin-block-start: 56px; display: flex; flex-direction: column; gap: 40px; }
.sm .sp-shelves[hidden] { display: none; }
.sm .sp-tier { line-height: 25px; letter-spacing: var(--hud-track); }
.sm .sp-plates { margin-block-start: 16px; display: flex; flex-wrap: wrap; gap: 16px; }
.sm .sp-shelves .sp-plate { flex: none; inline-size: 200px; block-size: 88px; max-inline-size: 100%; display: flex; align-items: center; justify-content: center; }
.sm .sp-logo { display: block; inline-size: 150px; block-size: 56px; max-inline-size: 100%; object-fit: contain; image-rendering: auto; }

@media (min-width: 1024px) {
  .sm .sp-shelves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .sm .sp-shelves { margin-block-start: 40px; }
  .sm .sp-shelf { min-inline-size: 0; }
  .sm .sp-plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sm .sp-shelves .sp-plate { inline-size: auto; max-inline-size: none; }
}
/* default (no logo shelves yet): ONE column, the box under the head at a comfortable measure. With shelves: head and box side by side, shelves below. */
@media (min-width: 1280px) {
  .sm .sp-grid:has(.sp-shelves) { grid-template-columns: minmax(0, 1fr) 480px; column-gap: 64px; align-items: end; }
  .sm .sp-grid:has(.sp-shelves) .sp-become { margin-block-start: 0; max-inline-size: none; }
}

/* ── FAQ ────────────────────────────────────────────────────────────────────────────────────────── */
.sm .faq-stage { background: var(--hud-n2); padding-block: 96px 112px; }
.sm .faq-title { font-size: 37.5px; line-height: 44px; letter-spacing: 2px; text-wrap: balance; }
.sm .faq-sub { margin-block-start: 12px; max-inline-size: 52ch; }
.sm .faq-grid { margin-block-start: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.sm .faq-col { min-inline-size: 0; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
  .sm .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* interactive: the full bright frame in every state; hover and keyboard focus move the brackets, not the fill:
   C3, arms 20 px, stepped 6 px outside the frame line (inset -8 = border box -2, then 6 out: clear of the summary's focus ring at 4 to 6 px). No transition. */
.sm .faq-item.hud-panel { border-color: var(--hud-ifc); }
.sm .faq-item.hud-panel::before { transition: none; }
.sm .faq-item.hud-panel:focus-within::before { --b: var(--hud-c3); inset: -8px; background-size: 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px; }
@media (hover: hover) {
  .sm .faq-item.hud-panel:hover::before { --b: var(--hud-c3); inset: -8px; background-size: 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px; }
}
.sm .faq-sum { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; }
.sm .faq-sum::-webkit-details-marker { display: none; }
.sm .faq-sum:focus-visible { outline: 2px solid var(--hud-ifc); outline-offset: 4px; }
.sm .faq-q { flex: 1 1 auto; min-inline-size: 0; line-height: 32px; letter-spacing: 1px; text-wrap: balance; }
.sm .faq-chev { flex: none; inline-size: 24px; block-size: 24px; margin-block-start: 4px; }
.sm .faq-chev svg { display: block; fill: var(--hud-l3); transform: scaleX(-1); }   /* closed: points to the inline-end (EN right) */
[dir="rtl"] .sm .faq-chev svg { transform: none; }                                 /* AR: the unflipped chevron points left, the inline-end */
.sm .faq-item[open] .faq-chev svg, [dir="rtl"] .sm .faq-item[open] .faq-chev svg { transform: rotate(-90deg); }
.sm .faq-item:not([open]) > :not(summary) { display: none; }
.sm .faq-a { padding: 0 20px 20px; max-inline-size: 62ch; }
.sm .faq-a .sec-prose { text-wrap: pretty; }
.sm .faq-a .faq-chip { display: inline-block; padding: 4px 12px; border-style: dashed; border-color: var(--hud-c1); line-height: 25px; letter-spacing: 2px; }
.sm .faq-a .faq-chip::before { content: none; }

/* ── phone ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sm .rows-in { inline-size: calc(100% - 44px); }
  .sm .sp-stage { padding-block: 40px 56px; }
  .sm .sp-title { letter-spacing: 0; }   /* as the phone titles of About and Last year */
  .sm .faq-stage { padding-block: 40px 56px; }
  .sm .sp-shelves { margin-block-start: 40px; gap: 28px; }
  .sm .sp-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sm .sp-shelves .sp-plate { inline-size: auto; max-inline-size: none; block-size: 56px; }
  .sm .sp-logo { inline-size: 100px; block-size: 36px; }
}
@media (max-width: 383px) {
  .sm .rows-in { inline-size: calc(100% - 32px); }
}

/* ── Arabic sizes, (0,4,0): EN 25 -> 20/28 Bold, EN 37.5 -> 30/42 Regular ──────────────────────── */
[dir="rtl"] .sm .rows-stage .sp-label, [dir="rtl"] .sm .rows-stage .sp-tier, [dir="rtl"] .sm .rows-stage .sp-become-q,
[dir="rtl"] .sm .rows-stage .faq-chip, [dir="rtl"] .sm .rows-stage .sp-tel { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: 0; }
[dir="rtl"] .sm .rows-stage .faq-q { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: 0; }
[dir="rtl"] .sm .rows-stage .sp-title, [dir="rtl"] .sm .rows-stage .faq-title { font-size: 30px; line-height: 42px; font-weight: 400; letter-spacing: 0; }
[dir="rtl"] .sm .rows-stage .sp-title .hud-hl, [dir="rtl"] .sm .rows-stage .faq-title .hud-hl { white-space: normal; }
@media (forced-colors: active) { .sm .faq-chev svg { fill: ButtonText; } }