

@media (max-width:767.98px){

  body .position-relative.z-1 h1{
    font-size:24px !important;
    line-height:1.18 !important;
    margin-top:8px !important;
    margin-bottom:6px !important;
  }

  body .position-relative.z-1 p{
    font-size:15px !important;
    line-height:1.4 !important;
    margin-bottom:10px !important;
  }

  body h2.mb-2.text-center{
    font-size:20px !important;
    line-height:1.2 !important;
    margin-bottom:8px !important;
  }

  body section.features-section{padding-top:0 !important}
}

@media (min-width:768px){
  body h2.mb-2.text-center{margin-bottom:14px !important}
}

/* =============================================================
   Content tables and conclusion block
   <table id="table" class="t-rank"> -> bonus leaderboard
   <table id="table" class="t-pros"> -> pros / cons
   <table id="table"> without header cells -> awards list
   any other <table id="table"> -> clean default table
   Conclusion block: its h2 needs class "conclusion-title".
   ============================================================= */
table#table{width:100%;border:0;border-collapse:separate;border-spacing:0;background:none;margin:8px 0 6px;font-variant-numeric:tabular-nums}
table#table th,table#table td{border:0;background:none;padding:0;vertical-align:middle}

/* ---------- 0. Default content table ---------- */
table#table:has(th):not(.t-rank):not(.t-pros) th{padding:0 16px 12px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8b87a6;text-align:left;border-bottom:1px solid #cfc6f7}
table#table:has(th):not(.t-rank):not(.t-pros) td{padding:15px 16px;font-size:15px;line-height:1.45;color:#2a2647;border-bottom:1px solid #ecebf3;transition:background .2s ease}
table#table:has(th):not(.t-rank):not(.t-pros) td:first-child{font-weight:600;color:#15112e}
table#table:has(th):not(.t-rank):not(.t-pros) tr:hover td{background:#faf8ff}

/* ---------- 1. Bonus leaderboard ---------- */
table#table.t-rank tr{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:20px;padding:16px 18px 16px 6px;border-bottom:1px solid #ecebf3;position:relative;transition:background .25s ease}
table#table.t-rank tr:first-child{padding:0 18px 12px 6px;border-bottom:1px solid #cfc6f7}
table#table.t-rank th{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8b87a6;text-align:left}
table#table.t-rank th:last-child{text-align:right}
table#table.t-rank td:first-child{font-size:46px;line-height:1;font-weight:700;color:transparent;-webkit-text-stroke:1.2px #c9c3e0;letter-spacing:-.04em;transition:color .25s ease,-webkit-text-stroke-color .25s ease}
table#table.t-rank td:nth-child(2){font-size:20px;font-weight:500;color:#15112e;letter-spacing:-.01em}
table#table.t-rank td:last-child{justify-self:end;font-size:14px;font-weight:600;color:#3a2f8c;background:#f4f1ff;border:1px solid #e2dbff;border-radius:16px;padding:9px 16px;max-width:420px;text-align:right;line-height:1.35}
table#table.t-rank tr:not(:first-child):hover{background:linear-gradient(90deg,#f6f3ff 0%,rgba(246,243,255,0) 80%)}
table#table.t-rank tr:not(:first-child):hover td:first-child{-webkit-text-stroke-color:#6D51FE}
table#table.t-rank tr:nth-child(2) td:first-child{color:#7A5CFF;-webkit-text-stroke:0}
table#table.t-rank tr:nth-child(2) td:last-child{background:#7A5CFF;border-color:#7A5CFF;color:#fff}

/* ---------- 2. Awards as tickets ---------- */
table#table:not(:has(th)) tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;counter-reset:award}
table#table:not(:has(th)) tr{counter-increment:award;display:flex;flex-direction:column;background:#fff;border:1px solid #e6e2f7;border-radius:16px;position:relative;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
table#table:not(:has(th)) td:first-child{padding:16px 20px 14px;font-size:13px;font-weight:500;color:#6b6788;letter-spacing:.01em}
table#table:not(:has(th)) td:last-child{position:relative;padding:16px 20px 18px;border-top:1.5px dashed #ddd7f5;font-size:22px;font-weight:500;color:#15112e;letter-spacing:-.01em;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
table#table:not(:has(th)) td:last-child::after{content:"No. " counter(award, decimal-leading-zero);font-size:11px;font-weight:600;letter-spacing:.14em;color:#b3acd6}
table#table:not(:has(th)) tr::before,table#table:not(:has(th)) tr::after{content:"";position:absolute;top:calc(14px + 13px*1.5 + 14px);width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#fff;border:1px solid #e6e2f7}
table#table:not(:has(th)) tr::before{left:-9px;clip-path:inset(0 0 0 50%)}
table#table:not(:has(th)) tr::after{right:-9px;clip-path:inset(0 50% 0 0)}
table#table:not(:has(th)) tr:hover{transform:translateY(-2px);border-color:#b7a8ff;box-shadow:0 18px 36px -24px rgba(122,92,255,.45)}
table#table:not(:has(th)) tr:hover td:last-child{color:#7A5CFF}
table#table:not(:has(th)) tr:first-child{background:linear-gradient(135deg,#f6f3ff,#eee8ff);border-color:#cfc4ff}
table#table:not(:has(th)) tr:first-child td:first-child{color:#6b5bb8}
table#table:not(:has(th)) tr:first-child td:last-child{color:#5b3ff5;border-top-color:#d9cffd}
table#table:not(:has(th)) tr:first-child td:last-child::after{color:#7A5CFF}
table#table:not(:has(th)) tr:first-child::before,table#table:not(:has(th)) tr:first-child::after{border-color:#cfc4ff}

