/* LYZOO SEO landing pages: responsive / mobile layer.
   Loaded ONLY by the 10 SEO landing pages, after their inline <style> blocks, so it can refine shared rules from
   index.css without touching the homepage. Desktop (>900px) rendering is intentionally unchanged. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
main :where(h1,h2,h3,p,li,summary){overflow-wrap:break-word}

/* Logos: sizes previously set by inline style (92px header / 80px footer); intrinsic width/height now live on the <img> */
header .logo{width:auto;height:92px}
footer .logo{width:auto;height:80px;max-width:100%}

/* ---- Header + mobile menu (burger shown at <=900px by index.css) ---- */
@media(max-width:900px){
  header .logo{height:60px}
  .menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;font-size:1.35rem;line-height:1;color:inherit;cursor:pointer}
  .navlinks{top:calc(100% + 8px);left:14px;right:14px;gap:0;padding:10px;max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain;font-size:1rem}
  .navlinks a{display:flex;align-items:center;width:100%;min-height:48px;padding:0 12px;border-radius:10px}
  .navlinks a:not(.btn):hover{background:#f4f2ff}
  .navlinks .btn{justify-content:center;margin-top:8px}
}
@media(max-width:600px){
  header .logo{height:auto;max-height:52px;max-width:calc(100vw - 118px)}
}

/* ---- Hero (phones) ---- */
@media(max-width:600px){
  .crm-hero h1{line-height:1.15;letter-spacing:-.03em}
  .lp-hero h1{line-height:1.18}
  .crm-hero .btn,.lp-button{min-height:48px}
}
@media(max-width:480px){
  .lp-button{display:flex;align-items:center;justify-content:center;width:100%;text-align:center}
  .cta .btn,.crm-pricing-card .btn{width:100%}
}
/* Landscape phones: a sticky 79px header + full-size hero would fill the screen */
@media(max-height:500px) and (orientation:landscape){
  header{position:relative}
  .crm-hero h1,.lp-hero h1{font-size:clamp(1.8rem,5vw,2.3rem)}
  .crm-hero,.lp-hero{padding-top:28px;padding-bottom:32px}
  /* two-column menu so every link and the CTA fit without scrolling */
  .navlinks.open{flex-direction:row;flex-wrap:wrap;align-items:stretch}
  .navlinks a:not(.btn){width:50%}
  .navlinks .btn{width:100%}
}

/* ---- Cards & grids ---- */
/* Pages that set a 3-column grid inline (billing, ERP, HRMS, lead, website): inline style needs !important to be overridden */
@media(max-width:900px){.crm-feature-grid[style*="repeat(3, 1fr)"]{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){
  .crm-feature-grid[style*="repeat(3, 1fr)"]{grid-template-columns:1fr!important}
  .crm-feature-grid,.crm-user-points,.seo-depth .seo-grid{gap:14px}
  .crm-feature-item{padding:20px 18px}
  .crm-user-point{padding:20px}
}

/* ---- Touch: no sticky hover-lift on touch screens ---- */
@media(hover:none){
  .crm-feature-item:hover,.crm-user-point:hover{transform:none}
}

/* ---- Footer ---- */
@media(max-width:900px){
  footer{padding:44px 0 24px}
  .foot a:not(.brand){display:flex;align-items:center;min-height:44px;margin:0;overflow-wrap:anywhere}
  .foot a.brand{margin:0 0 12px}
  .foot h4{margin:0 0 4px}
  .copy{margin-top:28px;padding-top:18px}
}
@media(max-width:600px){
  footer{padding:36px 0 22px}
  .foot{gap:22px}
}

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