/* Ruta 6.3 — readable mobile type, without scaling the page or changing its art.
   Kept after the existing styles. Desktop styles and submission code are untouched.
   rem sizes keep the reader's font preferences; browser zoom remains available. */
@media screen and (max-width: 850px) {
  body { font-size: 1.0625rem; line-height: 1.7; }
  .wrap { width: min(620px, calc(100% - 40px)); }
  .header-inner { width: calc(100% - 40px); }
  .brand small { font-size: .625rem; }
  .nav > a, .nav .btn { font-size: 1rem; min-height: 48px; }
  .nav { gap: 16px; }
  .eyebrow, .section-copy .eyebrow, .cta-panel .eyebrow {
    font-size: .75rem; line-height: 1.6; letter-spacing: .13em; gap: 10px;
  }
  .eyebrow::before { flex-shrink: 0; width: 24px; }
  .btn { min-height: 54px; padding: 14px 22px; font-size: 1rem; gap: 12px; border-radius: 9px; }
  .btn svg { width: 20px; height: 20px; }
  .text-link, .hero-actions .text-link, .faq-copy .text-link {
    font-size: 1rem; min-height: 44px; line-height: 1.5; gap: 9px;
  }
  .tiny, .small-note, .section-copy .small-note, .special-note { font-size: .875rem; line-height: 1.65; }

  /* Main page copy: do not shrink paragraphs to fit a desktop-like composition. */
  .hero { padding-top: 38px; }
  .hero h1 { font-size: clamp(2.8125rem, 11.5vw, 4rem); line-height: 1.12; text-wrap: balance; }
  .hero-desc, .section-copy p, .section-heading p, .faq-copy p, .faqs details p {
    font-size: 1.0625rem; line-height: 1.75; max-width: 36ch;
  }
  .hero-desc { margin-top: 24px; }
  .hero-actions { flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }
  .hero-platforms { font-size: .9375rem; gap: 19px; margin-top: 24px; flex-wrap: wrap; }
  .hero-platforms svg { width: 17px; height: 17px; }
  .hero-grid { gap: 32px; }
  .hero-footline { font-size: .9375rem; line-height: 1.65; gap: 14px; margin-top: 24px; }
  .hero-footline > span { min-width: 12px; }
  .feature-strip { padding: 28px 0; }
  .feature-strip .wrap { gap: 22px 20px; max-width: 580px; }
  .strip-item { font-size: .9375rem; line-height: 1.5; gap: 11px; align-items: flex-start; }
  .strip-item svg { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
  .section, .specials, .faq-section { padding-block: 66px; }
  .split, .sync-section .split, .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .split > *, .faq-layout > * { min-width: 0; }
  .split.visual-first .section-copy { order: -1; }
  .section-copy { max-width: 100%; }
  .section-copy h2, .section-heading h2, .faq-copy h2 {
    font-size: clamp(2.5rem, 10.6vw, 3.25rem); line-height: 1.14; text-wrap: balance;
  }
  .section-copy p { margin-top: 22px; }
  .small-benefit { font-size: 1rem; line-height: 1.6; align-items: flex-start; }
  .small-benefit svg { flex-shrink: 0; margin-top: 3px; }
  .feature-list { gap: 22px; margin-top: 28px; }
  .mini-feature { gap: 14px; }
  .mini-feature strong { font-size: 1rem; line-height: 1.55; }
  .mini-feature span { font-size: 1rem; line-height: 1.65; margin-top: 4px; }
  .mini-icon { width: 38px; height: 38px; flex-shrink: 0; }
  .section-heading { margin-bottom: 32px; }
  .section-heading p { padding: 0; margin-inline: auto; }
  .stitch-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .stitch-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 0 20px; padding: 24px 20px; }
  .stitch-card .stitch-diagram { width: 86px; max-width: 86px; height: 92px; grid-row: span 2; margin: 0; }
  .stitch-card h3 { font-size: 1.75rem; line-height: 1.2; align-self: end; }
  .stitch-card p { font-size: 1rem; line-height: 1.65; margin-top: 9px; align-self: start; }
  .coming { font-size: .875rem; padding: 6px 12px; }
  .sync-section { padding-block: 64px; }
  .sync-devices { width: 100%; max-width: 430px; margin-inline: auto; }
  .founder-note { padding-block: 44px; }
  .founder-note p { font-size: 1.75rem; line-height: 1.45; max-width: 25ch; margin-inline: auto; }
  .faqs summary { font-size: 1.0625rem; line-height: 1.55; padding-block: 22px; padding-right: 32px; }
  .faqs summary::after { top: 21px; font-size: 24px; }
  .faqs details p { max-width: none; padding: 0 8px 24px 0; }
  .faq-copy p { margin-top: 20px; }

  /* Interactive illustrations have their own compact, but legible, scale. */
  .app-topbar { min-height: 48px; height: auto; padding: 12px; font-size: .875rem; }
  .app-topbar .project-state { font-size: .75rem; }
  .app-subbar { min-height: 58px; height: auto; flex-wrap: wrap; gap: 6px; padding: 7px 10px; font-size: .75rem; }
  .segmented button, .comparison-controls button { font-size: .875rem; min-height: 44px; padding: 10px 12px; }
  .hero-chart-label { font-size: .75rem; padding: 7px 9px; }
  .app-palette { padding: 12px; flex-wrap: wrap; gap: 10px; }
  .swatch-list { gap: 4px; flex-wrap: wrap; }
  .swatch { width: 40px; height: 44px; }
  .all-threads { min-width: 44px; min-height: 44px; font-size: .875rem; }
  .palette-caption { font-size: .8125rem; flex-basis: 100%; }
  .import-panel { padding: 24px 16px; }
  .import-caption, .visual-caption { font-size: .9375rem; line-height: 1.6; }
  .focus-panel, .editor-panel { padding: 12px; }
  .native-header { padding: 12px 10px; min-height: 60px; flex-wrap: wrap; }
  .native-project strong { font-size: .9375rem; white-space: normal; }
  .native-mode { font-size: .8125rem; }
  .native-project > svg { width: 18px; height: 18px; }
  .native-progress { font-size: .875rem; }
  .native-save { font-size: .875rem; min-height: 44px; padding: 10px; white-space: normal; }
  .native-header-actions { margin-left: auto; }
  .native-controls { flex-wrap: wrap; padding: 8px; gap: 5px; }
  .native-tools { flex: 1 1 100%; flex-wrap: wrap; gap: 4px; overflow: visible; }
  .native-tool, #editor-window [data-tools-for="editor"] .native-tool {
    font-size: .8125rem; min-height: 44px; padding: 9px 7px; gap: 5px;
  }
  .native-tool span, #editor-window [data-tools-for="editor"] .native-tool span { display: inline; }
  .native-tool svg, #editor-window [data-tools-for="editor"] .native-tool svg, .native-icon-button svg { width: 18px; height: 18px; }
  .native-icon-button, .native-history .native-icon-button, .native-view-tools .native-icon-button {
    min-width: 44px; width: 44px; min-height: 44px; height: 44px;
  }
  .native-history { margin-left: auto; border: 0; }
  .native-canvas-wrap { height: 330px; }
  .native-view-tools { right: 8px; top: 24px; padding: 2px; }
  .native-selection { font-size: .875rem; flex-wrap: wrap; padding: 12px 10px 8px; gap: 5px 10px; }
  .native-selection .native-remaining { display: inline; font-size: .8125rem; margin-left: 6px; }
  .native-selection .native-stitch-type { font-size: .8125rem; }
  .native-thread { min-width: 78px; font-size: .8125rem; padding: 9px 7px; gap: 5px; }
  .native-thread-count { font-size: .75rem; }
  .native-swatch { width: 30px; height: 30px; }
  .palette-arrow { width: 32px; }
  .native-status-bar, .native-count { font-size: .75rem; }
  .native-status-bar { min-height: 36px; padding: 9px; flex-wrap: wrap; }
  .native-status { white-space: normal; overflow-wrap: anywhere; }
  .native-count { white-space: normal; margin-left: auto; }

  .progress-panel { padding: 12px; }
  .stats-card { padding: 20px 16px; }
  .stats-header h3 { font-size: 1rem; }
  .stats-main { flex-wrap: wrap; align-items: center; gap: 12px; }
  .stats-percent { font-size: 3rem; }
  .stats-main p { font-size: .875rem; line-height: 1.6; }
  .stat-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; font-size: .875rem; margin-block: 22px; }
  .stat-row > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
  .stat-row strong { font-size: 1rem; margin-top: 0; }
  .calendar-heading { font-size: .9375rem; flex-wrap: wrap; gap: 6px 12px; }
  .calendar-heading span:last-child { font-size: .8125rem; }
  .calendar-weekdays { font-size: .8125rem; }
  .calendar-days { gap: 4px; }
  .calendar-day { min-width: 0; min-height: 40px; font-size: .9375rem; }
  .calendar-detail { font-size: .875rem; flex-wrap: wrap; gap: 8px; }

  /* Keep the already-working form, with readable labels and roomy choices. */
  #early-access .access-panel { padding: 38px 18px 22px; }
  #early-access .access-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 480px; text-align: center; }
  #early-access .access-intro .eyebrow { justify-content: center; }
  #early-access .access-intro h2 { font-size: clamp(2.5rem, 10.6vw, 3.125rem); line-height: 1.14; text-wrap: balance; }
  #early-access .access-description { font-size: 1.0625rem; line-height: 1.75; margin: 22px auto 0; max-width: 35ch; }
  #early-access .access-contact { margin-top: 24px; }
  #early-access .access-contact-label { font-size: .9375rem; line-height: 1.6; }
  #early-access .email-fallback { font-size: .9375rem; justify-content: center; flex-wrap: wrap; gap: 6px; }
  #early-access .email-fallback a { overflow-wrap: anywhere; }
  #early-access .copy-email { width: 44px; height: 44px; }
  #early-access .copy-status { font-size: .875rem; }
  #early-access .access-card { padding: 26px 18px 24px; text-align: left; }
  #early-access .access-field > label, #early-access .access-devices legend { font-size: 1rem; line-height: 1.6; }
  #early-access .access-email-wrap input { font-size: 1.0625rem; min-height: 58px; padding-block: 15px; }
  #early-access .access-email-wrap > svg { top: 19px; }
  #early-access .access-hint { font-size: .9375rem; line-height: 1.6; margin-top: 4px; margin-bottom: 14px; }
  #early-access .access-device-grid { gap: 8px; }
  #early-access .access-device-tile { font-size: .9375rem; min-height: 112px; padding: 18px 4px 13px; line-height: 1.4; }
  #early-access .access-device-tile > span:not(.access-device-check) { min-height: 2.8em; display: flex; align-items: center; justify-content: center; }
  #early-access .access-device-check { width: 16px; height: 16px; }
  #early-access .access-submit { font-size: 1rem; line-height: 1.5; min-height: 58px; padding: 14px 12px; }
  #early-access .access-privacy { font-size: .875rem; line-height: 1.7; margin-top: 18px; }
  #early-access .access-privacy a { min-height: 44px; padding: 9px 6px; }
  #early-access .access-field-error, #early-access .access-submit-error, #early-access .access-no-script { font-size: .9375rem; line-height: 1.65; }
  #early-access .access-success h3 { font-size: 2.125rem; line-height: 1.2; }
  #early-access .access-success p { font-size: 1.0625rem; line-height: 1.7; }
  #early-access .access-success .text-link { font-size: 1rem; }
  .access-success-kicker { font-size: .75rem; }

  /* Secondary pages use the same reading scale and keep the same content. */
  .back-link { font-size: .9375rem; }
  .legal-document .updated { font-size: .875rem; }
  .legal-tabs { font-size: 1rem; }
  .legal-copy p { font-size: 1.0625rem; line-height: 1.75; }
  .legal-copy h2 { font-size: 1.75rem; }
  .legal-copy .policy-note { font-size: .9375rem; }
  .access-thanks-card { padding: 36px 22px; }
  .access-thanks-card > p { font-size: 1.0625rem; line-height: 1.75; }
  .access-thanks-button { font-size: 1rem; min-height: 54px; }
  .access-thanks-card .access-thanks-contact { font-size: .9375rem; }
  .footer-brand { align-items: flex-start; }
  .footer-brand p { font-size: .9375rem; line-height: 1.65; }
  .footer-links { gap: 8px 24px; flex-wrap: wrap; }
  .footer-links button, .footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }
  .footer-bottom, .footer-bottom p, .footer-inner { font-size: .875rem; line-height: 1.65; }
}
@media screen and (max-width: 620px) {
  .nav.open { gap: 0; }
  .nav .btn { font-size: 1rem; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: min(100%, 310px); }
  .hero-visual { padding-top: 12px; }
  .footer-main { display: block; }
  .footer-brand { flex-direction: column; gap: 18px; }
  .footer-brand p { max-width: 29ch; }
  .footer-bottom { align-items: flex-start; }
}
@media screen and (max-width: 370px) {
  .wrap, .header-inner { width: calc(100% - 32px); }
  .hero .eyebrow { font-size: .6875rem; letter-spacing: .10em; }
  .hero h1 { font-size: 2.5rem; }
  .hero-platforms { gap: 14px; }
  .section-copy h2, .section-heading h2, .faq-copy h2 { font-size: 2.375rem; }
  .hero-footline > span { display: none; }
  .feature-strip .wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .stitch-card { grid-template-columns: 68px minmax(0, 1fr); padding: 22px 16px; column-gap: 16px; }
  .stitch-card .stitch-diagram { width: 68px; max-width: 68px; }
  .stitch-card h3 { font-size: 1.625rem; }
  .focus-panel, .editor-panel { padding: 8px; }
  #early-access .access-panel { padding: 32px 12px 18px; }
  #early-access .access-intro h2 { font-size: 2.375rem; }
  #early-access .access-card { padding: 24px 16px 20px; }
  #early-access .access-device-grid { grid-template-columns: minmax(0, 1fr); }
  #early-access .access-device-tile { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 60px; padding: 13px 38px 13px 16px; text-align: left; }
  #early-access .access-device-tile > span:not(.access-device-check) { min-height: 0; }
  #early-access .access-device-check { top: 50%; right: 12px; transform: translateY(-50%); }
  #early-access .access-email-wrap input { padding-left: 40px; padding-right: 10px; }
  #early-access .access-email-wrap > svg { left: 13px; }
}