/* ════════════════════════════════════════════════════════════════════════
   FSP — layout consistency layer (Stripe-style container discipline).

   One content container everywhere: max-width 1200px with 64px gutters
   → text left edge at 184px on the 1440 artboard. All page heroes and
   section headers start left-aligned from that edge, and no hero stretches
   to fill the viewport with empty space.

   Loaded on every page before responsive.css (mobile rules still win).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared LandingA-family classes ─────────────────────────────────────
   Subsidies/FAQ/Final-CTA/Footer use .da-* classes on every page. In the
   design canvas all artboards shared one DOM so LandingA's <style> covered
   them; the per-page split lost that. Restored here as fallbacks (no
   !important — page-level rules still win). */
.da-section { max-width: 1280px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }
.da-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; background: linear-gradient(90deg, #635bff, #00b8e6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 18px; }
.da-h2 { font-size: 56px; font-weight: 800; line-height: 1.04; letter-spacing: -0.04em; margin: 0; color: #0a2540; }
.da-h2 .accent { background: linear-gradient(135deg, #84cc16 0%, #a3e635 50%, #d4ff4a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.da-sub { font-size: 19px; line-height: 1.6; color: #425466; font-weight: 400; max-width: 640px; margin-top: 24px; }
.da-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: all 0.2s; font-family: inherit; border: none; white-space: nowrap; }
.da-btn--primary { background: #c8f23c; color: #0a2540; }
.da-btn--primary:hover { background: #d4ff4a; transform: translateY(-1px); }
.da-btn--ghost { background: transparent; color: #0a2540; }
.da-btn--ghost:hover { color: #635bff; }
.da-card-3d { transition: transform 0.4s cubic-bezier(.2,.7,.3,1), box-shadow 0.4s; transform-style: preserve-3d; }
.da-card-3d:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -20px rgba(20, 30, 60, 0.18), 0 16px 32px -8px rgba(20, 30, 60, 0.1); }
.da-card-3d:hover .da-card-arrow { opacity: 0.7; transform: translate(2px, -2px); }
.da-card-arrow { transition: all 0.3s; }

/* ── Alignment: heroes & section headers start from the container edge ── */

/* index hero: kill the decorative -32px nudge on the text column */
[style*="translateX(-32px)"] { transform: none !important; }

/* partners hero: the inner box shrink-wraps + centers as a flex item —
   stretch it so the 1200/64 container actually applies */
.br-hero-inner { width: 100% !important; }

/* NOTE: the FSP Games hero keeps its ORIGINAL centered "centerline" treatment
   (design intent) — do not left-align it. Only the sizzle-reel video sits behind. */

/* index "Unlock Experiences" (Golden Tickets) header: centered (matches the inline style). */

/* games "From your phone to the world stage" header: centered → left */
.gj-head { text-align: left !important; }

/* ── Container geometry (desktop only; responsive.css owns <900px) ────── */
@media (min-width: 900px) {
  /* games statement band: full-bleed text → standard container edge */
  .gm-statement {
    padding-left: max(40px, calc((100% - 1200px) / 2)) !important;
    padding-right: max(40px, calc((100% - 1200px) / 2)) !important;
  }

  /* games journey + philosophy wrappers: 1240/1280-wide odd gutters → standard */
  .gj { padding-left: 0 !important; padding-right: 0 !important; }
  .gj-inner { max-width: 1280px !important; padding: 0 40px !important; }
  .phB-wrap, .phC-header, .phC-statement, .phC-footer {
    max-width: 1280px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* one tighter container everywhere: 1280px with 40px gutters
     (was 1200/64 → text edge moves from 184px to 120px on the 1440 artboard) */
  .da-section, .br-section, .br-showcase, .cl-section, .ev1-section,
  .ev2-section, .ent-section, .sol-header, .sol-grid, .sol-detail,
  .sol-features-wrap, .sol-configurable, .eng-wrap, .vt-inner, .wbl-inner,
  .wps-inner, .gm-section, .cs-topbar {
    max-width: 1280px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  /* inline-styled wrappers using the old 1200/64 convention */
  [style*="max-width: 1200px"][style*="padding: 0px 64px"] {
    max-width: 1280px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  /* nav rides the same container */
  #root nav {
    max-width: 1280px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* full-viewport heroes → compact, Stripe-like vertical rhythm
     (browsers serialize the inline calc() with the terms reordered) */
  section[style*="min-height: calc(-70px + 100vh)"],
  section[style*="min-height: calc(100vh - 70px)"] {
    min-height: 0 !important;
    padding: 110px 0 120px !important;
  }
  section[style*="min-height: calc(-73px + 100vh)"],
  section[style*="min-height: calc(100vh - 73px)"] {
    min-height: 0 !important;
    padding: 110px 0 30px !important;
    margin: 0 0 90px !important;
  }
}