/* home-layout.css — landing page layout only (grid/flex/width/position) */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:var(--maxw);margin:0 auto;padding:120px clamp(20px,5vw,40px) 60px;position:relative}
.hero-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.hero-hint{position:absolute;bottom:34px;left:clamp(20px,5vw,40px);display:flex;align-items:center;gap:10px}
.hero-hint .ln{width:34px;height:1px;position:relative;overflow:hidden}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;padding:clamp(56px,9vh,110px) 0}
.feature.flip .feature-copy{order:2}
.feature.flip .feature-shot{order:1}

.band-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.band-cell{padding:clamp(34px,5vw,52px) clamp(20px,3vw,34px)}

.about h2{max-width:18ch}
.about p{max-width:54ch}

.contact-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,80px);align-items:start;padding:clamp(80px,11vh,140px) clamp(20px,5vw,40px)}
.form{display:flex;flex-direction:column;gap:14px}
.form .btn-primary{margin-top:6px;align-self:flex-start}
.verify{display:flex;align-items:center;gap:12px}
.verify input{max-width:110px}

@media(max-width:760px){
  /* Menypanelen fälls ut under headern. .hdr är position:fixed och är därmed
     containing block, så top:100% landar exakt under den oavsett hur hög den
     råkar bli — inget hårdkodat pixelvärde att glömma uppdatera. */
  .nav{gap:10px}
  .menu-btn{display:block}
  .nav .links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:2px 18px 8px;
  }

  /* 100vh-hjälten blir en skärm med mest tomrum på telefon — låt innehållet
     bestämma höjden i stället. "Scrolla"-hinten sitter absolut mot botten och
     har ingen botten att sitta mot när höjden är auto, därför bort med den. */
  .hero{min-height:auto;padding:76px 18px 26px}
  .hero-actions{margin-top:18px;gap:9px}
  .hero-hint{display:none}
  /* .feature nollar .section-paddingens horisontal (laddas efter base-layout),
     så sidluften måste sättas om här — annars ligger texten kant i kant. */
  .feature{grid-template-columns:1fr;gap:14px;padding:24px 18px}
  .feature.flip .feature-copy{order:1}
  .feature.flip .feature-shot{order:2}
  .band-inner{grid-template-columns:1fr}
  .band-cell{padding:17px 18px}
  .contact-grid{grid-template-columns:1fr;gap:20px;padding:32px 18px}
  .form{gap:9px}
  /* frågan + svarsfältet får inte tvingas på samma rad i 360 px */
  .verify{flex-wrap:wrap;gap:8px}
  .thread-wrap{opacity:.5}
}