/* ═══════════════════════════════════════════════════════════════
   DigiMark Solution — Unified & Refactored Stylesheet
   © DigiMark Solution 2026
   ═══════════════════════════════════════════════════════════════ */

:root {
  --sl-brand: #0E4F8B;
  --sl-brand-dk: #0A3A66;
  --sl-brand-tint: #EAF2FA;
  --sl-faint: #8B9AA6;
  --sl-gold: #C9760E;
  --sl-gold-lt: #F0C078;
  --sl-gold-tint: #FBF1E2;
  --sl-green: #1E9E5A;
  --sl-green-tint: #E7F6EE;
  --sl-red: #C0392B;
  --sl-red-tint: #FDEDEC;
  --sl-wa: #25D366;
  --sl-line: #E2E9EF;
  --sl-bg-alt: #F5F8FA;
  --sl-navy: #0C2238;
  --sl-r: 10px;
  --sl-r-lg: 16px;
}

/* ── Base Resets & Global Wrappers ── */
.sl-body, .sl-wrap { }
.sl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sl-wrap a { text-decoration: none; color: var(--sl-brand); }
svg.sl-ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Hero Section ── */
.sl-hero { background: linear-gradient(150deg, var(--sl-navy), var(--sl-brand-dk) 62%, var(--sl-brand)); color: #fff; position: relative; overflow: hidden; margin-top: 10px; padding: 54px 0; }
.sl-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px); background-size: 26px 26px; }
.sl-hero .sl-wrap { position: relative; z-index: 2; }
.sl-hero .sl-ey { display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; color: var(--sl-gold-lt); font-weight: 700; margin-bottom: 14px; }
.sl-hero .sl-ey::before { content: ""; width: 22px; height: 2px; background: var(--sl-gold); }
.sl-hero h1 { font-size: 24px !important; font-weight: 900; margin-bottom: 16px; max-width: 800px; color: #fff; }
.sl-hero .sl-lede { color: #CBDFF1; max-width: 660px; margin-bottom: 24px; }
.sl-hero .sl-lede b { color: #fff; }

.sl-hcta { display: flex; gap: 12px; flex-wrap: wrap; }
.sl-b-gold { display: inline-flex; align-items: center; gap: 8px; background: #ED6427; color: #fff; font-weight: 700; padding: 13px 22px; border-radius: var(--sl-r); border: 0; cursor: pointer; text-decoration: none; }
.sl-b-gold:hover { background: var(--sl-brand-tint); color: var(--sl-brand); text-decoration: none; }
.sl-b-wa { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid #ED6427; color: #fff !important; font-weight: 700; padding: 13px 22px; border-radius: var(--sl-r); text-decoration: none; }
.sl-b-wa:hover { background: transparent; text-decoration: none; color: #fff; }
.sl-b-wa svg { fill: #06351c; stroke: none; }
.sl-b-out { border: 1.5px solid rgba(255,255,255,.32); color: #fff; text-decoration: none; display: inline-flex; align-items: center; padding: 13px 22px; border-radius: var(--sl-r); font-weight: 700; }
.sl-b-out:hover { background: rgba(255,255,255,.1); color: #fff; }
.sl-b-w { background: #fff; color: var(--sl-brand); text-decoration: none; display: inline-flex; align-items: center; padding: 13px 22px; border-radius: var(--sl-r); font-weight: 700; }

/* ── Global Section Layouts ── */
.sl-sec, .dm-sec { padding: 54px 0; border-bottom: 1px solid var(--sl-line); }
.sl-sec.sl-alt, .dm-sec.dm-alt { background: var(--sl-bg-alt); }
.sl-sec-h { max-width: 780px; margin-bottom: 26px; }
.sl-sec-h .sl-ey { display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; color: var(--sl-gold); font-weight: 700; margin-bottom: 11px; }
.sl-sec-h .sl-ey::before { content: ""; width: 22px; height: 2px; background: var(--sl-gold); }
.sl-sec-h h2 { font-size: 18px !important; font-weight: 800; margin-bottom: 11px;  }
.sl-sec-h p { }

.sl-prose { max-width: 820px; }
.sl-prose p { color: #2A3B4A; margin-bottom: 13px; }
.sl-prose h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }

/* ── Decision Path Section ── */
.sl-sec h3.sl-h3, .dm-sec h3.dm-h3 { font-weight: 800; margin: 34px 0 14px; }
.sl-path, .dm-path { display: grid; gap: 14px; }
.sl-q, .dm-q { background: #fff; border: 1px solid var(--sl-line); border-radius: var(--sl-r-lg); padding: 18px 20px; }
.sl-q > b, .dm-q > b { display: block; font-weight: 800; color: var(--sl-brand-dk); margin-bottom: 13px; padding-bottom: 11px; border-bottom: 1px solid var(--sl-line); }
.sl-opts, .dm-opts { display: grid; gap: 10px; }
.sl-opt, .dm-opt { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(0, 1.5fr); gap: 4px 18px; padding: 12px 14px; background: var(--sl-bg-alt); border-radius: var(--sl-r); border-left: 3px solid var(--sl-brand); }
.sl-if, .dm-if { font-weight: 700; font-size: 14px; grid-row: 1; }
.sl-then, .dm-then { font-size: 14px; color: #2A3B4A; grid-row: 1; grid-column: 2; }
.sl-note, .dm-note { grid-column: 1/-1; font-size: 12.8px; font-style: italic; padding-top: 7px; margin-top: 3px; border-top: 1px dashed var(--sl-line); }

/* ── Do-Not-Buy / Avoid Section ── */
.sl-avoid, .dm-avoid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sl-a, .dm-a { background: var(--sl-red-tint); border: 1px solid #F3C9C4; border-left: 4px solid var(--sl-red); border-radius: var(--sl-r); padding: 15px 17px; }
.sl-a b, .dm-a b { display: block; font-size: 14.5px; font-weight: 700; color: #8C2B20; margin-bottom: 5px; }
.sl-a p, .dm-a p { font-size: 13.4px; color: #6E3830; margin: 0; }

/* ── Calculator Widget ── */
.sl-calc { background: #fff; border: 1px solid var(--sl-line); border-radius: var(--sl-r-lg); overflow: hidden; box-shadow: 0 6px 22px rgba(12,34,56,.06); }
.sl-calc-h { background: linear-gradient(135deg, var(--sl-navy), var(--sl-brand-dk)); color: #fff; padding: 20px 26px; }
.sl-calc-h b { display: block; font-weight: 800; margin-bottom: 4px; }
.sl-calc-h span { color: #B8D2E8; }
.sl-calc-b { display: grid; grid-template-columns: 1fr 320px; gap: 0; }
.sl-calc-in { padding: 24px 26px; border-right: 1px solid var(--sl-line); }
.sl-fld { margin-bottom: 18px; }
.sl-fld label { display: block; font-weight: 700; margin-bottom: 4px; color: var(--sl-ink); }
.sl-fld .sl-why {  margin-bottom: 7px; }
.sl-fld input[type=number], .sl-fld select { width: 100%; border: 1.5px solid var(--sl-line); border-radius: 9px; padding: 11px 14px; background: #fff; box-sizing: border-box; }
.sl-fld input:focus, .sl-fld select:focus { outline: none; border-color: var(--sl-brand); box-shadow: 0 0 0 3px rgba(14,79,139,.1); }
.sl-rng { display: flex; align-items: center; gap: 12px; }
.sl-rng input[type=range] { flex: 1; accent-color: var(--sl-brand); }
.sl-rng .sl-val { font-weight: 700; color: var(--sl-brand); min-width: 74px; text-align: right; }
.sl-calc-out { padding: 24px 26px; background: var(--sl-bg-alt); min-width: 0; }
.sl-calc-b > * { min-width: 0; }
.sl-res { background: #fff; border: 1px solid var(--sl-line); border-radius: var(--sl-r); padding: 16px 18px; margin-bottom: 12px; }
.sl-res .sl-k { text-transform: uppercase; color: var(--sl-faint); display: block; margin-bottom: 5px; font-size: 12px; }
.sl-res .sl-v { display: block; font-weight: 900; color: var(--sl-brand); font-size: 20px; }
.sl-res .sl-v small { font-weight: 600;  font-size: 14px; }
.sl-res.sl-hi { background: var(--sl-green-tint); border-color: #C6E7D5; }
.sl-res.sl-hi .sl-v { color: var(--sl-green); }
.sl-res .sl-sub { display: block; margin-top: 5px;  }
.sl-calc-note { padding-top: 12px; border-top: 1px solid var(--sl-line); margin-top: 4px; }

/* ── Recommended Products & Tab Systems ── */
.sl-tabs, .dm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sl-tab, .dm-tab {   font-weight: 600; cursor: pointer; background: #fff; border: 1.5px solid var(--sl-line); border-radius: 999px; padding: 9px 17px; transition: all .16s; text-align: left; }
.sl-tab:hover, .dm-tab:hover { border-color: var(--sl-brand); color: var(--sl-brand); }
.sl-tab.on, .dm-tab.on { background: var(--sl-brand); border-color: var(--sl-brand); color: #fff; }
/* Product tab panels (HTML uses dm-*, sl-dm-* kept as alias) */
.dm-panel.hide, .sl-dm-panel.hide { display: none !important; }
.dm-why { font-size: 14px; margin: 0 0 4px; }
.dm-grid, .sl-dm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; margin-top: 16px; }
.dm-card, .sl-dm-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--sl-line); border-radius: 12px; padding: 14px; text-decoration: none; color: var(--sl-ink); transition: border-color .16s, transform .16s; }
.dm-card:hover, .sl-dm-card:hover { border-color: var(--sl-brand); transform: translateY(-2px); }
.sl-mdl, .dm-mdl {  font-weight: 700; text-transform: uppercase; color: var(--sl-brand); background: var(--sl-brand-tint); border-radius: 999px; padding: 3px 9px; align-self: flex-start; }
.sl-card b, .dm-card b {  font-weight: 600; color: var(--sl-ink); overflow-wrap: anywhere; flex: 1; }
.sl-go, .dm-go { font-size: 12px; font-weight: 700; color: var(--sl-brand); margin-top: 2px; }
.sl-go::after, .dm-go::after { content: " \2192"; }
.sl-empty, .dm-empty { grid-column: 1/-1; font-size: 14px;  padding: 14px; background: var(--sl-bg-alt); border-radius: var(--sl-r); }

/* ── Product Grids (Alternative Style) ── */
.sl-pg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sl-pc { background: #fff; border: 1px solid var(--sl-line); border-radius: var(--sl-r-lg); padding: 18px; color: inherit; transition: all .2s; display: block; text-decoration: none; }
.sl-pc:hover { border-color: #CFE2F4; box-shadow: 0 8px 22px rgba(14,79,139,.1); transform: translateY(-3px); }
.sl-pc .sl-br { font-weight: 700; color: var(--sl-brand); text-transform: uppercase; margin-bottom: 6px; display: block;  }
.sl-pc b { display: block; font-weight: 700; margin-bottom: 7px; color: var(--sl-ink); }
.sl-pc span.sl-d { display: block; margin-bottom: 10px;  }
.sl-pc .sl-px { font-weight: 700; color: var(--sl-gold); padding-top: 9px; border-top: 1px solid var(--sl-line); display: block;  }

/* ── Kit & Procurement Section ── */
.sl-kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sl-ki { background: #fff; border: 1px solid var(--sl-line); border-left: 4px solid var(--sl-brand); border-radius: var(--sl-r); padding: 18px 20px; }
.sl-ki.sl-opt { border-left-color: var(--sl-faint); }
.sl-ki .sl-tag { font-weight: 700; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--sl-brand-tint); color: var(--sl-brand); display: inline-block; margin-bottom: 9px;  }
.sl-ki.sl-opt .sl-tag { background: #F1F4F7;  }
.sl-ki b { display: block; font-weight: 700; margin-bottom: 5px; color: var(--sl-ink); }
.sl-ki p {  margin: 0; font-size: 14px; }

.sl-spec table, .dm-spec table { width: 100%; min-width: 780px; border-collapse: collapse; }
.sl-spec td, .dm-spec td { font-size: 13.2px; padding: 10px 12px; border-bottom: 1px solid var(--sl-line); }
.sl-boq, .dm-boq { background: #fff; border: 1px solid var(--sl-line); border-radius: var(--sl-r-lg); padding: 20px 24px; max-width: 860px; }
.sl-boq ol, .dm-boq ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 34px; }
.sl-boq li, .dm-boq li { color: #2A3B4A; margin-bottom: 8px; break-inside: avoid; padding-left: 3px; }

/* ── Compare Table ── */
.sl-cmp { overflow-x: auto; }
.sl-cmp table { width: 100%; border-collapse: collapse; min-width: 640px; }
.sl-cmp th { background: var(--sl-navy); color: #fff; text-align: left; padding: 12px 14px; font-weight: 700; }
.sl-cmp th:first-child { background: var(--sl-brand-dk); text-transform: uppercase; }
.sl-cmp td { padding: 11px 14px; border-top: 1px solid var(--sl-line); color: #2A3B4A; vertical-align: top; }
.sl-cmp td:first-child { font-weight: 600; color: var(--sl-ink); background: var(--sl-bg-alt); }
.sl-cmp .sl-win { background: var(--sl-green-tint) !important; font-weight: 600; color: #14663A; }

/* ── Common Mistakes Grid ── */
.sl-mis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sl-mi { background: #fff; border: 1px solid #F5C6C0; border-left: 4px solid var(--sl-red); border-radius: var(--sl-r); padding: 18px 20px; }
.sl-mi b { display: block; font-weight: 700; margin-bottom: 6px; color: #8C2A20; }
.sl-mi p { margin: 0 0 8px; font-size: 14px; }
.sl-mi .sl-fix { color: #14663A; background: var(--sl-green-tint); border-radius: 7px; padding: 8px 11px; margin: 0;}

/* ── FAQ Accordion ── */
.sl-faq { max-width: 840px; }
.sl-fq, .dm-fq { border: 1px solid var(--sl-line); border-radius: 10px; margin-bottom: 9px; background: #fff; overflow: hidden; }
.sl-fq > button, .dm-fq > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; border: 0; padding: 15px 18px; cursor: pointer; text-align: left; font-weight: 700; color: var(--sl-ink); }
.sl-fq > button svg, .dm-fq > button svg { width: 17px; height: 17px; color: var(--sl-brand); flex: none; transition: transform .2s; }
.sl-fq.open > button svg, .dm-fq.open > button svg { transform: rotate(180deg); }
.sl-fq .sl-fa, .dm-fq .dm-fa { padding: 0 18px 16px; display: none; font-size: 14px; }
.sl-fq.open .sl-fa, .dm-fq.open .dm-fa { display: block; }

/* ── Callout Box & Guide Section ── */
.sl-callout { background: var(--sl-gold-tint); border-left: 4px solid var(--sl-gold); border-radius: var(--sl-r); padding: 15px 18px; margin: 16px 0; color: #6E4207; max-width: 820px; }
.sl-callout b { color: #5E3906; }
.sl-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sl-gr { display: flex; gap: 14px; background: var(--sl-bg-alt); border: 1px solid var(--sl-line); border-radius: 12px; padding: 16px 18px; }
.sl-gn { flex: none; font-weight: 700; color: var(--sl-gold); padding-top: 2px; }
.sl-gr b { display: block; margin-bottom: 4px; color: var(--sl-ink); }
.sl-gr p { margin: 0;}
.sl-stamp { margin-top: 14px; color: var(--sl-faint); font-style: italic; }

/* ── CTA Footer ── */
.sl-cta { margin-bottom: 5px; background: linear-gradient(135deg, var(--sl-navy), var(--sl-brand-dk)); color: #fff; text-align: center; padding: 52px 0; }
.sl-cta h2 { font-size: 18px !important; font-weight: 800; color: #fff; margin-bottom: 11px; }
.sl-cta p { color: #CBDFF1; max-width: 560px; margin: 0 auto 22px; }
.sl-cta .sl-btns { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }

/* ── Layout Safety & Responsive Adjustments ── */
.sl-sec .sl-wrap > *, .dm-sec .sl-wrap > * { min-width: 0; }

@media(max-width: 900px) {
  .sl-avoid, .dm-avoid { grid-template-columns: 1fr; }
  .sl-boq ol, .dm-boq ol { columns: 1; }
  .sl-pg { grid-template-columns: 1fr 1fr; }
}

@media(max-width: 860px) {
  .sl-calc-b { grid-template-columns: 1fr; }
  .sl-calc-in { border-right: 0; border-bottom: 1px solid var(--sl-line); }
  .sl-kit { grid-template-columns: 1fr 1fr; }
}

@media(max-width: 760px) {
  .sl-mis, .sl-guide { grid-template-columns: 1fr; }
}

@media(max-width: 640px) {
  .sl-opt, .dm-opt { grid-template-columns: 1fr; gap: 5px; }
  .sl-then, .dm-then { grid-column: 1; grid-row: auto; }
  .sl-grid, .dm-grid { grid-template-columns: 1fr; }
  .sl-tab, .dm-tab { padding: 8px 14px; }
  .sl-boq, .dm-boq { padding: 16px 18px; }
}

@media(max-width: 520px) {
  .sl-kit { grid-template-columns: 1fr; }
}

@media(max-width: 480px) {
  .sl-pg { grid-template-columns: 1fr; }
}