/* ============================================================================
   LOAMIST — mobile optimization layer
   Phone-first refinements layered ON TOP of loamist-brand.css + loamist-polish.css.
   The brand sheet already stacks the major grids at 960/720; this layer makes
   the homepage feel genuinely *designed* for a phone: real touch targets,
   safe-area awareness, a proper nav sheet, a compact live dashboard, calmed
   motion, and a sticky bottom action bar. Linked LAST.
   ============================================================================ */

/* ---- never scroll sideways; respect the notch ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (overflow: clip) { body { overflow-x: clip; } }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* ============================================================ TOUCH BEHAVIOR
   On touch devices, hover effects "stick" after a tap. Neutralize the lifts
   and spotlights, and replace them with crisp press feedback instead. */
@media (hover: none) {
  .problem-card:hover, .feature-card:hover, .step-card:hover, .roi-card:hover {
    transform: none; border-color: var(--line);
  }
  .problem-card::before, .feature-card::before, .step-card::before, .roi-card::before { opacity: 0 !important; }
  .feature-card:hover .feature-icon, .problem-card:hover .problem-icon, .step-card:hover .step-number { transform: none; }
  .feature-card:hover .feature-icon { background: var(--gold-soft); color: var(--gold); }
  .btn:hover { transform: none; }
  .btn:hover::after { transform: translateX(-130%); }       /* no sheen sweep on tap */
  .nav-links a:hover::after { right: 100%; }

  /* tactile press states */
  .btn:active { transform: scale(0.97); opacity: .92; }
  .problem-card:active, .feature-card:active, .step-card:active, .roi-card:active {
    transform: scale(0.99); border-color: color-mix(in srgb, var(--gold) 35%, var(--line));
  }
}

/* clear focus ring for keyboard / switch-access users */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}

