/* Mobile-only layout. Keep the approved desktop composition unchanged. */
@media (max-width:760px){
  header{height:82px;padding:0 22px}
  .wordmark{font-size:23px;letter-spacing:5px}
  .wordmark span{font-size:9px;letter-spacing:1.8px;margin-top:8px}
  nav .quiet{min-height:44px;padding:10px 8px}
  .hero{padding:44px 22px 36px;gap:14px}
  .hero .eyebrow{font-size:10px;letter-spacing:1.6px;margin-bottom:22px}
  h1{font-size:clamp(34px,9.5vw,50px);line-height:1.12;letter-spacing:-1.5px;margin-bottom:24px}
  .lede{font-size:16px;line-height:1.75;margin-bottom:0}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
  .actions button{padding:13px 10px}
  .note{font-size:12px;line-height:1.6}
  .brand-art{width:100%;max-width:380px;margin:0 auto}
  .brand-art img{height:220px;max-height:none;object-fit:contain}
  .brand-caption{margin:0 0 0;padding-top:14px;font-size:8px;letter-spacing:1.1px}
  /* A viewport-height sticky layer gives phones the desktop's flowing image
     without background-attachment:fixed, which mobile browsers often ignore. */
  .approach{padding:0 22px 54px;isolation:isolate}
  .approach::before{position:sticky;display:block;top:0;left:auto;right:auto;inset-inline:auto;width:100vw;height:100svh;min-height:560px;margin-left:-22px;margin-bottom:calc(-1 * max(100svh,560px));z-index:-1;pointer-events:none;background-image:linear-gradient(180deg,#09090b90 0%,#09090b80 35%,#09090b9c 75%,#09090be6 100%),url('connected-opportunities.png');background-size:cover;background-position:center,58% center;background-repeat:no-repeat;background-attachment:scroll}
  .approach .section-heading{padding-top:54px;margin-bottom:34px}
  .platform-intro{max-width:none;margin-bottom:30px}
  .system-explanation{font-size:15px;line-height:1.8;text-shadow:0 1px 12px #000}
  .approach h2{font-size:32px;line-height:1.2}
  .pillars{gap:26px}
  .pillars article{padding-top:20px}
  .pillars h3{font-size:21px;margin:12px 0 8px}
  .pillars p{margin:0;font-size:15px;line-height:1.75}
  .closing{padding:46px 22px;gap:24px}
  .closing .secondary{width:100%}
  footer{padding:24px 22px;gap:16px}
  dialog,.login-dialog{max-height:calc(100dvh - 24px);padding:24px;width:calc(100% - 28px)}
  input,textarea,.login-dialog input{font-size:16px}
  .close,.login-dialog .close{min-width:44px;min-height:44px}
}
@media (max-width:360px){.hero .eyebrow{letter-spacing:1.1px}.brand-caption{letter-spacing:.7px}}
@media (prefers-reduced-motion:reduce) and (max-width:760px){.approach::before{position:absolute;inset:0;left:-22px;height:100%;margin:0;min-height:0}}