/* r116 resp — responsive fixes for all widths below desktop (≥1281px is untouched) */

/* ---------- 1. Page heads (ai / design / prices): text column must never be forced wider than its grid track ---------- */
@media (max-width:1280px){
  .p-head > .p-hero{min-width:0;grid-template-columns:minmax(0,1fr)}
  .p-head > .p-hero > *{min-width:0;max-width:100%}
}
@media (min-width:981px) and (max-width:1280px){
  .p-head:has(> .aih),.p-head:has(> .dzh),.p-head:has(> .pzk){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
  .p-head:has(> .aih) .p-cta,.p-head:has(> .dzh) .p-cta,.p-head .p-cta--sm{flex-wrap:wrap!important;width:auto}
  .p-head .p-hero h1{font-size:clamp(34px,3.6vw,48px)}
  /* AI sphere: keep inside its column, no sideways shift */
  .aih .sp{translate:0 24px!important;max-width:min(560px,100%);margin-inline:auto}
}

/* ---------- 2. Header ---------- */
@media (max-width:980px){
  .bar .wrap{gap:8px}
  .bar .brand{min-width:0;flex:0 1 auto}
  .bar .theme-t,.bar .lang-dd__btn,.mnav-btn{min-height:40px}
  .bar .theme-t{width:40px;height:40px;flex:none}
}
/* language menu: full-width sheet under the bar on phones instead of flying off-screen */
@media (max-width:560px){
  .bar .wrap{position:relative}
  .bar .lang-dd{position:static}
  .bar .lang-dd__menu{left:16px;right:16px;top:calc(100% + 2px);width:auto!important;min-width:0!important;max-height:calc(100dvh - 90px);overflow:auto}
}
@media (max-width:359px){
  .bar .lgx__w{display:none}
}

/* ---------- 3. Burger panel polish ---------- */
@media (max-width:980px){
  .mnav{box-shadow:0 30px 60px -30px rgba(0,0,0,.6),0 0 0 100vmax rgba(0,0,0,.45);clip-path:inset(0 0 -100vmax 0)}
  :root[data-theme="light"] .mnav{box-shadow:0 30px 60px -30px rgba(90,55,30,.35),0 0 0 100vmax rgba(40,25,10,.28)}
  .mnav__a{min-height:48px;padding:12px 14px}
  .mnav__links{gap:2px}
  .mnav-btn{display:grid;place-items:center}
}
@media (min-width:600px) and (max-width:980px){
  .mnav__in{grid-template-columns:minmax(0,1fr) auto;align-items:end!important}
  .mnav__links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mnav__cta{width:auto;align-self:end}
}

/* ---------- 4. Phone gutter 16px ---------- */
@media (max-width:480px){
  .wrap{padding-inline:16px}
}

/* ---------- 5. Index hero globe cards stay inside the visual ---------- */
@media (max-width:600px){
  .hh__vis .qzw--l{right:8px}
}

/* ---------- 6. Prices: "how" blocks (WhatsApp group etc.) must not get wider than the card ---------- */
@media (max-width:1280px){
  .how5{grid-template-columns:minmax(0,1fr)}
  .how5 > *,.how5__x,.how5__2 > *{min-width:0}
}
@media (max-width:640px){
  .how5__h{flex-wrap:wrap}
  .how5__h .how5__gift{flex:0 1 auto!important;width:calc(100% - 62px);min-width:0;max-width:calc(100% - 62px)}
  .how5__h .how5__gift > span{white-space:normal}
}

/* ---------- 7. Comparison tables on narrow screens: fit the box instead of a half-hidden sideways scroll ---------- */
@media (max-width:700px){
  .cmp-box .cmp{min-width:0;table-layout:fixed;font-size:13px}
  .cmp-box .cmp th,.cmp-box .cmp td{padding:10px 6px;overflow-wrap:break-word;hyphens:manual}
  .cmp-box .cmp th:first-child,.cmp-box .cmp td:first-child{width:32%;padding-left:14px}
  .cmp-box .cmp caption{padding-inline:14px}
  .cmp-box .cmp .ch-name{font-size:12px;line-height:1.25}
  .cmp-box .cmp .ch-price{font-size:13px}
  .cmp-box .cmp .s5-pop{font-size:8.5px;padding-inline:5px;white-space:nowrap}
  .cmp-box .cmp tr.g-start td[data-g]::before{left:10px}
}
@media (max-width:380px){
  .cmp-box .cmp{font-size:12px}
  .cmp-box .cmp th:first-child,.cmp-box .cmp td:first-child{width:32%;padding-left:12px}
  .cmp-box .cmp th,.cmp-box .cmp td{padding-inline:4px}
}

/* ---------- 8. Tablet: no orphan cards in 2-column grids ---------- */
@media (min-width:760px) and (max-width:980px){
  .tiers:not(.tiers--4){grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .tiers:not(.tiers--4) > .tier{padding:22px 16px}
  .tiers:not(.tiers--4) .t-name{font-size:17px}
  .tiers:not(.tiers--4) .t-price{font-size:clamp(30px,4.6vw,40px)}
  .tiers:not(.tiers--4) .kc-care{padding:12px}
  .tiers:not(.tiers--4) .kc-care__l{flex-wrap:wrap;row-gap:0;font-size:12.5px}
  .tiers:not(.tiers--4) .kc-care__l em{white-space:nowrap}
  .tiers:not(.tiers--4) .tier > .btn{font-size:14px;padding:12px 14px;white-space:nowrap;justify-content:center;gap:6px}
  .tiers:not(.tiers--4) .t-feat li{font-size:14px}
}
@media (min-width:641px) and (max-width:759.98px){
  .tiers:not(.tiers--4){grid-template-columns:minmax(0,1fr)}
}
@media (min-width:621px) and (max-width:980px){
  .svcs--x:not(.svcs--2):not(.svcs--4) > .svc--x:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-content:start}
  .svcs--x:not(.svcs--2):not(.svcs--4) > .svc--x:last-child:nth-child(odd) > .svc__media{grid-column:1;grid-row:1/span 8;margin:0 0 -24px -24px;align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-radius:20px 0 0 20px;overflow:hidden}
  .svcs--x:not(.svcs--2):not(.svcs--4) > .svc--x:last-child:nth-child(odd) > :not(.svc__media){grid-column:2}
}

/* ---------- 9. Horizontal tab rows: visibly scrollable ---------- */
@media (max-width:980px){
  .xd-tbs,.xw-tabs,.fq__tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .xd-tbs::-webkit-scrollbar,.xw-tabs::-webkit-scrollbar,.fq__tabs::-webkit-scrollbar{display:none}
  .xd-tbs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
}

/* ---------- 10. Phones: primary hero buttons full width, headings sized for small screens ---------- */
@media (max-width:480px){
  .hero .btn--accent,.p-hero .p-cta > .btn{width:100%;justify-content:center}
  .p-hero .p-cta{gap:12px}
  h1{overflow-wrap:break-word}
}
@media (max-width:374px){
  .p-head .p-hero h1,.hero h1{font-size:30px}
}

/* ---------- 11. Floating WhatsApp button: smaller and out of the way on phones ---------- */
@media (max-width:980px){
  html.mnav-open .wa-fab{opacity:0;pointer-events:none;transition:opacity .2s}
}

/* ---------- 12. Header between 981px and 1120px: tighten so the CTA never pushes the page sideways ---------- */
@media (min-width:981px) and (max-width:1120px){
  .bar .wrap{gap:10px}
  .bar .nav{gap:12px}
  .bar .nav--n3l .nav__g1 a{font-size:14.5px}
  .bar .nav--n3l .nav__g2 a{font-size:13px}
  .bar .bar-cta{padding:9px 13px;font-size:13.5px}
}
@media (min-width:981px) and (max-width:1060px){
  .bar .bar-cta svg{display:none}
}

/* ---------- 13. "How we work" step tabs on tablets: icon above label so labels are not cut ---------- */
@media (min-width:701px) and (max-width:980px){
  .xw-tabs:not(.xd-dtabs) .xw-tab{flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;gap:8px;padding:12px 6px 14px}
  .xw-tabs:not(.xd-dtabs) .xw-tt{align-items:center}
  .xw-tabs:not(.xd-dtabs) .xw-tt b{font-size:12.5px}
}

/* ---------- 14. Footer: stack brand panel + link columns on tablets/phones (desktop grid had a 300px min column) ---------- */
@media (max-width:900px){
  footer.ft .ft__in{grid-template-columns:minmax(0,1fr)}
  footer.ft .ft__cols{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:0}
  footer.ft .ft__panel{padding-right:0}
}
@media (max-width:560px){
  footer.ft .ft__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:28px}
  footer.ft .ft__cols > div:nth-child(3){grid-column:1/-1}
  footer.ft .ft__bt{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:480px){
  footer.ft .ft__in{padding-inline:16px}
}
@media (min-width:561px) and (max-width:900px){
  footer.ft .ft__cols > div:nth-child(3){grid-column:auto}
}
/* keep the last footer line clear of the floating WhatsApp button */
@media (max-width:980px){
  footer.ft .ft__bt{padding-bottom:76px}
}

/* ---------- 15. Privacy page hero on phones ---------- */
@media (max-width:480px){
  .xp-hero{padding:22px 20px;gap:16px}
  .xp-hero h1{font-size:min(28px,6.3vw);overflow-wrap:break-word}
  .xp-hero > div{min-width:0;max-width:100%}
}

/* ---------- 16. Design catalogue tiles on tablets: long labels wrap instead of being cut ---------- */
@media (min-width:601px) and (max-width:1100px){
  .xd-tl1 > span{min-width:0}
  .xd-tl1 b{font-size:13px;overflow-wrap:anywhere;hyphens:auto}
}

/* ---------- 17. Very narrow phones (≤359px): home price chips fall back to wrapping row ---------- */
@media (max-width:359px){
  #prices .r93__alt{display:flex;flex-wrap:wrap}
}
@media (max-width:359px){
  .xd-a1-bt{flex-wrap:wrap}
  .xd-a1-bt > *{flex:1 1 auto;justify-content:center}
}
@media (max-width:400px){
  footer.ft .ft__cols a{overflow-wrap:anywhere;hyphens:auto}
  footer.ft .ft__cols{column-gap:16px}
}