/* ---------- 3. Pros / cons on a centre axis ---------- */
table#table.t-pros tbody{display:block;position:relative;background:linear-gradient(#e4e1ef,#e4e1ef) center/1px 100% no-repeat}
table#table.t-pros tr{display:grid;grid-template-columns:1fr 1fr}
table#table.t-pros th{padding:0 34px 18px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
table#table.t-pros th:first-child{text-align:right;color:#0f9a63}
table#table.t-pros th:last-child{text-align:left;color:#d8434a}
table#table.t-pros th:first-child::after,table#table.t-pros th:last-child::before{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:16px;letter-spacing:0;vertical-align:middle;color:#fff;margin:-3px 10px 0}
table#table.t-pros th:first-child::after{content:"+";background:#0f9a63}
table#table.t-pros th:last-child::before{content:"\2212";background:#d8434a}
table#table.t-pros td{position:relative;padding:15px 34px;font-size:15px;line-height:1.45;color:#2a2647}
table#table.t-pros td:first-child{text-align:right}
table#table.t-pros td:not(:empty)::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;border:2px solid #fff;box-sizing:content-box}
table#table.t-pros td:first-child:not(:empty)::after{right:-6.5px;background:#0f9a63}
table#table.t-pros td:last-child:not(:empty)::after{left:-6.5px;background:#d8434a}
table#table.t-pros tr:not(:first-child):hover td:first-child{background:linear-gradient(270deg,rgba(15,154,99,.08),rgba(15,154,99,0))}
table#table.t-pros tr:not(:first-child):hover td:last-child{background:linear-gradient(90deg,rgba(216,67,74,.07),rgba(216,67,74,0))}

