/* v144 — MOBILE READABILITY & COMPOSITION PASS
   Based on v143. Desktop layout is intentionally unchanged. */
@media (max-width:760px){
  /* HOME HERO — denser first screen, portrait remains on the right. */
  body:not(.application-page) .hero{padding:40px 0 18px!important;min-height:0!important;align-items:flex-start!important}
  body:not(.application-page) .hero-grid{
    grid-template-columns:minmax(0,1.6fr) minmax(116px,.9fr)!important;
    gap:8px!important;align-items:start!important
  }
  body:not(.application-page) .hero-copy{padding-top:16px!important}
  .hero-brandline{width:min(178px,50vw)!important;max-width:178px!important;margin:0 0 12px!important}
  .hero-win-wordmark{width:100%!important;max-width:178px!important}
  body:not(.application-page) .hero h1{
    font-size:20.5px!important;line-height:1.04!important;max-width:230px!important;
    margin:0 0 12px!important;letter-spacing:-.018em!important
  }
  body:not(.application-page) .hero-lead{font-size:11.6px!important;line-height:1.47!important;max-width:232px!important;margin-bottom:0!important}
  .hero-actions{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;
    width:min(292px,calc(100vw - 118px))!important;max-width:none!important;margin-top:13px!important
  }
  .hero-actions>*{
    width:100%!important;min-width:0!important;min-height:46px!important;padding:8px 7px!important;
    font-size:11px!important;font-weight:900!important;letter-spacing:.015em!important;white-space:nowrap!important
  }
  .hero-note{max-width:292px!important;font-size:7.5px!important;line-height:1.3!important;margin-top:10px!important}
  .hero-stage{
    height:248px!important;min-height:248px!important;max-height:248px!important;
    align-self:start!important;place-items:start center!important;padding-top:58px!important;overflow:visible!important
  }
  .ring{width:150px!important;height:150px!important;top:46px!important;bottom:auto!important}
  .portrait-stack{width:128px!important;max-width:128px!important;margin:0!important}
  .portrait-stack .portrait-card{width:128px!important;max-width:128px!important}

  /* HOME ECOSYSTEM — kicker remains left, headline is centered. */
  .home-ecosystem .ecosystem-heading{max-width:100%!important;margin-bottom:10px!important}
  .home-ecosystem .ecosystem-heading .kicker{justify-content:flex-start!important;text-align:left!important}
  .home-ecosystem .ecosystem-heading h2.ecosystem-title{
    font-size:18.5px!important;line-height:1.12!important;max-width:330px!important;
    margin:10px auto 4px!important;text-align:center!important;letter-spacing:-.012em!important
  }

  /* WINSERFING — both labels fit cleanly and the qualities block loses dead air. */
  .section-needs .needs-heading .needs-title-mobile{
    font-size:19px!important;line-height:1.08!important;letter-spacing:-.012em!important;margin:0 0 10px!important
  }
  .section-needs .needs-heading .needs-title-mobile span{margin-top:4px!important;white-space:nowrap!important}
  .section-qualities{padding-top:18px!important}
  .section-qualities .qualities-shell{gap:8px!important}
  .section-qualities .qualities-top{gap:4px!important}
  .section-qualities .qualities-heading{margin-bottom:0!important;padding-bottom:0!important}
  .section-qualities .qualities-heading h2{margin-bottom:7px!important}
  .section-qualities .qualities-heading p{margin-bottom:0!important}
  .section-qualities .quality-card-featured{margin-top:0!important}
  .winserfing-end-note .contact-panel h2{text-align:center!important;width:100%!important;margin-inline:auto!important}

  /* PROGRAMS — buttons must read instantly on a phone. */
  .programs-hub-page .hub-card .hub-actions a{
    min-height:48px!important;padding:10px 14px!important;font-size:12.5px!important;font-weight:900!important;
    letter-spacing:.018em!important;color:#0c5142!important;text-shadow:0 1px 0 rgba(255,255,255,.9)!important
  }
  .programs-hub-page .hub-footer .contact-actions{gap:9px!important}
  .programs-hub-page .hub-footer .btn-3d,
  .programs-hub-page .hub-footer .btn-glass{
    min-height:46px!important;padding:9px 10px!important;font-size:11.5px!important;font-weight:900!important;
    color:#0c5142!important;text-shadow:0 1px 0 rgba(255,255,255,.88)!important
  }

  /* GAMES — title sits opposite the number; explanatory copy is no longer microscopic. */
  .games-page .portal-card.games-card{
    display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;
    grid-template-areas:"num title" "copy copy" "go go"!important;
    column-gap:12px!important;row-gap:8px!important;padding:18px 18px 16px!important;align-items:start!important
  }
  .games-page .portal-card.games-card .portal-num{grid-area:num!important;align-self:start!important;font-size:25px!important;margin:0!important}
  .games-page .portal-card.games-card h3{
    grid-area:title!important;align-self:center!important;margin:0!important;font-size:20.5px!important;line-height:1.05!important;
    font-weight:700!important;color:#155243!important;text-shadow:0 1px 0 rgba(255,255,255,.86)!important
  }
  .games-page .portal-card.games-card p{
    grid-area:copy!important;margin:2px 0 6px!important;font-size:12.5px!important;line-height:1.42!important;
    font-weight:650!important;color:#1c574a!important;display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important
  }
  .games-page .portal-card.games-card .portal-go{grid-area:go!important;margin-top:0!important}

  /* LEADERS ON GAMES PAGE — same top-line logic as game cards. */
  .games-page .leaders-section .leader-card{
    display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;
    grid-template-areas:"icon title" "copy copy" "link link"!important;
    column-gap:14px!important;row-gap:10px!important;align-items:start!important;min-height:0!important;padding:20px!important
  }
  .games-page .leaders-section .leader-icon{grid-area:icon!important;margin:0!important;align-self:start!important}
  .games-page .leaders-section .leader-card h3{
    grid-area:title!important;align-self:center!important;margin:0!important;font-size:25px!important;line-height:1.03!important;
    color:#155243!important;text-shadow:0 1px 0 rgba(255,255,255,.86)!important
  }
  .games-page .leaders-section .leader-card p{
    grid-area:copy!important;margin:2px 0 0!important;font-size:14px!important;line-height:1.42!important;
    font-weight:600!important;color:#245c50!important
  }
  .games-page .leaders-section .leader-card .mini-link{grid-area:link!important;margin-top:2px!important;font-size:11px!important}
}

