/* ════════════════════════════════════════════════════════════════
   THE POWERHOST — ORBIT mobile patch layer (v1)
   Loaded AFTER orbit.css on every page (see include/orbit/lib.php).
   Fixes overflow, touch targets, iOS zoom, small-screen typography.
   Safe to update independently — no page markup changes required.
   ════════════════════════════════════════════════════════════════ */

/* ── global guards: nothing may cause horizontal scroll ── */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, iframe, canvas { max-width: 100%; }
table { max-width: 100%; }

/* long URLs / codes / emails never blow out a card */
.o-panel, .o-cell, .o-plan, .o-row, .o-faq .a, .o-prose, .o-quote {
  overflow-wrap: break-word; word-break: break-word;
}

/* every bare table becomes swipeable (JS also wraps them, this is the fallback) */
.o-tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ═══════════ ≤ 900px — tablets ═══════════ */
@media (max-width: 900px) {
  .o-grid2 { grid-template-columns: 1fr !important; gap: 36px; }
  .o-sticky { position: static !important; }
  .o-sub { max-width: 100%; }
}

/* ═══════════ ≤ 768px — large phones ═══════════ */
@media (max-width: 768px) {
  .o-sec { padding: 60px 0; }
  .o-h1 { font-size: clamp(34px, 9.5vw, 46px); }
  .o-h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .o-hero .o-lede, .o-lede { font-size: 16px; }
  .o-sub { font-size: 15.5px; }

  /* inline-styled paddings on panels get gently reduced */
  .o-panel { border-radius: 14px; }

  /* CTA buttons: full-width & thumb-friendly */
  .o-btn { min-height: 46px; }
  .o-hero .o-btn, .o-cta-box .o-btn { width: auto; }

  /* plan cards breathe less on phones */
  .o-plan .o-specs li { padding: 8px 20px; }
  .o-plan .for { margin: 6px 20px 0; }

  /* footer grid → single column stacking handled by orbit.css @520,
     but tighten link tap targets here */
  .o-foot ul a { padding: 9px 0; }
}

/* ═══════════ ≤ 560px — phones ═══════════ */
@media (max-width: 560px) {
  .o-wrap { padding: 0 16px; }
  .o-hero { padding: 148px 0 48px; }
  .o-hero-sub { padding: 132px 0 44px; }

  /* status pill: fit one line — smaller type, no dangling "·",
     and never let the highlight text break into a cramped column */
  .o-pill {
    font-size: 10.5px; letter-spacing: .02em; gap: 8px;
    padding: 8px 13px 8px 11px; line-height: 1.5;
    max-width: 100%; flex-wrap: wrap; row-gap: 2px;
  }
  .o-pill b { white-space: nowrap; }

  /* domain search command bar stacks vertically */
  .o-cmd { flex-direction: column; border-radius: 14px; }
  .o-cmd input { width: 100%; padding: 14px 16px; }
  .o-cmd .o-btn { width: 100%; border-radius: 0; }

  /* stat band → 1 col if numbers still cramped */
  .o-stats-in { grid-template-columns: 1fr 1fr; gap: 0; }

  /* bento cells shorter on phones */
  .o-cell { min-height: 0; padding: 24px 20px; }

  /* FAQ question wraps nicely */
  .o-faq .q { font-size: 15px; padding: 18px 18px; gap: 12px; }
  .o-faq .a { padding: 0 18px 18px; }

  /* modal fits viewport */
  .o-modal { width: calc(100vw - 24px); max-height: 92dvh; overflow-y: auto; }

  /* quotes rail cards fit narrow screens */
  .o-quote { width: min(300px, calc(100vw - 56px)); }

  /* chips rows scroll horizontally instead of ugly wrapping walls */
  .o-tlds { flex-wrap: wrap; }
}

/* ═══════════ ≤ 380px — small phones ═══════════ */
@media (max-width: 380px) {
  .o-h1 { font-size: 30px; }
  .o-h2 { font-size: 24px; }
  .o-stats-in { grid-template-columns: 1fr; }
  .o-plan .price { font-size: 34px; }
}

/* ── iOS: inputs under 16px trigger auto-zoom — force 16px on touch ── */
@media (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="number"], select, textarea {
    font-size: 16px !important;
  }
  /* comfortable tap targets everywhere */
  a, button { -webkit-tap-highlight-color: rgba(139, 92, 246, .18); }
}

/* ── safe-area for notched phones (chat bubble / sticky elements) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .o-foot { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}