/* ============================================================ ≤720px : PHONE */
@media (max-width: 720px) {

  /* keep the theme toggle reachable in the header (brand sheet hides it) */
  .nav-right .btn--ghost[data-theme-toggle] {
    display: inline-flex; width: 42px; height: 42px; padding: 0;
    align-items: center; justify-content: center;
  }
  .header-inner { gap: 12px; padding-block: 0; }
  /* notch-safe sticky header */
  .header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .logo-wordmark { height: 21px; }

  /* generous tap targets everywhere */
  .btn { min-height: 44px; }
  .mobile-nav-toggle { width: 44px; height: 44px; justify-content: center; align-items: center; padding: 0; }

  /* tighten vertical rhythm so sections don't feel cavernous on a phone */
  section { padding-block: clamp(44px, 9vw, 60px); }
  .container { padding-inline: 20px; }

  /* ---- animated hamburger → X ---- */
  .mobile-nav-toggle span { transition: transform .26s var(--ease), opacity .2s var(--ease); transform-origin: center; }
  .mobile-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .mobile-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---- nav sheet: fuller, larger targets, slides from under the header ---- */
  .mobile-nav {
    padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 24px 40px -28px rgba(28,25,23,0.5);
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .mobile-nav a { font-size: 16px; padding: 15px 4px; }
  .mobile-nav a:last-of-type { border-bottom: none; }
  .mobile-nav a.btn { min-height: 48px; font-size: 15.5px; margin-top: 14px; }
  /* dim backdrop behind the open sheet */
  body.m-nav-open::after {
    content: ""; position: fixed; inset: 60px 0 0; z-index: 98;
    background: color-mix(in srgb, var(--ink) 38%, transparent);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: mNavFade .22s var(--ease);
  }
  @keyframes mNavFade { from { opacity: 0; } to { opacity: 1; } }
  body.m-nav-open { overflow: hidden; }

  /* ---- HERO ---- */
  .hero { padding-top: 26px; padding-bottom: 44px; }
  .hero-grid { gap: 30px; }
  .hero-badge { font-size: 11px; padding: 6px 11px; }
  .hero h1 { font-size: clamp(31px, 8.5vw, 40px); line-height: 1.1; }
  .hero-sub { font-size: 16px; max-width: none; }
  .hero-actions { margin-top: 24px; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* proof stats: even 3-up grid, drop the vertical dividers */
  .hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
  .hero-stat-divider { display: none; }
  .hero-stat-value { font-size: clamp(26px, 7vw, 34px); }
  .hero-stat-label { font-size: 12px; line-height: 1.3; }

  /* Hide the hero graphic on phones — the stacked layout would otherwise
     put the dashboard mockup + floating badges first, above the headline.
     Lead with the message on mobile. (Andy 2026-06-15.) */
  .hero-visual { display: none; }

  /* ---- dashboard mock styles below are inert while .hero-visual is
     hidden; kept for the ≤960 tablet tier where the visual still shows ---- */
  .hero-dashboard { border-radius: 16px; }
  .dash-body { padding: 15px; gap: 13px; }
  .dash-kpi-row { grid-template-columns: repeat(3, 1fr); gap: 9px; }   /* re-enable 3-up; brand stacked it */
  .dash-kpi-value { font-size: 17px; }
  .dash-kpi-label, .dash-kpi-change { font-size: 10px; }
  .dash-kpi-change { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* pull the floating badges inside so nothing clips the screen edge */
  .hero-float { font-size: 11.5px; padding: 7px 12px; }
  .hero-float--top { top: -12px; right: 6px; }
  .hero-float--bottom { bottom: -12px; left: 6px; }

  /* ---- problem / features / steps : single column already; tighten cards ---- */
  .problem-card, .feature-card, .step-card { padding: 22px 20px 20px; }
  .problem-header { margin-bottom: 30px; }

  /* ---- ROI ---- */
  .roi-metrics { gap: 12px; }
  .roi-card { padding: 18px; }
  .roi-content h3 { font-size: 20px; }

  /* ---- calculator: comfortable touch inputs, no iOS zoom ---- */
  .calc-inputs, .calc-result-card, .calc-breakdown { padding: 20px; }
  .calc-field input[type="number"], .calc-input-prefix {
    font-size: 16px;            /* ≥16px stops iOS auto-zoom on focus */
    padding: 12px 13px; min-height: 46px;
  }
  .calc-slider { height: 7px; }
  .calc-slider::-webkit-slider-thumb { width: 26px; height: 26px; }   /* fat thumb for fingers */
  .calc-slider::-moz-range-thumb { width: 22px; height: 22px; }
  .calc-slider-row { gap: 14px; }

  /* ---- trust seal ---- */
  .trust-soc2-featured { padding: 26px; }
  .trust-soc2-featured .soc-seal { width: 104px; height: 104px; }

  /* ---- CTA + footer ---- */
  .cta-actions .btn, .calc-cta .btn { width: 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { gap: 12px; }
  .footer-legal { gap: 16px; flex-wrap: wrap; }

  /* room so the sticky bottom bar never hides the real footer CTA */
  body { scroll-padding-bottom: 84px; }
}

/* ============================================================ ≤440px : SMALL PHONES */
@media (max-width: 440px) {
  .container { padding-inline: 16px; }
  .hero h1 { font-size: 29px; }
  .hero-proof { gap: 10px; }
  .hero-stat-value { font-size: 24px; }
  .hero-stat-label { font-size: 11px; }
  .dash-kpi-value { font-size: 15px; }
  .dash-title { font-size: 11px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .calc-fixed-grid { grid-template-columns: 1fr; }
}

/* ============================================================ STICKY BOTTOM ACTION BAR
   A phone-native conversion pattern: the primary action stays one thumb-tap
   away as the user scrolls the page. Injected by loamist-polish.js, only ever
   visible ≤720px, and it gets out of the way over the hero and the final CTA. */
.m-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none;
  gap: 10px; align-items: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
          backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -20px rgba(28,25,23,0.5);
  transform: translateY(115%); transition: transform .34s var(--ease);
}
.m-cta-bar.is-visible { transform: none; }
.m-cta-bar .btn { min-height: 48px; }
.m-cta-bar .btn--accent { flex: 1 1 auto; justify-content: center; }
.m-cta-bar .m-cta-secondary { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 720px) {
  .m-cta-bar { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .m-cta-bar { transition: none; }
}