/* ============================================================
   QWENDA - responsive overrides
   ============================================================ */

/* The floating hero cards hang outside the phone (fc-2 by 6%). Below ~1220px the
   hero column is narrow enough that this reaches past the viewport edge, so the
   cards tuck in; below 840 they sit flush. */
@media(max-width:1220px){
  .fc-1{left:-2%}.fc-2{right:-2%}
}

@media(max-width:1020px){
  /* Between 841 and 1020 the pill nav has five links, the language switch and
     the CTA in a narrowing bar. The French and German labels are longer than
     the English ones and were spilling past the pill's right edge, so the
     horizontal padding tightens here for every language. */
  .nav-links a{padding:9px 10px;font-size:.92rem}
  .nav-cta{padding:10px 14px}
  .feat-grid,.mod-grid,.testi-grid{grid-template-columns:1fr 1fr}
  .eco-grid{grid-template-columns:1fr 1fr}
  .partner-row{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:840px){
  /* The pill nav is centred with translateX(-50%) on desktop. A transform makes
     the nav a containing block for fixed-position children, which would trap the
     menu panel inside the pill - so on mobile the nav is inset instead. */
  .nav{left:16px;right:16px;transform:none;width:auto}
  .nav.scrolled{width:auto}
  .nav-links{display:none}
  .nav-burger{display:flex}

  /* ---- full-screen mobile menu ----
     Full-width rows: the whole line is the tap target, not just the word.
     The nav bar itself goes transparent while open so the panel is the surface,
     and the logo and burger sit above it so the menu can be closed. */
  .nav.menu-open{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.menu-open .nav-logo,.nav.menu-open .nav-right{position:relative;z-index:2}
  .nav.menu-open .nav-links{
    display:flex;position:fixed;inset:0;z-index:1;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:calc(env(safe-area-inset-top,0px) + 92px) 20px calc(env(safe-area-inset-bottom,0px) + 28px);
    background:
      radial-gradient(680px 420px at 15% 0%,rgba(188,255,255,.38),transparent 62%),
      radial-gradient(560px 420px at 92% 100%,rgba(123,93,214,.10),transparent 62%),
      var(--grey-25);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    animation:nav-panel-in .28s var(--ease) both;
  }
  @keyframes nav-panel-in{from{opacity:0}to{opacity:1}}
  .nav.menu-open .nav-links a:not(.nav-panel-cta){
    display:flex;align-items:center;width:100%;
    padding:20px 14px;border-radius:16px;border-bottom:1px solid var(--grey-200);
    font-family:var(--font-display);font-size:1.3rem;font-weight:600;letter-spacing:-.01em;
    color:var(--grey-700);background:none;
  }
  .nav.menu-open .nav-links a:not(.nav-panel-cta):active{background:var(--grey-100)}
  .nav.menu-open .nav-links a.active:not(.nav-panel-cta){color:var(--green-700)}
  /* The pill nav still shows its own CTA down to 620px; below that it drops out
     and the panel carries it instead (see the 620 block). */
  /* burger becomes a close button - gap 5px + height 2px puts the bars 7px apart */
  .nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.menu-open .nav-burger span:nth-child(2){opacity:0}
  .nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(prefers-reduced-motion:reduce){
    .nav.menu-open .nav-links{animation:none}
    .nav-burger span{transition:none}
  }
  .hero{padding:130px 0 50px}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .store-badges,.hero-meta{justify-content:center}
  .hero-visual{margin-top:50px}
  .showcase-inner{grid-template-columns:1fr}
  .showcase-sticky{position:relative;top:0}
  .showcase-steps{gap:24px;padding:40px 0 0}
  .step{opacity:1;background:var(--grey-50);border-color:var(--grey-200)}
  .fc-1{left:0}.fc-2{right:0}
  .form-row{grid-template-columns:1fr}
}

/* The headline's clamp floor is 2.6rem (41.6px). At that size the longest word in
   the hero ("information.") is ~402px wide, so on any viewport under 450px it no
   longer fitted and the hero was cropped by body{overflow-x:hidden}. Below 460px
   the size follows the viewport instead, rejoining the main scale at 480px. */
@media(max-width:460px){
  .display{font-size:clamp(1.7rem,8.6vw,2.6rem)}
}

@media(max-width:620px){
  .feat-grid,.mod-grid,.testi-grid,.eco-grid{grid-template-columns:1fr}
  .partner-row{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:80px 0}
  .eco,.partners,.cta{margin:0 8px;border-radius:36px}
  .float-card{display:none}
  .nav-cta{display:none}
  .nav.menu-open .nav-panel-cta{
    display:flex;align-items:center;justify-content:center;
    margin-top:auto;padding:18px 24px;font-size:1rem;border-radius:999px;
  }
  .contact-modal{padding:32px 24px 24px}
}

/* ---------- /videos ---------- */
@media(max-width:1020px){
  .vstep{gap:40px}
  /* The paired step is the widest row on the page, so it gives ground first. */
  .vstep--pair{grid-template-columns:414px 1fr}
  .vstep--pair.vstep--rev{grid-template-columns:1fr 414px}
  .vstep--pair .vstep-media{gap:22px}
  .vpair-item{width:196px}
}

@media(max-width:840px){
  /* Always stacked below 840: video first, then the copy. */
  .vstep,.vstep--rev{grid-template-columns:1fr;gap:28px}
  .vstep-media,.vstep--rev .vstep-media{order:1}
  .vstep-copy,.vstep--rev .vstep-copy{order:2}
  .vstep--pair,.vstep--pair.vstep--rev{grid-template-columns:1fr}
  /* Stacked, the copy would run the full container width - same cap as the
     wide layout so the measure is one number everywhere. */
  .vstep-copy{max-width:580px}
  .vhero{padding:130px 0 44px;min-height:auto}
  .vsteps{padding-top:50px}
  .vgrow{padding:32px 26px}
}

@media(max-width:620px){
  .vstep{padding:28px 0}
  .vsteps{padding-bottom:24px}
  /* Two portrait cards still fit side by side on a phone at this size, and
     that reads better than one card stacked on top of the other. */
  .vpair-item{width:min(160px,38vw)}
  .vstep--pair .vstep-media{gap:16px}
  /* Each step now carries a quote, an action and three bullets, so the
     vertical rhythm inside a step tightens to keep the step scannable. */
  .vstep-copy .vstep-quote{margin-bottom:12px;font-size:.98rem}
  .vstep-copy .vstep-action{margin-top:16px;padding:12px 14px;font-size:.94rem}
  .vstep-why{margin-top:18px}
  .vstep-why li{font-size:.92rem}
  .vstep-copy .vstep-own{margin-top:14px}
  .vgrow{padding:28px 20px;margin-top:26px}
  .vhelp{margin-top:24px}
}

@media(max-width:540px){
  .cookie-banner-wrap{left:12px;right:12px;bottom:12px}
  .cookie-banner{padding:18px 18px 14px;border-radius:18px}
  .cookie-head{grid-template-columns:36px 1fr;gap:12px}
  .cookie-icon{width:36px;height:36px}
  .cookie-icon svg{width:20px;height:20px}
  .cookie-title-wrap h3{font-size:16px}
  .cookie-actions{flex-direction:column;align-items:stretch}
  .cookie-btn{width:100%;justify-content:center;display:inline-flex;align-items:center}
  .cookie-btn--ghost{order:3;margin-right:0}
}