*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#151A20;
  --pap:#FFFFFF;
  --pan:#F1F2EF;
  --pan2:#E8EAE5;
  --blu:#17356B;
  --blu2:#0E2247;
  --grn:#1A6349;
  --red:#95322C;
  --amb:#8A5A12;
  --mut:#606A76;
  --lin:#D9DCD6;
  --lin2:#C6CAC2;
  --ui:"Schibsted Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --se:"Newsreader",Georgia,"Times New Roman",serif;
  --mo:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pap);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button,select,input{font:inherit;color:inherit}

/* ---- ThemeKnock strip ---- */
.tk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--blu2);color:#D8DFEC;
    padding:9px 26px;font-size:12.5px;letter-spacing:.02em}
.tk-b{font-weight:700;color:#fff}
.tk span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#63769B;margin-right:14px;vertical-align:3px}
.tk-d{margin-left:auto;color:#8B9BBB}

/* ---- intro ---- */
.intro{max-width:1180px;margin:0 auto;padding:52px 26px 30px}
.intro h1{font-family:var(--se);font-weight:500;font-size:clamp(32px,4.9vw,58px);line-height:1.07;
          letter-spacing:-.018em;margin:0 0 16px;max-width:19ch}
.intro p{margin:0;font-size:17.5px;line-height:1.55;color:#3B444F;max-width:62ch}

/* ---- app chrome ---- */
.app{max-width:1180px;margin:0 auto 8px;padding:0 26px}
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--blu);color:#fff;
     border-radius:9px 9px 0 0;padding:11px 16px}
.mk{display:flex;color:#9FC0F2}
.bar-n{font-family:var(--se);font-size:20px;font-weight:600;letter-spacing:-.01em}
.bar-s{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#A8BEE4;padding-left:12px;border-left:1px solid rgba(255,255,255,.22)}
.bar-c{margin-left:auto;font-size:12.5px;color:#C9D8F1;background:rgba(255,255,255,.09);
       border-radius:20px;padding:4px 11px}
.bar-c+.bar-c{margin-left:0}
.bar-c b{font-weight:600;color:#fff}
.bar-t{font-family:var(--mo);font-variant-numeric:tabular-nums}

.shell{border:1px solid var(--lin);border-top:0;border-radius:0 0 9px 9px;background:var(--pan);padding:16px;overflow:hidden}
.cols{display:grid;grid-template-columns:344px minmax(0,1fr);gap:16px;align-items:stretch}

/* ---- numbered role label ---- */
.col{min-width:0;display:flex;flex-direction:column}
.col-k{margin:0 0 11px 1px;min-height:78px}
.ck{display:flex;align-items:center;gap:9px}
.ck i{flex:none;width:21px;height:21px;border-radius:50%;background:var(--blu);color:#fff;
      font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ck b{font-size:15px;font-weight:700;letter-spacing:-.005em}
.col-k em{display:block;margin:5px 0 0 30px;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--mut);max-width:46ch}

/* ---- phone ---- */
.phone{background:#fff;border:1px solid var(--lin);border-radius:12px;overflow:hidden;flex:1;display:flex;flex-direction:column}
.ph-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;
      border-bottom:1px solid var(--lin);background:#FBFBFA}
.ph-b{font-family:var(--se);font-size:16px;font-weight:600}
.ph-st{font-size:10.5px;color:var(--mut);display:flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.06em}
.ph-st select{border:1px solid var(--lin2);background:#fff;border-radius:5px;padding:3px 5px;font-size:11.5px;
              text-transform:none;letter-spacing:0;color:var(--ink)}
.ph-body{padding:0 0 13px;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.ph-img{width:100%;height:146px;object-fit:cover;flex:none}
.ph-in{padding:12px 13px 0;flex:1;display:flex;flex-direction:column}
.ph-back{flex:none;width:100%;text-align:left;border:0;border-bottom:1px solid #EFF0ED;background:#fff;
         padding:8px 13px;font-size:12px;font-weight:600;color:var(--blu);cursor:pointer}
.ph-back::before{content:"‹ ";font-size:15px;line-height:1}
.ph-back:hover{background:#F4F7FC}

/* marketplace list inside the phone */
.ph-list{padding-top:13px;flex:1;display:flex;flex-direction:column}
.ph-lh{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#7B848E;font-weight:700;margin-bottom:9px}
.mkc{display:flex;gap:11px;align-items:center;width:100%;text-align:left;border:1px solid var(--lin);
     background:#fff;border-radius:9px;padding:10px;margin-bottom:10px;font:inherit;color:inherit}
button.mkc{cursor:pointer;transition:border-color .12s,background .12s}
button.mkc:hover{border-color:var(--blu);background:#F7F9FD}
.mkc-i{flex:none;width:86px;height:72px;object-fit:cover;border-radius:6px}
.mkc-t{flex:none;width:86px;height:72px;border-radius:6px;background:var(--blu);color:#fff;
       font-family:var(--se);font-size:28px;display:flex;align-items:center;justify-content:center}
.mkc-b{min-width:0;display:block}
.mkc-o{display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--blu);font-weight:600}
.mkc-p{display:block;font-family:var(--se);font-size:15.5px;line-height:1.2;margin:2px 0 3px}
.mkc-s{display:block;font-size:11px;color:#8A929B}
.mkc-on{color:var(--grn);font-weight:600}
.ph-org{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--blu);font-weight:600}
.ph-p{font-family:var(--se);font-size:23px;line-height:1.14;font-weight:500;margin:5px 0 3px;letter-spacing:-.012em}
.ph-v{font-size:12.5px;color:var(--mut)}
.ph-note{margin:11px 0 0;padding:9px 11px;border-radius:7px;font-size:12.5px;line-height:1.45}
.ph-note.ok{background:#EAF2EC;color:#134B37;border:1px solid #C4DDCE}
.ph-note.no{background:#F6EAE9;color:#7A2A25;border:1px solid #E3C7C4}
.ph-note b{display:block;font-weight:700;margin-bottom:2px}
.pkg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0 0}
.pk{border:1px solid var(--lin2);background:#fff;border-radius:8px;padding:9px 6px;cursor:pointer;text-align:center;
    transition:border-color .12s,background .12s}
.pk:hover:not(:disabled){border-color:var(--blu);background:#F4F7FC}
.pk:disabled{opacity:.4;cursor:not-allowed}
.pk b{display:block;font-family:var(--mo);font-size:15px;font-weight:600}
.pk span{display:block;font-size:11px;color:var(--mut);margin-top:1px}
.free{margin:9px 0 0;width:100%;border:1px dashed var(--grn);color:var(--grn);background:#F2F8F4;
      border-radius:8px;padding:9px;cursor:pointer;font-size:13px;font-weight:600}
.free:hover{background:#E7F2EB}
.ph-fine{margin:14px 0 0;padding-top:11px;border-top:1px solid #EFF0ED;font-size:10.5px;line-height:1.45;color:#7B848E;margin-top:auto}
.rc{margin:12px 0 0;border:1px solid var(--lin);border-radius:8px;background:#FBFBFA;padding:11px 12px}
.rc-h{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--grn);font-weight:700}
.rc-n{font-family:var(--mo);font-size:15px;margin:5px 0 2px;font-weight:600}
.rc-s{font-size:12px;color:var(--mut)}
.rc button{margin-top:9px;background:none;border:0;padding:0;color:var(--blu);font-size:12px;
           text-decoration:underline;cursor:pointer}

/* ---- panel / tabs ---- */
.panel{background:#fff;border:1px solid var(--lin);border-radius:12px;flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--lin);background:#FBFBFA;flex:none}
.tb{border:0;background:none;padding:11px 15px;font-size:13px;font-weight:600;color:var(--mut);cursor:pointer;
    border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px}
.tb-on{color:var(--ink);border-bottom-color:var(--blu)}
.cnt{font-family:var(--mo);font-size:11px;background:var(--pan2);color:#4A535E;border-radius:11px;padding:1px 7px}
.tb-on .cnt{background:var(--blu);color:#fff}
.tbody{flex:1;overflow:auto;min-height:0}

table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:#fff;text-align:left;font-size:10.5px;letter-spacing:.08em;
         text-transform:uppercase;color:#7B848E;font-weight:600;padding:8px 13px;border-bottom:1px solid var(--lin);white-space:nowrap}
tbody td{padding:9px 13px;border-bottom:1px solid #EFF0ED;font-size:13px;vertical-align:middle}
tbody tr.new{animation:pop 1s ease}
@keyframes pop{0%{background:#EAF2EC}100%{background:transparent}}
tbody tr.hit td{background:#EEF3FA}
.no-td{font-family:var(--mo);font-size:12px;color:#4A535E;white-space:nowrap}
.nm{font-weight:600}
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:4px;padding:2px 6px;white-space:nowrap}
.t-paid{background:#E9EFF9;color:var(--blu)}
.t-free{background:#E7F2EB;color:var(--grn)}
.wt{font-family:var(--mo);font-size:12px;color:var(--mut)}
.tm{font-family:var(--mo);font-size:11.5px;color:#8A929B;white-space:nowrap}

.rules{padding:4px 0}
.rule{display:flex;gap:12px;padding:13px 15px;border-bottom:1px solid #EFF0ED;align-items:flex-start}
.rule-i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--blu);margin-top:6px}
.rule-b{min-width:0;flex:1}
.rule-t{font-size:13.5px;font-weight:600}
.rule-v{font-family:var(--mo);font-size:12.5px;color:var(--blu);margin-top:2px;word-break:break-word}
.rule-w{font-size:11.5px;color:var(--mut);margin-top:3px}
.rule-e{flex:none;font-size:11px;color:#8A929B;text-align:right}
.rch{font-family:var(--mo);font-size:12px;font-weight:600;border:1px solid var(--lin2);background:#fff;
     color:var(--mut);border-radius:6px;padding:4px 10px;margin:4px 6px 0 0;cursor:pointer;transition:all .12s}
.rch:hover{border-color:var(--blu);color:var(--blu)}
.rch-off{border-color:#C89A96;color:var(--red);background:#F9EFEE}
.rch-h{font-family:var(--ui);font-size:11px;color:#9AA2AB;margin-left:4px}

/* ---- draw ---- */
.draw{margin-top:16px}
.dr{background:#fff;border:1px solid var(--lin);border-radius:12px;padding:16px}
.dr-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.st{border:1px solid var(--lin);border-radius:9px;padding:13px 14px;background:#FBFBFA;min-width:0}
.st.live{border-color:var(--blu);background:#F5F8FD}
.st.done{border-color:#BFD6C7;background:#F4F9F6}
.st-n{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#7B848E;font-weight:700}
.st-t{font-size:14px;font-weight:700;margin:4px 0 5px}
.st-p{font-size:12.5px;color:var(--mut);line-height:1.45;margin:0}
.st-v{font-family:var(--mo);font-size:11.5px;color:var(--blu2);background:var(--pan);border-radius:6px;
      padding:7px 8px;margin-top:9px;word-break:break-all;line-height:1.5}
.st-v em{font-style:normal;color:#8A929B}
.go{margin-top:10px;width:100%;background:var(--blu);color:#fff;border:0;border-radius:7px;padding:10px;
    font-size:13px;font-weight:600;cursor:pointer}
.go:hover{background:var(--blu2)}
.go:disabled{background:#B9C0CB;cursor:not-allowed}
.go.gh{background:#fff;color:var(--blu);border:1px solid var(--blu)}
.go.gh:hover{background:#F4F7FC}
.win{margin-top:14px;border:1px solid #BDCEE8;background:#EEF3FA;border-radius:9px;padding:14px 16px;
     display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.win-l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blu);font-weight:700}
.win-n{font-family:var(--se);font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.win-m{font-family:var(--mo);font-size:12.5px;color:#3E5478}
.win-r{margin-left:auto;font-size:12.5px;color:#3E5478;max-width:34ch;text-align:right}
.win-r a{color:var(--blu)}
.ok-l{margin-top:10px;font-size:12.5px;color:var(--grn);font-weight:600;display:none}
.ok-l.on{display:block}

/* ---- status bar ---- */
.foot{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:13px;
      border-top:1px solid var(--lin2);font-size:12.5px;color:var(--mut)}
.foot b{font-family:var(--mo);color:var(--ink);font-weight:600}
.foot .fr{margin-left:auto}
.rst{border:0;background:none;padding:0;color:var(--blu);font-size:12.5px;text-decoration:underline;cursor:pointer}

/* ---- band ---- */
.band{max-width:1180px;margin:58px auto 0;padding:0 26px;display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:center}
.band-i{display:block;min-width:0}
.band-i img{width:100%;height:clamp(200px,24vw,300px);object-fit:cover;object-position:50% 50%;border-radius:10px}
.band-i img:first-child{object-position:50% 52%}
.band-i img:last-child{object-position:50% 50%}
.band figcaption{margin:0;font-family:var(--se);font-size:clamp(18px,2.1vw,25px);line-height:1.3;color:#2C343E;letter-spacing:-.01em}

/* ---- close ---- */
.close{max-width:1180px;margin:0 auto;padding:52px 26px 40px;display:grid;
       grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.close h2{font-family:var(--se);font-weight:500;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.015em;margin:0 0 10px}
.cl-t>p{margin:0 0 22px;font-size:15.5px;color:#3B444F;max-width:56ch}
.ms{list-style:none;margin:0;padding:0;border-top:1px solid var(--lin)}
.ms li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 18px;padding:14px 0;
       border-bottom:1px solid var(--lin);font-size:13.5px;line-height:1.5;color:var(--mut)}
.ms-w{font-family:var(--mo);font-size:12px;color:var(--blu);padding-top:2px;grid-row:span 2}
.ms b{font-size:15px;color:var(--ink);font-weight:700;letter-spacing:-.005em}
.cl-i img{width:100%;height:400px;object-fit:cover;object-position:52% 42%;border-radius:10px}
.cl-i{margin:0}

/* ---- footer ---- */
.ft{border-top:1px solid var(--lin);background:#FBFBFA}
.ft{display:block;padding:20px 26px 34px}
.ft span{display:block;max-width:1180px;margin:0 auto;font-size:12px;color:var(--mut)}
.ft-c{margin-top:6px !important;font-size:11px;color:#949CA5}

/* ---- responsive ---- */
@media (min-width:901px){
  .phone,.panel{height:556px;flex:none}
}
@media (max-width:1080px){
  .cols{grid-template-columns:300px minmax(0,1fr)}
  .close{grid-template-columns:minmax(0,1fr) 240px;gap:30px}
  .cl-i img{height:340px}
}
@media (max-width:900px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .col-k{min-height:0}
  .dr-row{grid-template-columns:minmax(0,1fr)}
  .win-r{margin-left:0;text-align:left}
  .tbody{min-height:340px;max-height:360px}
  .close{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:40px}
  .cl-i img{height:260px}
  .band{margin-top:40px;grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:640px){
  .tk{padding:8px 16px;font-size:11.5px}
  .tk-d{margin-left:0}
  .intro{padding:34px 16px 22px}
  .app{padding:0 16px}
  .shell{padding:12px}
  .bar{padding:10px 12px;gap:9px}
  .bar-s,.bar-t{display:none}
  .bar-c{margin-left:0}
  .bar-c:first-of-type{margin-left:auto}
  .close{padding:34px 16px 30px}
  .band{padding:0 16px}

  .ft{padding:18px 16px 28px}
  .ms li{grid-template-columns:minmax(0,1fr);gap:2px}
  .ms-w{grid-row:auto}
  .foot{gap:14px}
  .foot .fr{margin-left:0}
  thead th:last-child,tbody td:last-child{display:none}
  .ph-h{flex-wrap:wrap;gap:6px}
  .band-i img{height:210px}
}