/*
 * Spotlight media kit: an A4 sheet on screen, the same sheet on paper.
 * White ground, ink text, the accent only for marks (prints well in black
 * and white too).
 */
:root { --ink: #121326; --muted: #5d5f74; --line: #e3e1db; --paper: #efeee9;
  --display: "Bricolage Grotesque", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Arabic", "Arial Black", sans-serif;
  --body: "DM Sans", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Arabic", system-ui, sans-serif; color-scheme: light }
* { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 var(--body) }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 210mm; margin: 0 auto; padding: 16px 12px }
.toolbar a { color: var(--ink); font-weight: 700; text-decoration: none }
.print { font: 700 15px var(--body); background: var(--accent-btn); color: #fff; border: 0; border-radius: 999px; padding: 11px 20px; cursor: pointer; min-height: 44px }
.demo { text-align: center; background: #f3bd48; margin: 0; padding: 6px }
.sheet { background: #fff; width: 100%; max-width: 210mm; min-height: 297mm; margin: 0 auto 24px; padding: 14mm 14mm 12mm; box-shadow: 0 10px 40px rgba(0, 0, 0, .12) }
.kit-head { display: flex; gap: 20px; align-items: center; padding-bottom: 14px; border-bottom: 3px solid var(--ink) }
.kit-photo { width: 34mm; height: 34mm; border-radius: 50%; object-fit: cover; flex: none }
.kit-id { min-width: 0 }
.kit-label { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-btn); font-weight: 700 }
:lang(si) .kit-label, :lang(ta) .kit-label, :lang(ar) .kit-label { letter-spacing: 0; text-transform: none }
h1 { margin: 2px 0 2px; font: 800 34px/1.05 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere }
:lang(si) h1, :lang(ta) h1, :lang(ar) h1 { line-height: 1.3; letter-spacing: 0 }
.kit-eyebrow { margin: 0; font-weight: 700 }
.kit-intro { margin: 4px 0 0; color: var(--muted); max-width: 60ch }
.kit-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(30mm, 1fr)); gap: 8px; margin: 14px 0 6px }
.kit-stats div { background: var(--paper); border-radius: 10px; padding: 10px 12px; margin: 0 }
.kit-stats dd { margin: 0; font: 800 24px/1.1 var(--display); font-variant-numeric: tabular-nums }
.kit-stats dt { font-size: 11.5px; color: var(--muted) }
.kit-sec { margin-top: 16px; break-inside: avoid }
h2 { margin: 0 0 8px; font: 800 16px var(--display); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap }
h2 small { font: 500 11px var(--body); color: var(--muted) }
h3 { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); font-weight: 700 }
.kit-table { width: 100%; border-collapse: collapse; font-size: 13px }
.kit-table th, .kit-table td { text-align: start; padding: 6px 8px 6px 0; border-top: 1px solid var(--line); vertical-align: baseline }
.kit-table th span { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px }
.kit-table td span { color: var(--muted); font-size: 11.5px }
.kit-table .num bdi { font: 800 17px var(--display) }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--net, var(--accent)); margin-inline-end: 6px }
.net-youtube { --net: #ff3040 } .net-tiktok { --net: #10b5b0 } .net-instagram { --net: #e1306c } .net-facebook { --net: #3b82f6 } .net-x { --net: #121326 } .net-twitch { --net: #a970ff } .net-linkedin { --net: #2f8fe0 } .net-snapchat { --net: #e5e000 } .net-spotify { --net: #1ed760 }
.kit-aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.kit-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.kit-bars li { display: grid; grid-template-columns: minmax(40px, 34%) 1fr 34px; gap: 6px; align-items: center; font-size: 12px }
.kit-bars i { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: block }
.kit-bars b { display: block; height: 100%; background: var(--accent-btn); -webkit-print-color-adjust: exact; print-color-adjust: exact }
.kit-bars em { font-style: normal; text-align: end; font-variant-numeric: tabular-nums }
.kit-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px }
.kit-list span { color: var(--muted) }
.kit-big { margin: 0; font: 800 26px var(--display) }
.kit-small { margin: 0 0 6px; color: var(--muted); font-size: 12.5px }
.kit-small span + span::before { content: " · " }
.kit-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(40mm, 1fr)); gap: 8px }
.kit-pack { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; break-inside: avoid }
.kit-pack.feat { border-color: var(--ink) }
.kit-pack h3 { color: var(--ink); font-size: 13.5px }
.kit-price { margin: 0 0 4px; font: 800 20px var(--display) }
.kit-price small { font: 500 11px var(--body); color: var(--muted) }
.kit-pack ul { margin: 0; padding-inline-start: 16px; font-size: 12px }
.kit-case { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px }
.kit-case p { margin: 0 }
.kit-partners { margin: 0; font-weight: 700 }
.kit-foot { margin-top: 18px; padding-top: 12px; border-top: 3px solid var(--ink); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; break-inside: avoid }
.kit-note { margin: 0; color: var(--muted); font-size: 12px; max-width: 70mm }
.kit-langs { display: flex; gap: 14px; justify-content: center; padding: 0 0 28px }
.kit-langs a { color: var(--muted) } .kit-langs a[aria-current] { color: var(--ink); font-weight: 700 }
@media (max-width: 640px) {
  .sheet { min-height: 0; padding: 18px; box-shadow: none }
  .kit-head { flex-direction: column; align-items: flex-start }
  .kit-aud { grid-template-columns: 1fr }
  .kit-table td:nth-child(3), .kit-table td:nth-child(4) { display: none }
}
@page { size: A4; margin: 0 }
@media print {
  body { background: #fff }
  [data-toolbar], .demo { display: none !important }
  .sheet { box-shadow: none; margin: 0; max-width: none; width: 210mm; min-height: 0 }
}