/* 06-responsive.css - 6 of 6 - Every breakpoint (1080, 720), pointer:coarse, reduced-motion. Must stay last.
   Order matters: these six files are one stylesheet cut at section
   boundaries, and every page links them in numeric order. A rule in a
   later file overrides an earlier one exactly as it did in the single
   file. Do not reorder the links, and do not add a seventh without
   updating check.js, which enforces the manifest. */
@media(max-width:1080px){
  .nav-links{display:none}.menu-toggle{display:block}
  .mobile-nav{display:block;position:fixed;inset:76px 0 0;z-index:80;background:rgba(4,8,22,.98);padding:22px;transform:translateX(100%);transition:.35s ease;overflow:auto}
  .mobile-nav{visibility:hidden}
  .mobile-nav.open{transform:none;visibility:visible}.mobile-nav a{display:block;padding:15px;border-bottom:1px solid var(--line);font-weight:800}
  .hero-grid,.page-hero-grid{grid-template-columns:1fr}.hero-stage{min-height:610px}.page-visual{min-height:430px}
  .grid-4{grid-template-columns:repeat(2,1fr)}.grid-3,.package-grid,.process-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .container{width:min(100% - 28px,var(--max))}
  .section{padding:70px 0}.page-hero{padding:72px 0 40px}
  .grid-2,.grid-3,.grid-4,.split,.package-grid,.process-grid,.form-wrap,.demo-tabs{grid-template-columns:1fr}
  .hero-copy h1,.page-hero h1{font-size:46px}.hero-proof{grid-template-columns:1fr}.hero-stage{min-height:490px}
  .laptop{transform:none}.hero-float{display:none}
/* The mock inside the laptop keeps its DESKTOP layout on phones.
   It is a picture of a desktop website, and the collapse rules above it are
   written for real page sections but match by class alone, so they also hit the
   mock: .landing-layout and friends dropped to one column, .preview-dark and
   .preview-form stacked instead of sitting side by side, and the slide grew from
   155px to 725px. Meanwhile aspect-ratio:16/10 was making the box SHORTER as the
   screen narrowed. The two crossed and the slide was clipped mid-sentence -
   visible on the home hero as a sliced headline.
   Re-asserting the columns fixes the height and the depiction at once: a
   one-column mock inside a laptop lid is a phone screenshot in a laptop, which is
   not what the hero is claiming. */
.screen-inner .landing-layout,.screen-inner .corp-layout{grid-template-columns:1.15fr .85fr}
.screen-inner .commerce-layout{grid-template-columns:.68fr 1.32fr .62fr}
.screen-inner .dashboard-body{grid-template-columns:1.1fr .9fr}
.screen-inner .dashboard-top{grid-template-columns:repeat(4,1fr)}
.screen-inner .preview-grid{grid-template-columns:repeat(3,1fr)}
.screen-inner .filters{display:block}.screen-inner .cart{display:grid}.landing-layout,.corp-layout,.dashboard-body{grid-template-columns:1fr}.commerce-layout{grid-template-columns:1fr}.filters,.cart{display:none}.dashboard-top{grid-template-columns:repeat(2,1fr)}
  .page-visual{min-height:390px}.visual-columns{grid-template-columns:1fr}.visual-float{display:none}.visual-screen{min-height:340px}
  .visual-small-grid,.preview-grid{grid-template-columns:repeat(2,1fr)}
  .cta-panel{padding:30px;display:block}.cta-panel .btn{margin-top:10px}
  .stat-row{grid-template-columns:repeat(2,1fr)}.timeline-item{grid-template-columns:1fr;gap:6px}
  .footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}
}
@media (pointer:coarse){
  .nav-link{padding:12px 14px}
  .footer-links a{padding:9px 0}
  .text-link{padding:9px 0}
  .mobile-nav a{padding:17px 15px}
}
@media(prefers-reduced-motion:reduce){
  /* remove motion, keep state feedback: colour and opacity still transition */
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.12s!important}
  /* never let content depend on movement to become visible */
  .reveal,.reveal-left,.reveal-right{opacity:1!important;transform:none!important}
  /* no travel on hover, but the border and surface still respond */
  .btn:hover,.card:hover,.card.capability-card:hover,.package:hover,.faq details:hover,.text-link:hover:after{transform:none!important}
}

/* Restored from the old file's tail. That tail was dropped as preview-only,
   but this rule is a bare body selector and applied to every page: without it
   a page shorter than the viewport lets the footer float up. Caught by hashing
   computed styles before and after the split - the only line the split lost. */
body{min-height:100vh}

/* Four columns only. Between 1081 and ~1200px a card's inner width falls to
   197px, and "svpcommercialteam" alone is 233px at 24px/900, so the local part
   would break mid-word. 1.8vw is 19.5px at 1081 (190px) and 23px at 1280. Below
   1081 the grid is two columns and the card is wide enough at the full size. */
@media(min-width:1081px){.card h3 .mail{font-size:clamp(17px,1.8vw,24px)}}