/* "Kommer snart"-sidor (/snart/<tjänst>) — bygger på style.css + hem.css */

.sn{max-width:1000px}
.sn-hero{text-align:center;padding:52px 0 6px}
.sn-ic{width:82px;height:82px;border-radius:22px;display:grid;place-items:center;margin:0 auto 22px;
       background:linear-gradient(135deg,var(--orange),#e08c05);color:#2a1c00;
       box-shadow:0 14px 32px -10px rgba(20,26,38,.45)}
.sn-ic svg{width:40px;height:40px}
.sn-ey{display:inline-flex;align-items:center;gap:7px;color:var(--orange-ink);font-weight:800;
       font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;background:rgba(245,166,35,.13);
       border:1px solid rgba(245,166,35,.32);padding:5px 13px;border-radius:999px}
.sn-pip{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:snp 2s infinite}
@keyframes snp{0%{box-shadow:0 0 0 0 rgba(245,166,35,.55)}70%{box-shadow:0 0 0 7px rgba(245,166,35,0)}100%{box-shadow:0 0 0 0 rgba(245,166,35,0)}}
@media(prefers-reduced-motion:reduce){.sn-pip{animation:none}}
.sn-hero h1{font-size:clamp(30px,5.2vw,46px);letter-spacing:-.02em;margin:16px 0 0}
.sn-dom{font-size:14px;font-weight:700;color:var(--orange-ink);margin-top:8px}
.sn-lead{color:var(--t2);font-size:16.5px;max-width:60ch;margin:14px auto 0}

.sn-faser{max-width:760px;margin:34px auto 0;background:var(--surface);border:1px solid var(--line);
          border-radius:var(--rr-lg);box-shadow:var(--sh-sm);padding:22px 24px}
.sn-faser h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin:0 0 16px}
.sn-rad{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sn-fas{position:relative;padding-top:16px;font-size:13px;color:var(--t3)}
.sn-fas::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:999px;background:var(--line)}
.sn-fas.klar::before{background:var(--ok)}
.sn-fas.nu::before{background:var(--orange)}
.sn-fas b{display:block;font-size:13.5px;color:var(--t3);font-weight:700}
.sn-fas.klar b{color:var(--ink)}
.sn-fas.nu b{color:var(--orange-ink)}
.sn-fas span{font-size:11.5px}

.sn-under{max-width:760px;margin:38px auto 0}
.sn-under h2{font-size:19px;text-align:center;margin:0}
.sn-under p{color:var(--t2);font-size:14.5px;text-align:center;margin-top:7px}
.sn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.sn-kort{background:var(--surface);border:1px solid var(--line);border-radius:var(--rr);padding:15px 16px;
         box-shadow:var(--sh-sm);transition:.15s;display:flex;align-items:center;gap:11px;text-decoration:none}
.sn-kort:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--orange)}
.sn-kort .mic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.sn-kort .mic svg{width:17px;height:17px}
.sn-kort b{font-size:14px;font-weight:700;display:block;color:var(--ink)}
.sn-kort span span{font-size:12px;color:var(--t3)}

.sn-pl{margin:46px auto 0}
.sn-pl h2{font-size:19px;text-align:center;margin:0 0 20px}
.sn-plgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sn-pl-kort{background:transparent;border:1px dashed var(--line);border-radius:var(--rr);padding:16px;
            transition:.15s;text-decoration:none;display:block}
.sn-pl-kort:hover{border-color:var(--orange);border-style:solid;background:var(--surface)}
.sn-pl-kort.aktuell{border-style:solid;border-color:var(--orange);background:var(--surface);box-shadow:var(--sh-sm)}
.sn-pl-kort .pic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
                 background:var(--surface-2);border:1px dashed var(--line);color:var(--t3);margin-bottom:11px}
.sn-pl-kort.aktuell .pic{background:linear-gradient(135deg,var(--orange),#e08c05);border:0;color:#2a1c00}
.sn-pl-kort:hover .pic{color:var(--orange-ink);border-color:var(--orange)}
.sn-pl-kort .pic svg{width:19px;height:19px}
.sn-pl-kort b{font-size:14.5px;display:block;color:var(--ink)}
.sn-pl-kort .pd{font-size:11.5px;color:var(--orange-ink);font-weight:700;display:block;margin:2px 0 6px}
.sn-pl-kort .pp{font-size:12.5px;color:var(--t3);display:block}

@media(max-width:820px){
  .sn-rad{grid-template-columns:repeat(2,1fr);gap:14px}
  .sn-grid{grid-template-columns:1fr 1fr}
  .sn-plgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .sn-hero{padding-top:36px}
  .sn-grid,.sn-plgrid,.sn-rad{grid-template-columns:1fr}
}