/* kv_intro_unify.css — one look for the module intro pages, the merchant intro
 * pages and the public landing pages (founder report 2026-10-24: "style mismatch
 * … everything should be similar to /hotels/ … do same for all modules").
 *
 * WHY A BRIDGE AND NOT 52 REWRITES. staygo_intro.php is 6 lines and
 * staygo_merchant_intro.php is 13 — both are thin configs over shared renderers
 * (incfiles/module_intro_simple_page.php, used by 32 module intros, and
 * incfiles/merchant_intro_render.php, used by 20 merchant intros). The markup is
 * already centralised and already semantic; only the visual tokens differed,
 * because each renderer shipped its own stylesheet (kv_module_simple.css,
 * kv_merchant_intro.css) with its own palette, radii and card treatment.
 *
 * So this file re-skins the two existing class vocabularies — .kms-* and .kmi-* —
 * with the SAME tokens the landing pages use in kv_public_landing.css. No markup
 * changes, no duplicated pages, and removing the one include line from each
 * renderer reverts all 52 pages at once.
 *
 * Tokens are kept in sync with kv_public_landing.css by hand; they are the only
 * values that matter: purple 600 #5b21b6, surface #fff, line #ede9fe,
 * ink #2e2446, muted #6b6385, radius 14px cards / 10px controls.
 */

:root{
  --kvu-purple:#5b21b6; --kvu-purple-d:#4c1d95; --kvu-purple-l:#7c3aed;
  --kvu-ink:#2e2446; --kvu-muted:#6b6385; --kvu-line:#ede9fe; --kvu-soft:#faf5ff;
  --kvu-r-card:14px; --kvu-r-ctl:10px;
}

/* ---------- shared: the hero band both vocabularies open with ---------- */
.kms-hero, .kmi-hero-title,
.kv-module-intro-page .wrap > h1, .kmi-wrap > h1{
  font-size:30px; line-height:1.2; font-weight:800; color:var(--kvu-ink); margin:0 0 10px;
}
.eyebrow, .kmi-eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--kvu-purple);
  background:var(--kvu-soft); border:1px solid var(--kvu-line);
  border-radius:999px; padding:5px 12px; margin-bottom:14px;
}
.kms-lead, .kmi-sub{ font-size:15px; line-height:1.55; color:var(--kvu-muted); max-width:760px; }

/* ---------- buttons ---------- */
.kms-btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.kms-btn, .kmi-btn{
  display:inline-flex; align-items:center; gap:8px; border:0; border-radius:var(--kvu-r-ctl);
  padding:11px 20px; font-size:14px; font-weight:700; text-decoration:none; line-height:1.2;
}
.kms-btn-primary, .kmi-btn-primary{ background:var(--kvu-purple); color:#fff; }
.kms-btn-primary:hover, .kmi-btn-primary:hover{ background:var(--kvu-purple-d); color:#fff; }
.kms-btn-ghost, .kmi-btn-ghost{ background:#fff; color:var(--kvu-purple); box-shadow:inset 0 0 0 1px #d8b4fe; }
.kms-btn-ghost:hover, .kmi-btn-ghost:hover{ background:var(--kvu-soft); color:var(--kvu-purple-d); }

/* ---------- section headings ---------- */
.kms-sec-h, .kmi-h2{
  font-size:19px; font-weight:800; color:var(--kvu-ink); margin:0 0 4px;
  display:flex; align-items:center; gap:9px;
}
.kms-sec-ic{ color:var(--kvu-purple); }

/* ---------- cards: the single biggest visual difference ---------- */
.kms-card, .kmi-type, .kmi-tool, .kmi-plat-item, .kmi-toolgroup{
  background:#fff; border:1px solid var(--kvu-line); border-radius:var(--kvu-r-card);
  padding:16px; box-shadow:none;
}
.kms-card h5, .kmi-tool-n, .kmi-type h3, .kmi-type h4{
  font-size:15px; font-weight:800; color:var(--kvu-ink); margin:0 0 5px;
}
.kms-card p, .kmi-tool-d, .kmi-type p{ font-size:13px; line-height:1.5; color:var(--kvu-muted); margin:0; }
.kms-grid, .kmi-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }
.kms-grid-4{ grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }

/* icon chips */
.kmi-type-ico, .kmi-plat-ico{
  width:36px; height:36px; border-radius:9px; background:#f3e8ff; color:var(--kvu-purple);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:10px; font-size:15px;
}

/* ---------- numbered steps ---------- */
.kms-steps{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.kms-step, .kmi-step{
  background:#fff; border:1px solid var(--kvu-line); border-radius:var(--kvu-r-card); padding:16px;
}
.kms-step .n, .kmi-step-n{
  width:30px; height:30px; border-radius:50%; background:var(--kvu-purple); color:#fff;
  font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.kms-step h5, .kmi-step h5{ font-size:14.5px; font-weight:800; color:var(--kvu-ink); margin:0 0 2px; }
.kms-step p, .kmi-step p{ font-size:13px; line-height:1.5; color:var(--kvu-muted); margin:0; }

/* ---------- section rhythm, matching .kvpl-card ---------- */
.kms-sec, .kmi-sec{ margin:0 0 18px; }
.wrap, .kmi-wrap{ max-width:1320px; margin-inline:auto; padding-inline:16px; }

@media (max-width:767.98px){
  .kms-hero, .kmi-hero-title, .kv-module-intro-page .wrap > h1, .kmi-wrap > h1{ font-size:23px; }
  .kms-lead, .kmi-sub{ font-size:14px; }
  .kms-btn, .kmi-btn{ width:100%; justify-content:center; }
  .wrap, .kmi-wrap{ padding-inline:16px; }
}

@media (prefers-color-scheme:dark){
  [data-bs-theme=dark] .kms-card,[data-bs-theme=dark] .kms-step,
  [data-bs-theme=dark] .kmi-type,[data-bs-theme=dark] .kmi-tool,
  [data-bs-theme=dark] .kmi-plat-item,[data-bs-theme=dark] .kmi-toolgroup{
    background:#1b1725; border-color:#332b48;
  }
  [data-bs-theme=dark] .kms-hero,[data-bs-theme=dark] .kms-card h5,
  [data-bs-theme=dark] .kms-sec-h,[data-bs-theme=dark] .kmi-h2,
  [data-bs-theme=dark] .kmi-tool-n{ color:#efeaf8; }
  [data-bs-theme=dark] .kms-lead,[data-bs-theme=dark] .kms-card p,
  [data-bs-theme=dark] .kmi-sub,[data-bs-theme=dark] .kmi-tool-d{ color:#b3aac6; }
}