/* ===== kw3 Intro Block (scoped) ===== */
#kw3-intro {
  width: 95vw;
  max-width: 95vw;
  margin-left: calc(50% - 47.5vw);
  margin-bottom: 16px;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #ffd7bf;
  background: linear-gradient(135deg,#fffaf6 0%,#fff4ec 45%,#ffffff 100%);
  box-shadow: 0 8px 30px rgba(255,111,0,0.08);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color: #16202a;
}

/* Grid — 3 columns on wide, wrap to 2/1 on small */
#kw3-intro .kw3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  #kw3-intro .kw3-grid { grid-template-columns: repeat(2, minmax(240px,1fr)); }
}
@media (max-width: 640px) {
  #kw3-intro .kw3-grid { grid-template-columns: 1fr; }
}

/* Cards */
#kw3-intro .kw3-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  min-height: 100%;
}

/* Variants */
#kw3-intro .kw3-quick {
  border: 1px solid #ffe2cc;
  background: linear-gradient(180deg,#ffffff 0%,#fff8f1 100%);
}
#kw3-intro .kw3-audio {
  border: 1px solid #ffd7e6;
  background: linear-gradient(180deg,#ffffff 0%,#fff5fb 100%);
}
#kw3-intro .kw3-score {
  border: 1px solid #d6f6ff;
  background: linear-gradient(180deg,#ffffff 0%,#f2fbff 100%);
}

/* Titles */
#kw3-intro .kw3-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 6px;
}
#kw3-intro .kw3-quick .kw3-title { color: #b73a00; }
#kw3-intro .kw3-audio .kw3-title { color: #9a0053; }
#kw3-intro .kw3-score .kw3-title { color: #005c80; }
#kw3-intro .kw3-emoji { font-size: 20px; }

/* Lists & text */
#kw3-intro .kw3-list { margin: 10px 0; padding-left: 20px; line-height: 1.45; }
#kw3-intro .kw3-list li { margin: 6px 0; }
#kw3-intro .kw3-footnote {
  margin-top: 8px; font-size: 12px; color: #5f6b76;
  border: 1px dashed #ffd7bf; border-radius: 10px; padding: 8px;
}
#kw3-intro .kw3-copy { margin: 8px 0 12px; color: #2a3240; }

/* Button */
#kw3-intro .kw3-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border: 0; border-radius: 999px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
#kw3-intro .kw3-btn-primary {
  background: linear-gradient(135deg,#ff7a18 0%,#ff3d81 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255,61,129,0.22);
}
#kw3-intro .kw3-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255,61,129,0.28); }
#kw3-intro .kw3-btn-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}

/* Bands */
#kw3-intro .kw3-bands { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
#kw3-intro .kw3-band {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid #eee;
}
#kw3-intro .kw3-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 800;
}
#kw3-intro .kw3-low  { border-color:#c7f3d2; background:linear-gradient(90deg,#f3fff6,#e9fff0); }
#kw3-intro .kw3-med  { border-color:#ffe6b8; background:linear-gradient(90deg,#fff9ed,#fff1d6); }
#kw3-intro .kw3-high { border-color:#ffd3c3; background:linear-gradient(90deg,#fff3ef,#ffe6df); }
#kw3-intro .kw3-ext  { border-color:#ffc2d9; background:linear-gradient(90deg,#fff0f7,#ffe2ef); }
#kw3-intro .kw3-low  .kw3-chip { background:#17b26a; }
#kw3-intro .kw3-med  .kw3-chip { background:#f59f00; }
#kw3-intro .kw3-high .kw3-chip { background:#f04438; }
#kw3-intro .kw3-ext  .kw3-chip { background:#d61f69; }
#kw3-intro .kw3-score-note { margin: 8px 0 0; line-height: 1.45; color:#2a3240; }

/* Modal */
#kw3-intro .kw3-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(14,23,38,0.62);
  backdrop-filter: saturate(140%) blur(6px);
  z-index: 1000; align-items: center; justify-content: center; padding: 16px;
}
#kw3-intro .kw3-modal-overlay[aria-hidden="false"] { display: flex; }
#kw3-intro .kw3-modal {
  width: min(880px,95vw); max-height: 86vh; overflow: auto;
  border-radius: 18px; background: #ffffff; border: 1px solid #ffd6b0;
  box-shadow: 0 20px 60px rgba(255,111,0,0.20); position: relative;
}
#kw3-intro .kw3-modal-border {
  position: absolute; inset: 0; border-radius: 18px; padding: 1px;
  background: linear-gradient(135deg,#ff7a18,#ff3d81);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
#kw3-intro .kw3-modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 10px; }
#kw3-intro .kw3-modal-titlewrap { display:flex; align-items:center; gap:10px; }
#kw3-intro .kw3-modal-icon { width:28px; height:28px; border-radius:8px; background: linear-gradient(135deg,#ff7a18,#ff3d81); }
#kw3-intro .kw3-modal-title { margin:0; font-size:18px; color:#9a0032; }
#kw3-intro .kw3-iconbtn { border:0; background:#fff; border-radius:10px; padding:8px 10px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
#kw3-intro .kw3-modal-body { padding:0 16px 16px; }
#kw3-intro .kw3-embed { aspect-ratio:16/9; width:100%; border-radius:12px; overflow:hidden; border:1px solid #ffd7bf; background:#fff; }
#kw3-intro #kw3-audio-frame { width:100%; height:100%; border:0; }
#kw3-intro .kw3-credits { margin-top:10px; font-size:12px; }
#kw3-intro .kw3-credits a { color:#9a0032; text-decoration:none; border-bottom:1px dashed #ffc1d7; }

/* Small screens */
@media (max-width: 480px) {
  #kw3-intro { padding: 12px; }
  #kw3-intro .kw3-card { padding: 12px; }
}