/* ============================================================
   OCCLUDE — mobile.css
   All responsive overrides (880px, 720px breakpoints)
   ============================================================ */

/* ---------- 880px breakpoint ---------- */
@media (max-width: 880px) {
  /* Landing: live widget grid */
  .live-grid { grid-template-columns: 1fr; }

  /* Landing: surface table */
  .surface-row { grid-template-columns: 1fr; gap: 8px; }
  .surface-row .target { text-align: left; }

  /* Fingerprint page: field rows */
  .fp-field { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fp-field-name { grid-column: 1 / -1; }
  .fp-field-explain { padding-left: 0; }
}

/* ---------- 720px breakpoint ---------- */
@media (max-width: 720px) {
  /* Page container */
  .page { padding: 20px 18px 48px; }

  /* Folio header */
  .folio-r,
  .folio-nav { display: none; }

  /* Hero */
  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: 28px; }
  .hero-lede { font-size: 14px; }
  .hero-action { flex-direction: column; align-items: flex-start; }
  .install-box { font-size: 12px; width: 100%; }
  .hero-meta { font-size: 10.5px; }

  /* Fingerprint teaser */
  .fp-teaser-body { grid-template-columns: 1fr; }
  .fp-teaser .fp-verdict { grid-column: 1; }

  /* Landing: install platforms grid */
  .platforms { grid-template-columns: 1fr; }

  /* Landing: non-goals grid */
  .nongoals { grid-template-columns: 1fr; }
  .nong { grid-template-columns: 1fr; gap: 8px; }

  /* Landing: pricing grid */
  .pricing-grid { grid-template-columns: 1fr; }

  /* Purchase: plan options */
  .plan-options { grid-template-columns: 1fr; }

  /* Purchase: steps */
  .steps { flex-wrap: wrap; }
  .step-indicator { font-size: 9px; padding: 8px 10px; }

  /* Purchase: key display */
  .key-display { font-size: 14px; flex-direction: column; gap: 12px; }

  /* Docs layout: sidebar collapses */
  .docs-layout { grid-template-columns: 1fr; gap: 0; }
  .docs-sidebar { display: none; }
  .docs-sidebar-mobile { display: block; }

  /* Fingerprint page: full page fields */
  .fp-field { grid-template-columns: 1fr; }
  .fp-field-target,
  .fp-field-match { text-align: left; }
  .fp-score { flex-direction: column; text-align: center; gap: 16px; }
  .fp-score-verdict { text-align: center; }

  /* Colophon */
  .colophon { flex-direction: column; align-items: flex-start; gap: 12px; }
  .colophon .r { flex-wrap: wrap; gap: 14px; }

  /* Legal page */
  .legal-page h1 { font-size: 24px; }
}

/* ---------- 480px breakpoint (small phones) ---------- */
@media (max-width: 480px) {
  .page { padding: 16px 14px 40px; }
  .hero h1 { font-size: 24px; }
  .section-head { flex-direction: column; gap: 8px; }
  .section-title { font-size: 18px; }
  .live-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .live-head .r { font-size: 10px; }
  .payment-address { flex-direction: column; gap: 8px; text-align: center; }
}