@media (max-width:420px){
  body:not(.application-page) .hero{padding-top:34px!important}
  body:not(.application-page) .hero-grid{grid-template-columns:minmax(0,1.58fr) 114px!important;gap:7px!important}
  .hero-brandline{width:min(168px,49vw)!important;max-width:168px!important}
  .hero-win-wordmark{max-width:168px!important}
  body:not(.application-page) .hero h1{font-size:19.5px!important;max-width:218px!important}
  body:not(.application-page) .hero-lead{font-size:11.1px!important;max-width:220px!important}
  .hero-actions{width:min(282px,calc(100vw - 105px))!important}
  .hero-actions>*{font-size:10.6px!important;min-height:45px!important}
  .hero-stage{height:238px!important;min-height:238px!important;max-height:238px!important;padding-top:52px!important}
  .portrait-stack,.portrait-stack .portrait-card{width:122px!important;max-width:122px!important}
  .ring{width:144px!important;height:144px!important;top:42px!important}
  .home-ecosystem .ecosystem-heading h2.ecosystem-title{font-size:17.5px!important;max-width:315px!important}
  .section-needs .needs-heading .needs-title-mobile{font-size:18px!important}
  .programs-hub-page .hub-card .hub-actions a{font-size:12px!important}
  .games-page .portal-card.games-card h3{font-size:19px!important}
  .games-page .portal-card.games-card p{font-size:12px!important}
  .games-page .leaders-section .leader-card h3{font-size:23px!important}
}

