/* PanQuiz — landing /panquiz-vs-kahoot/ (IT) — page styles
   Requires: fonts.css, colors.css, typography.css, layout.css, style.css.
   Follows the site conventions: Raleway display / Open Sans body,
   navy #0e1552, primary #005aef, .section / .section-tint rhythm. */

/* ---------- Hero ---------- */
.vsk-hero { background: linear-gradient(180deg, #ffffff 0%, #edf1ff 100%); border-bottom: 1px solid rgba(14,21,82,.06); }
.vsk-hero .container { padding-top: 74px; padding-bottom: 76px; text-align: center; }
.vsk-hero h1 { color: #0e1552; }
.vsk-hero .hero-sub { max-width: 760px; margin: 24px auto 0; }
.vsk-hero .hero-ctas { justify-content: center; }
.vsk-hero .hero-note { color: rgba(26,29,41,.62); }

/* ---------- "In breve" direct-answer box ---------- */
.vsk-answer { max-width: 880px; margin: 40px auto 0; display: flex; align-items: flex-start; gap: 22px; background: #fff; border: 1px solid rgba(0,90,239,.18); border-left: 5px solid var(--site-primary, #005aef); border-radius: 18px; padding: 30px 34px; box-shadow: 0 2px 18px rgba(14,21,82,.08); }
.vsk-answer p { margin: 0; font-size: 16.5px; line-height: 1.75; color: #2b2f3a; text-wrap: pretty; }
.vsk-answer strong { color: #0e1552; }

/* ---------- Comparison table ---------- */
.vsk-table-wrap { max-width: 960px; margin: 44px auto 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(14,21,82,.1); border-radius: 18px; background: #fff; }
.vsk-table-wrap:focus-visible { outline: 3px solid var(--site-primary, #005aef); outline-offset: 2px; }
table.vsk-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.vsk-table th, .vsk-table td { padding: 13px 20px; border-bottom: 1px solid rgba(14,21,82,.08); }
.vsk-table tbody tr:last-child th, .vsk-table tbody tr:last-child td { border-bottom: 0; }
.vsk-table thead th { font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 16px; color: #0e1552; text-align: center; border-bottom: 2px solid rgba(14,21,82,.16); padding-top: 18px; padding-bottom: 16px; }
.vsk-table thead th:first-child { text-align: left; }
.vsk-table thead th.col-pq { color: var(--site-primary, #005aef); }
.vsk-table tbody th { font-weight: 400; font-size: 15px; line-height: 1.5; color: #2b2f3a; text-align: left; }
.vsk-table td { font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif); font-weight: 600; font-size: 14.5px; line-height: 1.45; text-align: center; color: #2b2f3a; width: 190px; }
.vsk-table .col-pq { background: rgba(0,90,239,.055); }
.vsk-yes { color: var(--answer-green, #26890c); font-weight: 700; font-size: 16px; }
.vsk-no { color: rgba(26,29,41,.32); }
.vsk-note { max-width: 820px; margin: 26px auto 0; font-size: 13.5px; line-height: 1.65; color: rgba(26,29,41,.55); text-align: center; text-wrap: pretty; }

/* ---------- Prose blocks ---------- */
.vsk-prose { max-width: 820px; margin: 30px auto 0; font-size: 16.5px; line-height: 1.75; color: #3c4257; text-wrap: pretty; }
.vsk-prose + .vsk-prose { margin-top: 18px; }
.vsk-prose strong { color: #0e1552; }

/* ---------- Cost list + highlighted example ---------- */
.vsk-costs { list-style: none; max-width: 820px; margin: 32px auto 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.vsk-costs li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.7; color: #3c4257; text-wrap: pretty; }
.vsk-costs li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--site-illustration-orange, #e8871f); }
.vsk-costs strong { color: #0e1552; }

.vsk-highlight { max-width: 820px; margin: 38px auto 0; background: linear-gradient(180deg, rgba(0,90,239,.07) 0%, rgba(0,90,239,.04) 100%); border: 1px solid rgba(0,90,239,.2); border-radius: 20px; padding: 30px 36px; }
.vsk-highlight p { margin: 0; font-size: 17px; line-height: 1.75; color: #2b2f3a; text-wrap: pretty; }
.vsk-highlight strong { color: var(--site-primary, #005aef); }

/* ---------- Icon bullet lists ---------- */
.vsk-points { list-style: none; max-width: 860px; margin: 36px auto 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.vsk-points li { display: flex; align-items: flex-start; gap: 16px; }
.vsk-points .mdi { font-size: 24px; color: var(--site-illustration-orange, #e8871f); flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; background: rgba(232,135,31,.12); display: flex; align-items: center; justify-content: center; }
.vsk-points p { margin: 0; font-size: 16px; line-height: 1.7; color: #3c4257; text-wrap: pretty; }
.vsk-points strong { color: #0e1552; }

.vsk-cta-row { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .vsk-hero .container { padding-top: 44px; padding-bottom: 52px; }
  .vsk-answer { flex-direction: column; gap: 16px; padding: 24px 22px; margin-top: 30px; }
  .vsk-answer p { font-size: 15.5px; }
  .vsk-table th, .vsk-table td { padding: 12px 14px; }
  .vsk-table-wrap { margin-top: 32px; }
  .vsk-prose, .vsk-costs li { font-size: 15.5px; }
  .vsk-highlight { padding: 24px 22px; }
  .vsk-highlight p { font-size: 16px; }
  .vsk-points { gap: 16px; margin-top: 28px; }
  .vsk-points p { font-size: 15.5px; }
}

@media (max-width: 420px) {
  .vsk-points .mdi { flex-basis: 34px; width: 34px; height: 34px; font-size: 20px; }
}