/*
 * Kwital inner marketing pages in the WhatsApp theme (about, pricing, faq, contact, blog, legal).
 * Loaded after wa.css by site/partials/theme-assets.blade.php. Every class here uses the kp- prefix.
 *
 *   Shared   .kp-hero[.is-center] (+ .kp-hero-copy, .kp-hero-visual, .kp-hero-meta, .kp-float-a|b)
 *            .kp-t-channels|audience|engagement|automation|operations (sets --tone / --grad)
 *            .kp-icon (tone tile), .kp-tag[.is-wait|.is-muted], .kp-window, .kp-pattern (doodle section bg)
 *            .kp-seq (chat bubble entry, style="--d: n"), .kp-copy[data-kp-copy]
 *   About    .kp-story-chat, .kp-feed, .kp-value, .kp-profile
 *   Pricing  .kp-plans, .kp-plan[.is-featured], .kp-estimator, .kp-compare
 *   FAQ      .kp-faq-search, .kp-faq-layout, .kp-faq-nav, .kp-acc (details accordion), .kp-empty
 *   Contact  .kp-wa-card, .kp-form, .kp-channels, .kp-steps
 *   Blog     .kp-search, .kp-post[.is-featured], .kp-pager, .kp-article, .kp-toc, .kp-share
 *   Legal    .kp-legal, .kp-legal-nav, .kp-legal-body
 */

