/* Mobil startsida enligt bifogad layout */
@media (max-width:680px){
  .tk2-visual{
    padding-bottom:0 !important;
    background:#03152b;
  }
  .tk2-picture,
  .tk2-image{
    width:100%;
    display:block;
  }
  .tk2-quiz{
    left:3% !important;
    right:3% !important;
    bottom:.45% !important;
    width:auto !important;
    height:7.3% !important;
    min-height:0 !important;
    padding:0 !important;
    display:block !important;
    border:0 !important;
    border-radius:14px !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:1 !important;
    z-index:5;
    cursor:pointer;
  }
  .tk2-quiz:hover,
  .tk2-quiz:active{
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
  }
  .tk2-quiz-icon,
  .tk2-quiz-text,
  .tk2-arrow{
    visibility:hidden !important;
    pointer-events:none !important;
  }
}


/* ===== Redigerbara, levande hjälpkort på startsidan ===== */
.tk-ref-help-grid .tk-help-card{--card-accent:#0b5bd3;position:relative;display:grid;grid-template-columns:88px minmax(0,1fr) 28px;align-items:start;gap:20px;min-height:235px;padding:28px 24px 24px;background:#fff;border:1px solid #e9edf2;border-radius:22px;text-decoration:none;color:#111827;box-shadow:0 2px 4px rgba(15,23,42,.025);overflow:hidden;isolation:isolate;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease}
.tk-ref-help-grid .tk-help-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--card-accent) 8%,white),#fff 48%);opacity:0;z-index:-1;transition:opacity .28s ease}
.tk-ref-help-grid .tk-help-card--green{--card-accent:#2f8b19}.tk-ref-help-grid .tk-help-card--orange{--card-accent:#ef6c00}.tk-ref-help-grid .tk-help-card--purple{--card-accent:#6b21a8}.tk-ref-help-grid .tk-help-card--blue{--card-accent:#0757c9}
.tk-ref-help-grid .tk-help-card__icon{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:var(--card-accent);color:#fff;font-size:34px;box-shadow:0 8px 18px color-mix(in srgb,var(--card-accent) 22%,transparent);transition:transform .28s ease,box-shadow .28s ease}
.tk-ref-help-grid .tk-help-card__content{display:block;min-width:0}.tk-ref-help-grid .tk-help-card__title{display:block;font-size:25px;line-height:1.18;font-weight:800;letter-spacing:-.025em;margin:3px 0 18px;color:#111}.tk-ref-help-grid .tk-help-card__text{display:block;font-size:18px;line-height:1.52;color:#525963;font-weight:500}
.tk-ref-help-grid .tk-help-card__arrow{align-self:end;justify-self:end;color:var(--card-accent);font-size:25px;line-height:1;transition:transform .28s ease}
.tk-ref-help-grid .tk-help-card:hover,.tk-ref-help-grid .tk-help-card:focus-visible{transform:translateY(-7px);border-color:color-mix(in srgb,var(--card-accent) 28%,#e9edf2);box-shadow:0 18px 38px rgba(15,23,42,.12)}
.tk-ref-help-grid .tk-help-card:hover::before,.tk-ref-help-grid .tk-help-card:focus-visible::before{opacity:1}.tk-ref-help-grid .tk-help-card:hover .tk-help-card__icon,.tk-ref-help-grid .tk-help-card:focus-visible .tk-help-card__icon{transform:scale(1.07) rotate(-3deg);box-shadow:0 12px 24px color-mix(in srgb,var(--card-accent) 32%,transparent)}.tk-ref-help-grid .tk-help-card:hover .tk-help-card__arrow,.tk-ref-help-grid .tk-help-card:focus-visible .tk-help-card__arrow{transform:translateX(6px)}
.tk-ref-help-grid .tk-help-card:focus-visible{outline:3px solid color-mix(in srgb,var(--card-accent) 45%,white);outline-offset:3px}
@media(max-width:1100px){.tk-ref-help-grid .tk-help-card{grid-template-columns:68px minmax(0,1fr) 24px;gap:15px;min-height:210px;padding:22px 18px}.tk-ref-help-grid .tk-help-card__icon{width:64px;height:64px;font-size:27px}.tk-ref-help-grid .tk-help-card__title{font-size:21px}.tk-ref-help-grid .tk-help-card__text{font-size:16px}}
@media(max-width:700px){.tk-ref-help-grid .tk-help-card{grid-template-columns:58px minmax(0,1fr) 22px;min-height:0;padding:20px 16px;border-radius:18px}.tk-ref-help-grid .tk-help-card__icon{width:54px;height:54px;font-size:23px}.tk-ref-help-grid .tk-help-card__title{font-size:19px;margin:2px 0 8px}.tk-ref-help-grid .tk-help-card__text{font-size:15px;line-height:1.45}.tk-ref-help-grid .tk-help-card:hover{transform:translateY(-3px)}}


.tk-free-templates-link{display:block;max-width:640px;margin:28px auto 0;text-decoration:none;border-radius:16px;cursor:pointer;transition:transform .28s ease,filter .28s ease;}
.tk-free-templates-link>div{margin:0!important;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease;}
.tk-free-templates-link:hover{transform:translateY(-5px) scale(1.015);filter:brightness(1.12);}
.tk-free-templates-link:hover>div{background:rgba(46,125,50,.24)!important;border-color:rgba(165,214,167,.7)!important;box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 24px rgba(76,175,80,.18);}
.tk-free-templates-link:hover i{transform:translateY(-2px) scale(1.12);}
.tk-free-templates-link i{transition:transform .28s ease;}
.tk-free-templates-link:focus-visible{outline:3px solid #7ab7ff;outline-offset:5px;}


.po-app{--po:#07517f;--po2:#0b6fa4;--ink:#17324a;--muted:#607386;max-width:1120px;margin:0 auto;padding:42px 20px 70px;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.po-head{background:linear-gradient(135deg,#073b61,#0a6697);color:#fff;border-radius:24px;padding:34px 36px;box-shadow:0 18px 48px rgba(7,59,97,.15)}.po-kicker{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.82}.po-head h1{margin:8px 0 8px;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.04em}.po-head p{margin:0;max-width:760px;color:#e7f5fc}.po-tabs{display:flex;gap:8px;margin:24px 0}.po-tab{border:1px solid #c9d8e4;background:#fff;color:#31516a;border-radius:999px;padding:11px 18px;font-weight:800;cursor:pointer}.po-tab.active{background:var(--po);border-color:var(--po);color:#fff}.po-form{display:grid;gap:18px}.po-card{background:#fff;border:1px solid #dce6ee;border-radius:20px;padding:24px;box-shadow:0 8px 28px rgba(24,50,74,.06)}.po-card h2{margin:0 0 16px;font-size:1.25rem}.po-card-title p{margin:-10px 0 18px;color:var(--muted)}.po-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.po-grid label{font-size:.84rem;font-weight:750;color:#39566c}.po-grid input,.po-grid textarea{display:block;width:100%;margin-top:6px;border:1px solid #c9d8e4;border-radius:11px;padding:11px 12px;font:inherit;color:#17324a;background:#fff}.po-grid textarea{resize:vertical}.po-check{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:15px 0;border-top:1px solid #e7eef3}.po-check:first-child{border-top:0}.po-check strong{display:block}.po-check small{display:block;color:var(--muted);margin-top:4px;line-height:1.45}.po-status{display:flex;gap:6px;align-items:flex-start}.po-status label{cursor:pointer}.po-status input{position:absolute;opacity:0}.po-status span{display:block;border:1px solid #cbd8e2;border-radius:9px;padding:8px 10px;font-size:.76rem;font-weight:800;background:#fff}.po-status input:checked+span{border-color:var(--po);background:#eaf5fb;color:var(--po)}.po-comment{grid-column:1/-1;width:100%;border:1px solid #d6e1e9;border-radius:10px;padding:9px 11px;font:inherit}.po-actions{display:flex;gap:10px;justify-content:flex-end}.po-pdf,.po-clear{border:0;border-radius:12px;padding:13px 18px;font-weight:850;cursor:pointer}.po-pdf{background:var(--po);color:#fff}.po-clear{background:#eaf0f4;color:#29485f}@media(max-width:720px){.po-grid{grid-template-columns:1fr}.po-check{grid-template-columns:1fr}.po-status{flex-wrap:wrap}.po-head{padding:26px 22px}.po-actions{flex-direction:column}.po-actions button{width:100%}}


.tk-flow-guide {
    position: relative;
    z-index: 6;
    padding: 18px 0;
    border-bottom: 1px solid #c9dceb;
    background: linear-gradient(135deg, #edf7ff 0%, #f8fcff 58%, #eefaf5 100%);
    color: #0b1b31;
  }

  .tk-flow-guide[hidden] { display: none !important; }

  .tk-flow-guide-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
  }

  .tk-flow-guide-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
  }

  .tk-flow-guide-route {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: #075caa;
    font-size: 14px;
    font-weight: 900;
  }

  .tk-flow-guide-route i {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #0875e1;
  }

  .tk-flow-guide-close {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 0;
    color: #52697d;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
  }

  .tk-flow-guide-close:hover,
  .tk-flow-guide-close:focus-visible { color: #0b1b31; text-decoration: underline; }

  .tk-flow-guide-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 15px;
  }

  .tk-flow-guide-progress span {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #cfdeea;
  }

  .tk-flow-guide-progress span.is-complete,
  .tk-flow-guide-progress span.is-current { background: #0875e1; }

  .tk-flow-guide-progress span.is-current { box-shadow: 0 0 0 3px rgba(8,117,225,.13); }

  .tk-flow-guide-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 20px 22px;
    border: 1px solid #b9d7ee;
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 9px 25px rgba(11,27,49,.07);
  }

  .tk-flow-guide-step {
    margin: 0 0 4px;
    color: #0875e1;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .tk-flow-guide-title {
    margin: 0;
    color: #0b1b31;
    font-size: clamp(20px, 2.2vw, 27px);
    line-height: 1.2;
  }

  .tk-flow-guide-text {
    max-width: 720px;
    margin: 7px 0 0;
    color: #52697d;
    font-size: 15px;
    line-height: 1.5;
  }

  .tk-flow-guide-action {
    display: inline-flex;
    width: min(420px, 100%);
    min-height: 48px;
    align-items: center;
    justify-content: center;
    justify-self: end;
    gap: 9px;
    padding: 12px 18px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #0875e1;
    box-shadow: 0 8px 18px rgba(8,117,225,.2);
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
  }

  .tk-flow-guide-action:hover,
  .tk-flow-guide-action:focus-visible {
    color: #fff;
    background: #0664c1;
    text-decoration: none;
    transform: translateY(-1px);
  }

  .tk-flow-floating-action {
    position: fixed;
    right: 22px;
    bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 4900;
    width: min(460px, calc(100vw - 44px));
    min-height: 56px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(7,55,102,.3), 0 0 0 5px rgba(255,255,255,.88);
    line-height: 1.3;
  }

  .tk-flow-floating-action[hidden] { display: none !important; }
  #page-riskbedomning .tk-flow-floating-action,
  #page-fortlopande .tk-flow-floating-action {
    display: none !important;
  }

  .tk-flow-floating-action::before {
    content: "Nästa steg";
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    color: #075caa;
    background: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .tk-flow-guide.is-final .tk-flow-floating-action::before {
    content: "Steg 5 klart";
    color: #116b4a;
  }

  .tk-flow-guide.is-final .tk-flow-guide-route i,
  .tk-flow-guide.is-final .tk-flow-guide-progress span { background: #16865c; }

  .tk-flow-guide.is-final .tk-flow-guide-step { color: #16865c; }

  .tk-flow-guide.is-final .tk-flow-guide-action {
    background: #16865c;
    box-shadow: 0 8px 18px rgba(22,134,92,.2);
  }

  @media (max-width: 700px) {
    .tk-flow-guide { padding: 13px 0; }
    .tk-flow-guide-inner { width: min(100% - 24px, 1180px); }
    .tk-flow-guide-top { align-items: flex-start; margin-bottom: 10px; }
    .tk-flow-guide-route { font-size: 13px; }
    .tk-flow-guide-card { grid-template-columns: 1fr; gap: 15px; padding: 17px; }
    .tk-flow-guide-action { width: 100%; justify-self: stretch; }
    .tk-flow-floating-action {
      right: 12px;
      bottom: max(12px, env(safe-area-inset-bottom));
      left: 12px;
      width: auto;
      max-width: none;
      min-height: 54px;
      padding: 12px 14px;
      border-radius: 13px;
      box-shadow: 0 10px 28px rgba(7,55,102,.3), 0 0 0 4px rgba(255,255,255,.9);
      font-size: 14px;
    }
    body.classifier-continue-visible .tk-flow-floating-action {
      bottom: calc(94px + env(safe-area-inset-bottom));
    }
    body.tk-flow-follower-visible .page.active { padding-bottom: 92px; }
    .tk-flow-floating-action::before { display: none; }
    .tk-flow-guide-close { padding-right: 0; }

    /* Kompakt Nästa steg på formulärsidorna.
       Ligger högt i stället för längst ned så formulärfält och innehåll inte täcks. */
    #page-riskbedomning .tk-flow-floating-action,
    #page-fortlopande .tk-flow-floating-action {
      top: calc(var(--header-height, 72px) + 8px);
      right: 10px;
      bottom: auto;
      left: auto;
      width: auto;
      max-width: min(72vw, 330px);
      min-height: 40px;
      padding: 8px 12px;
      border-radius: 11px;
      font-size: 12px;
      line-height: 1.2;
      box-shadow: 0 7px 20px rgba(7,55,102,.22), 0 0 0 3px rgba(255,255,255,.9);
    }

    body.tk-flow-follower-visible #page-riskbedomning.page.active,
    body.tk-flow-follower-visible #page-fortlopande.page.active {
      padding-bottom: 0;
    }
  }


#page-om-tryckkollen{background:#f4f8fc;color:#0b1b31}.tk-about{max-width:1160px;margin:0 auto;padding:58px 22px 78px}.tk-about *{box-sizing:border-box}.tk-about-hero{text-align:center;max-width:900px;margin:0 auto 28px}.tk-about-kicker{display:inline-flex;gap:8px;align-items:center;color:#0875e1;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}.tk-about-hero h1{font-size:clamp(2.25rem,5vw,4.25rem);line-height:1.03;margin:12px 0 16px;letter-spacing:-.035em}.tk-about-hero>p{font-size:clamp(1.02rem,1.7vw,1.18rem);line-height:1.7;color:#53677f;margin:0 auto;max-width:800px}.tk-trustbar{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:24px auto 38px}.tk-trustbar span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #d9e6f1;border-radius:999px;padding:9px 14px;font-size:.9rem;font-weight:750;color:#243b55;box-shadow:0 6px 18px rgba(11,27,49,.04)}.tk-trustbar i{color:#0875e1}.tk-story{display:grid;grid-template-columns:1.02fr .98fr;gap:20px;margin-bottom:22px}.tk-story-card{background:#fff;border:1px solid #d9e6f1;border-radius:24px;padding:30px;box-shadow:0 12px 32px rgba(11,27,49,.06)}.tk-story-card h2{font-size:clamp(1.55rem,2.5vw,2rem);margin:0 0 12px}.tk-story-card p{color:#53677f;line-height:1.72;margin:0 0 13px}.tk-story-card p:last-child{margin-bottom:0}.tk-story-card strong{color:#0b1b31}.tk-story-card.accent{border-top:4px solid #0875e1}.tk-question{background:linear-gradient(135deg,#06182d 0%,#0a2c50 100%);color:#fff;border-radius:26px;padding:34px;box-shadow:0 22px 55px rgba(7,26,49,.2);display:grid;grid-template-columns:1.08fr .92fr;gap:32px;align-items:center;margin:22px 0}.tk-question h2{font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.08;margin:8px 0 12px}.tk-question p{color:#d7e6f5;line-height:1.67;margin:0 0 14px}.tk-question .btn-primary{margin-top:5px}.tk-qexamples{display:grid;gap:9px}.tk-qexamples span{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.13);padding:11px 13px;border-radius:12px;font-weight:650;font-size:.94rem}.tk-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:18px 0 46px}.tk-flow div{background:#fff;border:1px solid #dce7f1;border-radius:15px;padding:16px;text-align:center;box-shadow:0 7px 22px rgba(11,27,49,.045)}.tk-flow i{display:block;color:#0875e1;font-size:1.25rem;margin-bottom:7px}.tk-flow strong{font-size:.92rem}.tk-about-section{margin:44px 0}.tk-about-section>h2{text-align:center;font-size:clamp(1.75rem,3vw,2.45rem);margin:0 0 9px;letter-spacing:-.02em}.tk-about-section>.lead{text-align:center;color:#5b6d82;max-width:800px;margin:0 auto 24px;line-height:1.68}.tk-role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.tk-role{background:#fff;border:1px solid #dce7f1;border-radius:18px;padding:21px;box-shadow:0 9px 26px rgba(11,27,49,.05)}.tk-role .ico{width:40px;height:40px;border-radius:12px;background:#eaf5ff;color:#0875e1;display:grid;place-items:center;margin-bottom:13px}.tk-role strong{display:block;margin-bottom:7px;font-size:1rem}.tk-role p{margin:0;color:#5b6d82;line-height:1.55;font-size:.92rem}.tk-experience{display:grid;grid-template-columns:.95fr 1.05fr;gap:20px;align-items:stretch}.tk-experience-main{background:#fff;border:1px solid #d9e6f1;border-top:4px solid #0875e1;border-radius:22px;padding:28px;box-shadow:0 12px 30px rgba(11,27,49,.055)}.tk-experience-main h2,.tk-independent h2{margin:0 0 12px;font-size:1.55rem}.tk-experience-main p,.tk-independent p{color:#53677f;line-height:1.7;margin:0 0 12px}.tk-exp-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.tk-exp-fact{background:#f2f8fd;border:1px solid #dceaf5;border-radius:14px;padding:15px}.tk-exp-fact strong{display:block;color:#0875e1;font-size:1.1rem;margin-bottom:3px}.tk-exp-fact span{font-size:.87rem;color:#53677f;line-height:1.4}.tk-independent{background:#fff;border:1px solid #d9e6f1;border-radius:22px;padding:28px;box-shadow:0 12px 30px rgba(11,27,49,.055)}.tk-independent ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}.tk-independent li{display:flex;gap:10px;align-items:flex-start;color:#53677f;line-height:1.5}.tk-independent li i{color:#0875e1;margin-top:4px}.tk-free{margin:44px 0 0;background:#eaf5ff;border:1px solid #cce5fa;border-radius:24px;padding:30px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}.tk-free-icon{width:58px;height:58px;border-radius:17px;background:#0875e1;color:#fff;display:grid;place-items:center;font-size:1.5rem}.tk-free h2{margin:0 0 9px;font-size:1.65rem}.tk-free p{margin:0;color:#49647f;line-height:1.67}.tk-vision{text-align:center;margin-top:42px;padding:34px 28px;background:#fff;border:1px solid #d9e6f1;border-radius:24px;box-shadow:0 12px 30px rgba(11,27,49,.05)}.tk-vision h2{margin:0 0 9px;font-size:clamp(1.7rem,3vw,2.25rem)}.tk-vision p{max-width:800px;margin:0 auto;color:#53677f;line-height:1.68}.tk-vision strong{display:block;margin-top:15px;color:#0875e1;font-size:1.05rem}.tk-final-cta{display:flex;justify-content:center;margin-top:22px}.tk-final-cta .btn-primary{min-width:210px}.tk-smallprint{text-align:center;color:#71839a;font-size:.78rem;line-height:1.5;margin:22px auto 0;max-width:780px}@media(max-width:820px){.tk-about{padding:42px 16px 62px}.tk-about-hero{text-align:left}.tk-trustbar{justify-content:flex-start;margin-bottom:28px}.tk-story,.tk-question,.tk-experience{grid-template-columns:1fr}.tk-question{padding:25px}.tk-flow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:7px}.tk-flow div{min-width:68%;scroll-snap-align:start}.tk-role-grid{grid-template-columns:1fr 1fr}.tk-free{grid-template-columns:1fr}.tk-free-icon{width:50px;height:50px}.tk-exp-facts{grid-template-columns:1fr 1fr}}@media(max-width:520px){.tk-role-grid,.tk-exp-facts{grid-template-columns:1fr}.tk-story-card,.tk-experience-main,.tk-independent,.tk-free,.tk-vision{padding:22px}.tk-trustbar span{font-size:.82rem}.tk-flow div{min-width:76%}}.tk-role-kicker{display:flex;justify-content:center;margin-bottom:8px}.tk-role-grid{align-items:stretch}.tk-role{position:relative;overflow:hidden;min-height:245px;padding:22px 20px 20px;border-top:3px solid #0875e1;background:linear-gradient(180deg,#fff 0%,#f8fbfe 100%);transition:transform .2s ease,box-shadow .2s ease}.tk-role:hover{transform:translateY(-3px);box-shadow:0 15px 34px rgba(11,27,49,.09)}.tk-role .ico{margin-bottom:16px}.tk-role strong{font-size:1.03rem;color:#0b1b31;margin-bottom:5px}.tk-role b{display:block;color:#0875e1;font-size:.86rem;margin-bottom:10px}.tk-role p{font-size:.89rem;line-height:1.55}.tk-chain-note{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center;margin:18px auto 0;color:#53677f;font-size:.9rem}.tk-chain-note strong{color:#0b1b31}.tk-about-section{margin-top:38px}@media(max-width:820px){.tk-role{min-height:220px}.tk-role-kicker{justify-content:flex-start}.tk-chain-note{justify-content:flex-start;text-align:left}}@media(max-width:520px){.tk-role{min-height:auto;padding:20px}.tk-role-grid{gap:10px}}


#page-kontrolltyper{background:#f4f8fc;color:#0b1b31;min-height:70vh}
#page-kontrolltyper *{box-sizing:border-box}
.tkct-shell{max-width:1180px;margin:0 auto;padding:72px 24px 80px}
.tkct-head{text-align:center;max-width:780px;margin:0 auto 36px}
.tkct-eyebrow{margin:0 0 10px;color:#0875e1;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.88rem}
.tkct-head h1{margin:0 0 14px;font-size:clamp(2rem,4vw,3.25rem);line-height:1.08}
.tkct-head p{margin:0;color:#586b82;font-size:1.08rem;line-height:1.7}
.tkct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tkct-card{position:relative;display:flex;min-height:285px;flex-direction:column;padding:30px;border:1px solid #d8e4ef;border-radius:22px;background:#fff;color:#0b1b31;text-decoration:none;box-shadow:0 14px 36px rgba(11,27,49,.07);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tkct-card:hover,.tkct-card:focus-visible{transform:translateY(-7px);border-color:#87bff3;box-shadow:0 22px 48px rgba(8,117,225,.16);outline:none}
.tkct-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:#eaf5ff;color:#0875e1;font-size:1.45rem;margin-bottom:24px}
.tkct-card h2{font-size:1.45rem;margin:0 0 10px}.tkct-card p{color:#586b82;line-height:1.6;margin:0 0 24px}
.tkct-link{margin-top:auto;display:flex;align-items:center;justify-content:space-between;color:#0875e1;font-weight:800}.tkct-card:hover .tkct-link i{transform:translateX(5px)}.tkct-link i{transition:transform .22s ease}
.tkct-next{margin-top:38px;padding:24px 28px;border-radius:20px;background:#fff;border:1px solid #d8e4ef;box-shadow:0 12px 30px rgba(11,27,49,.06)}
.tkct-next strong{display:block;font-size:1.12rem;margin-bottom:5px}.tkct-next p{margin:0;color:#586b82;line-height:1.55}
@media(max-width:800px){.tkct-shell{padding:46px 18px 60px}.tkct-grid{grid-template-columns:1fr}.tkct-card{min-height:0}.tkct-head{text-align:left}}


@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

    :host {
      --navy: #071426;
      --navy-2: #0b2442;
      --blue: #0a73e8;
      --blue-dark: #075cb8;
      --green: #16865c;
      --red: #c93a3a;
      --amber: #b77900;
      --ink: #132033;
      --muted: #5f6b7a;
      --surface: #f4f7fb;
      --white: #fff;
      --border: #dfe7f1;
      --shadow: 0 22px 70px rgba(3, 14, 29, .22);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    :host { scroll-behavior: smooth; }

    :host {
      min-height: 100vh;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 15% 10%, rgba(10,115,232,.25), transparent 28rem),
        radial-gradient(circle at 88% 86%, rgba(22,134,92,.16), transparent 25rem),
        linear-gradient(145deg, var(--navy), #020a14 70%);
      line-height: 1.55;
    }

    button, a { font: inherit; }

    button { touch-action: manipulation; }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 999;
      transform: translateY(-180%);
      background: #fff;
      color: var(--navy);
      padding: 10px 16px;
      border-radius: 10px;
      font-weight: 700;
    }

    .skip-link:focus { transform: translateY(0); }

    :focus-visible {
      outline: 3px solid #ffd54f;
      outline-offset: 3px;
    }

    .site-header {
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: rgba(7,20,38,.88);
      backdrop-filter: blur(14px);
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .header-inner {
      width: min(1120px, calc(100% - 32px));
      min-height: 72px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      color: #fff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-weight: 800;
      letter-spacing: -.025em;
      font-size: 1.18rem;
    }

    .brand-mark {
      width: 39px;
      height: 39px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, #1785f4, #0758ad);
      box-shadow: 0 8px 24px rgba(10,115,232,.35);
    }

    .brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

    .header-badge {
      color: #b8d8ff;
      border: 1px solid rgba(122,183,255,.38);
      background: rgba(10,115,232,.13);
      border-radius: 999px;
      padding: 7px 13px;
      font-size: .76rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .tk-quiz-main {
      width: min(900px, calc(100% - 28px));
      margin: 0 auto;
      padding: clamp(32px, 6vw, 68px) 0 52px;
    }

    .hero {
      text-align: center;
      color: #fff;
      margin-bottom: 28px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #9fcaff;
      font-weight: 700;
      font-size: .84rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 15px;
    }

    .hero h1 {
      max-width: 800px;
      margin: 0 auto 15px;
      font-size: clamp(2.15rem, 6vw, 4rem);
      line-height: 1.04;
      letter-spacing: -.055em;
    }

    .hero p {
      max-width: 680px;
      margin: 0 auto;
      color: #d8e4f2;
      font-size: clamp(1rem, 2vw, 1.15rem);
    }

    .quiz-shell {
      background: rgba(255,255,255,.98);
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .quiz-top {
      padding: 22px clamp(20px, 4vw, 34px);
      background: #fff;
      border-bottom: 1px solid var(--border);
    }

    .quiz-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 12px;
      color: var(--muted);
      font-size: .9rem;
      font-weight: 700;
    }

    .progress-track {
      height: 9px;
      background: #e9eff6;
      border-radius: 999px;
      overflow: hidden;
    }

    .progress-bar {
      height: 100%;
      width: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--blue), #37a2ff);
      transition: width .35s ease;
    }

    .screen {
      display: none;
      padding: clamp(25px, 5vw, 46px);
      animation: reveal .3s ease;
    }

    .screen.active { display: block; }

    @keyframes reveal {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .start-screen { text-align: center; }

    .start-icon {
      width: 76px;
      height: 76px;
      margin: 0 auto 22px;
      border-radius: 23px;
      display: grid;
      place-items: center;
      background: #eaf4ff;
      color: var(--blue);
      font-size: 2rem;
    }

    .screen h2 {
      font-size: clamp(1.55rem, 4vw, 2.35rem);
      line-height: 1.16;
      letter-spacing: -.035em;
      margin-bottom: 13px;
    }

    .lead {
      max-width: 660px;
      margin: 0 auto 23px;
      color: var(--muted);
      font-size: 1.02rem;
    }

    .promise-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 26px 0;
      text-align: left;
    }

    .promise {
      padding: 17px;
      border: 1px solid var(--border);
      border-radius: 17px;
      background: var(--surface);
    }

    .promise i { color: var(--blue); margin-bottom: 9px; }
    .promise strong { display: block; font-size: .92rem; }
    .promise span { color: var(--muted); font-size: .82rem; }

    .primary-btn, .secondary-btn, .guide-link {
      border: 0;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 750;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      cursor: pointer;
      transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
    }

    .primary-btn {
      min-height: 54px;
      padding: 14px 26px;
      color: #fff;
      background: var(--blue);
      box-shadow: 0 9px 24px rgba(10,115,232,.28);
    }

    .primary-btn:hover {
      background: var(--blue-dark);
      transform: translateY(-2px);
    }

    .secondary-btn {
      min-height: 50px;
      padding: 12px 22px;
      color: var(--ink);
      background: #eef2f7;
    }

    .secondary-btn:hover { background: #e2e8f0; }

    .question-kicker {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--blue);
      font-size: .84rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 14px;
    }

    .scenario {
      color: var(--muted);
      font-size: 1rem;
      margin-bottom: 24px;
      max-width: 720px;
    }

    .answers {
      display: grid;
      gap: 12px;
    }

    .answer-btn {
      width: 100%;
      min-height: 62px;
      padding: 15px 18px;
      border-radius: 16px;
      border: 1.5px solid var(--border);
      background: #fff;
      color: var(--ink);
      text-align: left;
      display: flex;
      align-items: flex-start;
      gap: 13px;
      cursor: pointer;
      font-weight: 620;
      transition: border-color .15s ease, background .15s ease, transform .15s ease;
    }

    .answer-btn:hover:not(:disabled) {
      border-color: #8bc0f6;
      background: #f4f9ff;
      transform: translateY(-1px);
    }

    .answer-letter {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #edf2f8;
      color: #506071;
      font-weight: 800;
      font-size: .84rem;
    }

    .answer-btn.correct {
      border-color: #79c9a8;
      background: #eefaf5;
      color: #0f6847;
    }

    .answer-btn.correct .answer-letter {
      background: var(--green);
      color: #fff;
    }

    .answer-btn.wrong {
      border-color: #edabab;
      background: #fff3f3;
      color: #922c2c;
    }

    .answer-btn.wrong .answer-letter {
      background: var(--red);
      color: #fff;
    }

    .answer-btn.dimmed { opacity: .58; }
    .answer-btn:disabled { cursor: default; }

    .feedback {
      display: none;
      margin-top: 22px;
      border-radius: 18px;
      padding: 20px;
      border-left: 5px solid var(--blue);
      background: #edf6ff;
    }

    .feedback.show { display: block; animation: reveal .25s ease; }
    .feedback.correct-feedback { border-left-color: var(--green); background: #edf9f4; }
    .feedback.wrong-feedback { border-left-color: var(--red); background: #fff2f2; }

    .feedback-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      margin-bottom: 7px;
    }

    .feedback p { color: #34475d; }

    .feedback-note {
      margin-top: 10px;
      font-weight: 700;
    }

    .question-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 22px;
    }

    .result-header {
      text-align: center;
      padding-bottom: 26px;
      border-bottom: 1px solid var(--border);
    }

    .score-ring {
      width: 142px;
      height: 142px;
      margin: 0 auto 20px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: relative;
      background: conic-gradient(var(--blue) 0deg, #e4ebf3 0deg);
    }

    .score-ring::before {
      content: "";
      position: absolute;
      inset: 11px;
      border-radius: 50%;
      background: #fff;
    }

    .score-content {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .score-number {
      display: block;
      font-size: 2.25rem;
      font-weight: 850;
      line-height: 1;
      letter-spacing: -.05em;
    }

    .score-label {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
    }

    .result-message {
      color: var(--muted);
      max-width: 650px;
      margin: 8px auto 0;
    }

    .learning-plan {
      margin-top: 27px;
    }

    .learning-plan h3 {
      font-size: 1.28rem;
      margin-bottom: 6px;
    }

    .learning-plan > p {
      color: var(--muted);
      margin-bottom: 16px;
    }

    .recommendations {
      display: grid;
      gap: 11px;
    }

    .recommendation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 17px;
      background: #fff;
    }

    .recommendation-info {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .recommendation-icon {
      width: 39px;
      height: 39px;
      flex: 0 0 39px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--blue);
      background: #eaf4ff;
    }

    .recommendation strong { display: block; }
    .recommendation small { color: var(--muted); }

    .guide-link {
      flex: 0 0 auto;
      padding: 9px 14px;
      color: var(--blue);
      background: #edf6ff;
      font-size: .86rem;
    }

    .guide-link:hover { background: #dceeff; }

    .tryckkollen-finish {
      margin-top: 28px;
      padding: 22px;
      border-radius: 20px;
      background: linear-gradient(135deg, #071426, #0b2442);
      color: #fff;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 17px;
      align-items: center;
      box-shadow: 0 14px 34px rgba(7,20,38,.18);
    }

    .finish-icon {
      width: 48px;
      height: 48px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: rgba(10,115,232,.22);
      color: #82bcff;
      font-size: 1.2rem;
    }

    .finish-kicker {
      display: block;
      color: #82bcff;
      text-transform: uppercase;
      letter-spacing: .07em;
      font-weight: 800;
      font-size: .72rem;
      margin-bottom: 3px;
    }

    .tryckkollen-finish h3 { margin-bottom: 4px; }
    .tryckkollen-finish p { color: #d5e2f0; font-size: .9rem; }
    .finish-btn { white-space: nowrap; }

    .result-actions {
      display: flex;
      justify-content: center;
      gap: 11px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .disclaimer {
      width: min(900px, calc(100% - 28px));
      margin: 18px auto 35px;
      color: #aebdce;
      text-align: center;
      font-size: .79rem;
    }

    .site-footer {
      border-top: 1px solid rgba(255,255,255,.1);
      color: #aebdce;
      text-align: center;
      padding: 26px 16px;
      font-size: .86rem;
    }

    .site-footer a { color: #82bcff; }

    @media (max-width: 700px) {
      .brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

    .header-badge { display: none; }
      .promise-grid { grid-template-columns: 1fr; }
      .quiz-shell { border-radius: 21px; }
      .screen { padding: 25px 18px 29px; }
      .quiz-top { padding: 18px; }
      .answer-btn { min-height: 58px; padding: 14px; }
      .recommendation { align-items: flex-start; flex-direction: column; }
      .tryckkollen-finish { grid-template-columns: 1fr; text-align: left; }
      .finish-btn { width: 100%; }
      .guide-link { width: 100%; }
      .question-actions .primary-btn { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }

:host{display:block;width:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#132033;}
.tk-quiz-main{width:min(900px,calc(100% - 28px));margin:0 auto;padding:clamp(28px,5vw,58px) 0 56px;}

/* =========================================================
   TRYCKKOLLEN – SLUTLIG RESPONSIV HERO 2026-07-31
   Separat optimering för dator, surfplatta och mobil.
   ========================================================= */
.wow-lead {
  display: grid;
  gap: 14px;
  max-width: 870px !important;
  color: #dce9f8;
}
.wow-lead p {
  margin: 0;
}
.wow-lead-main {
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.62;
}
.wow-lead-support {
  font-size: clamp(.98rem, 1.16vw, 1.1rem);
  line-height: 1.62;
  color: #cbd9ea;
  max-width: 820px;
}
.wow-lead-closing {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding-left: 14px;
  border-left: 3px solid #27a9f3;
  color: #ffffff;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.5;
}

/* Dator och större skärmar */
@media (min-width: 1001px) {
  .wow-hero-copy {
    align-self: center;
  }
  .wow-lead {
    text-align: left;
  }
  .wow-actions {
    margin-top: 26px !important;
  }
}

/* Surfplatta och mindre datorer */
@media (min-width: 681px) and (max-width: 1000px) {
  .wow-hero {
    padding-top: 46px !important;
  }
  .wow-lead {
    max-width: 760px !important;
    gap: 12px;
    text-align: center;
  }
  .wow-lead-closing {
    margin-inline: auto;
    padding: 10px 16px;
    border-left: 0;
    border-radius: 14px;
    background: rgba(14, 165, 233, .12);
    border: 1px solid rgba(112, 183, 255, .24);
  }
}

/* Mobil */
@media (max-width: 680px) {
  .wow-hero {
    padding: 30px 0 44px !important;
  }
  .wow-hero > .container.wow-hero-grid {
    width: min(100% - 24px, 560px) !important;
  }
  .wow-eyebrow {
    padding: 8px 10px !important;
    font-size: .68rem !important;
    line-height: 1.38 !important;
  }
  .wow-eyebrow i {
    display: none;
  }
  .wow-hero h1 {
    margin: 16px auto 18px !important;
    font-size: clamp(1.82rem, 9vw, 2.48rem) !important;
    line-height: 1.03 !important;
  }
  .wow-hero h1 .hero-title-main {
    max-width: 11.8em !important;
  }
  .wow-lead {
    gap: 10px;
    max-width: 34rem !important;
    text-align: center;
  }
  .wow-lead-main {
    font-size: .94rem;
    line-height: 1.56;
  }
  .wow-lead-support {
    font-size: .88rem;
    line-height: 1.52;
    color: #d4dfed;
  }
  .wow-lead-closing {
    width: 100%;
    justify-content: center;
    margin-top: 2px;
    padding: 10px 12px;
    border-left: 0;
    border-radius: 13px;
    background: rgba(14, 165, 233, .13);
    border: 1px solid rgba(112, 183, 255, .26);
    font-size: .9rem;
    line-height: 1.42;
  }
  .wow-actions {
    margin-top: 20px !important;
  }
  .wow-btn {
    min-height: 58px !important;
  }
  .wow-trust {
    margin-top: 17px !important;
    gap: 8px !important;
    font-size: .78rem !important;
  }
  .wow-visual {
    display: none !important;
  }
}

/* Mycket små mobiler */
@media (max-width: 390px) {
  .wow-hero > .container.wow-hero-grid {
    width: min(100% - 18px, 560px) !important;
  }
  .wow-hero h1 {
    font-size: clamp(1.72rem, 8.7vw, 2.12rem) !important;
  }
  .wow-lead-main {
    font-size: .9rem;
  }
  .wow-lead-support {
    font-size: .84rem;
  }
  .wow-btn strong {
    font-size: .94rem;
  }
  .wow-btn small {
    font-size: .72rem;
  }
}

/* ===== STARTSIDAN: HOVER HELT BORTTAGEN ===== */
.tk-hotspot:hover,
.tk-hotspot:focus-visible{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    transform:none !important;
    filter:none !important;
}

.tk-start-action:hover,
.tk-start-action:focus-visible{
    transform:none !important;
    box-shadow:inherit !important;
    border-color:inherit !important;
    background:inherit !important;
}

.tk-start-action:hover .tk-start-arrow,
.tk-start-action:focus-visible .tk-start-arrow{
    opacity:0 !important;
    transform:none !important;
}
/* ===== SLUT ===== */


:host{
  --navy:#061b3a;
  --navy2:#0a3566;
  --blue:#1479ff;
  --blue2:#00a1ff;
  --red:#c70d16;
  --red2:#8f0008;
  --green:#078332;
  --green2:#005f24;
  --white:#fff;
  --ink:#0c2348;
  --line:#b9cde3;
  --panel:#f7fbff;
  --shadow:0 20px 55px rgba(0,25,66,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
:host{display:block;margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:#061b3a;color:var(--ink)}
button,a{font:inherit}
.compare-page{position:relative;overflow:hidden;min-height:100vh;background:
  radial-gradient(circle at 50% 0%,rgba(255,255,255,.95) 0 17%,rgba(213,235,255,.92) 31%,rgba(58,144,224,.84) 61%,rgba(2,63,129,.98) 100%)}
.compare-page:before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:42px 42px;opacity:.16;pointer-events:none}
.skyline{position:absolute;left:0;right:0;top:45px;height:320px;opacity:.32;background:
  linear-gradient(to top,rgba(11,91,171,.5),transparent 75%);pointer-events:none}
.skyline:after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(0,90,180,.25) 22px 34px,transparent 34px 50px);clip-path:polygon(0 75%,2% 54%,4% 78%,7% 45%,9% 72%,12% 30%,14% 76%,17% 42%,19% 70%,22% 24%,25% 73%,29% 36%,33% 68%,37% 26%,41% 72%,46% 40%,50% 65%,55% 25%,58% 70%,62% 38%,67% 71%,72% 20%,77% 68%,82% 36%,87% 72%,91% 28%,95% 70%,100% 40%,100% 100%,0 100%)}
.wrap{position:relative;z-index:2;max-width:1500px;margin:auto;padding:18px 22px 20px}
.hero-title{text-align:center;text-transform:uppercase;font-weight:1000;line-height:.98;letter-spacing:-.035em;color:#071a3a;text-shadow:0 3px 0 rgba(255,255,255,.85);font-size:clamp(2rem,4.3vw,4.5rem);margin:0 auto 10px;max-width:1230px}
.hero-title .accent{color:#116bf0}
.visual-row{display:none!important}
.visual{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:160px}
.pressure-art{width:min(100%,470px);height:190px;position:relative;filter:drop-shadow(0 20px 18px rgba(0,20,60,.32));animation:floaty 5s ease-in-out infinite}
.tank{position:absolute;left:92px;bottom:10px;width:150px;height:145px;border-radius:48% 48% 15% 15%/25% 25% 12% 12%;background:linear-gradient(90deg,#041f5f,#0a5bd0 38%,#1e82ff 58%,#06327d);border:4px solid #072d72}
.tank:before{content:"";position:absolute;left:15px;right:15px;top:-17px;height:25px;border-radius:50%;background:linear-gradient(#2c7de1,#082c6f);border:4px solid #082a68}
.tank:after{content:"";position:absolute;width:42px;height:42px;border-radius:50%;right:14px;top:43px;background:#fff;border:5px solid #27374d;box-shadow:inset 0 0 0 3px #fff}
.pipe{position:absolute;background:#173149;border:2px solid #071827;border-radius:8px;box-shadow:inset 0 0 0 2px #6e7f8a}
.p1{width:265px;height:16px;left:160px;bottom:38px}.p2{width:16px;height:125px;left:380px;bottom:38px}.p3{width:185px;height:15px;left:205px;bottom:118px}.p4{width:14px;height:85px;left:205px;bottom:44px}.base{position:absolute;left:25px;right:20px;bottom:0;height:17px;border-radius:4px;background:linear-gradient(#153866,#031936)}
.shield{position:absolute;left:0;bottom:42px;width:74px;height:88px;clip-path:polygon(50% 0,100% 15%,90% 72%,50% 100%,10% 72%,0 15%);background:linear-gradient(#0b2e5a,#031225);border:3px solid #9dc9ff;color:white;display:grid;place-items:center;text-align:center;font-weight:900;font-size:18px;line-height:1.05}
.car-art{width:min(100%,480px);height:185px;position:relative;filter:drop-shadow(0 20px 18px rgba(0,20,60,.28));animation:floaty 5s ease-in-out infinite .5s}
.car{position:absolute;left:20px;bottom:22px;width:315px;height:110px;border-radius:42px 85px 25px 25px;background:linear-gradient(145deg,#ffffff,#dbe8f2 58%,#7f98ae);border:3px solid #375270;transform:skewX(-4deg)}
.car:before{content:"";position:absolute;left:70px;top:-45px;width:155px;height:58px;border-radius:58px 78px 0 0;background:linear-gradient(145deg,#eef8ff,#7aa5ca);border:3px solid #375270;clip-path:polygon(16% 100%,26% 10%,76% 8%,100% 100%)}
.wheel{position:absolute;bottom:-23px;width:58px;height:58px;border-radius:50%;background:#07111d;border:8px solid #1c2833;box-shadow:inset 0 0 0 8px #b7c7d4}.w1{left:55px}.w2{right:45px}
.registry{position:absolute;right:0;bottom:10px;width:145px;height:190px;border-radius:12px;background:linear-gradient(#fefefe,#eef5fb);border:10px solid #123a6d;box-shadow:var(--shadow);transform:rotate(2deg);padding:18px 12px}
.registry:before{content:"";position:absolute;top:-18px;left:42px;width:58px;height:25px;border-radius:8px;background:linear-gradient(#e4e4e4,#8a8a8a);border:2px solid #555}
.registry h3{margin:3px 0 16px;color:#0e3f8d;font-size:16px}.registry p{margin:10px 0;padding-bottom:6px;border-bottom:1px solid #bac8d6;font-size:12px;font-weight:800}.check{float:right;color:#078832}
.comparison{display:grid;grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr);gap:0;align-items:stretch}
.side{background:rgba(255,255,255,.96);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(255,255,255,.9)}
.side-header{margin:0 100px 5px;padding:10px 24px;border-radius:10px;color:#fff;text-align:left;font-weight:1000;font-size:clamp(1.2rem,2vw,2rem);line-height:1.05;display:flex;align-items:center;gap:16px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.16)}
.side-header small{display:block;font-size:.56em;font-weight:800;margin-top:3px}.side.red .side-header{background:linear-gradient(90deg,var(--red),var(--red2))}.side.green .side-header{background:linear-gradient(90deg,var(--green),var(--green2))}
.header-icon{font-size:34px}
.rows{padding:0 24px 4px}.row{display:grid;grid-template-columns:58px 74px 1fr;align-items:center;gap:14px;min-height:92px;border-bottom:1px solid #b9cbe0;padding:8px 0;transition:.25s}.row:last-child{border-bottom:0}.row:hover{transform:translateY(-3px);background:linear-gradient(90deg,transparent,rgba(20,121,255,.06),transparent)}
.num{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:25px;font-weight:1000;box-shadow:0 7px 14px rgba(0,0,0,.16)}.red .num,.red .round-icon{background:linear-gradient(#d61019,#900007)}.green .num,.green .round-icon{background:linear-gradient(#0c933a,#006223)}
.round-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:29px;border:3px solid rgba(255,255,255,.75)}
.copy{font-size:clamp(.9rem,1.12vw,1.05rem);line-height:1.25}.copy strong{font-weight:1000}.red .copy strong{color:#c51019}.green .copy strong{color:#0b7c2f}
.vs-col{display:grid;grid-template-rows:72px repeat(4,1fr);place-items:center;position:relative}.vs-col:before{content:"";position:absolute;top:30px;bottom:30px;width:2px;background:#9cb9d8}.vs{z-index:2;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(#143b78,#021638);border:4px solid #fff;font-weight:1000;font-size:20px;box-shadow:0 7px 18px rgba(0,20,60,.3)}
.bottom{display:grid;grid-template-columns:1.18fr 1.35fr .72fr;gap:12px;margin-top:10px;padding:0 0 8px}.bottom-card{background:linear-gradient(135deg,#0b376a,#031a3a);border-radius:20px;color:#fff;box-shadow:var(--shadow);padding:18px 20px;border:1px solid rgba(103,184,255,.35)}
.bottom-card h2{margin:0 0 12px;text-transform:uppercase;font-size:clamp(1rem,1.6vw,1.4rem)}.bottom-card h2 span{color:#1280ff}.why p{margin:8px 0;font-size:.86rem;line-height:1.3;padding-left:34px;position:relative}.why p:before{content:"✓";position:absolute;left:0;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;border:2px solid #61a9ff;color:#61a9ff;font-weight:1000}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.step{text-align:center;padding:3px 8px;border-right:1px solid rgba(255,255,255,.22);font-size:.76rem}.step:last-child{border-right:0}.step i{width:58px;height:58px;margin:0 auto 7px;border:3px solid #fff;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:29px;color:#75b9ff;box-shadow:0 0 16px #177aff}
.cta{display:flex;flex-direction:column;justify-content:center;border:2px solid #4da1ff;box-shadow:0 0 22px #177aff,inset 0 0 18px rgba(23,122,255,.2)}.cta h2{color:#1b8cff}.cta strong{font-size:1.05rem;color:#58a8ff}.cta ul{margin:4px 0 12px;padding-left:20px;font-size:.82rem}.cta a{display:block;text-align:center;text-decoration:none;background:linear-gradient(#1688ff,#045db8);color:#fff;padding:11px 12px;border-radius:10px;font-weight:900;transition:.2s}.cta a:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,122,255,.36)}
.goal{margin-top:0;background:linear-gradient(90deg,#0c2e59,#072048);border-radius:0 0 18px 18px;color:#fff;padding:12px 20px;text-align:center;font-size:clamp(.9rem,1.6vw,1.15rem);box-shadow:var(--shadow)}
.reveal{opacity:0;transform:translateY(24px);transition:.7s ease}.reveal.show{opacity:1;transform:none}
@keyframes floaty{50%{transform:translateY(-8px)}}
@media(max-width:1120px){.visual-row{grid-template-columns:1fr 1fr}.side-header{margin:0 35px 5px}.row{grid-template-columns:46px 58px 1fr}.num{width:42px;height:42px}.round-icon{width:52px;height:52px}.bottom{grid-template-columns:1fr 1fr}.cta{grid-column:1/-1}.comparison{grid-template-columns:1fr 56px 1fr}}
@media(max-width:820px){.wrap{padding:14px 12px}.hero-title{font-size:clamp(1.8rem,8vw,3rem)}.visual-row{grid-template-columns:1fr;gap:0}.visual{min-height:135px}.pressure-art,.car-art{transform:scale(.82);transform-origin:center bottom}.comparison{display:block}.vs-col{display:none}.side{margin-bottom:14px}.side-header{margin:0;padding:12px 16px;border-radius:0}.row{grid-template-columns:44px 54px 1fr;min-height:auto;padding:13px 0}.rows{padding:0 14px}.bottom{grid-template-columns:1fr}.cta{grid-column:auto}.steps{grid-template-columns:repeat(2,1fr);gap:14px}.step{border-right:0}.copy{font-size:.94rem}}
@media(max-width:520px){.hero-title{font-size:1.72rem}.visual-row{display:none}.row{grid-template-columns:40px 46px 1fr;gap:9px}.num{width:36px;height:36px;font-size:20px}.round-icon{width:44px;height:44px;font-size:22px}.copy{font-size:.86rem}.bottom-card{padding:16px}.steps{grid-template-columns:1fr 1fr}.step{font-size:.72rem}.goal{border-radius:16px;margin-top:8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Levande hero baserad på den bifogade originalbilden */
.animated-hero{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:0 0 18px 18px;
  box-shadow:0 22px 55px rgba(0,28,73,.25);
  line-height:0;
  background:#cde5fa;
}
.hero-picture{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  pointer-events:none;
}
.gauge-overlay{
  position:absolute;
  left:17.5293%;
  top:64.3275%;
  width:0;
  height:0;
}
.gauge-needle{
  position:absolute;
  left:-2px;
  bottom:-2px;
  width:4px;
  height:48px;
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(to top,#721018 0 25%,#f11c27 52%,#ff646c 100%);
  box-shadow:0 0 2px rgba(0,0,0,.85);
  transform-origin:50% 100%;
  transform:rotate(-128deg);
  animation:gaugePressure 6.4s cubic-bezier(.45,.05,.2,1) infinite;
}
.gauge-hub{
  position:absolute;
  left:-7px;
  top:-7px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fafafa 0 12%,#959da5 18%,#28323a 54%,#05090c 75%);
  border:1px solid #111;
  box-shadow:0 1px 2px rgba(0,0,0,.8);
}
.pressure-display{
  position:absolute;
  left:15.14%;
  top:75.74%;
  width:5.02%;
  height:7.05%;
  min-width:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.12em;
  border-radius:5px;
  color:#16ff69;
  background:linear-gradient(180deg,#020b15,#031324);
  border:2px solid rgba(18,105,178,.92);
  box-shadow:inset 0 0 10px #000,0 0 7px rgba(0,223,255,.45);
  font-family:"Courier New",monospace;
  font-weight:900;
  font-size:clamp(10px,1.5vw,29px);
  line-height:1;
  text-shadow:0 0 4px #00ff66,0 0 10px rgba(0,255,102,.75);
}
.pressure-display small{
  font-size:.45em;
  margin-top:.5em;
}
.steam-cloud{
  position:absolute;
  left:29.7%;
  top:43.2%;
  width:7%;
  height:15%;
  pointer-events:none;
}
.steam-cloud i,
.exhaust-cloud i{
  position:absolute;
  display:block;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.88) 0 25%,rgba(225,239,249,.54) 54%,rgba(205,224,239,0) 75%);
  filter:blur(2px);
  opacity:0;
}
.steam-cloud i{
  left:10%;
  bottom:0;
  width:28%;
  aspect-ratio:1;
  animation:steamRise 4.8s ease-out infinite;
}
.steam-cloud i:nth-child(2){left:26%;animation-delay:.8s}
.steam-cloud i:nth-child(3){left:5%;animation-delay:1.6s}
.steam-cloud i:nth-child(4){left:38%;animation-delay:2.4s}
.steam-cloud i:nth-child(5){left:20%;animation-delay:3.2s}

.exhaust-cloud{
  position:absolute;
  left:74.7%;
  top:69%;
  width:12.5%;
  height:18%;
  pointer-events:none;
}
.exhaust-cloud i{
  left:0;
  bottom:18%;
  width:18%;
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(217,228,238,.82) 0 20%,rgba(167,188,206,.55) 48%,rgba(104,133,158,0) 75%);
  animation:exhaustMove 3.8s linear infinite;
}
.exhaust-cloud i:nth-child(2){animation-delay:.55s}
.exhaust-cloud i:nth-child(3){animation-delay:1.1s}
.exhaust-cloud i:nth-child(4){animation-delay:1.65s}
.exhaust-cloud i:nth-child(5){animation-delay:2.2s}
.exhaust-cloud i:nth-child(6){animation-delay:2.75s}

@keyframes gaugePressure{
  0%,8%{transform:rotate(-128deg)}
  32%{transform:rotate(-68deg)}
  58%{transform:rotate(-18deg)}
  72%{transform:rotate(23deg)}
  88%,100%{transform:rotate(-128deg)}
}
@keyframes steamRise{
  0%{transform:translate(0,18%) scale(.35);opacity:0}
  15%{opacity:.72}
  70%{opacity:.35}
  100%{transform:translate(55%,-260%) scale(2.1);opacity:0}
}
@keyframes exhaustMove{
  0%{transform:translate(0,0) scale(.3);opacity:0}
  12%{opacity:.72}
  65%{opacity:.35}
  100%{transform:translate(360%,-55%) scale(2.25);opacity:0}
}
@media(max-width:820px){
  .animated-hero{border-radius:0 0 12px 12px}
  .pressure-display{border-width:1px;border-radius:3px;min-width:34px}
  .gauge-needle{height:clamp(18px,2.35vw,48px);width:clamp(2px,.2vw,4px)}
  .gauge-hub{width:clamp(7px,.7vw,14px);height:clamp(7px,.7vw,14px);left:clamp(-7px,-.35vw,-3.5px);top:clamp(-7px,-.35vw,-3.5px)}
}
@media(max-width:520px){
  .animated-hero{
    width:calc(100% + 24px);
    margin-left:-12px;
    border-radius:0;
  }
}

/* Symmetrisk jämförelse */
.comparison{
  grid-template-columns:1fr 90px 1fr!important;
  align-items:start!important;
}
.side{
  display:flex;
  flex-direction:column;
}
.side-header{
  width:560px!important;
  max-width:calc(100% - 60px)!important;
  margin:0 auto 18px!important;
  min-height:90px;
  justify-content:center;
}
.rows{display:flex;flex-direction:column;gap:0}
.row{
  min-height:138px!important;
  align-items:center!important;
}
.copy{
  display:flex;
  align-items:center;
  min-height:110px;
}
.vs-col{
  grid-template-rows:108px repeat(4,138px)!important;
}

/* =========================================================
   SLUTLIG RESPONSIV JÄMFÖRELSE
   Dator: två helt symmetriska kolumner
   Surfplatta/mobil: tydliga staplade kort
   ========================================================= */

.comparison{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr) !important;
  gap:0 !important;
  align-items:stretch !important;
  margin-top:16px;
}

.side{
  display:grid !important;
  grid-template-rows:auto 1fr;
  min-width:0;
  height:100%;
  background:rgba(255,255,255,.97);
  border-radius:22px;
  overflow:hidden;
}

.side-header{
  width:auto !important;
  max-width:none !important;
  min-height:96px !important;
  margin:0 48px 14px !important;
  padding:14px 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  text-align:left !important;
  border-radius:0 0 14px 14px !important;
  line-height:1.02 !important;
}

.side-header > span:last-child{
  display:block;
}

.side-header small{
  margin-top:6px !important;
  line-height:1.15 !important;
}

.rows{
  display:grid !important;
  grid-template-rows:repeat(4,minmax(154px,1fr));
  padding:0 26px 10px !important;
  gap:0 !important;
}

.row{
  display:grid !important;
  grid-template-columns:56px 70px minmax(0,1fr) !important;
  align-items:center !important;
  gap:16px !important;
  min-height:0 !important;
  padding:18px 0 !important;
  border-bottom:1px solid var(--line);
}

.row:last-child{border-bottom:0}

.copy{
  display:block !important;
  min-height:0 !important;
  width:auto !important;
  font-size:clamp(.88rem,1.05vw,1.04rem) !important;
  line-height:1.38 !important;
  overflow-wrap:anywhere;
  hyphens:auto;
}

.copy strong{
  display:inline;
  font-weight:900;
}

.num{
  width:50px !important;
  height:50px !important;
  font-size:25px !important;
  flex:none;
}

.round-icon{
  width:64px !important;
  height:64px !important;
  font-size:29px !important;
  flex:none;
}

.vs-col{
  display:grid !important;
  grid-template-rows:110px repeat(4,minmax(154px,1fr)) !important;
  place-items:center !important;
  position:relative;
  min-height:100%;
}

.vs-col:before{
  top:35px !important;
  bottom:35px !important;
}

.vs{
  width:56px !important;
  height:56px !important;
  font-size:18px !important;
}

/* Mindre datorer och liggande surfplattor */
@media (max-width:1180px){
  .comparison{
    grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr) !important;
  }
  .side-header{
    margin:0 22px 12px !important;
    min-height:86px !important;
    padding:12px 16px !important;
  }
  .rows{
    grid-template-rows:repeat(4,minmax(176px,1fr));
    padding:0 16px 8px !important;
  }
  .row{
    grid-template-columns:44px 54px minmax(0,1fr) !important;
    gap:11px !important;
    padding:16px 0 !important;
  }
  .num{
    width:42px !important;
    height:42px !important;
    font-size:21px !important;
  }
  .round-icon{
    width:52px !important;
    height:52px !important;
    font-size:24px !important;
  }
  .copy{
    font-size:.9rem !important;
    line-height:1.36 !important;
  }
  .vs-col{
    grid-template-rows:98px repeat(4,minmax(176px,1fr)) !important;
  }
  .vs{
    width:48px !important;
    height:48px !important;
    font-size:16px !important;
  }
}

/* Surfplatta: kolumnerna staplas för full läsbarhet */
@media (max-width:900px){
  .comparison{
    display:flex !important;
    flex-direction:column;
    gap:18px !important;
  }
  .vs-col{
    display:none !important;
  }
  .side{
    border-radius:18px;
  }
  .side-header{
    width:100% !important;
    margin:0 !important;
    min-height:82px !important;
    border-radius:0 !important;
    justify-content:flex-start !important;
    padding:15px 20px !important;
  }
  .rows{
    display:block !important;
    padding:0 20px 8px !important;
  }
  .row{
    grid-template-columns:48px 60px minmax(0,1fr) !important;
    min-height:auto !important;
    padding:18px 0 !important;
    gap:14px !important;
  }
  .num{
    width:46px !important;
    height:46px !important;
    font-size:23px !important;
  }
  .round-icon{
    width:58px !important;
    height:58px !important;
    font-size:27px !important;
  }
  .copy{
    font-size:1rem !important;
    line-height:1.42 !important;
  }
}

/* Mobiltelefon */
@media (max-width:560px){
  .wrap{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .comparison{
    gap:14px !important;
    margin-top:12px;
  }
  .side{
    border-radius:15px;
  }
  .side-header{
    min-height:74px !important;
    padding:13px 15px !important;
    gap:12px !important;
    font-size:clamp(1.05rem,6vw,1.42rem) !important;
  }
  .side-header small{
    font-size:.58em !important;
    margin-top:4px !important;
  }
  .header-icon{
    font-size:27px !important;
  }
  .rows{
    padding:0 13px 5px !important;
  }
  .row{
    grid-template-columns:38px 46px minmax(0,1fr) !important;
    gap:9px !important;
    padding:15px 0 !important;
  }
  .num{
    width:36px !important;
    height:36px !important;
    font-size:19px !important;
  }
  .round-icon{
    width:44px !important;
    height:44px !important;
    font-size:21px !important;
    border-width:2px !important;
  }
  .copy{
    font-size:.88rem !important;
    line-height:1.4 !important;
  }
  .row:hover{
    transform:none !important;
  }
}

/* Mycket smala telefoner */
@media (max-width:380px){
  .row{
    grid-template-columns:34px 40px minmax(0,1fr) !important;
    gap:7px !important;
  }
  .num{
    width:32px !important;
    height:32px !important;
    font-size:17px !important;
  }
  .round-icon{
    width:38px !important;
    height:38px !important;
    font-size:18px !important;
  }
  .copy{
    font-size:.82rem !important;
  }
}

    .tk-classification-example-image img{width:100%;height:auto;display:block;border-radius:18px}
    .tk-classification-example-image figcaption{text-align:center;margin-top:10px;color:#49627d;font-weight:700}
    .tk-class-result.class-b{background:linear-gradient(135deg,#fff4dd,#ffe3ad);border-color:#e59a16;color:#8a5400}

/* KORRIGERAD MOBIL- OCH SURFPLATTELAYOUT FÖR JÄMFÖRELSEN */
@media (max-width: 900px){
  .compare-page{width:100% !important;max-width:100% !important;overflow:hidden !important;}
  .wrap{width:100% !important;max-width:100% !important;padding:14px 8px 18px !important;overflow:hidden !important;}
  .comparison{display:grid !important;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr) !important;gap:5px !important;align-items:stretch !important;width:100% !important;max-width:100% !important;margin:12px 0 0 !important;}
  .side{display:grid !important;grid-template-rows:auto 1fr !important;min-width:0 !important;width:auto !important;margin:0 !important;border-radius:12px !important;overflow:hidden !important;}
  .side-header{width:100% !important;max-width:100% !important;min-width:0 !important;min-height:72px !important;margin:0 !important;padding:10px 8px !important;border-radius:0 !important;justify-content:center !important;text-align:center !important;gap:7px !important;font-size:clamp(.78rem,2.1vw,1rem) !important;line-height:1.08 !important;overflow-wrap:anywhere !important;}
  .side-header small{font-size:.62em !important;line-height:1.16 !important;margin-top:4px !important;}
  .header-icon{font-size:22px !important;flex:0 0 auto !important;}
  .rows{display:grid !important;grid-template-rows:repeat(4,minmax(190px,auto)) !important;padding:0 7px 6px !important;min-width:0 !important;}
  .row{display:grid !important;grid-template-columns:28px minmax(0,1fr) !important;align-items:start !important;gap:6px !important;min-width:0 !important;min-height:190px !important;padding:12px 0 !important;}
  .num{width:26px !important;height:26px !important;font-size:14px !important;margin-top:1px !important;}
  .round-icon{display:none !important;}
  .copy{display:block !important;min-width:0 !important;min-height:0 !important;font-size:clamp(.78rem,1.9vw,.92rem) !important;line-height:1.34 !important;overflow-wrap:anywhere !important;word-break:normal !important;hyphens:auto !important;}
  .vs-col{display:grid !important;grid-template-rows:72px repeat(4,minmax(190px,auto)) !important;width:38px !important;min-width:38px !important;place-items:center !important;}
  .vs-col:before{top:24px !important;bottom:24px !important;}
  .vs{width:32px !important;height:32px !important;border-width:2px !important;font-size:11px !important;}
}
@media (max-width: 560px){
  .wrap{padding-left:4px !important;padding-right:4px !important;}
  .hero-title{font-size:clamp(1.35rem,7vw,1.85rem) !important;}
  .comparison{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) !important;gap:3px !important;}
  .side-header{min-height:66px !important;padding:8px 5px !important;font-size:clamp(.68rem,3vw,.82rem) !important;gap:4px !important;}
  .header-icon{font-size:17px !important;}
  .rows{grid-template-rows:repeat(4,minmax(235px,auto)) !important;padding:0 5px 5px !important;}
  .row{grid-template-columns:24px minmax(0,1fr) !important;gap:5px !important;min-height:235px !important;padding:10px 0 !important;}
  .num{width:23px !important;height:23px !important;font-size:12px !important;}
  .copy{font-size:clamp(.74rem,3.15vw,.84rem) !important;line-height:1.32 !important;}
  .vs-col{grid-template-rows:66px repeat(4,minmax(235px,auto)) !important;width:30px !important;min-width:30px !important;}
  .vs{width:27px !important;height:27px !important;font-size:9px !important;}
}
@media (max-width: 380px){
  .rows{grid-template-rows:repeat(4,minmax(270px,auto)) !important;}
  .row{min-height:270px !important;}
  .vs-col{grid-template-rows:66px repeat(4,minmax(270px,auto)) !important;}
  .copy{font-size:.73rem !important;line-height:1.3 !important;}
}


:root{--tk-v30-radius:18px;--tk-v30-shadow:0 10px 28px rgba(15,42,67,.09);--tk-v30-border:#dfe7ef}
/* Jämnare rytm och läsbredd */
#page-main section{scroll-margin-top:92px}
#page-main p{max-width:72ch}
#page-main .container,#page-main .section-container{padding-left:clamp(18px,3vw,42px);padding-right:clamp(18px,3vw,42px)}
/* Kort och CTA får samma visuella språk */
#page-main .tk-role,#page-main .tk-ref-card,#page-main .tk-ux-next__action{border-radius:var(--tk-v30-radius)!important}
#page-main .tk-ux-next__box{border:1px solid var(--tk-v30-border);box-shadow:var(--tk-v30-shadow);border-radius:22px}
#page-main .tk-ux-next__actions{align-items:stretch}
#page-main .tk-ux-next__action{height:100%;min-height:112px}
#page-main .tk-ux-next__action strong{line-height:1.2}
#page-main .tk-ux-next__action small{line-height:1.45}
/* Bildkort: samma beskärning och lugnare hover */
#page-main .tk-role img,#page-main .tk-ref-card img{width:100%;height:100%;object-fit:cover;object-position:center}
@media (hover:hover) and (pointer:fine){
 #page-main .tk-role:hover,#page-main .tk-ref-card:hover{transform:translateY(-4px)!important;box-shadow:0 14px 32px rgba(15,42,67,.16)!important}
}
/* Surfplatta: två tydliga kolumner, inga trånga fyrspalter */
@media (min-width:701px) and (max-width:1050px){
 #page-main .tk-roles__grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;overflow:visible!important}
 #page-main .tk-role{width:100%!important;max-width:none!important;min-height:390px!important}
 #page-main .tk-ref-equipment-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;overflow:visible!important}
 #page-main .tk-ref-equipment-grid>.tk-ref-card:nth-child(n){width:100%!important;max-width:none!important;height:330px!important;min-height:330px!important}
 #page-main .tk-swipe-cue{display:none!important}
}
/* Mobil: mindre kort, tydlig glimt av nästa, stabil snap */
@media (max-width:700px){
 body{overflow-x:hidden}
 #page-main section{scroll-margin-top:72px}
 #page-main .container,#page-main .section-container{padding-left:16px!important;padding-right:16px!important}
 #page-main .tk-roles__grid,#page-main .tk-ref-equipment-grid{scroll-padding-left:16px!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 #page-main .tk-role{flex-basis:76vw!important;max-width:305px!important;min-height:390px!important}
 #page-main .tk-ref-equipment-grid>.tk-ref-card:nth-child(n){flex-basis:76vw!important;max-width:305px!important;height:310px!important;min-height:310px!important}
 #page-main .tk-role__content{padding:18px 16px 15px!important}
 #page-main .tk-role h3,#page-main .tk-real-card-text strong{font-size:1.24rem!important}
 #page-main .tk-role p,#page-main .tk-real-card-text span{font-size:.84rem!important}
 #page-main .tk-ux-next{padding-left:14px!important;padding-right:14px!important}
 #page-main .tk-ux-next__box{padding:20px 16px!important;border-radius:18px!important}
 #page-main .tk-ux-next__actions{grid-template-columns:1fr!important;gap:10px!important}
 #page-main .tk-ux-next__action{min-height:88px!important;padding:14px!important}
 #page-main .tk-ux-next__ask{align-items:flex-start!important;gap:12px!important}
 #page-main .tk-ux-next__ask button{width:100%!important;min-height:48px!important}
 button,a{touch-action:manipulation}
}
/* Små mobiler */
@media (max-width:390px){
 #page-main .tk-role{flex-basis:82vw!important;min-height:375px!important}
 #page-main .tk-ref-equipment-grid>.tk-ref-card:nth-child(n){flex-basis:82vw!important;height:295px!important;min-height:295px!important}
 #page-main .tk-ux-next__box{padding:18px 14px!important}
}
/* Tillgänglighet */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}#page-main .tk-role,#page-main .tk-ref-card{transition:none!important}}