/* ---------- 4. Conclusion (wrapper of h2.conclusion-title) ---------- */
div:has(> h2.conclusion-title){position:relative;overflow:hidden;background:linear-gradient(100deg,#faf9ff 0%,#f5f2ff 55%,#efeaff 100%);border:1px solid #e6e0fc;color:#2e2a4d;border-radius:24px;padding:52px 220px 52px 52px;margin-bottom:24px}
div:has(> h2.conclusion-title) > *{position:relative;z-index:1}
div:has(> h2.conclusion-title) h2{color:#15112e;font-size:40px;font-weight:500;letter-spacing:-.02em;margin:0 0 16px}
div:has(> h2.conclusion-title) h2::before{content:"";display:block;width:36px;height:3px;background:#7A5CFF;margin-bottom:20px;border-radius:2px}
div:has(> h2.conclusion-title) p{font-size:18px;line-height:1.7;color:#3b3760;margin:0;max-width:62ch;font-weight:400}
div:has(> h2.conclusion-title) br,div:has(> h2.conclusion-title) hr{display:none}
div:has(> h2.conclusion-title)::before{content:"";position:absolute;inset:0 0 0 auto;width:46%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M11 0L22 11L11 22L0 11Z' fill='none' stroke='%237A5CFF' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E") 0 0/22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%);pointer-events:none;transition:background-position 1.2s ease}
div:has(> h2.conclusion-title):hover::before{background-position:11px 11px}
div:has(> h2.conclusion-title)::after{content:"";position:absolute;right:52px;top:50%;width:118px;height:118px;margin-top:-59px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cpath id='c' d='M60,60 m-44,0 a44,44 0 1,1 88,0 a44,44 0 1,1 -88,0'/%3E%3C/defs%3E%3Ctext font-family='Space Grotesk,Arial,sans-serif' font-size='10' font-weight='600' letter-spacing='4.4' fill='%237A5CFF'%3E%3CtextPath href='%23c'%3ESPSA.SK %E2%80%A2 Z%C3%81VER REDAKCIE %E2%80%A2 %3C/textPath%3E%3C/text%3E%3Ccircle cx='60' cy='60' r='20' fill='%237A5CFF'/%3E%3Cpath d='M51 60.5l6 6 12-13' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:0 18px 40px -22px rgba(122,92,255,.55);z-index:1}

/* ---------- 5. Rating "updated" badge ---------- */
.spsa-updated{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;width:fit-content;max-width:100%;margin:18px auto 28px;padding:9px 18px 9px 14px;background:#f7f5ff;border:1px solid #e6e0fc;border-radius:999px;font-size:13.5px;line-height:1.35;font-weight:500;color:#3b3760;text-align:center}
.spsa-updated time{font-weight:600;color:#5b3ff5;white-space:nowrap}
.spsa-updated__sep{color:#c3b9f3}
.spsa-updated__dot{position:relative;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#12a36b}
.spsa-updated__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(18,163,107,.45);animation:spsaPulse 2.4s ease-out infinite}
@keyframes spsaPulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.spsa-updated__dot::after{animation:none}}

/* ---------- 6. Shared footer ---------- */
.spsa-footer{margin-top:48px;padding:40px 0 28px;background:linear-gradient(180deg,#fff 0%,#f7f5ff 100%);border-top:1px solid #ece8fb}
.spsa-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid #e6e0fc}
.spsa-footer__logo img{display:block;width:118px;height:auto}
.spsa-footer__nav{display:flex;flex-wrap:wrap;gap:10px 28px}
.spsa-footer__nav a{position:relative;font-size:15px;font-weight:500;color:#2e2a4d;text-decoration:none;padding:2px 0;transition:color .2s ease}
.spsa-footer__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:#7A5CFF;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.spsa-footer__nav a:hover{color:#7A5CFF}
.spsa-footer__nav a:hover::after,.spsa-footer__nav a[aria-current="page"]::after{transform:scaleX(1)}
.spsa-footer__nav a[aria-current="page"]{color:#5b3ff5}
.spsa-footer__copy{margin:18px 0 0;font-size:13px;color:#8b87a6;text-align:center}

/* ---------- content: mobile ---------- */
@media (max-width:767.98px){
  table#table:has(th):not(.t-rank):not(.t-pros) th{padding:0 8px 10px;font-size:10px;letter-spacing:.1em}
  table#table:has(th):not(.t-rank):not(.t-pros) td{padding:12px 8px;font-size:14px}

  table#table.t-rank tr{grid-template-columns:52px 1fr;gap:4px 14px;padding:14px 4px}
  table#table.t-rank tr:first-child{display:none}
  table#table.t-rank td:first-child{grid-row:span 2;font-size:36px}
  table#table.t-rank td:nth-child(2){font-size:18px}
  table#table.t-rank td:last-child{justify-self:start;white-space:normal;text-align:left;font-size:13px;padding:7px 12px;border-radius:14px}

  table#table:not(:has(th)) tbody{grid-template-columns:1fr;gap:12px}
  table#table:not(:has(th)) td:last-child{font-size:20px}

  table#table.t-pros tbody{background:none}
  table#table.t-pros tr{grid-template-columns:1fr;padding:14px 0;border-bottom:1px solid #ecebf3}
  table#table.t-pros tr:first-child{grid-template-columns:auto auto;justify-content:start;gap:18px;padding:0 0 12px;border-bottom:1px solid #cfc6f7}
  table#table.t-pros th{padding:0;text-align:left!important;font-size:12px}
  table#table.t-pros th:first-child::after{display:none}
  table#table.t-pros th:first-child::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0f9a63;color:#fff;margin:-2px 8px 0 0;vertical-align:middle;letter-spacing:0}
  table#table.t-pros th:last-child::before{width:22px;height:22px;margin:-2px 8px 0 0}
  table#table.t-pros td{text-align:left!important;padding:4px 0 4px 30px;font-size:14px}
  table#table.t-pros td:not(:empty)::after{left:6px!important;right:auto!important;top:13px;margin-top:0}
  table#table.t-pros td:empty{display:none}
  table#table.t-pros tr:hover td{background:none!important}

  .spsa-updated{border-radius:16px;font-size:12.5px;padding:9px 14px}
  .spsa-updated__sep{display:none}
  .spsa-footer{padding:32px 0 24px}
  .spsa-footer__inner{flex-direction:column;align-items:flex-start;gap:18px}
  .spsa-footer__nav{flex-direction:column;align-items:flex-start;gap:12px}

  div:has(> h2.conclusion-title){padding:30px 22px 128px;border-radius:20px}
  div:has(> h2.conclusion-title) h2{font-size:30px}
  div:has(> h2.conclusion-title) p{font-size:16px}
  div:has(> h2.conclusion-title)::before{width:100%;top:auto;height:150px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}
  div:has(> h2.conclusion-title)::after{right:auto;left:22px;top:auto;bottom:22px;margin-top:0;width:88px;height:88px}
}
