/* landing-mobile.css -- phone layout for web/landing.html (ORDER MOB-03).
   Loaded LAST in <head>, so it outranks the page's inline <style> block.
   Every size on this page is an inline style attribute; only !important beats one.
   No colour values (CLAUDE.md rule 16). Every layout rule sits inside max-width:560px,
   so desktop is untouched by construction. Selectors key off section ids already in
   the Claude Design export, so a re-export keeps them valid. */
@media (hover:none) {
  .fw-grid > div:hover { transform:none !important; box-shadow:none !important; }
}
@media (max-width:560px) {
  section[data-screen-label="01 Hero"] > div > div:last-child { padding:44px 16px 72px !important; }
  section[data-screen-label="01 Hero"] h1 { font-size:44px !important; line-height:.98 !important; }
  section[data-screen-label="01 Hero"] img { height:44px !important; }
  section[data-screen-label="01 Hero"] div:has(> img) { margin-bottom:24px !important; }
  section[data-screen-label="01 Hero"] a[href="/constellation"] { bottom:18px !important; right:16px !important; }

  #squeeze > section:first-child { padding:26px 16px 32px !important; }
  #ways > div { padding:26px 16px 16px !important; }
  #squeeze > div:last-child > div { padding:4px 16px 32px !important; }
  #howitworks { padding:20px 16px !important; }
  #howitworks > div { padding:18px !important; }
  #numbers > div { padding:20px 16px !important; }
  #join > div > div { padding:20px 16px !important; }
  #value { padding:36px 16px !important; }
  #community { padding:22px 16px !important; }
  #index { padding:36px 16px 20px !important; }

  main h2 { white-space:normal !important; font-size:28px !important; line-height:1.08 !important; }
  main h3 { white-space:normal !important; }

  #squeeze div:has(> #rail) { grid-template-columns:1fr !important; grid-template-rows:auto 470px !important; }
  #rail { display:grid !important; grid-template-columns:1fr 1fr; gap:8px !important; }
  #rail .rail-card { padding:12px !important; min-height:84px; }
  #rail h3 { font-size:17px !important; }
  #stage h3 { font-size:21px !important; }

  #squeeze a[href="/marketplace"] > span:last-child,
  #squeeze a[href="/survey"] > span:last-child,
  #squeeze a[href="/request-research"] > span:last-child {
    flex-wrap:wrap !important; gap:4px 12px !important; padding:12px 14px !important; }
  #squeeze a[href="/marketplace"] > span:last-child > span:first-child,
  #squeeze a[href="/survey"] > span:last-child > span:first-child,
  #squeeze a[href="/request-research"] > span:last-child > span:first-child {
    flex:1 1 100% !important; font-size:26px !important; }

  .ai2-slide > div { padding-left:16px !important; padding-right:16px !important; }
  #numbers .ai2-slide [style*="grid-template-columns:128px"] {
    grid-template-columns:96px 1fr 26px !important; gap:10px !important; }
  #numbers div:has(> #donut) { flex-wrap:wrap !important; gap:20px !important; }
  #carousel + div { flex-wrap:wrap !important; gap:10px !important; }

  #join summary { height:auto !important; min-height:178px; }
  #join summary > div:last-child { height:auto !important; padding:22px 18px !important; }

  #value h3 { font-size:28px !important; }
  .ai2-card-wide > div:last-child { padding:20px 18px !important; }
  .fw-grid { grid-template-columns:1fr !important; }
}