/* ===========================================================
   MOBILE — phones only, ≤640px.
   Tablets keep the desktop layout.
   =========================================================== */

@media (max-width: 640px) {

  /* ---- Hide the desktop nav on phones ---- */
  .nav { display: none !important; }

  /* The mobile nav owns its own height; keep page top-padded for sticky bars. */
  body { padding-top: 56px; }
  body[data-mobilenav="bottom"] { padding-top: 56px; padding-bottom: 76px; }

  /* ---- Hide the tweaks panel + toggle on mobile (desktop-only) ---- */
  .tweaks-panel,
  .tweaks-toggle,
  [class*="tweak"][class*="panel"] { display: none !important; }

  /* ---- Section padding ---- */
  .section { padding: 56px 20px !important; }
  .section.tight { padding: 32px 20px !important; }
  .section > .inner { max-width: 100% !important; }

  /* ---- Hero ---- */
  .hero-wrap {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .hero h1 {
    font-size: clamp(2.4rem, 11vw, 3.4rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    margin-top: 16px !important;
  }
  .hero .lead {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 20px 0 28px !important;
  }
  .hero-ctas {
    flex-wrap: wrap;
    gap: 12px !important;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    min-height: 48px;
    padding: 14px 20px !important;
    font-size: 13px !important;
    flex: 1 1 auto;
    min-width: 160px;
  }

  /* ---- Apparatus / hero figure ---- */
  .apparatus { padding: 18px !important; }
  .apparatus .fig-tag,
  .apparatus .fig-up,
  .apparatus .fig-cap { font-size: 10px !important; }

  /* ---- Stats ---- */
  .stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 20px !important;
  }
  .stat .num { font-size: 44px !important; }
  .stat .lbl { font-size: 10px !important; }

  /* ---- Section header ---- */
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 36px !important;
  }
  .section-head h2 {
    font-size: 36px !important;
    line-height: 1.05 !important;
  }
  .section-head .sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .eyebrow { font-size: 11px !important; }

  /* ---- Machine cards stacked ---- */
  .machine-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .apparatus[style*="aspect-ratio:auto"],
  .machine-grid .apparatus {
    aspect-ratio: auto !important;
  }

  /* ---- Quote block ---- */
  .quote-block {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .quote-block .q { font-size: 24px !important; line-height: 1.3 !important; }

  /* ---- Article grid ---- */
  .article-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ---- Trustbar ---- */
  .trust {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding-top: 24px !important;
  }
  .trust .lbl { grid-column: 1 / -1; }

  /* ---- Footer ---- */
  .footer { padding: 48px 20px 24px !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
  }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-base {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start !important;
  }

  /* ---- Methodology / longread / field notes ---- */
  .longread { padding: 56px 20px !important; }
  .longread h1 { font-size: 40px !important; }
  .longread .prose { font-size: 17px !important; line-height: 1.65 !important; }
  .longread .prose h2 { font-size: 26px !important; margin-top: 36px !important; }
  .longread .pull { font-size: 20px !important; padding-left: 16px !important; margin: 32px 0 !important; }

  .fn { padding: 56px 20px !important; }
  .fn h1 { font-size: 40px !important; }
  .fn-entry {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  .fn-entry h3 { font-size: 22px !important; }

  /* ---- Library ---- */
  .lib { padding: 56px 20px !important; }
  .lib h1 { font-size: 40px !important; }
  .lib-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .lib-pill {
    font-size: 12px !important;
    padding: 10px 14px !important;
    min-height: 40px;
  }
  .lib-filters { gap: 6px !important; margin: 28px 0 !important; }

  /* ---- Brief builder ---- */
  .brief { padding: 40px 20px 80px !important; }
  .brief h1 { font-size: 40px !important; }
  .brief .ask { font-size: 18px !important; margin-bottom: 32px !important; }
  .brief-progress { gap: 6px !important; margin-bottom: 28px !important; overflow-x: auto; }
  .brief-progress .step { min-width: 0; }
  .brief-progress .step .nm { font-size: 14px !important; }
  .brief-progress .step .num { font-size: 10px !important; }
  .brief-field { margin-bottom: 28px !important; }
  .brief-field input,
  .brief-field textarea {
    font-size: 18px !important;
    padding: 14px 0 !important;
  }
  .brief-field .opts { grid-template-columns: 1fr !important; gap: 12px !important; }
  .brief-field .opt { padding: 18px !important; }
  .brief-nav { margin-top: 40px !important; padding-top: 24px !important; gap: 12px; }
  .brief-nav .btn-primary,
  .brief-nav .btn-secondary { min-height: 48px; padding: 14px 22px !important; }

  /* ---- Sign in / Gate ---- */
  .signin, .gate { padding: 32px 20px !important; }
  .signin-card, .gate-card { padding: 28px 22px !important; max-width: 100% !important; }
  .signin-head h1 { font-size: 32px !important; }
  .signin-head .lead { font-size: 15px !important; }
  .auth-btn { min-height: 48px; }

  /* ---- Live briefs (table → cards) ---- */
  section.live { padding: 32px 20px 80px !important; }
  .live-bar {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 24px !important;
    margin-bottom: 16px !important;
  }
  .next-drop {
    text-align: left !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--gray-800) !important;
    padding-top: 16px !important;
  }

  /* Hide table headers and reflow rows as cards */
  .live-head { display: none !important; }
  .live-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 18px 16px !important;
    border: 1px solid var(--gray-800) !important;
    margin-bottom: 10px !important;
    background: rgba(255,255,255,0.01);
  }
  .live-row.live { background: rgba(217, 119, 87, 0.05) !important; }
  .live-row > * { display: block; }
  .live-row .title {
    font-size: 18px !important;
    flex-wrap: wrap;
    order: 2;
    margin-top: 4px;
  }
  .live-row .topic { order: 3; font-size: 14px; color: var(--gray-300); }
  .live-row .by { order: 4; }
  .live-row .read,
  .live-row .date,
  .live-row .wk { display: inline-block !important; margin-right: 12px; }
  .live-row .wk { order: 1; }
  .live-row .date { order: 1; }
  .live-row .read { order: 5; opacity: 0.7; }
  .live-row .cta { order: 6; text-align: left !important; padding-top: 8px; border-top: 1px dotted var(--gray-800); margin-top: 6px; }
  .live-foot { grid-template-columns: 1fr !important; gap: 16px !important; padding-top: 32px !important; }

  /* ---- Radar shell ---- */
  .radar-shell { height: calc(100vh - 56px) !important; }
  .radar-bar {
    grid-template-columns: auto auto !important;
    grid-template-rows: auto auto;
    gap: 8px 12px !important;
    padding: 10px 16px !important;
  }
  .radar-bar .back { font-size: 11px !important; padding: 4px 0 !important; }
  .radar-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 6px 10px !important;
    font-size: 10px;
  }
  .radar-actions {
    grid-row: 1;
    grid-column: 2;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .radar-actions .btn-secondary.sm {
    font-size: 10px !important;
    padding: 6px 8px !important;
    min-height: 32px;
  }
  .radar-watermark { font-size: 56px !important; }
  .theme-chip { font-size: 10px !important; padding: 6px 8px !important; }

  /* ---- Member pill ---- */
  .nav .member-pill { font-size: 9px !important; padding: 3px 8px !important; }

  /* ---- Buttons general — 44px tap target floor ---- */
  .btn-primary, .btn-secondary {
    min-height: 44px;
    padding: 12px 18px !important;
    font-size: 12px !important;
  }
}

/* Very small phones — tighten further */
@media (max-width: 380px) {
  .hero h1 { font-size: 2.2rem !important; }
  .section-head h2 { font-size: 30px !important; }
  .stat .num { font-size: 38px !important; }
  .longread h1, .fn h1, .lib h1, .brief h1 { font-size: 34px !important; }
}