/* ---------- Tones ---------- */
.kp-t-channels { --tone: #128c7e; --grad: linear-gradient(135deg, #25d366, #128c7e); --tone-soft: #dcf5ea; }
.kp-t-audience { --tone: #2563eb; --grad: linear-gradient(135deg, #38bdf8, #2563eb); --tone-soft: #dbeafe; }
.kp-t-engagement { --tone: #ea580c; --grad: linear-gradient(135deg, #fb923c, #ea580c); --tone-soft: #ffedd5; }
.kp-t-automation { --tone: #6d28d9; --grad: linear-gradient(135deg, #a78bfa, #6d28d9); --tone-soft: #ede9fe; }
.kp-t-operations { --tone: #0f766e; --grad: linear-gradient(135deg, #2dd4bf, #0f766e); --tone-soft: #ccfbf1; }

.kp-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--grad, linear-gradient(135deg, #25d366, #128c7e)); color: #fff; font-size: 23px; box-shadow: 0 10px 22px -10px var(--tone, #128c7e); }
.kp-tag { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--kh-wa-bubble); color: #0b6a5b; font-size: 12px; font-weight: 700; white-space: nowrap; }
.kp-tag.is-wait { background: #fff4d6; color: #8a5a00; }
.kp-tag.is-muted { background: #eef2f1; color: var(--ks-muted); font-weight: 600; }
.kp-window { overflow: hidden; border: 1px solid var(--ks-line); border-radius: 22px; background: var(--ks-soft); box-shadow: var(--ks-shadow-lg); }
.kp-pattern { position: relative; isolation: isolate; }
.kp-pattern::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kh-doodle) 0 0 / 160px 160px; opacity: .55; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
.kp-seq { animation: kh-pop .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--d, 0) * .55s + .3s); }
.kp-copy { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--ks-line); border-radius: 9px; background: #fff; color: var(--ks-muted); font-size: 16px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.kp-copy:hover { border-color: #a7dcc8; color: var(--kh-wa-teal); }
.kp-copy.is-done { border-color: var(--kh-wa); background: var(--kh-wa-bubble); color: #0b6a5b; }

/* ---------- Hero ---------- */
.kp-hero { padding-bottom: 72px; }
.kp-hero .kh-hero-grid { align-items: center; }
.kp-hero .kh-hero-copy, .kp-hero-copy { min-width: 0; }
.kp-hero.is-center .kp-hero-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.kp-hero.is-center .kh-crumbs, .kp-hero.is-center .ks-actions, .kp-hero.is-center .ks-hero-note { justify-content: center; }
.kp-hero.is-center .ks-lead { margin-left: auto; margin-right: auto; }
.kp-hero-meta { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 6px 14px; border: 1px solid var(--ks-line); border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ks-text); font-size: 13.5px; font-weight: 600; }
.kp-hero-meta i { color: var(--kh-wa-teal); font-size: 17px; }
.kp-hero-visual { position: relative; min-width: 0; padding: 20px 0; }
.kp-float-a { bottom: 2%; left: -8%; }
.kp-float-b { top: -2%; right: -4%; animation-delay: -3s; }

/* ---------- About ---------- */
.kp-story-chat { max-width: 420px; }
.kp-story-chat .kh-screen-body { min-height: 0; gap: 7px; padding: 14px 12px 18px; }
.kp-story-chat .kh-msg { max-width: 82%; }
.kp-story-chat .kh-wa-name strong i { color: var(--kh-wa); }

.kp-feed { position: relative; display: grid; gap: 12px; margin: 0; padding: 20px; list-style: none; }
.kp-feed::before { content: ""; position: absolute; top: 44px; bottom: 44px; left: 42px; width: 2px; background: repeating-linear-gradient(180deg, #bfe3d4 0 6px, transparent 6px 12px); }
.kp-feed li { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--ks-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(11, 31, 26, .05); transition: transform .2s, box-shadow .2s; }
.kp-feed li:hover { transform: translateX(4px); box-shadow: var(--ks-shadow); }
.kp-feed .kp-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
.kp-feed-text { flex: 1; min-width: 0; line-height: 1.35; }
.kp-feed-text strong { display: block; color: var(--ks-ink); font-size: 14.5px; }
.kp-feed-text small { display: block; color: var(--ks-muted); font-size: 12.5px; overflow-wrap: anywhere; }

.kp-value { overflow: hidden; border-radius: 20px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.kp-value:hover { transform: translateY(-4px); border-color: var(--tone-soft); box-shadow: 0 24px 44px -24px var(--tone); }
.kp-value .kp-icon { margin-bottom: 18px; }
.kp-value-num { position: absolute; top: 18px; right: 22px; color: var(--tone-soft); font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }

.kp-profile { overflow: hidden; border: 1px solid var(--ks-line); border-radius: 24px; background: #fff; box-shadow: var(--ks-shadow-lg); }
.kp-profile-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px; background: linear-gradient(120deg, #075e54, #128c7e); color: rgba(255, 255, 255, .85); }
.kp-profile-head > div { min-width: 0; }
.kp-profile-head strong { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 1.05rem; line-height: 1.3; }
.kp-profile-head strong i { color: #7ef0a8; font-size: 20px; }
.kp-profile-head small { display: block; font-size: 13px; }
.kp-profile-avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 26px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.kp-profile-list { margin: 0; padding: 8px 24px 16px; }
.kp-profile-list > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--ks-line); }
.kp-profile-list > div:last-child { border-bottom: 0; }
.kp-profile-list dt { color: var(--ks-muted); font-size: 13px; font-weight: 600; }
.kp-profile-list dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: var(--ks-ink); font-size: 14.5px; font-weight: 600; }
.kp-profile-list dd span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Pricing ---------- */
.kp-pricing-hero { padding-bottom: 150px; }
.kp-plans-section { position: relative; z-index: 1; margin-top: -130px; padding-top: 0; }
.kp-plan-filter { margin-bottom: 28px; }
.kp-plan-filter .kh-chip { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; align-items: stretch; }
.kp-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 24px; border: 1px solid var(--ks-line); border-radius: 24px; background: rgba(255, 255, 255, .92); box-shadow: var(--ks-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .25s, box-shadow .25s, border-color .25s; }
.kp-plan:hover { transform: translateY(-4px); border-color: #a7dcc8; box-shadow: 0 30px 60px -30px rgba(7, 94, 84, .45); }
.kh-filter-grid > .kp-plan:not([hidden]) { animation: kh-panel-in .4s ease both; }
.kp-plan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kp-plan-head > div { min-width: 0; }
.kp-plan-head h3 { margin: 0; font-size: 1.3rem; }
.kp-plan-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--ks-primary-50); color: var(--kh-wa-teal); font-size: 23px; }
.kp-plan-type { display: block; color: var(--ks-muted); font-size: 12.5px; font-weight: 600; }
.kp-plan-summary { min-height: 3em; margin: 0 0 18px; color: var(--ks-muted); font-size: 14.5px; line-height: 1.5; }
.kp-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; color: var(--ks-ink); font-size: 2.6rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.kp-plan-cur { align-self: flex-start; margin-top: .2em; font-size: .5em; letter-spacing: 0; }
.kp-plan-price small { color: var(--ks-muted); font-size: 14.5px; font-weight: 500; letter-spacing: 0; }
.kp-plan-period { margin: 8px 0 20px; color: var(--ks-muted); font-size: 13px; }
.kp-plan-cta { width: 100%; }
.kp-plan-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px dashed var(--ks-line); list-style: none; }
.kp-plan-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ks-text); font-size: 14px; line-height: 1.45; }
.kp-plan-list li > span { min-width: 0; overflow-wrap: anywhere; }
.kp-plan-list i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ks-primary-50); color: var(--kh-wa-teal); font-size: 15px; }
.kp-plan-badge { position: absolute; top: -13px; left: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(100deg, #25d366, #9ef5c0); color: #053d36; font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 8px 18px -8px rgba(37, 211, 102, .8); }
.kp-plan-badge i { font-size: 15px; }
.kp-plan.is-featured { border-color: transparent; background: radial-gradient(420px 260px at 100% 0%, rgba(37, 211, 102, .35), transparent 60%), linear-gradient(160deg, #075e54, #0a4d45 60%, #0b3b35); color: rgba(255, 255, 255, .8); box-shadow: 0 34px 70px -30px rgba(7, 94, 84, .75); }
.kp-plan.is-featured::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--kh-doodle) 0 0 / 160px 160px; opacity: .35; -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%); pointer-events: none; }
.kp-plan.is-featured > * { position: relative; }
.kp-plan.is-featured .kp-plan-badge { position: absolute; }
.kp-plan.is-featured h3, .kp-plan.is-featured .kp-plan-price { color: #fff; }
.kp-plan.is-featured .kp-plan-type, .kp-plan.is-featured .kp-plan-summary, .kp-plan.is-featured .kp-plan-period, .kp-plan.is-featured .kp-plan-price small { color: rgba(255, 255, 255, .72); }
.kp-plan.is-featured .kp-plan-icon { background: rgba(255, 255, 255, .14); color: #7ef0a8; }
.kp-plan.is-featured .kp-plan-list { border-top-color: rgba(255, 255, 255, .18); }
.kp-plan.is-featured .kp-plan-list li { color: rgba(255, 255, 255, .88); }
.kp-plan.is-featured .kp-plan-list i { background: rgba(37, 211, 102, .18); color: #7ef0a8; }
.kp-plan.is-featured .ks-btn-light { color: var(--kh-wa-dark); }
.kp-plan.is-featured .ks-btn-light:hover { background: #e9fdf0; }
.kp-custom { display: flex; align-items: center; gap: 16px; max-width: 860px; margin: 40px auto 0; padding: 18px 20px; border: 1px solid var(--ks-line); border-radius: 20px; background: #fff; box-shadow: var(--ks-shadow); }
.kp-custom p { flex: 1; min-width: 0; margin: 0; color: var(--ks-muted); font-size: 14.5px; }
.kp-custom p strong { color: var(--ks-ink); }
.kp-empty { max-width: 640px; margin: 0 auto; align-items: center; text-align: center; border-radius: 22px; }
.kp-empty .kp-icon { margin-bottom: 16px; }

.kp-estimator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 32px; border: 1px solid var(--ks-line); border-radius: 28px; background: rgba(255, 255, 255, .92); box-shadow: var(--ks-shadow-lg); }
.kp-est-controls { min-width: 0; }
.kp-est-controls .kh-seg-label { margin-top: 20px; }
.kp-est-controls .kh-seg-label:first-child { margin-top: 0; }
.kp-est-controls output { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--ks-primary-50); color: var(--ks-primary-700); font-size: 13px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.kp-seg { display: flex; padding: 4px; border: 1px solid var(--ks-line); border-radius: 14px; background: var(--ks-soft); }
.kp-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ks-text); font: 600 14px/1 var(--ks-font); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.kp-seg button i { font-size: 18px; }
.kp-seg button:hover { color: var(--kh-wa-teal); }
.kp-seg button[aria-pressed="true"] { background: #fff; color: var(--kh-wa-dark); box-shadow: 0 6px 16px -8px rgba(7, 94, 84, .55), 0 0 0 1px #bfe3d4; }
.kp-input { display: block; width: 100%; padding: 12px 14px; border: 1.5px solid var(--ks-line); border-radius: 14px; background: #fff; color: var(--ks-ink); font: 15px/1.5 var(--ks-font); resize: vertical; transition: border-color .15s, box-shadow .15s; }
.kp-input:focus { outline: none; border-color: var(--kh-wa-teal); box-shadow: 0 0 0 4px rgba(18, 140, 126, .12); }
.kp-range { width: 100%; accent-color: var(--kh-wa-teal); }
.kp-est-result { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kp-est-preview { display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 18px; border-radius: 20px; }
.kp-est-preview .kh-msg { max-width: 92%; }
.kp-est-preview .kh-msg p { max-height: 168px; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap; scrollbar-width: thin; }
.kp-est-preview.is-sms .kh-msg { background: #2563eb; color: #fff; border-radius: 16px 16px 4px 16px; }
.kp-est-preview.is-sms .kh-msg time { color: rgba(255, 255, 255, .75); }
.kp-est-preview.is-email { background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.kp-est-preview.is-email .kh-msg { background: #fff; border-left: 4px solid #ea580c; border-radius: 10px; }
.kp-est-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.kp-est-stats div { padding: 14px 10px; border: 1px solid var(--ks-line); border-radius: 16px; background: #fff; text-align: center; }
.kp-est-stats dt { color: var(--ks-ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kp-est-stats dd { margin: 2px 0 0; color: var(--ks-muted); font-size: 12.5px; line-height: 1.35; }
.kp-est-stats .is-total { border-color: transparent; background: linear-gradient(135deg, #075e54, #128c7e); }
.kp-est-stats .is-total dt { color: #fff; }
.kp-est-stats .is-total dd { color: rgba(255, 255, 255, .8); }
.kp-est-note { display: flex; gap: 8px; margin: 0; color: var(--ks-muted); font-size: 13px; line-height: 1.5; }
.kp-est-note i { flex: none; margin-top: 2px; color: var(--kh-wa-teal); font-size: 16px; }

.kp-route-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.kp-route-title { margin-bottom: 6px; font-size: 1.35rem; text-align: center; }
.kp-route-lead { max-width: 680px; margin: 0 auto 28px; color: var(--ks-muted); text-align: center; }
.kp-compare { overflow: hidden; border: 1px solid var(--ks-line); border-radius: 24px; background: #fff; box-shadow: var(--ks-shadow); }
.kp-compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kp-compare th, .kp-compare td { padding: 16px 20px; border-bottom: 1px solid var(--ks-line); text-align: left; vertical-align: top; }
.kp-compare tbody tr:last-child > * { border-bottom: 0; }
.kp-compare thead th { background: var(--ks-soft); color: var(--ks-ink); font-size: 14.5px; font-weight: 700; }
.kp-compare thead th i { margin-right: 8px; font-size: 19px; vertical-align: -3px; color: var(--ks-muted); }
.kp-compare thead th.is-kwital { background: linear-gradient(120deg, #075e54, #128c7e); color: #fff; }
.kp-compare thead th.is-kwital i { color: #7ef0a8; }
.kp-compare tbody th { width: 22%; color: var(--ks-ink); font-size: 14px; font-weight: 650; }
.kp-compare td { color: var(--ks-text); }
.kp-compare td.is-kwital { background: rgba(37, 211, 102, .06); }
.kp-compare td.is-yes { color: #0b6a5b; font-weight: 650; }
.kp-compare td.is-yes::before { content: "\2713"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--kh-wa); color: #fff; font-size: 12px; font-weight: 800; }
.kp-benefits { margin-top: 24px; }
.kp-benefit { border-radius: 20px; }
.kp-benefit .kp-icon { margin-bottom: 16px; }

.kh-teal .kp-teal-lead { color: rgba(255, 255, 255, .8); font-size: 1.05rem; }
.kp-included { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.kp-included li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255, 255, 255, .88); font-size: 15px; line-height: 1.45; }
.kp-included i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #7ef0a8; font-size: 17px; }
.kh-teal .kp-window { border-color: rgba(255, 255, 255, .2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }

.kp-faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.kp-faq-intro { position: sticky; top: 110px; }
.kp-acc { display: grid; gap: 12px; }
.kp-acc details { border: 1px solid var(--ks-line); border-radius: 18px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.kp-acc details:hover { border-color: #bfe3d4; }
.kp-acc details[open] { border-color: #a7dcc8; box-shadow: 0 18px 40px -26px rgba(7, 94, 84, .5); }
.kp-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; color: var(--ks-ink); font-weight: 650; list-style: none; cursor: pointer; }
.kp-acc summary::-webkit-details-marker { display: none; }
.kp-acc summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ks-primary-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128c7e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s, background-color .25s; }
.kp-acc details[open] summary::after { transform: rotate(45deg); background-color: var(--kh-wa-bubble); }
.kp-acc details > div { padding: 0 22px 20px; color: var(--ks-muted); }
.kp-acc details > div p:last-child { margin-bottom: 0; }
.kp-acc details[open] > div { animation: kh-panel-in .3s ease both; }

/* ---------- FAQ ---------- */
.kp-faq-search { position: relative; display: flex; align-items: center; gap: 10px; max-width: 620px; height: 60px; margin: 30px auto 0; padding: 0 12px 0 20px; border: 1.5px solid var(--ks-line); border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: 0 20px 44px -22px rgba(7, 94, 84, .45); transition: border-color .2s, box-shadow .2s; }
.kp-faq-search:focus-within { border-color: var(--kh-wa-teal); box-shadow: 0 0 0 5px rgba(18, 140, 126, .12), 0 20px 44px -22px rgba(7, 94, 84, .45); }
.kp-faq-search > i { color: var(--kh-wa-teal); font-size: 22px; }
.kp-faq-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ks-ink); font: 16px/1 var(--ks-font); outline: none; }
.kp-faq-search input::-webkit-search-cancel-button { cursor: pointer; }
.kp-faq-search kbd { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ks-line); border-radius: 8px; background: var(--ks-soft); color: var(--ks-muted); font: 600 13px/1 var(--ks-font); }
.kp-faq-status { min-height: 1.5em; margin: 12px 0 0; color: var(--ks-muted); font-size: 14px; }
.kp-faq-section { padding-top: 40px; }
.kp-faq-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start; }
.kp-faq-aside { position: sticky; top: 100px; display: grid; gap: 20px; min-width: 0; }
.kp-faq-nav { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--ks-line); border-radius: 20px; background: rgba(255, 255, 255, .9); box-shadow: var(--ks-shadow); }
.kp-faq-cat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 13px; color: var(--ks-text); font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; }
.kp-faq-cat small { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--ks-soft); color: var(--ks-muted); font-size: 12px; }
.kp-faq-cat:hover { background: var(--ks-primary-50); color: var(--ks-primary-700); }
.kp-faq-cat.is-active { background: linear-gradient(100deg, var(--kh-wa-dark), var(--kh-wa-teal)); color: #fff; box-shadow: 0 10px 22px -12px rgba(7, 94, 84, .7); }
.kp-faq-cat.is-active small { background: rgba(255, 255, 255, .2); color: #fff; }
.kp-faq-cat-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 16px; }
.kp-faq-cat.is-active .kp-faq-cat-icon { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.kp-faq-help { display: grid; justify-items: start; gap: 8px; padding: 20px; border-radius: 20px; background: radial-gradient(260px 160px at 100% 0%, rgba(37, 211, 102, .25), transparent 70%), var(--ks-soft); border: 1px solid var(--ks-line); }
.kp-faq-help strong { color: var(--ks-ink); font-size: 1.05rem; }
.kp-faq-help p { margin: 0 0 4px; color: var(--ks-muted); font-size: 14px; }
.kp-faq-help .ks-btn { width: 100%; }
.kp-faq-main { display: grid; gap: 44px; min-width: 0; scroll-margin-top: 140px; }
.kp-faq-group { scroll-margin-top: 110px; }
.kp-faq-group[hidden] { display: none; }
.kp-faq-group:not([hidden]) { animation: kh-panel-in .4s ease both; }
.kp-faq-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.kp-faq-group-head h2 { margin: 0; font-size: 1.5rem; }
.kp-faq-count { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--tone-soft); color: var(--tone); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.kp-faq-group .kp-acc details[open] { border-color: color-mix(in srgb, var(--tone) 40%, #fff); }
.kp-acc details[hidden] { display: none; }
.kp-acc mark { padding: 0 2px; border-radius: 4px; background: #c6f6d5; color: inherit; }
.kp-faq-chat { width: 100%; max-width: 400px; margin: 0 0 0 auto; }
.kp-faq-chat .kh-screen-body { min-height: 0; }

/* ---------- Contact ---------- */
.kp-wa-card { max-width: 420px; }
.kp-wa-card .kh-screen-body { min-height: 0; gap: 10px; padding: 16px 14px 18px; }
.kp-wa-card .kh-msg { max-width: 88%; }
.kp-quick { display: grid; gap: 8px; }
.kp-quick a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: #fff; color: #027eb5; font-size: 14px; font-weight: 600; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); transition: transform .15s, background .15s, color .15s; }
.kp-quick a i:first-child { color: var(--kh-wa-teal); font-size: 18px; }
.kp-quick a i:last-child { margin-left: auto; color: #8696a0; font-size: 16px; transition: transform .15s; }
.kp-quick a:hover { background: #f5fdf8; color: var(--kh-wa-dark); transform: translateX(3px); }
.kp-quick a:hover i:last-child { transform: translate(2px, -2px); color: var(--kh-wa-teal); }
.kp-wa-open { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font-weight: 700; transition: filter .2s; }
.kp-wa-open i { font-size: 22px; }
.kp-wa-open:hover { color: #fff; filter: brightness(1.06); }

.kp-contact-section { padding-top: 64px; scroll-margin-top: 60px; }
.kp-contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: start; }
.kp-form-card { min-width: 0; padding: 32px; border: 1px solid var(--ks-line); border-radius: 28px; background: rgba(255, 255, 255, .95); box-shadow: var(--ks-shadow-lg); }
.kp-form-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.kp-form-head h2 { margin: 0 0 2px; font-size: 1.5rem; }
.kp-form-head p { margin: 0; color: var(--ks-muted); font-size: 14px; }
.kp-form .ks-field label { font-size: 13.5px; }
.kp-form .ks-field input, .kp-form .ks-field textarea { border-width: 1.5px; border-radius: 14px; background: var(--ks-soft); }
.kp-form .ks-field input:focus, .kp-form .ks-field textarea:focus { border-color: var(--kh-wa-teal); background: #fff; box-shadow: 0 0 0 4px rgba(18, 140, 126, .12); }
.kp-field-icon { position: relative; }
.kp-field-icon > i { position: absolute; top: 50%; left: 14px; color: var(--ks-muted); font-size: 18px; transform: translateY(-50%); pointer-events: none; transition: color .15s; }
.kp-field-icon input { padding-left: 42px !important; }
.kp-field-icon:focus-within > i { color: var(--kh-wa-teal); }
.kp-form .has-error input, .kp-form .has-error textarea { border-color: #f87171; background: #fff7f7; }
.kp-error { display: flex; align-items: center; gap: 4px; color: #b91c1c; font-size: 13px; font-weight: 600; }
.kp-field-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kp-counter { margin-left: auto; color: var(--ks-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kp-counter.is-near { color: #b45309; }
.kp-subject-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kp-chip-sm { padding: 5px 11px; border: 1px solid var(--ks-line); border-radius: 999px; background: #fff; color: var(--ks-text); font: 600 12.5px/1.2 var(--ks-font); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.kp-chip-sm:hover { border-color: #a7dcc8; color: var(--kh-wa-dark); }
.kp-chip-sm[aria-pressed="true"] { border-color: var(--kh-wa-teal); background: var(--ks-primary-50); color: var(--kh-wa-dark); }
.kp-form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kp-form-actions .ks-btn[disabled] { cursor: progress; opacity: .8; }
.kp-alert { display: flex; gap: 12px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid #fecaca; border-radius: 16px; background: #fef2f2; color: #7f1d1d; font-size: 14px; }
.kp-alert > i { flex: none; color: #dc2626; font-size: 22px; }
.kp-alert strong { display: block; margin-bottom: 2px; }
.kp-alert ul { margin: 0; padding-left: 18px; }

.kp-contact-aside { display: grid; gap: 20px; min-width: 0; }
.kp-channels { padding: 26px; border: 1px solid var(--ks-line); border-radius: 24px; background: radial-gradient(300px 180px at 100% 0%, rgba(37, 211, 102, .18), transparent 70%), #fff; box-shadow: var(--ks-shadow); }
.kp-channels h3 { margin-bottom: 6px; font-size: 1.2rem; }
.kp-channels > p { margin: 0 0 16px; color: var(--ks-muted); font-size: 14.5px; }
.kp-channel { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--ks-line); }
.kp-channel .kp-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
.kp-channel-text { flex: 1; min-width: 0; line-height: 1.35; }
.kp-channel-text small { display: block; color: var(--ks-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.kp-channel-text a, .kp-channel-text span { display: block; color: var(--ks-ink); font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.kp-channel-text a:hover { color: var(--kh-wa-teal); }
.kp-teams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.kp-team { border-radius: 20px; }
.kp-team .kp-icon { margin-bottom: 14px; }
.kp-team .ks-card-more { color: var(--tone); }
.kp-next li p { font-size: 14.5px; }

/* ---------- Blog ---------- */
.kp-search { padding-right: 6px; }
.kp-search .ks-btn { flex: none; height: 46px; border-radius: 999px; padding: 0 22px; }
.kp-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.kp-topics .kp-chip-sm { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255, 255, 255, .85); font-size: 13px; }
.kp-topics .kp-chip-sm i { color: var(--kh-wa-teal); font-size: 16px; }
.kp-topics .kp-chip-sm.is-active { border-color: var(--kh-wa-teal); background: var(--ks-primary-50); color: var(--kh-wa-dark); }
.kp-blog-section { padding-top: 48px; }
.kp-blog-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.kp-blog-bar h2 { margin: 0 0 2px; font-size: 1.6rem; }
.kp-blog-bar p { margin: 0; color: var(--ks-muted); font-size: 14.5px; }

.kp-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kp-post { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ks-line); border-radius: 22px; background: #fff; color: var(--ks-text); box-shadow: 0 1px 2px rgba(11, 31, 26, .04); transition: transform .25s, box-shadow .25s, border-color .25s; }
.kp-post:hover { color: var(--ks-text); border-color: #a7dcc8; transform: translateY(-4px); box-shadow: 0 28px 56px -28px rgba(7, 94, 84, .45); }
.kp-post-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ks-soft); }
.kp-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.kp-post:hover .kp-post-media img { transform: scale(1.04); }
.kp-post-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--kh-doodle) 0 0 / 160px 160px, linear-gradient(135deg, #dcf5ea, #b9ecd3); color: var(--kh-wa-teal); font-size: 44px; }
.kp-post-flag { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--kh-wa-dark); font-size: 12.5px; font-weight: 700; box-shadow: var(--ks-shadow); }
.kp-post-flag i { color: var(--kh-wa); }
.kp-post-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.kp-post-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--ks-muted); font-size: 13px; font-weight: 500; }
.kp-post h3 { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.kp-post p { margin: 0; color: var(--ks-muted); font-size: 14.5px; line-height: 1.55; }
.kp-post-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; color: var(--kh-wa-teal); font-size: 14px; font-weight: 700; }
.kp-post-more i { transition: transform .2s; }
.kp-post:hover .kp-post-more i { transform: translateX(4px); }
.kp-post.is-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-bottom: 28px; border-radius: 28px; }
.kp-post.is-featured .kp-post-media { aspect-ratio: auto; min-height: 320px; }
.kp-post.is-featured .kp-post-body { justify-content: center; gap: 12px; padding: 36px; background: radial-gradient(360px 220px at 100% 0%, rgba(37, 211, 102, .14), transparent 70%); }
.kp-post.is-featured h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; }
.kp-post.is-featured p { font-size: 15.5px; }
.kp-post.is-featured .kp-post-more { margin-top: 8px; }
.kp-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.kp-pager-btn, .kp-pager-num { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid var(--ks-line); border-radius: 999px; background: #fff; color: var(--ks-ink); font-size: 14px; font-weight: 600; transition: border-color .15s, color .15s, background .15s; }
.kp-pager a:hover { border-color: #a7dcc8; color: var(--kh-wa-teal); }
.kp-pager-num.is-current { border-color: transparent; background: linear-gradient(100deg, var(--kh-wa-dark), var(--kh-wa-teal)); color: #fff; box-shadow: 0 10px 22px -12px rgba(7, 94, 84, .7); }
.kp-pager-btn.is-disabled { opacity: .45; cursor: default; }
.kp-pager-gap { color: var(--ks-muted); }
.kp-resource { border-radius: 20px; }
.kp-resource .kp-icon { margin-bottom: 16px; }
.kp-resource .ks-card-more { color: var(--tone); }
.kp-resource:hover { border-color: var(--tone-soft); box-shadow: 0 24px 44px -24px var(--tone); }

.kp-article-hero { padding-bottom: 150px; }
.kp-article-head { max-width: 860px; min-width: 0; }
.kp-article-head h1 { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.03em; line-height: 1.12; }
.kp-article-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.kp-article-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--ks-line); border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ks-text); font-size: 13px; font-weight: 600; }
.kp-article-meta i { color: var(--kh-wa-teal); font-size: 16px; }
.kp-article-section { position: relative; z-index: 1; padding-top: 0; }
.kp-article-cover { width: 100%; max-height: 520px; margin: -120px 0 48px; aspect-ratio: 16 / 7; object-fit: cover; border: 6px solid #fff; border-radius: 28px; background: var(--ks-soft); box-shadow: var(--ks-shadow-lg); }
.kp-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.kp-article-section:not(:has(.kp-article-cover)) .kp-article-grid { margin-top: -100px; padding: 36px; border: 1px solid var(--ks-line); border-radius: 28px; background: #fff; box-shadow: var(--ks-shadow); }
.kp-prose { max-width: 740px; min-width: 0; font-size: 17px; line-height: 1.75; overflow-wrap: break-word; }
.kp-prose h2 { position: relative; margin-top: 2.2em; padding-top: 4px; font-size: 1.55rem; scroll-margin-top: 100px; }
.kp-prose h3 { scroll-margin-top: 100px; }
.kp-prose h2::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--kh-wa), var(--kh-wa-teal)); }
.kp-prose > h2:first-child { margin-top: 0; }
.kp-prose a { color: var(--kh-wa-teal); text-decoration-color: rgba(18, 140, 126, .35); }
.kp-prose a:hover { text-decoration-color: currentColor; }
.kp-prose ul li::marker { color: var(--kh-wa-teal); }
.kp-prose ol li::marker { color: var(--kh-wa-teal); font-weight: 700; }
.kp-prose blockquote { margin: 1.5em 0; padding: 14px 20px; border-left: 4px solid var(--kh-wa); border-radius: 0 14px 14px 0; background: var(--ks-primary-50); color: var(--ks-ink); }
.kp-prose strong { color: var(--ks-ink); }
.kp-prose img, .kp-prose iframe, .kp-prose table { max-width: 100%; }
.kp-article-aside { position: sticky; top: 100px; display: grid; gap: 16px; min-width: 0; }
.kp-toc { border: 1px solid var(--ks-line); border-radius: 20px; background: #fff; box-shadow: var(--ks-shadow); }
.kp-toc summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; color: var(--ks-ink); font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.kp-toc summary::-webkit-details-marker { display: none; }
.kp-toc summary i { color: var(--kh-wa-teal); font-size: 18px; }
.kp-toc summary small { margin-left: auto; color: var(--ks-muted); font-size: 12.5px; font-weight: 600; }
.kp-toc summary::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--ks-muted); border-bottom: 2px solid var(--ks-muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.kp-toc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.kp-toc nav { position: relative; display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; padding: 0 10px 12px; scrollbar-width: thin; }
.kp-toc nav a { display: block; padding: 7px 10px 7px 14px; border-left: 2px solid var(--ks-line); border-radius: 0 10px 10px 0; color: var(--ks-muted); font-size: 13.5px; line-height: 1.4; transition: color .15s, border-color .15s, background .15s; }
.kp-toc nav a.is-sub { padding-left: 26px; font-size: 13px; }
.kp-toc nav a:hover { color: var(--ks-ink); background: var(--ks-soft); }
.kp-toc nav a.is-active { border-left-color: var(--kh-wa); background: var(--ks-primary-50); color: var(--kh-wa-dark); font-weight: 650; }
.kp-toc.is-static { padding: 16px 8px 8px; }
.kp-toc.is-static .kp-legal-label { padding: 0 12px; }
.kp-toc.is-static nav { max-height: calc(100vh - 220px); padding: 8px 4px 4px; }
.kp-share { padding: 16px 18px; border: 1px solid var(--ks-line); border-radius: 20px; background: #fff; }
.kp-share strong { display: block; margin-bottom: 10px; color: var(--ks-ink); font-size: 14px; }
.kp-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-share-row a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ks-line); border-radius: 12px; background: #fff; color: var(--ks-ink); font-size: 19px; transition: border-color .15s, color .15s, background .15s, transform .15s; }
.kp-share-row a:hover { border-color: #a7dcc8; color: var(--kh-wa-teal); transform: translateY(-2px); }
.kp-share-row a.is-wa { border-color: transparent; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; }
.kp-share-row .kp-share-copy { display: inline-flex; gap: 6px; width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; }
.kp-share-row .kp-share-copy i { font-size: 17px; }
.kp-article-cta { display: grid; justify-items: start; gap: 8px; padding: 20px; border-radius: 20px; background: radial-gradient(260px 160px at 100% 0%, rgba(37, 211, 102, .35), transparent 70%), linear-gradient(150deg, #075e54, #0b4f47); color: rgba(255, 255, 255, .8); }
.kp-article-cta .kp-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .14); font-size: 21px; box-shadow: none; }
.kp-article-cta strong { color: #fff; font-size: 1.05rem; }
.kp-article-cta p { margin: 0 0 4px; font-size: 14px; }
.kp-article-cta .ks-btn-light { color: var(--kh-wa-dark); }
.kp-back { margin: 48px 0 0; }
.kp-back a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* ---------- Legal ---------- */
.kp-legal-section { padding-top: 56px; }
.kp-legal { display: grid; grid-template-columns: 250px minmax(0, 1fr) 240px; gap: 44px; align-items: start; }
.kp-legal-side, .kp-legal-toc { position: sticky; top: 100px; display: grid; gap: 16px; min-width: 0; }
.kp-legal-label { display: block; margin-bottom: 6px; color: var(--ks-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kp-legal-nav { display: grid; gap: 2px; padding: 16px 8px 8px; border: 1px solid var(--ks-line); border-radius: 20px; background: #fff; box-shadow: var(--ks-shadow); }
.kp-legal-nav .kp-legal-label { padding: 0 12px; }
.kp-legal-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--ks-text); font-size: 14px; font-weight: 600; line-height: 1.3; transition: background .15s, color .15s; }
.kp-legal-nav a i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ks-primary-50); color: var(--kh-wa-teal); font-size: 16px; }
.kp-legal-nav a:hover { background: var(--ks-soft); color: var(--ks-ink); }
.kp-legal-nav a.is-active { background: linear-gradient(100deg, var(--kh-wa-dark), var(--kh-wa-teal)); color: #fff; box-shadow: 0 10px 22px -12px rgba(7, 94, 84, .7); }
.kp-legal-nav a.is-active i { background: rgba(255, 255, 255, .18); color: #fff; }
.kp-legal-help { display: grid; justify-items: start; gap: 6px; padding: 18px; border: 1px solid var(--ks-line); border-radius: 20px; background: radial-gradient(240px 140px at 100% 0%, rgba(37, 211, 102, .2), transparent 70%), var(--ks-soft); }
.kp-legal-help strong { color: var(--ks-ink); font-size: 14.5px; }
.kp-legal-help p { margin: 0 0 4px; color: var(--ks-muted); font-size: 13.5px; }
.kp-legal-mail { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.kp-legal-main { min-width: 0; padding: 40px 44px; border: 1px solid var(--ks-line); border-radius: 28px; background: #fff; box-shadow: var(--ks-shadow); }
.kp-legal-toc-inline { display: none; margin-bottom: 24px; box-shadow: none; }
.kp-legal-body { max-width: none; font-size: 16px; line-height: 1.75; }
.kp-legal-body h2 { font-size: 1.3rem; }
.kp-legal-body h2::before { width: 32px; height: 3px; margin-bottom: 12px; }
.kp-legal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 20px; border-top: 1px dashed var(--ks-line); }
.kp-legal-foot > span { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ks-muted); font-size: 13.5px; }
.kp-legal-foot > span i { color: var(--kh-wa-teal); font-size: 17px; }

@media print {
    .ks-topbar, .ks-header, .ks-footer, .kh-hero-glow, .kp-legal-side, .kp-legal-toc, .kp-legal-toc-inline, .kp-legal-foot, .kh-wa-fab, .ks-toasts { display: none !important; }
    .kh-hero, .kp-hero { padding: 0 0 12px !important; background: none !important; }
    .kh-hero::before { display: none; }
    .kp-legal { display: block; }
    .kp-legal-main { padding: 0; border: 0; box-shadow: none; }
    .ks-body > main { padding-bottom: 0; }
}

/* ---------- Responsive (shared + about) ---------- */
@media (max-width: 1180px) {
    .kp-legal { grid-template-columns: 230px minmax(0, 1fr); gap: 32px; }
    .kp-legal-toc { display: none; }
    .kp-legal-toc-inline { display: block; }
}
@media (max-width: 1080px) {
    .kp-article-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; }
}
@media (max-width: 960px) {
    .kp-hero-visual { max-width: 520px; width: 100%; margin: 0 auto; }
    .kp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-post.is-featured { grid-template-columns: minmax(0, 1fr); }
    .kp-post.is-featured .kp-post-media { min-height: 0; aspect-ratio: 16 / 9; }
    .kp-post.is-featured .kp-post-body { padding: 24px; }
    .kp-article-grid { grid-template-columns: minmax(0, 1fr); }
    .kp-article-aside { position: static; order: -1; }
    .kp-article-aside .kp-article-cta { display: none; }
    .kp-legal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .kp-legal-side { position: static; }
    .kp-legal-nav { display: flex; overflow-x: auto; padding: 6px; scrollbar-width: none; }
    .kp-legal-nav::-webkit-scrollbar { display: none; }
    .kp-legal-nav .kp-legal-label { display: none; }
    .kp-legal-nav a { flex: none; white-space: nowrap; }
    .kp-legal-help { display: none; }
    .kp-float-a { left: 0; }
    .kp-float-b { right: 0; }
    .kp-estimator, .kp-faq-split { grid-template-columns: minmax(0, 1fr); }
    .kp-faq-intro { position: static; }
    .kp-faq-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .kp-faq-aside { position: sticky; top: 72px; z-index: 5; margin: 0 -24px; padding: 8px 24px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
    .kp-faq-nav { display: flex; overflow-x: auto; padding: 0; border: 0; background: none; box-shadow: none; scrollbar-width: none; }
    .kp-faq-nav::-webkit-scrollbar { display: none; }
    .kp-faq-cat { flex: none; border: 1.5px solid var(--ks-line); border-radius: 999px; background: #fff; }
    .kp-faq-cat.is-active { border-color: transparent; }
    .kp-faq-help { display: none; }
    .kp-faq-chat { margin: 0 auto; }
    .kp-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .kp-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-wa-card { margin: 0 auto; }
    .kp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .kp-compare { overflow: visible; border: 0; background: none; box-shadow: none; }
    .kp-compare table, .kp-compare tbody, .kp-compare tr, .kp-compare th, .kp-compare td { display: block; width: auto; }
    .kp-compare thead { display: none; }
    .kp-compare tbody { display: grid; gap: 12px; }
    .kp-compare tbody tr { overflow: hidden; border: 1px solid var(--ks-line); border-radius: 18px; background: #fff; }
    .kp-compare tbody th { width: auto; padding: 12px 16px; background: var(--ks-soft); }
    .kp-compare td { padding: 12px 16px; border-bottom: 1px solid var(--ks-line); }
    .kp-compare td::after { content: none; }
    .kp-compare td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ks-muted); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
    .kp-compare td.is-kwital[data-label]::before { color: var(--kh-wa-teal); }
    .kp-compare td.is-yes::before { display: block; width: auto; height: auto; margin: 0 0 2px; border-radius: 0; background: none; color: var(--kh-wa-teal); font-size: 12px; }
    .kp-compare tbody tr > :last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
    .kp-hero { padding-bottom: 48px; }
    .kp-hero .kh-hero-grid { justify-items: stretch; }
    .kp-float-a, .kp-float-b { display: none; }
    .kp-feed { padding: 14px; }
    .kp-feed::before { left: 34px; }
    .kp-feed li { flex-wrap: wrap; padding: 10px 12px; }
    .kp-feed li .kp-tag { margin-left: 54px; }
    .kp-profile-head { padding: 18px; }
    .kp-profile-list { padding: 4px 18px 12px; }
    .kp-profile-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .kp-pricing-hero { padding-bottom: 120px; }
    .kp-plans-section { margin-top: -100px; }
    .kp-plans { grid-template-columns: minmax(0, 1fr); }
    .kp-plan { padding: 24px 20px; }
    .kp-plan-summary { min-height: 0; }
    .kp-custom { flex-direction: column; align-items: flex-start; }
    .kp-custom .ks-btn { width: 100%; }
    .kp-estimator { gap: 24px; padding: 18px; border-radius: 22px; }
    .kp-seg button { gap: 4px; padding: 0 6px; font-size: 13px; }
    .kp-seg button i { display: none; }
    .kp-est-stats { gap: 6px; }
    .kp-est-stats div { padding: 10px 4px; border-radius: 12px; }
    .kp-est-stats dt { font-size: 1.2rem; }
    .kp-est-stats dd { font-size: 11px; }
    .kp-route-title { font-size: 1.15rem; }
    .kp-faq-search { height: 52px; margin-top: 24px; padding: 0 10px 0 16px; }
    .kp-faq-search kbd { display: none; }
    .kp-faq-aside { margin: 0 -18px; padding: 8px 18px; }
    .kp-faq-cat { padding: 6px 10px 6px 6px; font-size: 13.5px; }
    .kp-faq-cat-icon { width: 26px; height: 26px; border-radius: 50%; font-size: 14px; }
    .kp-faq-group-head { gap: 12px; }
    .kp-faq-group-head .kp-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
    .kp-faq-group-head h2 { font-size: 1.25rem; }
    .kp-faq-count { display: none; }
    .kp-form-card { padding: 20px 16px; border-radius: 22px; }
    .kp-form-head .kp-icon { display: none; }
    .kp-form-actions .ks-btn { width: 100%; white-space: normal; }
    .kp-channels { padding: 20px 16px; }
    .kp-teams { grid-template-columns: minmax(0, 1fr); }
    .kp-contact-section { padding-top: 40px; }
    .kp-search .ks-btn { padding: 0 14px; height: 40px; }
    .kp-posts { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .kp-post.is-featured { margin-bottom: 18px; border-radius: 22px; }
    .kp-post.is-featured .kp-post-body { padding: 20px; }
    .kp-article-hero { padding-bottom: 110px; }
    .kp-article-head h1 { font-size: clamp(1.7rem, 7.6vw, 2.2rem); }
    .kp-article-cover { margin: -90px 0 28px; border-width: 4px; border-radius: 20px; }
    .kp-article-section:not(:has(.kp-article-cover)) .kp-article-grid { padding: 20px 16px; border-radius: 22px; }
    .kp-prose { font-size: 16px; line-height: 1.7; }
    .kp-prose h2 { font-size: 1.3rem; }
    .kp-legal-section { padding-top: 32px; }
    .kp-legal-main { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .kp-article-cover { aspect-ratio: 16 / 10; }
    .kp-legal-foot > span { width: 100%; }
    .kp-legal-foot .ks-btn { flex: 1; }
    .kp-acc summary { padding: 16px 16px; font-size: 15px; }
    .kp-acc details > div { padding: 0 16px 16px; }
}