/* Marknadssajtens skal: topprad, mobilmeny och fot.
   Flyttat hit ur marketing/landing_ny.html 2026-09-24 så guiderna använder
   exakt samma komponenter, i stället för en egen kopia som glider isär.
   Filen länkas FÖRE sidans egna stilar, så ordningen i kaskaden är oförändrad.
   Färgerna kommer från sidans egna tokens (--coral, --ink, --line ...), som
   varje sida definierar i sin :root. */

/* Sajtens färger. Definieras här så varje sida som använder skalet får dem,
   även om sidan inte har startsidans egen :root. */
:root{
  --bg:#F3F1ED; --surface:#FFFFFF;
  --line:#DFD9D1; --line-2:#CCC4BA;
  --ink:#0D1F1E; --ink-2:#48544F; --ink-3:#8A948F;
  --coral:#DE7550; --coral-soft:#F7E5DC;
  --dark:#0D1F1E; --dark-2:#112724; --dark-card:#15302C; --dark-line:#245852;
  --d-txt:#F4F8F7; --d-txt2:#8D9B96; --d-txt3:#65726E;
  --a-coral:#EE9A7D; --a-coralink:#2A1A13;
  --teal:#2E4A44;
  --max:1160px;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}

/* ---------- topbar: behållen svävande pill från live-sidan.
   Vid inladdning smälter den in (transparent) — blir glas-pill först vid scroll.
   Ljus bas; body.dark = mörkgrön variant (hero + topbar). ---------- */
.topbar{position:fixed;top:14px;left:14px;right:14px;z-index:50;height:60px;
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-radius:18px;
  background:transparent;border:1px solid transparent;box-shadow:none;
  transition:background .25s,border-color .25s,box-shadow .25s}
