/* ==========================================================================
   responsive.css — breakpoint refinements.
   Layout is authored mobile-first in the other sheets; this file holds the
   corrections that only make sense once a breakpoint is known, plus the
   capability queries (hover, contrast, motion, data-saver).
   Load order matters: this must come last.
   ========================================================================== */

/* ── 320px — small phones ───────────────────────────────────────────────── */
@media (max-width:389px){
  :root{
    --gap:1.25rem;
    --section-y:3.25rem;
    --header-h:64px;
  }
  .container{ padding-inline:1.1rem; }

  .hero{ padding-top:calc(var(--header-h) + 1.25rem); }
  .hero__title{ font-size:2.35rem; letter-spacing:-.028em; }
  .hero__lede{ font-size:1rem; }
  .hero__proof{ gap:1rem 1.5rem; }
  .hero__proof-item b{ font-size:1.2rem; }

  .card,.form,.app-card__body{ padding:1.15rem; }
  .cta-band{ padding:1.75rem 1.25rem; }
  .stats-grid{ gap:1.5rem 1rem; }
  .stat__value{ font-size:2.15rem; }

  .brand__name span{ display:none; }
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:.75rem; }
}

/* ── up to 560px — one column of full-width actions ─────────────────────── */
@media (max-width:559px){
  /* Side-by-side buttons wrap to ragged widths at these sizes, which reads as
     unfinished. Stacked and full-width is both tidier and a bigger target. */
  .hero__actions{ flex-direction:column; align-items:stretch; width:100%; }
  .hero__actions .btn{ width:100%; }
  .cta-band .hero__actions{ align-items:stretch; }
}

/* ── landscape phones — the hero must not force a scroll to read the CTA ── */
@media (max-height:520px) and (orientation:landscape){
  .hero{
    min-height:auto;
    padding-top:calc(var(--header-h) + 1.5rem);
    padding-bottom:2.5rem;
  }
  .hero__proof{ display:none; }
  .scroll-cue{ display:none; }
}

/* ── 768px — tablets ────────────────────────────────────────────────────── */
@media (min-width:768px){
  .hero__actions{ gap:1rem; }
  .section-head{ margin-bottom:3rem; }

  /* legal pages read better with a touch more measure */
  .prose{ font-size:1.0125rem; }
}

/* ── 1024px — laptops ───────────────────────────────────────────────────── */
@media (min-width:1024px){
  .hero__content{ max-width:52rem; }
  .hero__lede{ font-size:1.25rem; }

  /* pull the app card copy in slightly so the media panel dominates */
  .app-card__body{ padding:1.75rem; }

  .footer__grid{ padding-bottom:3.25rem; }
}

/* ── 1440px and up — wide desktops ──────────────────────────────────────── */
@media (min-width:1440px){
  :root{
    --container:1280px;
    --gap:2.25rem;
  }
  .hero__title{ letter-spacing:-.036em; }
  .hero__content{ max-width:56rem; }
  .services-grid,.apps-grid{ gap:2.25rem; }
}

/* ── very wide — stop the hero copy drifting away from the fold ─────────── */
@media (min-width:1800px){
  :root{ --container:1360px; }
  .hero{ min-height:min(100svh,1000px); }
}

/* ── coarse pointers — hover states are noise on touch ──────────────────── */
@media (hover:none){
  .card:hover,
  .app-card:hover,
  .why-item:hover,
  .btn:hover,
  .socials a:hover{ transform:none; box-shadow:none; }
  .card:hover::before{ opacity:0; }
  .app-card:hover .phone{ transform:translateY(9%); }
  .service:hover .service__icon{ transform:none; }
  .footer__list a:hover{ transform:none; }

  /* touch targets to the 44px WCAG 2.5.5 floor */
  .nav__link,.footer__list a,.link-arrow{ min-height:44px; display:inline-flex; align-items:center; }
  .btn{ min-height:46px; }
}

/* ── fine pointer, tall viewport — let the hero breathe ─────────────────── */
@media (hover:hover) and (min-height:900px){
  .hero__proof{ margin-top:3.5rem; }
}

/* ── forced colors / Windows high contrast ──────────────────────────────── */
@media (forced-colors:active){
  .card,.form,.why-item,.step,.app-card{ border:1px solid CanvasText; }
  .btn--primary{ border:1px solid ButtonText; }
  .stat__value,.grad-text,.step::before,.error-page__code{
    -webkit-text-fill-color:CanvasText;
    color:CanvasText;
  }
  .hero__canvas,.hero::before,.hero::after{ display:none; }
  .nav__link.is-active::after{ background:Highlight; }
}

/* ── explicit high contrast preference ──────────────────────────────────── */
@media (prefers-contrast:more){
  :root{
    --ink-soft:#e2e8f0;
    --ink-muted:#cbd5e1;
    --gray:#94a3b8;
    --rule:rgba(148,163,184,.3);
    --rule-strong:rgba(148,163,184,.5);
  }
  .input,.select,.textarea{ border-width:2px; }
  .hero::before,.page-hero::before{ opacity:.4; }
}

/* ── reduced data — drop the decorative WebGL layer entirely ────────────── */
@media (prefers-reduced-data:reduce){
  .hero__canvas{ display:none; }
}

/* ── reduced transparency ───────────────────────────────────────────────── */
@media (prefers-reduced-transparency:reduce){
  .site-header.is-stuck{ background:var(--surface-0); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .mobile-nav{ background:var(--surface-0); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .btn--secondary,.hero__badge{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ── global motion opt-out ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}