/*
 * Reflowed layout for phones and tablets.
 * Loaded only when Customize > Layout > "Show the desktop layout on phones"
 * is switched OFF. With it on, the desktop layout is used at every size.
 */
@media(max-width:1180px){
  .hdr{gap:18px}
  .nav ul{gap:20px;font-size:14.5px}
  .hdr-cta{font-size:14px;padding:11px 18px}
  .langsel .lang{padding:5px 7px;font-size:11px}
}
@media(max-width:1080px){
  .plans{grid-template-columns:repeat(2,1fr)}
  .included ul{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .page-template-page-channels .entry ul{columns:2}
}
@media(max-width:1024px){
  .wrap{padding:0 24px}
  .hdr{padding:14px 24px;gap:12px;row-gap:10px}
  .hero-grid{grid-template-columns:1fr;gap:38px;padding-top:64px;padding-bottom:56px}
  .hero h1{font-size:62px}
  .hero-wall{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-auto-rows:180px}
  .hero-veil{background:linear-gradient(180deg,rgba(10,10,12,.93),rgba(10,10,12,.96) 40%,rgba(10,10,12,.99)),radial-gradient(600px 340px at 84% 6%,rgba(224,171,78,.16),transparent 66%)}
  .sec{padding:52px 0 64px}
  .sec-tight{padding:0 0 64px}
  h1{font-size:50px}
  h2{font-size:46px}
  h3{font-size:30px}
  .sec-head h2{font-size:46px}
  .page-hero h1{font-size:50px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr;gap:32px}
  .logowall{grid-template-columns:1fr;padding:26px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .panel{padding:28px}
  .cta{padding:36px 28px}
  .cta h2{font-size:40px}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--bg-2);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(0,0,0,.9);padding:8px 0 20px;display:none;margin-left:0}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:0 24px;max-width:var(--wrap);margin:0 auto}
  .nav li{border-bottom:1px solid rgba(255,255,255,.06)}
  .nav a{display:block;padding:15px 0;font-size:17px}
  .nav-toggle{display:inline-flex;order:2;margin-left:0}
  .brand{margin-right:auto}
  .langsel{order:3;margin-right:auto}
  .hdr-cta{order:4}
}
@media(max-width:600px){
  body{font-size:16px}
  body::before{background-size:52px 52px}
  .wrap{padding:0 18px}
  .hdr{padding:12px 18px;gap:12px}
  .brand{font-size:26px}
  .brand-mark{width:30px;height:30px}
  .hero h1{font-size:46px}
  .hero-wall{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:144px}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{width:100%}
  h1{font-size:40px}
  h2{font-size:36px}
  h3{font-size:26px}
  .sec-head h2{font-size:36px}
  .plans{grid-template-columns:1fr}
  .included{padding:22px 20px}
  .cats{grid-template-columns:repeat(2,1fr);gap:10px}
  .cat{min-height:250px;padding:16px}
  .cat h3{font-size:26px}
  .cat p{font-size:12.5px}
  .cat .rail{gap:6px}
  .rail-shot,.poster{width:62px}
  .rail-shot.wide{width:104px}
  .rail-badge{height:38px;font-size:15px;padding:0 11px 0 9px}
  .logowall h3{font-size:30px}
  .devshot{padding:16px}
  .cta{padding:32px 22px}
  .cta h2{font-size:34px}
  .stat-n{font-size:36px}
  .page-hero h1{font-size:40px}
  .wa-float{right:16px;bottom:16px;padding:13px 18px}
  .page-template-page-channels .entry ul{columns:1}
}
@media(max-width:420px){
  .cats{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .hdr-cta{font-size:13.5px;padding:11px 16px}
}
@media(max-width:1024px){
  .nav a{min-height:48px;display:flex;align-items:center}
  .langsel{padding:2px}
  .langsel .lang{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:5px 6px}
  .hdr-cta{min-height:44px}
  .wa-float{min-height:48px}
}

@media(max-width:600px){
  .intro-wall{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:144px}
  .intro-mark{width:52px;height:52px}
  .intro-name{font-size:46px}
  .intro-strap{font-size:11.5px;letter-spacing:.2em}
}