/* Readable phone typography. Keep Arabic glyphs steady and give copy room to breathe. */
@media (max-width: 767px) {
  html { font-size: 18px; }
  body { font-size: 1rem; line-height: 1.8; }
  html .hero { padding-block: 48px 64px; }
  html .hero .inner { gap: 18px; }

  /* Animated text clipping and glow can make Arabic dots appear to blink on iOS. */
  html .g {
    animation: none !important;
    filter: none !important;
    background-size: 100% 100% !important;
  }
  html .hero .h-hero {
    font-size: clamp(1.9rem, 8.1vw, 2.25rem);
    line-height: 1.38;
    padding-block: .08em;
    background: none !important;
    color: var(--foreground) !important;
    -webkit-text-fill-color: var(--foreground) !important;
    filter: none !important;
  }
  html .hero .h-hero .g {
    background: none !important;
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
  }
  html .hero .h-hero::after {
    animation: none !important;
    filter: none !important;
    opacity: .8;
  }

  html .h-xl { font-size: clamp(1.85rem, 7.2vw, 2.3rem); line-height: 1.5; }
  html .h-sm, html .vbody h3, html .cta-strip h3, html .obj-q {
    font-size: 1.35rem;
    line-height: 1.5;
  }
  html .sub, html .hero .sub, html .assistant-build-section .head .sub {
    font-size: 1.06rem;
    line-height: 1.7;
  }
  html .hero .eyebrow-pill {
    max-width: 100%;
    padding: 10px 14px;
    font-size: .94rem;
    line-height: 1.65;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
  html .facts span, html .when {
    font-size: .94rem;
    line-height: 1.7;
    white-space: normal;
  }

  html .row, html .why-card p, html .tl-card p, html .vbody p,
  html .obj-a, html details p, html .t-item, html .cta-strip p,
  html .plan li, html .plan-note, html .plan-d, html .plan-k,
  html .assistant-note, html .lm-pts li {
    font-size: 1.04rem;
    line-height: 1.85;
  }
  html .lm-field label {
    font-size: 1rem;
    line-height: 1.65;
  }
  html body .dt-flow--req .dt-card p,
  html .dt-flow .dt-note {
    font-size: 1.02rem;
    line-height: 1.8;
  }
  html body .dt-flow--req .dt-title {
    font-size: 1.45rem;
    line-height: 1.5;
  }
  html body #faq summary { font-size: 1.08rem; line-height: 1.55; }
  html .lm-chk, html .lm-priv, html .lm-err {
    font-size: .94rem;
    line-height: 1.7;
    color: var(--muted-foreground);
  }
  html .lm-in, html .lm-sel { font-size: 1rem; }
  html .lm-form .btn small, html .btn small { font-size: .82rem; }
  html .t-stats span { font-size: .82rem; line-height: 1.5; }
  html .cd small { font-size: 11px; }
  html .cd-label { font-size: 11px; }
  html .header .btn b { font-size: 13px; }
}

/* Give the full countdown its own row instead of hiding values on narrow phones. */
@media (max-width: 380px) {
  html .header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand actions" "count count";
    gap: 6px 8px;
    padding: 8px 12px;
  }
  html .header .live { grid-area: brand; justify-self: start; }
  html .header .hdr-end { grid-area: actions; justify-self: end; }
  html .header .cd-wrap { grid-area: count; justify-self: center; gap: 3px; }
  html .header .cd { gap: 6px; }
  html .header .cd div, html .header .cd div:last-child {
    display: grid;
    min-width: 42px;
    padding: 5px 4px;
  }
  html .header .cd b { font-size: 15px; }
  html .header .cd small { font-size: 11px; }
}