@media (max-width:370px){
  body:not(.application-page) .hero-grid{grid-template-columns:minmax(0,1.56fr) 106px!important}
  .hero-brandline{width:154px!important;max-width:154px!important}
  .hero-win-wordmark{max-width:154px!important}
  body:not(.application-page) .hero h1{font-size:18.5px!important;max-width:196px!important}
  body:not(.application-page) .hero-lead{font-size:10.5px!important;max-width:198px!important}
  .hero-actions{width:min(260px,calc(100vw - 94px))!important}
  .hero-actions>*{font-size:9.8px!important}
  .hero-stage{height:225px!important;min-height:225px!important;max-height:225px!important;padding-top:48px!important}
  .portrait-stack,.portrait-stack .portrait-card{width:112px!important;max-width:112px!important}
  .home-ecosystem .ecosystem-heading h2.ecosystem-title{font-size:16.5px!important}
  .section-needs .needs-heading .needs-title-mobile{font-size:16.8px!important}
  .games-page .portal-card.games-card{grid-template-columns:52px minmax(0,1fr)!important;column-gap:10px!important}
  .games-page .portal-card.games-card h3{font-size:17.5px!important}
  .games-page .portal-card.games-card p{font-size:11.5px!important}
  .games-page .leaders-section .leader-card{grid-template-columns:66px minmax(0,1fr)!important;column-gap:10px!important}
  .games-page .leaders-section .leader-card h3{font-size:21px!important}
}

/* v145 — MOBILE POLISH PASS
   Fixes requested after v144 review: header alignment, hero portrait lift,
   clearer programs buttons, and tighter first-screen composition. */
@media (max-width:760px){
  /* Header: align brand and hamburger on the same visual line. */
  .site-header{padding:10px 0 8px!important}
  .site-header .container{width:min(100% - 18px,1240px)!important}
  .header-inner{min-height:56px!important;display:flex!important;align-items:center!important}
  .brand{max-width:calc(100% - 64px)!important;margin-left:-2px!important}
  .brand-mark{width:40px!important;height:40px!important}.brand-mark img{height:40px!important}
  .brand-copy strong{font-size:clamp(17px,4.8vw,23px)!important;line-height:1.02!important}
  .menu-toggle{
    position:absolute!important;top:50%!important;right:0!important;transform:translateY(-50%)!important;
    width:46px!important;height:46px!important;border-radius:14px!important
  }
  .main-nav{top:64px!important;right:0!important;width:min(228px,calc(100vw - 18px))!important}

  /* Home hero: remove dead air, lift the portrait, keep more breathing room between wordmark and title. */
  body:not(.application-page) .hero{padding:30px 0 16px!important}
  body:not(.application-page) .hero-grid{
    grid-template-columns:minmax(0,1.62fr) minmax(118px,.88fr)!important;
    gap:8px!important;align-items:start!important
  }
  body:not(.application-page) .hero-copy{padding-top:6px!important}
  .hero-brandline{width:min(184px,52vw)!important;max-width:184px!important;margin:0 0 16px!important}
  .hero-win-wordmark{max-width:184px!important}
  body:not(.application-page) .hero h1{font-size:20px!important;line-height:1.03!important;max-width:228px!important;margin:0 0 12px!important}
  body:not(.application-page) .hero-lead{font-size:11.8px!important;line-height:1.48!important;max-width:232px!important}
  .hero-actions{
    width:min(300px,calc(100vw - 108px))!important;
    grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:12px!important
  }
  .hero-actions>*{min-height:48px!important;padding:8px 10px!important;font-size:11.2px!important;font-weight:900!important}
  .hero-note{max-width:300px!important;font-size:7.6px!important;line-height:1.26!important;margin-top:10px!important}
  .hero-stage{
    height:224px!important;min-height:224px!important;max-height:224px!important;
    place-items:start center!important;padding-top:28px!important;align-self:start!important;overflow:visible!important
  }
  .ring{width:150px!important;height:150px!important;top:18px!important}
  .portrait-stack,.portrait-stack .portrait-card{width:128px!important;max-width:128px!important}
  .portrait-name{margin-top:4px!important}

  /* Programs: stretch the gold buttons, make text darker and more readable. */
  .programs-hub-page .hub-card .hub-actions{display:block!important;gap:0!important}
  .programs-hub-page .hub-card .hub-actions a{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-height:52px!important;padding:10px 16px!important;
    font-size:13px!important;font-weight:900!important;line-height:1.12!important;letter-spacing:.01em!important;
    white-space:normal!important;text-align:center!important;color:#0a4a3d!important;
    text-shadow:0 1px 0 rgba(255,255,255,.92)!important
  }
  .programs-hub-page .hub-footer .contact-actions{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;
    width:100%!important;max-width:100%!important
  }
  .programs-hub-page .hub-footer .btn-3d,
  .programs-hub-page .hub-footer .btn-glass{
    width:100%!important;min-height:48px!important;padding:10px 12px!important;
    font-size:12px!important;font-weight:900!important;line-height:1.1!important;
    white-space:normal!important;text-align:center!important;color:#0a4a3d!important;
    text-shadow:0 1px 0 rgba(255,255,255,.9)!important
  }
}

