/* Gratis säkerhetskontroll (variant A Huset, 2026-11-01). Idén: kollen går runt huset och tittar på fönstren men går aldrig in.
   Tolv fönster = tolv kontroller, stängda fönster är mörka så att bara det som står öppet syns. Dörren är koden. */
.sk-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-top: 152px; padding-bottom: 32px; }
.sk-f { display: flex; gap: 8px; margin-top: 32px; max-width: 520px; }
.sk-f input[type="text"] { flex: 1 1 auto; min-width: 0; height: 52px; background: #141416; border: 1px solid rgba(243,238,231,.16); border-radius: 999px; padding: 0 22px; font: inherit; font-size: 16px; color: var(--ink); outline: none; transition: border-color .2s; }
.sk-f input[type="text"]:focus { border-color: var(--pink); }
.sk-f input[type="text"]::placeholder { color: var(--mut); }
.sk-f .btn { flex: none; }
.sk-f .btn[disabled] { opacity: .6; cursor: progress; }
.sk-not { margin: 12px 0 0; font-size: 14px; color: var(--mut); text-wrap: balance; }
.sk-sv { margin: 12px 0 0; font-size: 16px; color: var(--pink); }
.sk-sv:empty { margin: 0; }

/* huset */
.sk-hus { width: 100%; max-width: 440px; height: auto; justify-self: center; display: block; overflow: visible; }
.hu-t { fill: #1b1b1f; stroke: var(--line); stroke-width: 1.5; }
.hu-k { fill: #141416; stroke: var(--line); stroke-width: 1.5; }
.hu-m { stroke: var(--line); stroke-width: 1.5; }
.hu-d { fill: var(--bg); stroke: var(--pink); stroke-width: 1.5; }
.hu-l { fill: var(--pink); }
.hf-k { fill: var(--bg); stroke: rgba(243,238,231,.22); stroke-width: 1.5; }
.hf-s { stroke: rgba(243,238,231,.22); stroke-width: 1.5; fill: none; }
.hf-l { fill: var(--ink); opacity: 0; }
.hf-r { opacity: 0; transition: opacity .3s var(--e); }
.hf-b { transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); transition: transform .5s var(--e); }
.is-fel .hf-r { opacity: 1; fill: var(--red); } .is-fel .hf-b { fill: #d9434f; transform: scaleX(1); }
.is-varn .hf-r { opacity: 1; fill: #c27a10; } .is-varn .hf-b { fill: #e6a43c; transform: scaleX(.5); }
@media (prefers-reduced-motion: no-preference) {
  .sk-kor .hf-l { animation: sk-tand 1.3s var(--e) calc(var(--i) * 90ms) infinite; }
  @keyframes sk-tand { 0%, 100% { opacity: 0; } 25% { opacity: .28; } 60% { opacity: 0; } }
}

/* resultatet */
.sk-r { padding-top: 64px; }
.sk-rh { display: flex; align-items: center; gap: 24px; }
.sk-g { margin: 0; font: 600 96px/1 var(--disp); letter-spacing: -.03em; }
.sk-g.b-a { color: var(--green); } .sk-g.b-b { color: #d7d98a; } .sk-g.b-c { color: #e6a43c; } .sk-g.b-d { color: #ef8a5a; } .sk-g.b-f { color: #e5535f; }
.sk-n { margin: 0; color: var(--mut); font-size: 15px; overflow-wrap: anywhere; }
.sk-rh h2 { margin: 4px 0 0; font: 600 clamp(26px, 3vw, 36px)/1.1 var(--disp); letter-spacing: -.025em; text-wrap: balance; outline: none; }
.sk-l { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.sk-l li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.sk-l i { width: 16px; height: 16px; border-radius: 2px; margin-top: 5px; }
.sk-l .m-fel { background: var(--red); } .sk-l .m-varn { background: #c27a10; }
.sk-l b { display: block; font-weight: 500; }
.sk-l span { display: block; color: var(--mut); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.sk-ok { margin: 16px 0 0; color: var(--mut); font-size: 15px; }
.sk-ok b { color: var(--ink); font-weight: 500; }
.sk-cta { margin-top: 64px; }

/* de tolv fönstren */
.sk-gr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 32px; }
.sk-gr > div { padding-top: 24px; border-top: 1px solid var(--line); }
.sk-gr h3 { font: 600 26px/1.1 var(--disp); letter-spacing: -.025em; margin: 0; }
.sk-gr p { margin: 8px 0 0; color: var(--mut); font-size: 16px; line-height: 1.5; text-wrap: balance; }
.sk-gr ul { list-style: none; padding: 0; margin: 16px 0 0; font-size: 16px; }
.sk-gr li { padding: 4px 0; }

@media (max-width: 900px) {
  .sk-h { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 112px; }
  .sk-r { padding-top: 48px; }
  .sk-l, .sk-gr { grid-template-columns: minmax(0, 1fr); }
  .sk-gr > div + div { margin-top: 32px; }
  .sk-g { font-size: 72px; }
  .sk-cta { margin-top: 48px; }
}
@media (max-width: 480px) { .sk-f { flex-direction: column; } .sk-f .btn { width: 100%; } }