/* Phone and tablet layout; desktop styling stays in index.html. */
.nav-actions { display: flex; align-items: center; gap: 10px; }

@media (max-width: 850px) {
  html { -webkit-text-size-adjust: 100%; }
  .wrap { width: 100%; max-width: 100%; padding-inline: 22px; }
  .hero-frame { margin:12px 12px 0;border-radius:24px; }
  .wrap > *, .problem-grid > *, .funding > *, .feature-point > *, .problem-detail > * { min-width: 0; }
  .section { padding-block: 60px; }
  .section.problem-section { padding-top:32px; }
  .section h2 { font-size: clamp(34px, 5.6vw, 48px); line-height: 1.1; letter-spacing: -.045em; }
  .section-intro { font-size: 16px; line-height: 1.65; }
  .eyebrow { font-size: 11px; line-height: 1.5; letter-spacing: .12em; margin-bottom: 18px; }

  header.nav { gap: 12px; }
  .brand { gap: 8px; font-size: 20px; letter-spacing: -.045em; white-space: nowrap; }
  .brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
  .navcta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; font-size: 12px; white-space: nowrap; }
  a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue2); outline-offset: 4px; }

  .hero { padding: 138px 22px 56px; }
  .hero-grid, .hero-grid > div { width: 100%; min-width: 0; }
  .hero h1 { font-size: clamp(42px, 8.5vw, 66px); line-height: 1.04; letter-spacing: -.05em; margin-bottom: 24px; }
  .hero p { max-width: 38ch; font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
  .hero .actions { gap: 10px; }
  .btn { min-height: 46px; padding: 14px 18px; font-size: 13px; gap: 7px; }
  .hero-note { max-width: 34ch; margin: 18px auto 0; font-size: 12px; line-height: 1.6; }
  .hero-proof { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .proof-cell { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 16px; align-items: center; padding: 16px 0; }
  .proof-cell strong { font-size: 19px; letter-spacing: -.03em; }
  .proof-cell span { margin-top: 0; font-size: 14px; line-height: 1.5; }

  .problem-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .problem-details { margin-top: 28px; gap: 0; }
  .problem-detail { grid-template-columns: 28px minmax(0,1fr); gap: 14px; padding: 20px 0; }
  .problem-detail strong { font-size: 18px; letter-spacing: -.025em; line-height: 1.4; }
  .problem-detail span { font-size: 14px; line-height: 1.65; }
  .problem-grid .stat-stack { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 10px; max-width: none; margin: 0 0 24px; }
  .problem-grid .stat-number { min-width: 0; padding: 20px 10px; font-size: clamp(40px,10.5vw,64px); line-height: 1; border-radius: 20px; }
  .problem-grid .stat-copy { min-width: 0; padding: 18px; font-size: 13px; line-height: 1.55; border-radius: 20px; }
  .meter-img { max-width: 100%; height: auto; border-radius: 22px; }
  .problem-meter { margin-top: 0; }

  #features { padding-block: 0; }
  #features .feature-layout { width: calc(100% - 44px); margin-inline: auto; padding: 32px 22px; border-radius: 24px; }
  #features .feature-copy { padding-top: 0; }
  #features .feature-copy h2 { font-size: clamp(34px,7.5vw,52px); line-height: 1.08; letter-spacing: -.045em; white-space: normal; }
  .feature-points { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 30px; }
  .feature-point { grid-template-columns: 24px minmax(0,1fr); gap: 10px; padding: 18px 0 0; }
  .feature-point strong { font-size: 17px; }
  .feature-point b { font-size: 15px; line-height: 1.4; }
  .feature-point span { font-size: 14px; line-height: 1.6; margin-top: 8px; }

  #how > .wrap { max-width: 100%; }
  .how-layout { gap: 30px; }
  .how-copy { padding-top: 0; }
  .how-copy h2 { max-width: none; }
  #how .how-flow { grid-template-columns: minmax(0,1fr); gap: 28px; }
  #how .flow-node { min-width: 0; padding-top: 18px; }
  #how .flow-node:before { margin-bottom: 16px; font-size: 14px; }
  #how .flow-node span { color: #536b82; margin-bottom: 9px; }
  #how .flow-node strong { font-size: 21px; line-height: 1.35; margin-bottom: 9px; letter-spacing: -.025em; }
  #how .flow-node small { max-width: 36ch; font-size: 15px; line-height: 1.65; }

  .quote { padding: 30px 24px; border-radius: 24px; }
  .scale-section > .wrap { padding-inline:22px; }
  .scale-section .quote { padding-inline:22px; }
  .quote h2 { max-width: 100%; }
  .quote p { font-size: 16px; line-height: 1.7; }
  .quote:after { right: -12px; opacity: .5; pointer-events: none; }
  #pilot .pilot-header { grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:30px; }
  #pilot .pilot-header h2 { font-size:clamp(34px,5.6vw,48px); }
  #pilot .pilot-header p { max-width:36ch;font-size:15px; }
  #pilot .feature-grid { grid-template-columns: minmax(0,1fr);margin-top:0; }
  #pilot .feature,#pilot .feature:first-child { display:grid;grid-column:auto;grid-template-columns:28px minmax(0,1fr);gap:0 14px;padding:24px 0;min-height:0; }
  #pilot .feature:before,#pilot .feature:first-child:before { grid-column:1;grid-row:1 / span 2;padding-top:3px;margin:0;font-size:14px; }
  #pilot .feature h3,#pilot .feature:first-child h3 { grid-column:2;font-size:20px;line-height:1.4;margin:0 0 10px;max-width:none; }
  #pilot .feature p,#pilot .feature:first-child p { grid-column:2;max-width:none;font-size:15px;line-height:1.7; }
  #pilot .feature h3 { font-size: 20px; line-height: 1.4; margin-bottom: 10px; letter-spacing: -.025em; }
  #pilot .feature p { max-width: none; font-size: 14px; line-height: 1.7; }
  .funding { grid-template-columns: minmax(0,1fr); gap: 34px; }
  .ask { font-size: 60px; line-height: 1.05; letter-spacing: -.05em; }
  .ask small { max-width: 34ch; font-size: 15px; line-height: 1.65; margin-top: 14px; }
  .footer { display: flex; flex-direction: column; gap: 12px; padding: 26px 22px; font-size: 12px; line-height: 1.6; }
  footer.wrap { padding-inline:22px; }
  .footer div + div { margin-top: 0; }
}
@media (max-width: 480px) {
  .feature-points { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 360px) {
  .wrap { padding-inline: 18px; }
  #features .feature-layout { width:calc(100% - 36px);padding-inline:18px; }
  .scale-section > .wrap { padding-inline:18px; }
  .scale-section .quote { padding-inline:18px; }
  footer.wrap { padding-inline:18px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 24px; height: 24px; }
  .nav-actions { gap: 4px; }
  .navcta { padding-inline: 10px; font-size: 11px; }
  .hero { padding-inline: 18px; }
  .hero h1 { font-size: 39px; }
  .problem-grid .stat-stack { grid-template-columns: minmax(0,1fr); }
  .problem-grid .stat-number { font-size: 60px; padding-block: 24px; }
}