@media (max-width:420px){
  .site-header .container{width:min(100% - 14px,1240px)!important}
  .brand{max-width:calc(100% - 60px)!important;margin-left:-3px!important}
  .brand-mark{width:38px!important;height:38px!important}.brand-mark img{height:38px!important}
  .brand-copy strong{font-size:16px!important}
  .menu-toggle{width:44px!important;height:44px!important}
  .main-nav{top:62px!important;width:min(224px,calc(100vw - 14px))!important}

  body:not(.application-page) .hero{padding-top:24px!important}
  body:not(.application-page) .hero-grid{grid-template-columns:minmax(0,1.6fr) 116px!important;gap:7px!important}
  .hero-brandline{width:min(176px,51vw)!important;max-width:176px!important;margin-bottom:15px!important}
  .hero-win-wordmark{max-width:176px!important}
  body:not(.application-page) .hero h1{font-size:19px!important;max-width:214px!important}
  body:not(.application-page) .hero-lead{font-size:11.1px!important;max-width:216px!important}
  .hero-actions{width:min(292px,calc(100vw - 96px))!important}
  .hero-actions>*{font-size:10.7px!important;min-height:47px!important}
  .hero-stage{height:214px!important;min-height:214px!important;max-height:214px!important;padding-top:22px!important}
  .portrait-stack,.portrait-stack .portrait-card{width:124px!important;max-width:124px!important}
  .ring{width:144px!important;height:144px!important;top:14px!important}

  .programs-hub-page .hub-card .hub-actions a{font-size:12.4px!important;min-height:50px!important;padding:10px 12px!important}
  .programs-hub-page .hub-footer .btn-3d,
  .programs-hub-page .hub-footer .btn-glass{font-size:11.2px!important;min-height:47px!important;padding:9px 10px!important}
}

@media (max-width:370px){
  body:not(.application-page) .hero-grid{grid-template-columns:minmax(0,1.58fr) 108px!important}
  .hero-brandline{width:160px!important;max-width:160px!important}
  .hero-win-wordmark{max-width:160px!important}
  body:not(.application-page) .hero h1{font-size:18px!important;max-width:196px!important}
  body:not(.application-page) .hero-lead{font-size:10.4px!important;max-width:198px!important}
  .hero-actions{width:min(270px,calc(100vw - 88px))!important}
  .hero-actions>*{font-size:9.9px!important}
  .hero-stage{height:202px!important;min-height:202px!important;max-height:202px!important;padding-top:18px!important}
  .portrait-stack,.portrait-stack .portrait-card{width:114px!important;max-width:114px!important}

  .programs-hub-page .hub-footer .contact-actions{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .programs-hub-page .hub-footer .btn-3d,
  .programs-hub-page .hub-footer .btn-glass{font-size:10.4px!important}
}