/* =====================================================================
   MOBILE REFINEMENTS — loaded last so it layers over the other partials.
   Scope: readability (type sizes), aligned full-width buttons, bigger
   touch targets, and form ergonomics on small screens. Desktop (≥768px)
   is untouched. No new font files are required — this only re-tunes the
   existing Archivo / Inter / IBM Plex Mono setup.
   ===================================================================== */

/* Stop iOS from inflating text in landscape; keep our sizes authoritative. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 767px) {
  /* ---- readability ---------------------------------------------------- */
  body {
    font-size: 16px;
    line-height: 1.7;
  }
  .mono {
    font-size: 12px;
  }

  /* slightly tamer display sizes: the desktop clamps() bottom out too large
     on a phone and push everything below the fold */
  .hero h1 {
    font-size: clamp(2.1rem, 9.5vw, 2.8rem);
    line-height: 1.02;
  }
  .hero .sub {
    font-size: 16px;
    margin-top: 24px;
  }
  .hero .wrap {
    padding-top: 112px;
    padding-bottom: 44px;
  }
  .hero .backed {
    margin-top: 36px;
  }
  .page-banner h1,
  .about-hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.7rem);
  }
  .page-banner .lede,
  .about-hero .lede {
    font-size: 16px;
  }

  /* tighter vertical rhythm so pages scroll shorter on a phone */
  section.block {
    padding: 72px 0;
  }
  .home section.block {
    padding: 52px 0;
  }
  .subpage-body {
    padding-top: 56px;
  }

  /* ---- buttons: consistent size, comfortable tap height --------------- */
  .btn {
    padding: 15px 26px;
    font-size: 12.5px;
  }

  /* ---- nav: bigger hamburger hit area without changing its look ------- */
  .nav-toggle::before {
    content: "";
    position: absolute;
    inset: -14px;
  }
  .nav.open ul a,
  .nav.open ul button {
    font-size: 15px;
  }
  .nav.open .dropdown-menu a {
    font-size: 13px;
  }

  /* ---- events / faq / footer ------------------------------------------ */
  .events-intro,
  .builders-lead {
    font-size: 16px;
  }
  .faq-q {
    gap: 16px;
    padding: 22px 0;
  }
  .faq-a {
    padding-right: 0;
  }
  footer {
    padding: 88px 0 40px;
  }
  footer .grid {
    padding-top: 56px;
    gap: 40px;
  }
  footer .col a {
    display: inline-block;
    padding: 3px 0;
    font-size: 15px;
  }
  footer .baseline p {
    font-size: 11px;
  }
  .contacts .value {
    font-size: 15px;
  }

  /* ---- application form ------------------------------------------------ */
  /* 16px inputs stop iOS Safari from auto-zooming into every field */
  .application input[type="text"],
  .application input[type="email"],
  .application input[type="url"],
  .application input[type="number"],
  .application textarea {
    font-size: 16px;
    padding: 14px 16px;
  }
  .application textarea {
    min-height: 110px;
  }
  .application .field > label,
  .application .field-label {
    font-size: 12px;
  }
  .application .form-steps {
    margin-bottom: 32px;
  }
  .application .choice-card,
  .application .role-card {
    padding: 18px;
  }
  .application .opt {
    padding: 14px 16px;
  }
  .application .opt-label,
  .application .choice-desc,
  .application .role-desc,
  .application .consent-text {
    font-size: 15px;
  }
  .application .field-error,
  .application .turnstile-error {
    font-size: 13px;
  }
}

/* ---- narrow phones: stack CTA groups into aligned full-width buttons -- */
@media (max-width: 560px) {
  .ctas,
  .movement-cta,
  .about-final-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .ctas .btn,
  .movement-cta .btn,
  .about-final-ctas .btn,
  .team-cta .btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* form footer: primary action on top, full width; Back beneath it */
  .application .form-nav {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .application .form-nav .btn {
    width: 100%;
    text-align: center;
  }
  .application .form-nav [data-back] {
    margin-right: 0;
  }

  /* summary rows: label above value instead of a cramped two-column row */
  .application .summary-row {
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 14px 16px;
  }
  .application .summary-k {
    width: 100%;
  }
}

/* ---- touch devices: give buttons/cards press feedback (hover is moot) - */
@media (hover: none) {
  .btn {
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active {
    transform: translateY(1px);
    opacity: 0.9;
  }
  .application .opt:active,
  .application .choice-card:active,
  .application .role-card:active {
    border-color: var(--signal);
  }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
  .btn:active {
    transform: none;
  }
}