.topbar.is-scrolled{background:rgba(243,241,237,.92);border-color:rgba(15,17,20,.08);
  box-shadow:0 12px 30px rgba(15,17,20,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.dark .topbar.is-scrolled{background:rgba(13,31,30,.86);border-color:rgba(255,255,255,.1);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.logo{display:inline-flex;align-items:center;gap:11px;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:37px;letter-spacing:-.02em;line-height:1;
  color:var(--ink);text-decoration:none;display:inline-flex}
.logo i{font-style:normal;color:var(--coral)}
/* Ikonmärket (isometrisk låda) till vänster om ordmärket; följer loggans textfärg. */
.logo .logo-mark{width:35px;height:37px;flex:none;fill:currentColor}
/* Logo-alternativ B (body.logo-alt): ikonen i korall, hela ordmärket i textfärg. */
body.logo-alt .logo .logo-mark{fill:var(--coral)}
body.logo-alt .logo i{color:inherit}
body.dark .logo,.mobile-menu .logo{color:#FFFDFB}
body.dark .logo i,.mobile-menu .logo i{color:var(--a-coral)}
.topbar-right{display:flex;align-items:center;gap:22px}
.topbar .nav-link{font-size:15px;color:var(--ink-2);text-decoration:none}
.topbar .nav-link:hover{color:var(--ink)}
body.dark .topbar .nav-link{color:rgba(255,250,246,.72)}
body.dark .topbar .nav-link:hover{color:#FFFDFB}
/* Alla menylänkar har samma stil — ingen särskild "För förare"-markering (jfr zimply.ai). */
.topbar-login{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
body.dark .topbar-login{color:#FFFDFB}
.btn{display:inline-block;border:0;cursor:pointer;font:600 15px/1 'Inter';
  padding:14px 20px;border-radius:10px;text-decoration:none}
/* Primär CTA är korall i båda varianterna — exakt samma token som q:et i loggan
   (ljus: --coral, mörk: --a-coral). */
.btn-p{background:var(--coral);color:#FFFDFB}
.btn-p:hover{background:#C9653F}
.tone-dark .btn-p,body.dark .topbar .btn-p,.mobile-menu .btn-p{background:var(--a-coral);color:var(--a-coralink)}
.tone-dark .btn-p:hover,body.dark .topbar .btn-p:hover,.mobile-menu .btn-p:hover{background:#F6AC90}
.btn-s{background:transparent;color:var(--ink);padding-left:6px}
.btn-s:hover{text-decoration:underline}
body.dark .hero-wrap .btn-s{color:#FFFDFB}
.topbar .btn{padding:12px 18px}
.menu-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:6px;align-items:center;justify-content:center}
body.dark .menu-toggle{color:#FFFDFB}

/* Språkväxlare: segmenterad pill, samma form som knapparna. Visar båda språken
   så att besökaren ser att sidan finns på svenska och engelska. Genomskinlig
   botten, eftersom topbaren är transparent tills man scrollar. */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line-2);
  border-radius:999px;background:transparent}
.lang a{display:inline-flex;align-items:center;line-height:1;text-decoration:none;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-3);padding:5px 10px;border-radius:999px}
.lang a:hover{color:var(--ink)}
.lang a.on{background:var(--ink);color:var(--bg)}
body.dark .lang{border-color:rgba(255,255,255,.2)}
body.dark .lang a{color:rgba(255,250,246,.62)}
body.dark .lang a:hover{color:#FFFDFB}
body.dark .lang a.on{background:var(--a-coral);color:var(--a-coralink)}

@media(max-width:900px){
  .topbar .nav-link,.topbar-login,.topbar .btn,.topbar .lang{display:none}
  .menu-toggle{display:inline-flex}
  /* Förenklad meny (show_nav av): bara Logga in + Kom igång, även i mobil.
     body.has-menu = hamburgaren ersätter dem och allt ligger i mobilmenyn. */
  body.no-nav .topbar-login,body.no-nav .topbar .btn{display:inline-block}
  body.no-nav .topbar-right{gap:14px}
  body.no-nav.has-menu .topbar-login,body.no-nav.has-menu .topbar .btn{display:none}
  body.no-nav.has-menu .topbar-right{gap:8px}
}
@media(max-width:420px){
  body.no-nav .topbar{padding:0 14px}
  body.no-nav .logo{font-size:30px;gap:9px}
  body.no-nav .logo .logo-mark{width:28px;height:30px}
  body.no-nav .topbar .btn{padding:10px 13px;font-size:14px}
  body.no-nav .topbar-login{font-size:14px}
}

/* ---------- mobilmeny ----------
   Följer sidans uttryck i stället för att vara en egen mörk värld: samma ljusa
   botten, samma bläckfärg, samma korallknapp och samma rundningar som resten.
   body.dark vänder den till den mörkgröna varianten. ---------- */
.mobile-menu{position:fixed;inset:0;z-index:100;background:rgba(243,241,237,.98);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);backdrop-filter:blur(28px) saturate(1.2);
  display:none;flex-direction:column;padding:0 clamp(1.25rem,5vw,2rem) calc(1.5rem + env(safe-area-inset-bottom));
  opacity:0;transform:translateY(-8px);transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.mobile-menu[data-open="true"]{display:flex;opacity:1;transform:translateY(0);pointer-events:auto}
.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0 1rem;min-height:60px}
.mobile-menu .logo{color:var(--ink);font-size:33px}
.mobile-menu .logo .logo-mark{width:31px;height:33px;fill:var(--coral)}
.mobile-menu .logo i{color:inherit}
.mobile-menu-close{background:none;border:none;color:var(--ink-2);padding:.5rem;cursor:pointer;display:inline-flex;border-radius:10px}
.mobile-menu-close:hover{color:var(--ink);background:rgba(15,17,20,.05)}
.mobile-menu-nav{margin-top:clamp(1rem,4vw,2rem);display:flex;flex-direction:column}
.mobile-nav-item{display:flex;align-items:center;justify-content:space-between;
  font:600 clamp(1.35rem,5.2vw,1.7rem)/1.2 'Inter';letter-spacing:-.02em;
  color:var(--ink);padding:1.05rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.mobile-nav-item .arrow{color:var(--ink-3);flex-shrink:0}
/* Språkraden i menyn: samma segmenterade pill som på desktop, fast bred. */
.mobile-lang{margin-top:1.6rem}
.mobile-lang .eyebrow{margin-bottom:.6rem}
.mobile-lang .lang{width:100%;padding:4px}
.mobile-lang .lang a{flex:1;justify-content:center;font-size:15px;padding:11px 0}
.mobile-menu-actions{margin-top:auto;padding-top:1.5rem;display:flex;flex-direction:column;gap:.6rem}
.mobile-menu-cta{display:flex;align-items:center;justify-content:center;background:var(--coral);color:#fff;
  font-weight:600;font-size:1rem;padding:1rem;border-radius:12px;text-decoration:none}
.mobile-menu-login{display:flex;align-items:center;justify-content:center;color:var(--ink);border:1px solid var(--line-2);
  font-weight:500;font-size:1rem;padding:1rem;border-radius:12px;text-decoration:none}
body.dark .mobile-menu{background:rgba(13,31,30,.97)}
body.dark .mobile-menu .logo{color:#FFFDFB}
body.dark .mobile-menu .logo .logo-mark{fill:var(--a-coral)}
body.dark .mobile-menu-close{color:rgba(255,255,255,.85)}
body.dark .mobile-menu-close:hover{color:#fff;background:rgba(255,255,255,.06)}
body.dark .mobile-nav-item{color:rgba(255,255,255,.95);border-bottom-color:rgba(255,255,255,.08)}
body.dark .mobile-nav-item .arrow{color:rgba(255,255,255,.45)}
body.dark .mobile-menu-cta{background:var(--a-coral);color:var(--a-coralink)}
body.dark .mobile-menu-login{color:#fff;border-color:rgba(255,255,255,.2)}
body.menu-open{overflow:hidden}


/* ---------- footer: som dagens live-sida (varumärke + länkkolumner + sociala + copy) ---------- */
.foot{padding:56px 0 40px;border-top:1px solid var(--line);background:var(--bg)}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr) auto;gap:28px}
.foot .wm{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:32px;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.foot .wm .logo-mark{width:30px;height:32px;flex:none;fill:currentColor}
.foot .wm .q{color:var(--coral)}
/* Samma struktur som loggan högst upp: korall ikon, ordmärket i en färg. */
body.logo-alt .foot .wm .logo-mark{fill:var(--coral)}
body.logo-alt .foot .wm .q{color:inherit}
.foot .brand p{color:var(--ink-3);font-size:13px;margin:14px 0 0;max-width:26ch}
.foot h4{font-size:13px;color:var(--ink);margin:0 0 12px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink-3);line-height:2}
.foot ul a{color:inherit;text-decoration:none}
.foot ul a:hover{color:var(--ink)}
.foot .social{display:flex;gap:12px}
.foot .social a{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);text-decoration:none}
.foot .social a:hover{color:var(--ink);border-color:var(--line-2)}
.foot .copy{text-align:center;color:var(--ink-3);font-size:13px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.foot .copy a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.foot .copy a:hover{color:var(--ink)}
@media (max-width:960px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot .cols{grid-template-columns:1fr}}