.kb {
  --slate: #0b0e10;
  --sheet: #12171a;
  --sheet-hi: #192024;
  --rule: #263036;
  --text: #e9efec;
  --soft: #9fb0a8;
  --leaf: #18a860;
  --leaf-lit: #3ccf86;
  --leaf-dark: #04170c;
  margin: 0;
  background: var(--slate);
  color: var(--text);
  font: 16px/1.7 "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
}
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: 76px; }
.kb img { display: block; max-width: 100%; height: auto; }
.kb a { color: var(--leaf-lit); text-underline-offset: 3px; }
.kb a:focus-visible, .kb summary:focus-visible, .kb [tabindex]:focus-visible { outline: 2px dashed var(--leaf-lit); outline-offset: 4px; }
.kb h1, .kb h2, .kb h3 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 700; line-height: 1.22; overflow-wrap: break-word; hyphens: auto; }

.kb-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 14px clamp(16px, 4vw, 40px); background: #0b0e10f2; border-bottom: 1px solid var(--rule); }
.kb-logo img { width: 96px; height: 20px; }
.kb-bar-age { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--soft); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 10px; }
.kb-menu { display: flex; gap: 4px; margin-left: 18px; }
.kb-menu a { color: var(--soft); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.kb-menu a:hover, .kb-menu a[aria-current="page"] { color: var(--text); background: var(--sheet-hi); }
.kb-skip { position: absolute; left: -9999px; top: 10px; z-index: 40; padding: 8px 16px; border-radius: 999px; background: var(--leaf); color: var(--leaf-dark); font-weight: 700; }
.kb-skip:focus { left: 14px; }
.kb-play { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 12; display: inline-flex; gap: 10px; align-items: center; min-height: 48px; padding: 12px 30px; border-radius: 999px; background: var(--leaf); color: var(--leaf-dark) !important; font-weight: 800; text-decoration: none; box-shadow: 0 12px 30px #0009; }
.kb-play:hover { background: var(--leaf-lit); }
.kb-play[data-away] { opacity: 0; transform: translate(-50%, 160%); pointer-events: none; }
.kb-play { transition: opacity .2s, transform .2s; }
.kb { padding-bottom: 92px; }

.kb-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; max-width: 1240px; margin: 0 auto; }
.kb-side { position: sticky; top: 61px; align-self: start; max-height: calc(100vh - 61px); overflow-y: auto; padding: 32px 18px 32px clamp(16px, 3vw, 32px); border-right: 1px solid var(--rule); }
.kb-side ol { list-style: none; margin: 0; padding: 0; }
.kb-side a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 8px 10px; border-radius: 8px; color: var(--soft); text-decoration: none; font-size: 14px; line-height: 1.4; }
.kb-side a i { font-style: normal; color: var(--leaf); font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-side a:hover, .kb-side a[aria-current="true"] { background: var(--sheet-hi); color: var(--text); }

.kb-main { min-width: 0; padding: 32px clamp(16px, 4vw, 48px) 72px; }
.kb-intro { position: relative; padding: 8px 0 28px; }
.kb-intro-rays { position: absolute; right: 0; top: -12px; width: 180px; height: 180px; border-radius: 50%; background: repeating-conic-gradient(from 10deg, #18a86022 0 12deg, transparent 12deg 30deg); mask: radial-gradient(circle, #000 35%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); pointer-events: none; }
.kb-intro h1, .kb-intro p { position: relative; }
.kb-claimtile { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 20px; margin: 26px 0 4px; padding: 22px 24px; border-radius: 22px 6px 22px 6px; color: var(--leaf-lit); background: linear-gradient(120deg, #0f2a1d 0%, #12171a 60%), var(--sheet); border: 1px solid #18a86066; }
.kb-claimtile-art { width: 96px; height: 96px; }
.kb-claimtile-go { justify-self: start; display: inline-flex; gap: 10px; align-items: center; min-height: 52px; padding: 12px 28px; border-radius: 999px; background: var(--leaf); color: var(--leaf-dark) !important; font-weight: 800; font-size: 17px; text-decoration: none; }
.kb-claimtile-go:hover { background: var(--leaf-lit); }
.kb-intro h1 { font-size: clamp(30px, 4.2vw, 48px); margin: 0 0 18px; max-width: 22ch; }
.kb-intro p { color: #d5ddd9; max-width: 72ch; }
.kb-intro-doc h1 { max-width: 28ch; }

.kb-card { position: relative; margin: 0 0 22px; padding: 28px clamp(18px, 3vw, 36px) 26px; background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--leaf); border-radius: 6px 18px 18px 6px; }
.kb-no { position: absolute; top: 18px; right: 22px; font: 700 13px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--soft); }
.kb-card h2 { margin: 0 44px 14px 0; font-size: clamp(22px, 2.4vw, 30px); }
.kb-card h3 { margin: 22px 0 8px; font-size: 19px; }
.kb-card p, .kb-card li { color: #d3dbd7; }
.kb-card ul, .kb-card ol { padding-left: 1.3em; }
.kb-pic { margin: 20px 0; max-width: 640px; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: #0e1315; }
.kb-pic img { width: 100%; }
.kb-playband { margin: 22px 0 0; }
.kb-playband a { display: inline-flex; gap: 10px; align-items: center; min-height: 46px; padding: 10px 22px; border-radius: 999px; border: 2px solid var(--leaf); color: var(--text); font-weight: 700; text-decoration: none; }
.kb-playband a:hover { background: var(--leaf); color: var(--leaf-dark); }

.kb-grid { margin: 20px 0; overflow-x: auto; border-radius: 12px; border: 1px solid var(--rule); }
.kb-grid table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; }
.kb-grid th, .kb-grid td { padding: 11px 14px; text-align: left; vertical-align: top; }
.kb-grid thead th { background: var(--leaf); color: var(--leaf-dark); font-weight: 700; }
.kb-grid tbody tr:nth-child(even) td { background: var(--sheet-hi); }
.kb-grid-pairs td:first-child { color: var(--leaf-lit); font-weight: 600; width: 38%; }
.kb-grid code { overflow-wrap: anywhere; }

.kb-callout { display: grid; grid-template-columns: 34px 1fr; gap: 8px; margin: 20px 0; padding: 14px 16px; border-radius: 4px 16px 16px 4px; background: #0e1a14; border: 1px dashed #18a86088; transition: transform .2s, border-color .2s; }
.kb-callout:hover { transform: translateX(4px); border-color: var(--leaf-lit); }
.kb-callout-ico { color: var(--leaf-lit); font-size: 20px; line-height: 1.4; }
.kb-callout ul, .kb-callout ol { margin: 0; }
.kb-qa details { border-top: 1px solid var(--rule); padding: 4px 0; }
.kb-qa summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.kb-qa summary::marker { color: var(--leaf); }

.kb-end { border-top: 1px solid var(--rule); padding: 28px clamp(16px, 4vw, 48px) 40px; background: #080a0c; color: var(--soft); font-size: 14px; }
.kb-end-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.kb-age-ring { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #d9534f; color: #ffc2bf; font-weight: 800; font-size: 13px; }
.kb-end-row span:last-child { color: var(--text); font-weight: 700; }
.kb-end-risk { margin: 0 0 16px; max-width: 70ch; }
.kb-end-head { margin: 0 0 6px; color: var(--text); font-weight: 700; }
.kb-end-help { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kb-end-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; }
.kb-end-links a { color: var(--soft); display: inline-block; padding: 4px 0; }
.kb-end-op { margin: 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; }
.kb-lost-links { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.kb-pill-link { display: inline-block; padding: 10px 22px; border-radius: 999px; border: 2px solid var(--leaf); color: var(--text) !important; font-weight: 700; text-decoration: none; }

.kb-lost { max-width: 720px; margin: 0 auto; padding: 64px clamp(16px, 4vw, 40px) 96px; }
.kb-lost h1 { font-size: clamp(28px, 4.4vw, 44px); margin: 0 0 16px; }

@media (max-width: 900px) {
  .kb-shell { grid-template-columns: minmax(0, 1fr); }
  .kb-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--rule); padding: 14px 16px; }
  .kb-side ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
  .kb-side li { flex: 0 0 auto; }
  .kb-side a { grid-template-columns: auto; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap; }
  .kb-side a i { display: none; }
}
@media (max-width: 600px) {
  .kb-menu { margin-left: 8px; }
  .kb-bar-age { display: none; }
  .kb-menu a { padding: 6px 8px; font-size: 14px; }
  .kb-play { left: 12px; right: 12px; transform: none; justify-content: center; }
  .kb-playband a { width: 100%; justify-content: center; }
  .kb-claimtile { grid-template-columns: 1fr; text-align: left; }
  .kb-claimtile-art { width: 64px; height: 64px; }
  .kb-claimtile-go { width: 100%; justify-content: center; }
  .kb-play[data-away] { transform: translateY(160%); }
  .kb-grid table, .kb-grid tbody, .kb-grid tr, .kb-grid td { display: block; width: 100%; }
  .kb-grid thead { display: none; }
  .kb-grid tbody tr td, .kb-grid tbody tr:nth-child(even) td { background: transparent; }
  .kb-grid tr { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
  .kb-grid td { padding: 2px 0; }
  .kb-grid-pairs td:first-child { width: 100%; font-size: 13px; }
  .kb-grid-matrix td::before { content: attr(data-label); display: block; color: var(--leaf-lit); font-size: 12px; font-weight: 700; }
}
/* first-screen offer strip (main page): ticket with perforation, copy left, stacked actions right */
.kb-getstarted { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 250px; margin: 4px 0 26px; max-width: 860px; border-radius: 6px 22px 6px 22px; background: linear-gradient(110deg, #123222 0%, #101a15 55%, #0d1310 100%); border: 1px solid #18a86080; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
.kb-getstarted-copy { padding: 20px 24px; border-right: 2px dashed #18a86066; }
.kb-getstarted-head { margin: 0 0 6px; color: var(--text); font-size: 20px; font-weight: 800; line-height: 1.3; max-width: none !important; }
.kb-getstarted-offer { margin: 0; color: var(--leaf-lit) !important; font-size: 18px; font-weight: 700; line-height: 1.4; }
.kb-getstarted-fine { grid-column: 1 / -1; margin: 0; color: var(--soft) !important; font-size: 12px; letter-spacing: .02em; text-align: center; }
.kb-getstarted-acts { display: grid; align-content: center; gap: 10px; padding: 18px 20px; }
.kb-getstarted-go { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; border-radius: 999px; font-weight: 800; text-align: center; text-decoration: none; line-height: 1.2; }
.kb-getstarted-go--primary { background: var(--leaf); color: var(--leaf-dark) !important; }
.kb-getstarted-go--primary:hover { background: var(--leaf-lit); }
.kb-getstarted-go--secondary { border: 2px solid var(--leaf); color: var(--text) !important; }
.kb-getstarted-go--secondary:hover { background: #18a8601f; }
@media (max-width: 700px) {
  .kb-getstarted { grid-template-columns: 1fr; margin-bottom: 20px; }
  .kb-getstarted-copy { padding: 14px 16px 10px; border-right: 0; border-bottom: 2px dashed #18a86066; }
  .kb-getstarted-head { font-size: 16px; }
  .kb-getstarted-offer { font-size: 15px; margin-bottom: 6px; }
  .kb-getstarted-acts { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; }
  .kb-getstarted-go { min-height: 44px; padding: 8px 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
