/* Gemensam logotyp för hela metodai-ekosystemet.
   Serveras från metodai.se/static/shell.css och läses in av varje tjänst
   (avtal, nyheter, evenemang, företag, kalender, lönekalkylator) efter deras
   egen CSS. Logotypen pekar alltid på metodai.se — vägen hem från en tjänst.
   Tjänstens eget namn står bredvid som etikett, så man ser var man är.

   Ändra här och det slår igenom på alla subdomäner. */

.top .logo,
.top a.logo{
  display:inline-flex;align-items:center;gap:11px;flex:none;
  font-size:23px;font-weight:800;letter-spacing:.2px;
  color:#fff;text-decoration:none;
}
.top .logo .mark{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#f5a623,#e08c05);color:#2a1c00;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.45);
}
.top .logo .mark svg{width:21px;height:21px;display:block}
.top .logo:hover .mark{background:linear-gradient(135deg,#ffc260,#f5a623)}
.top .logo .namn{color:#fff;display:inline;font-weight:800}
.top .logo .namn span{color:#f5a623}

/* Etikett för tjänsten man befinner sig i */
.top .tjanst{
  display:inline-flex;align-items:center;flex:none;
  color:#aeb9cb;font-size:15px;font-weight:700;text-decoration:none;
  padding:4px 2px;letter-spacing:.1px;
}
.top .tjanst::before{
  content:"";width:1px;height:20px;background:#2c364a;
  margin:0 13px 0 3px;display:inline-block;
}
.top .tjanst:hover{color:#fff}

@media(max-width:640px){
  .top .logo{font-size:19px;gap:8px}
  .top .logo .mark{width:32px;height:32px}
  .top .logo .mark svg{width:18px;height:18px}
  .top .tjanst{font-size:13px}
  .top .tjanst::before{margin:0 9px 0 2px;height:16px}
}

/* Håller logotyp och tjänsteetikett ihop även när förälderns layout
   är flex med space-between (t.ex. företagstjänsten). */
.top .brandrow{display:inline-flex;align-items:center;flex:none}


/* ===== Gemensam apprad. Samma markup i alla tjanster (statiskt fragment). ===== */
.apps{padding:18px 20px 4px;margin:0 auto;max-width:1440px;box-sizing:border-box}
.apps .row{display:grid;grid-template-columns:repeat(11,1fr);gap:10px}
.apps .app{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 6px 12px;border-radius:14px;background:#fff;border:1px solid #e4e9f0;
  text-decoration:none;box-shadow:0 1px 2px rgba(20,26,38,.06),0 1px 3px rgba(20,26,38,.05);
  transition:.15s}
.apps .app:hover{transform:translateY(-2px);border-color:#f5a623;
  box-shadow:0 8px 24px -8px rgba(20,26,38,.18)}
.apps .app .ai{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  color:#fff;box-shadow:0 6px 14px -4px rgba(20,26,38,.35)}
.apps .app .ai svg{width:23px;height:23px;display:block}
.apps .app>span:last-child{font-size:12px;font-weight:700;color:#4a5568;white-space:nowrap}
.apps .app.soon{opacity:.55}
.apps .app.soon:hover{transform:none;border-color:#e4e9f0;
  box-shadow:0 1px 2px rgba(20,26,38,.06)}
.apps .g-orange{background:linear-gradient(135deg,#ffb648,#e8940c)}
.apps .g-amber{background:linear-gradient(135deg,#f5a623,#c9700a)}
.apps .g-navy{background:linear-gradient(135deg,#2c374d,#141a26)}
.apps .g-steel{background:linear-gradient(135deg,#4a5a78,#26314a)}
.apps .g-teal{background:linear-gradient(135deg,#2f8f83,#17564f)}
.apps .g-blue{background:linear-gradient(135deg,#3d6ea8,#1f3f68)}
.apps .g-plum{background:linear-gradient(135deg,#7a5a8e,#452f55)}
.apps .g-clay{background:linear-gradient(135deg,#c2703f,#8a4620)}
.apps .g-moss{background:linear-gradient(135deg,#5f8a45,#345123)}
.apps .g-slate{background:linear-gradient(135deg,#5c6b82,#333e52)}
.apps .g-rust{background:linear-gradient(135deg,#b5563c,#7a3020)}
@media(max-width:1000px){.apps .row{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.apps .row{grid-template-columns:repeat(3,1fr)}
  .apps .app>span:last-child{font-size:10.5px}}