/*
 * Contact / Privacy Policy / Terms of Service in the new look — mockup "A · Reading room" (Jared, 2026-11-02,
 * claude.ai/artifact/4ZrmPz1wSVzY3caJRnnAVJ). The header is the Blog's (gold label, gold title word, pills, Join now);
 * below it NO gold text: gold only on borders, rings and icons, every word white, navy or grey. Loaded after
 * public-live.css + public-blog.css (top bar, header band with the layered waves, fan-pattern page, section list,
 * footer) and only when Jerand_Member_Frame::public_on() is true. Scoped to body.kpp-legal.
 */

/* the header is the Blog's header exactly (Jared, 2026-11-02: gold label, gold word in the title, gold-ringed pills,
   Join now); below the header no gold words (the TOC's current number is white) */
.kpp-legal .kbl-toc a.on::before { color: #fff; }
.kpp-legal .kbl-hero h1 { text-wrap: balance; }
.kpp-legal .kbl-hero p { margin: 0 auto; text-wrap: balance; }

/* top bar: Contact / Privacy / Terms */
.klg-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.klg-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; color: #e6e9f2; font: 600 14px var(--kps-display); text-decoration: none; white-space: nowrap; }
.klg-tabs a:hover { color: #fff; background: rgba(255,255,255,.06); }
.klg-tabs a.on { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(212,168,73,.45); }

/* ── Privacy / Terms: reader + section list ── */
.klg-cols { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px max(28px, env(safe-area-inset-right, 0px)) 56px max(28px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.klg-doc { min-width: 0; padding: 34px 40px 38px; border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06), inset 0 0 0 1px #eceef4; color: var(--kpp-text); font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; }
.klg-doc > p:first-child { font-size: 16.5px; color: var(--kpp-ink); }
.klg-doc h2 { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 12px; font: 800 21px/1.3 var(--kps-display); letter-spacing: -.3px; color: var(--kpp-ink); text-wrap: balance; scroll-margin-top: 84px; }
.klg-doc h2 > span:last-child { min-width: 0; }
.klg-n { flex-shrink: 0; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--kpp-navy2); color: #fff; font: 800 14px var(--kps-display); letter-spacing: 0; transform: translateY(-3px); }
.klg-doc h3 { margin: 22px 0 6px; font: 700 16px/1.4 var(--kps-display); color: var(--kpp-ink); }
.klg-doc p { margin: 0 0 13px; }
.klg-doc ul { margin: 0 0 14px; padding-left: 22px; }
.klg-doc li { margin-bottom: 6px; }
.klg-doc li::marker { color: #9aa3b8; }
.klg-doc strong { color: var(--kpp-ink); }
.klg-doc a { color: var(--kpp-ink); text-decoration: underline; text-underline-offset: 3px; }
.klg-doc .contact-box { margin-top: 14px; padding: 18px 22px; border-radius: 14px; background: #f6f7fa; box-shadow: inset 0 0 0 1px #e3e6ee; }
.klg-side { display: grid; gap: 16px; position: sticky; top: 84px; min-width: 0; }
.klg-ask b { font-size: 17px; }
.klg-email { display: block; width: 100%; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.07); color: #fff !important; font: 700 14px/1.35 var(--kps-display); text-decoration: none; overflow-wrap: anywhere; }
.klg-email:hover { background: rgba(255,255,255,.12); }

/* ── Contact: three identical cards + the Zoom note ── */
.klg-contact { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px max(28px, env(safe-area-inset-right, 0px)) 56px max(28px, env(safe-area-inset-left, 0px)); display: grid; gap: 18px; align-content: start; }
.klg-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; }
.klg-cc { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 12px; padding: 28px 22px; border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.06), inset 0 0 0 1px #eceef4; text-align: center; min-width: 0; }
.klg-ring { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--kpp-navy2); box-shadow: inset 0 0 0 1px rgba(212,168,73,.55), 0 0 0 5px #f3f4f8; color: var(--kpp-gold-l); }
.klg-ring svg { width: 24px; height: 24px; fill: currentColor; }
/* labels get two lines of room so every card's value starts at the same height */
.klg-cl { display: grid; place-items: center; min-height: 2.8em; font: 700 11.5px/1.4 var(--kps-display); letter-spacing: 1.3px; text-transform: uppercase; color: #64748b; }
.klg-cv { align-self: start; font: 700 16.5px/1.4 var(--kps-display); color: var(--kpp-ink); overflow-wrap: anywhere; }
.klg-cv a { color: var(--kpp-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c7ccd8; }
.klg-cv a:hover { text-decoration-color: var(--kpp-ink); }
.klg-note { padding: 20px 24px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(212,168,73,.55); font-size: 15px; line-height: 1.65; color: var(--kpp-text); }
.klg-note strong { color: var(--kpp-ink); }

/* ── narrower screens ── */
@media (max-width: 960px) {
    .klg-cols { grid-template-columns: minmax(0, 1fr); }
    .klg-side { position: static; order: -1; }
    .klg-ask { display: none; }   /* section 11 / 14 already says how to reach us */
}
@media (max-width: 860px) {
    .klg-cgrid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .klg-cl { min-height: 0; }
}
@media (max-width: 700px) {
    .klg-cols, .klg-contact { padding-top: 16px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-bottom: 36px; }
    .klg-doc { padding: 24px 20px 26px; }
    .klg-doc h2 { font-size: 19px; gap: 10px; }
    .klg-tabs { display: none; }   /* bar = 2K mark + Join now, like the Blog's; the footer links the three pages */
    .klg-note { padding: 18px 18px; }
}