/* Competitive Keyword Generator (src/pages/competitive-visibility-report.astro).
   From the Pencil handoff, Nov 2026. Desktop frames 1440px, mobile 390px. */
.ckg {
  --navy-1: #1f304f; --navy-2: #08164e; --lime: #a8fe3b; --lime-hover: #b6fe5c; --ink: #1d2a4d;
  --slate: #2a3c4f; --light: #f1f1f1; --orange: #ff6a1a; --num-blue: #3a5bc7; --border: #e3e6ea;
  --text-mid: #5a6577; --white-70: #ffffffb3; --white-dim: #ffffff99; --input-bg: #ffffff1a; --error-red: #ff8d7a;
  --hero: linear-gradient(73deg, #1f304f 1%, #08164e 100%);
  --head: "Fira Sans", system-ui, sans-serif; --body: "Work Sans", system-ui, sans-serif;
  font-family: var(--body); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--light);
  -webkit-font-smoothing: antialiased;
}
body.ckg-page { margin: 0; background: #08164e; }
:where(.ckg) *, :where(.ckg) *::before, :where(.ckg) *::after { box-sizing: border-box; }
:where(.ckg) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset) { margin: 0; padding: 0; }
:where(.ckg) fieldset { border: 0; min-width: 0; }
:where(.ckg) :where(ul, ol) { list-style: none; }
:where(.ckg) img { display: block; max-width: 100%; height: auto; }
:where(.ckg) a { color: inherit; }
:where(.ckg) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.ckg) svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ckg-sr, .ckg-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ckg :focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.ckg-wrap { max-width: 1260px; margin: 0 auto; padding: 0 90px; }
.ckg-wrap--narrow { max-width: 900px; padding: 0 20px; }
.ckg-center { text-align: center; }

/* States: an element shows only in the states listed in data-show. */
.ckg [data-show] { display: none; }
.ckg[data-state="form"] [data-show~="form"], .ckg[data-state="loading"] [data-show~="loading"],
.ckg[data-state="results"] [data-show~="results"], .ckg[data-state="low"] [data-show~="low"],
.ckg[data-state="error"] [data-show~="error"], .ckg[data-state="rate"] [data-show~="rate"],
.ckg[data-state="missing"] [data-show~="missing"] { display: block; }
.ckg[data-state="form"] .ckg-hero__grid, .ckg[data-state="loading"] .ckg-hero__grid { display: grid; }
.ckg[data-state="results"] .ckg-top__done, .ckg[data-report][data-state="low"] .ckg-top__done { display: flex; }
.ckg [hidden] { display: none !important; }

/* ---------- Type ---------- */
.ckg-h1 { font-family: var(--head); font-weight: 700; font-size: 40px; line-height: 1.18; color: #fff; letter-spacing: -.005em; }
.ckg-h1:focus { outline: none; }
.ckg-h2 { font-family: var(--head); font-weight: 700; font-size: 28px; line-height: 1.25; color: var(--ink); }
.ckg-lede { margin-top: 22px; font-size: 17px; color: var(--white-70); max-width: 620px; }

/* ---------- Buttons ---------- */
.ckg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--body); font-weight: 600; font-size: 16px; line-height: 1.2;
  padding: 13px 26px; border-radius: 4px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.ckg-btn--lime { background: var(--lime); color: var(--ink); }
.ckg-btn--lime:hover { background: var(--lime-hover); }
.ckg-btn--ghost { color: #fff; border-color: #ffffff40; padding-left: 26px; padding-right: 26px; }
.ckg-btn--ghost:hover { border-color: #fff; }
.ckg-btn--outline { color: #fff; border-color: #ffffff66; }
.ckg-btn--outline:hover { border-color: #fff; background: #ffffff10; }
.ckg-btn--lg { font-size: 17px; padding: 16px 28px; }
.ckg-btn:disabled { opacity: .7; cursor: progress; }
.ckg-link { color: var(--lime); font-weight: 600; font-size: 14px; text-decoration: none; }
.ckg-link:hover { text-decoration: underline; }
.ckg-link--quiet { color: inherit; font-weight: 400; font-size: inherit; }
.ckg-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Hero ---------- */
.ckg-hero { --hp: 58px; background: var(--hero); color: #fff; padding: 0 var(--hp) 28px; min-height: 620px; display: flex; flex-direction: column; }
.ckg[data-state="loading"] .ckg-hero, .ckg[data-state="low"] .ckg-hero, .ckg[data-state="error"] .ckg-hero, .ckg[data-state="rate"] .ckg-hero, .ckg[data-state="missing"] .ckg-hero { min-height: 100vh; }
.ckg[data-report][data-state="low"] .ckg-hero { min-height: 0; }
.ckg-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 0 0; }
.ckg-brand { display: block; font-family: var(--body); font-weight: 600; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-decoration: none; line-height: 1.3; }
.ckg-brand span { display: block; font-size: 10px; font-weight: 500; letter-spacing: .28em; color: #ffffffd9; }
.ckg-top__done { align-items: center; gap: 28px; }
.ckg-top__sent { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--white-70); }
.ckg-top__sent svg { color: var(--lime); font-size: 16px; }
.ckg-top__sent strong { font-weight: 400; color: var(--white-70); }

.ckg-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 70px; align-items: start; padding: 70px 0 40px; flex: 1; }
.ckg-hero__main { min-width: 0; }
.ckg-form { margin-top: 30px; max-width: 520px; }
.ckg-step-label { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.ckg-progress { height: 4px; background: #ffffff26; border-radius: 2px; margin: 12px 0 22px; overflow: hidden; max-width: 520px; }
.ckg-progress span { display: block; height: 100%; background: var(--lime); border-radius: 2px; transition: width .35s ease; }
.ckg-q { display: block; font-family: var(--head); font-weight: 600; font-size: 19px; color: #fff; margin-bottom: 16px; }
.ckg-input { display: block; width: 100%; font: inherit; font-size: 16px; color: #fff; background: var(--input-bg); border: 1px solid #ffffff33; border-radius: 4px; padding: 14px 16px; -webkit-appearance: none; appearance: none; }
.ckg-input::placeholder { color: var(--white-dim); }
.ckg-input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.ckg-input[aria-invalid="true"] { border-color: var(--error-red); box-shadow: 0 0 0 1px var(--error-red); }
.ckg-help { margin-top: 12px; font-size: 13px; color: var(--white-dim); }
.ckg-help--split { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ckg-count { color: var(--lime); font-weight: 600; }
.ckg-count.is-over { color: var(--error-red); }
.ckg-error[hidden], .ckg-status[hidden], .ckg-patience[hidden] { display: none; }
.ckg-error { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 14px; color: var(--error-red); }
.ckg-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 700; }
.ckg-nav { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.ckg-fine { margin-top: 18px; font-size: 13px; color: var(--white-dim); }
.ckg-status { margin-top: 18px; padding: 12px 14px; font-size: 14px; color: #ffd9d2; background: #ff8d7a1f; border-left: 3px solid var(--error-red); }
.ckg .cf-turnstile { margin-top: 18px; }

/* Sample / skeleton table on navy */
.ckg-sample { margin-top: 30px; }
.ckg-sample table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 8px; overflow: hidden; color: var(--ink); font-size: 14px; box-shadow: 0 20px 50px #00000040; }
.ckg-sample th { white-space: nowrap; background: #f5f6f8; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-mid); text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ckg-sample td { padding: 12px 18px; border-bottom: 1px solid #eef0f3; }
.ckg-sample tr:last-child td { border-bottom: 0; }
.ckg-sample th:nth-child(n+2), .ckg-sample td:nth-child(n+2) { text-align: right; }
.ckg-sample td.num { color: var(--num-blue); font-weight: 600; }
.ckg-sample td:last-child { color: var(--text-mid); }
.ckg-sample tr.is-hl td { background: #f1fde3; font-weight: 600; }
.ckg-sample figcaption { margin-top: 14px; font-size: 12px; color: var(--white-dim); }
.ckg[data-state="loading"] .ckg-sample tr.is-hl td { background: none; font-weight: 400; }
.ckg[data-state="loading"] .ckg-sample tr.is-skel span { display: block; color: transparent; border-radius: 6px; background: #e9ecf0; height: 11px; margin-left: auto; width: 60px; animation: ckg-pulse 1.4s ease-in-out infinite; }
.ckg[data-state="loading"] .ckg-sample tr.is-skel td:first-child span { width: 70%; margin-left: 0; }
.ckg[data-state="loading"] .ckg-sample tr.is-skel td.num span { background: #dfe6fb; }
@keyframes ckg-pulse { 50% { opacity: .5; } }

/* Loading */
.ckg-loading .ckg-lede { max-width: 640px; }
.ckg-progress--wide { margin-top: 36px; max-width: 500px; }
.ckg-progress--wide span { width: 8%; }
.ckg-checks { margin-top: 26px; display: grid; gap: 14px; font-size: 15px; }
.ckg-checks li { display: flex; align-items: center; gap: 12px; color: var(--white-dim); }
.ckg-checks li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #ffffff59; }
.ckg-checks li.is-done { color: #ffffffe6; }
.ckg-checks li.is-done::before { border-color: var(--lime); background: radial-gradient(circle, transparent 0) ; content: "✓"; font-size: 10px; line-height: 13px; text-align: center; color: var(--lime); font-weight: 700; }
.ckg-checks li.is-active { color: #fff; font-weight: 600; }
.ckg-checks li.is-active::before { border-color: #fff; border-right-color: transparent; animation: ckg-spin .8s linear infinite; }
@keyframes ckg-spin { to { transform: rotate(360deg); } }
.ckg-patience { margin-top: 22px; font-size: 13px; color: var(--white-70); }

/* Centered status cards (low demand, error, rate limit) */
.ckg-card { width: 100%; max-width: 760px; margin: auto; padding: 44px 60px 40px; text-align: center; background: #ffffff0d; border: 1px solid #ffffff1f; border-radius: 12px; }
.ckg-card:focus { outline: none; }
.ckg[data-state="low"] .ckg-hero > .ckg-card, .ckg[data-state="error"] .ckg-hero > .ckg-card, .ckg[data-state="rate"] .ckg-hero > .ckg-card,
.ckg[data-state="loading"] .ckg-hero > .ckg-card, .ckg[data-state="missing"] .ckg-hero > .ckg-card { margin-top: 110px; margin-bottom: 70px; }
.ckg-card__icon { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #ffffff14; color: var(--lime); font-size: 24px; }
.ckg-card__icon--red { color: var(--error-red); }
.ckg-card__title { margin-top: 22px; font-family: var(--head); font-weight: 700; font-size: 28px; line-height: 1.25; color: #fff; }
.ckg-card__text { margin: 16px auto 0; max-width: 540px; font-size: 15px; line-height: 1.7; color: var(--white-70); }
.ckg-card .ckg-ctas { margin-top: 26px; }
.ckg-card__foot { margin-top: 18px; font-size: 13px; color: var(--white-dim); }
.ckg-card__foot a { color: inherit; }
.ckg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.ckg-chips li { padding: 7px 16px; border-radius: 999px; background: #ffffff14; font-size: 14px; color: #ffffffe6; }
.ckg-chips b { margin-left: 8px; color: var(--lime); font-weight: 600; }

.ckg-powered { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--white-dim); padding-top: 10px; }
.ckg-powered img { width: 102px; }

/* ---------- Results ---------- */
.ckg-res-hero { padding: 46px 0 44px; margin: 0 calc(-1 * var(--hp)); } /* full width, so it lines up with .ckg-wrap below */
.ckg[data-state="results"] .ckg-hero { min-height: 0; padding-bottom: 0; }
.ckg-res-hero .ckg-h1 { max-width: 800px; font-size: 38px; }
.ckg-insight { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; font-size: 15px; color: #ffffffe6; }
.ckg-insight svg { color: var(--lime); font-size: 18px; margin-top: 2px; }
.ckg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.ckg-stat { padding: 18px 20px; background: #ffffff0f; border: 1px solid #ffffff1f; border-radius: 8px; min-width: 0; }
.ckg-stat dt { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--white-70); }
.ckg-stat .v { margin-top: 6px; font-family: var(--head); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--lime); overflow-wrap: anywhere; }
.ckg-stat .s { margin-top: 6px; font-size: 12px; color: var(--white-70); }
.ckg-res-hero__sent { display: none; }

.ckg-breakdown { padding: 44px 0 46px; background: var(--light); }
.ckg-bd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ckg-bd-note { font-size: 13px; color: var(--text-mid); }
.ckg-comp { background: #fff; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 18px; overflow: hidden; }
.ckg-comp__head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; text-align: left; }
.ckg-comp__name { font-family: var(--head); font-weight: 700; font-size: 19px; color: var(--ink); }
.ckg-comp__vol { font-weight: 600; font-size: 14px; color: var(--num-blue); }
.ckg-comp__meta { font-size: 13px; color: var(--text-mid); }
.ckg-share { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-mid); }
.ckg-bar { display: block; width: 120px; height: 6px; border-radius: 3px; background: #e9ecf0; overflow: hidden; }
.ckg-bar i { display: block; height: 100%; min-width: 4px; background: var(--lime); border-radius: 3px; }
.ckg-chev { color: var(--ink); font-size: 14px; transition: transform .15s; }
.ckg-comp.is-open > .ckg-comp__head .ckg-chev, .ckg-more.is-open .ckg-chev { transform: rotate(90deg); }
.ckg-comp.is-empty .ckg-comp__name { color: #98a1ae; }
.ckg-flag { margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: #8a93a0; }

/* Accordion list (more than 4 competitors) */
.ckg-acc { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.ckg-acc .ckg-comp { border: 0; border-top: 1px solid var(--border); border-radius: 0; margin: 0; }
.ckg-acc .ckg-comp:first-child { border-top: 0; }
.ckg-acc .ckg-comp__vol { margin-left: auto; }
.ckg-acc .ckg-share { margin-left: 0; min-width: 210px; justify-content: flex-end; }
.ckg-acc .ckg-share .ckg-bar { width: 160px; }
.ckg-acc .ckg-share b { width: 36px; text-align: right; }

.ckg-kw { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.ckg-kw th:nth-child(2) { width: 160px; } .ckg-kw th:nth-child(3) { width: 100px; } .ckg-kw th:nth-child(4) { width: 220px; } .ckg-kw th:nth-child(6) { width: 0; padding: 0; }
.ckg-kw td.kw { overflow-wrap: anywhere; }
.ckg-kw th { background: #f5f6f8; font-size: 11px; font-weight: 600; color: var(--text-mid); text-align: left; padding: 10px 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ckg-kw td { padding: 11px 18px; border-bottom: 1px solid #eef0f3; color: var(--ink); }
.ckg-kw th:nth-child(n+2):not(:last-child), .ckg-kw td:nth-child(n+2):not(:last-child) { text-align: right; }
.ckg-kw th:last-child, .ckg-kw td:last-child { text-align: right; width: 110px; }
.ckg-kw .vol { color: var(--num-blue); font-weight: 600; }
.ckg-kw .cpc { color: var(--text-mid); }
.ckg-kw .comp { color: var(--text-mid); white-space: nowrap; }
.ckg-kw tr.is-zero td { color: #8a93a0; }
.ckg-kw tr.is-zero .vol { color: #8a93a0; font-weight: 400; }
.ckg-lvl { display: inline-block; width: 34px; text-align: left; margin-left: 8px; font-weight: 600; font-size: 12px; }
.ckg-lvl--low { color: #3f8b2e; } .ckg-lvl--med { color: #b4780f; } .ckg-lvl--high { color: #c23a2b; }
.ckg-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ckg-tag--organic { background: #e9fbce; color: #3f6b11; }
.ckg-tag--ppc { background: #ffe8db; color: #b4500f; }
.ckg-tag--warn { background: #ffe8db; color: #b4500f; font-weight: 500; }
.ckg-tag--ok { background: #e9fbce; color: #3f6b11; font-weight: 500; }
.ckg-more { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 18px; background: #f9fafb; font-size: 12px; font-weight: 600; color: var(--text-mid); text-align: left; }
.ckg-more:hover { color: var(--ink); }
.ckg-more .ckg-chev { font-size: 12px; color: inherit; }
.ckg-note { padding: 12px 18px 16px; font-size: 13px; color: var(--text-mid); }

.ckg-own { display: grid; grid-template-columns: 250px 1fr; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: 8px; overflow: hidden; }
.ckg-own.is-clear { border-left-color: #8fd43a; }
.ckg-own__stat { display: flex; flex-direction: column; justify-content: center; padding: 26px 26px; background: #fff4ec; }
.ckg-own.is-clear .ckg-own__stat { background: #f4fde8; }
.ckg-own__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #b4500f; }
.ckg-own.is-clear .ckg-own__eyebrow { color: #3f6b11; }
.ckg-own__num { margin-top: 8px; font-family: var(--head); font-weight: 700; font-size: 46px; line-height: 1; color: var(--ink); }
.ckg-own__unit { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-mid); overflow-wrap: anywhere; }
.ckg-own__body { padding: 24px 28px; align-self: center; }
.ckg-own__body h3 { margin-top: 10px; font-family: var(--head); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); }
.ckg-own__body p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-mid); }
.ckg-own__body .ckg-own__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef0f3; font-size: 13px; }

.ckg-howto { background: var(--slate); color: #fff; padding: 46px 0 50px; }
.ckg-howto .ckg-h2 { color: #fff; }
.ckg-howto__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.ckg-howto__card { padding: 22px 20px; background: #ffffff0d; border: 1px solid #ffffff1a; border-radius: 8px; }
.ckg-howto__card svg { color: var(--lime); font-size: 20px; }
.ckg-howto__card h3 { margin-top: 12px; font-family: var(--head); font-weight: 600; font-size: 16px; color: #fff; }
.ckg-howto__card p { margin-top: 8px; font-size: 13px; color: var(--white-70); }
.ckg-howto__card .ckg-howto__stat { margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--lime); }

.ckg-cta { background: var(--hero); color: #fff; text-align: center; padding: 56px 20px 32px; }
.ckg-cta .ckg-h2 { color: #fff; font-size: 30px; }
.ckg-cta .ckg-ctas { margin-top: 26px; }
.ckg-cta__foot { margin-top: 18px; font-size: 13px; color: var(--white-dim); }
.ckg-cta .ckg-powered { margin-top: 30px; }

/* ---------- Report page: who owns the results, who's bidding, share ---------- */
.ckg-form .ckg-q + .ckg-input + .ckg-error + .ckg-help + .ckg-q { margin-top: 26px; }
.ckg-stat.is-wait .v { color: var(--white-70); font-size: 18px; animation: ckg-pulse 1.4s ease-in-out infinite; }
.ckg-serp-sec { padding-bottom: 6px; }
.ckg-serp-sec + .ckg-breakdown:not(.ckg-serp-sec) { padding-top: 40px; }
.ckg-serp-sec:last-of-type, .ckg-serp-sec + .ckg-cta { margin-top: 0; }
.ckg[data-state="low"] .ckg-serp-sec + .ckg-serp-sec { padding-bottom: 46px; }
.ckg-panel { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ckg-serp { width: 100%; border-collapse: collapse; font-size: 14px; }
.ckg-serp th { background: #f5f6f8; font-size: 11px; font-weight: 600; color: var(--text-mid); text-align: left; padding: 10px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ckg-serp td { padding: 13px 18px; border-bottom: 1px solid #eef0f3; color: var(--ink); vertical-align: middle; }
.ckg-serp tr:last-child td { border-bottom: 0; }
.ckg-serp .kw { font-weight: 600; overflow-wrap: anywhere; }
.ckg-serp .vol { color: var(--num-blue); font-weight: 600; white-space: nowrap; }
.ckg-serp .cpc { color: var(--text-mid); white-space: nowrap; }
.ckg-serp .who { color: var(--text-mid); }
.ckg-serp .who b { color: var(--ink); font-weight: 600; }
.ckg-serp .you { white-space: nowrap; }
.ckg-none { color: #98a1ae; }
.ckg-ai { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-mid); white-space: nowrap; }
.ckg-ai.is-you { border-color: #cdeea0; background: #f1fde3; color: #3f6b11; }
/* Column explanations */
.ckg-tip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 6px; padding: 0; border: 1px solid #c3c9d2; border-radius: 50%; background: transparent; color: #8a93a0; font: italic 600 10px/1 Georgia, serif; vertical-align: 1px; cursor: help; }
.ckg-tip:hover, .ckg-tip:focus-visible { border-color: var(--ink); color: var(--ink); outline: none; }
.ckg-tip:focus-visible { box-shadow: 0 0 0 2px #3a5bc755; }
.ckg-tipbox { position: fixed; z-index: 1000; max-width: 280px; padding: 12px 14px; border-radius: 6px; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 24px #1d2a4d26; font-family: var(--body); font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink); text-align: left; pointer-events: none; }
.ckg-tipbox[hidden] { display: none; }

.ckg-pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ckg-pill--ok { background: #e9fbce; color: #3f6b11; }
.ckg-pill--mid { background: #fff1d6; color: #8a5a00; }
.ckg-pill--bad { background: #ffe3de; color: #b02a1a; }
.ckg-pill--none { background: #eef0f3; color: #5a6577; }
.ckg-foot { margin-top: 8px; font-size: 13px; color: var(--text-mid); }
.ckg-foot:empty { display: none; }
.ckg-story { margin-top: 28px; padding: 26px 28px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--lime); border-radius: 8px; }
.ckg-story__title { font-family: var(--head); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mid); }
.ckg-story__quote { margin: 12px 0 0; font-family: var(--head); font-weight: 600; font-size: 22px; line-height: 1.4; color: var(--ink); }
.ckg-story__by { margin-top: 8px; font-size: 13px; color: var(--text-mid); }
.ckg-story__them { margin-top: 14px; font-size: 15px; color: var(--ink); }
.ckg-story__them:empty, .ckg-story__by:empty { display: none; }
.ckg-plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: plan; }
.ckg-plan li { counter-increment: plan; padding: 20px 22px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.ckg-plan li::before { content: counter(plan); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--ink); font-family: var(--head); font-weight: 700; font-size: 13px; }
.ckg-plan b { display: block; margin-top: 12px; font-family: var(--head); font-weight: 600; font-size: 17px; color: var(--ink); }
.ckg-eyebrow { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.ckg-plan__lead { display: none; }
/* Report with demand: the plan continues the dark "how to" band (the plays, then where to start). */
.ckg[data-state="results"] [data-plan-sec] { background: var(--slate); color: #fff; padding-top: 0; }
.ckg[data-state="results"] [data-plan-sec] .ckg-h2 { color: #fff; }
.ckg[data-state="results"] [data-plan-sec] .ckg-bd-note { color: var(--white-70); }
.ckg[data-state="results"] [data-plan-sec] .ckg-plan__foot { color: var(--white-70); }
.ckg[data-state="results"] [data-plan-sec] .ckg-plan__foot a { color: var(--lime); }
.ckg[data-state="results"] .ckg-plan__lead { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; padding-top: 30px; border-top: 1px solid #ffffff1a; font-size: 17px; font-weight: 500; color: #fff; }
.ckg[data-state="results"] .ckg-plan__lead::after { content: "↓"; color: var(--lime); font-weight: 700; }
.ckg-plan__foot { margin-top: 24px; font-size: 15px; color: var(--text-mid); }
.ckg-plan__foot a { color: var(--ink); font-weight: 600; }
.ckg-serp-sec[data-plan-sec] { padding-bottom: 50px; }
.ckg-plan span { display: block; margin-top: 6px; font-size: 14px; color: var(--text-mid); }
.ckg-serp tr.is-skel span { display: block; height: 11px; width: 70%; border-radius: 6px; background: #e9ecf0; animation: ckg-pulse 1.4s ease-in-out infinite; }
.ckg-line { margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--ink); }
.ckg-line:empty { display: none; }
.ckg-gapcta { margin-top: 14px; padding: 14px 18px; border-left: 3px solid var(--lime); border-radius: 0 6px 6px 0; background: #fff; font-size: 15px; color: var(--ink); }
.ckg-gapcta:empty { display: none; }
.ckg-gapcta a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: #7fc71f; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ckg-top__call { padding: 9px 16px; font-size: 14px; }
.ckg-pin { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: #12204af2; backdrop-filter: blur(6px); border-bottom: 1px solid #ffffff1f; transform: translateY(-100%); transition: transform .2s ease; display: none; }
.ckg[data-state="results"] .ckg-pin { display: block; }
.ckg-pin.is-on { transform: none; }
.ckg-pin .ckg-pin__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.ckg-pin__name { font-size: 14px; color: var(--white-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckg-pin__name strong { color: #fff; font-weight: 600; }
.ckg-pin .ckg-btn { padding: 9px 18px; font-size: 14px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ckg-pin { transition: none; } }
.ckg-sendbox { max-width: 520px; margin: 38px auto 0; padding: 24px 26px; text-align: left; background: #ffffff0d; border: 1px solid #ffffff1f; border-radius: 8px; }
.ckg-share__label { display: block; font-family: var(--head); font-weight: 600; font-size: 17px; color: #fff; }
.ckg-share__help { margin-top: 6px; font-size: 13px; color: var(--white-70); }
.ckg-share__row { display: flex; gap: 10px; margin-top: 16px; }
.ckg-share__row .ckg-input { flex: 1; min-width: 0; }
.ckg-share__status { margin-top: 12px; font-size: 14px; color: var(--lime); }
.ckg-share__status.is-bad { color: var(--error-red); }
.ckg-sendbox .cf-turnstile { margin-top: 12px; }
.ckg-sendbox .cf-turnstile:empty { margin-top: 0; }
.ckg-cta__foot .ckg-link--quiet { text-decoration: underline; }

/* ---------- Landing content ---------- */
.ckg-trusted { background: #fff; padding: 46px 20px 50px; text-align: center; }
.ckg-trusted__title { font-family: var(--head); font-weight: 600; font-size: 17px; color: var(--ink); }
.ckg-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 70px; margin-top: 26px; }
.ckg-logos img { width: 120px; height: auto; }

.ckg-videos { background: var(--light); padding: 70px 0 70px; }
.ckg-videos .ckg-h2 { max-width: 640px; margin: 0 auto; font-size: 30px; }
.ckg-videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.ckg-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--slate); }
.ckg-video__play, .ckg-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ckg-video__play img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ckg-video__play:hover img { transform: scale(1.03); }
.ckg-video__play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2a4d' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 7l8 5-8 5z'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 4px 14px #0000004d; transition: transform .15s; }
.ckg-video__play:hover::after { transform: scale(1.08); }
.ckg-video__kicker { margin-top: 18px; font-family: var(--head); font-weight: 600; font-size: 15px; color: var(--orange); }
.ckg-video__text { margin-top: 10px; font-size: 14px; color: var(--text-mid); }

.ckg-quote { background: var(--slate); color: #fff; text-align: center; padding: 60px 20px 64px; }
.ckg-quote img { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto; object-fit: cover; }
.ckg-quote blockquote { max-width: 760px; margin: 26px auto 0; font-style: italic; font-size: 17px; line-height: 1.75; color: #ffffffeb; }
.ckg-quote__who { margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--orange); }

.ckg-faq { background: var(--light); padding: 64px 0 76px; }
.ckg-faq__list { margin-top: 32px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.ckg-faq details + details { border-top: 1px solid var(--border); }
.ckg-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 26px; cursor: pointer; list-style: none; }
.ckg-faq summary::-webkit-details-marker { display: none; }
.ckg-faq summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); margin-top: -4px; transition: transform .15s; }
.ckg-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.ckg-faq summary h3 { font-family: var(--head); font-weight: 600; font-size: 17px; color: #2f4bb0; }
.ckg-faq__a { padding: 0 26px 24px; font-size: 14px; color: var(--text-mid); }
.ckg-faq__a p + p, .ckg-faq__a p + ul, .ckg-faq__a ul + p { margin-top: 12px; }
.ckg-faq__a ul { margin-top: 12px; display: grid; gap: 8px; }
.ckg-faq__a li { position: relative; padding-left: 22px; }
.ckg-faq__a li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 600; }
.ckg-faq__a a { color: #2f4bb0; }
.ckg-faq__note { font-size: 13px; }

.ckg-footer { background: var(--slate); color: #fff; text-align: center; padding: 48px 20px 40px; }
.ckg-footer img { width: 178px; margin: 0 auto; }
.ckg-footer p { margin-top: 16px; font-size: 14px; color: var(--white-70); }
.ckg-footer .ckg-footer__legal { margin-top: 12px; font-size: 12px; color: var(--white-dim); }
.ckg-footer a { color: inherit; text-decoration: none; }
.ckg-footer a:hover { text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .ckg-howto__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ckg-hero { --hp: 32px; }
  .ckg-hero__grid { grid-template-columns: 1fr; gap: 10px; padding-top: 50px; }
  .ckg-sample { max-width: 560px; }
  .ckg-wrap { padding: 0 32px; }
  .ckg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile (390px frames) ---------- */
@media (max-width: 767px) {
  .ckg-hero { --hp: 16px; padding-bottom: 24px; min-height: 0; }
  .ckg-top { padding-top: 22px; }
  .ckg-top__done { gap: 12px; }
  .ckg-top__sent { display: none; }
  .ckg-top__call { display: none; }
  .ckg-pin__name { display: none; }
  .ckg-pin .ckg-pin__in { padding-top: 8px; padding-bottom: 8px; }
  .ckg-pin .ckg-btn { width: 100%; }
  .ckg-hero__grid { padding: 34px 0 24px; }
  .ckg-h1, .ckg-res-hero .ckg-h1 { font-size: 27px; line-height: 1.22; }
  .ckg-lede { font-size: 15px; margin-top: 16px; }
  .ckg-form { margin-top: 24px; }
  .ckg-sample { display: none; }
  .ckg[data-state="form"] .ckg-sample { display: block; margin-top: 34px; }
  .ckg-sample td, .ckg-sample th { padding: 10px 12px; font-size: 13px; }
  .ckg-nav .ckg-btn { flex: 1; }
  .ckg-btn--lg { width: 100%; }
  .ckg-ctas { flex-direction: column; }
  .ckg-card { padding: 32px 20px 28px; }
  .ckg[data-state="low"] .ckg-hero > .ckg-card, .ckg[data-state="error"] .ckg-hero > .ckg-card, .ckg[data-state="rate"] .ckg-hero > .ckg-card { margin-top: 40px; margin-bottom: 40px; }
  .ckg-card__title { font-size: 23px; }
  .ckg-wrap { padding: 0 16px; }
  .ckg-insight { font-size: 14px; }
  .ckg-stats { gap: 10px; }
  .ckg-stat { padding: 14px; }
  .ckg-stat .s { display: none; }
  .ckg-stat .v { font-size: 19px; }
  .ckg-res-hero__sent { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--white-70); }
  .ckg-res-hero__sent svg { color: var(--lime); }
  .ckg-res-hero__sent strong { font-weight: 400; }
  .ckg-breakdown { padding-top: 30px; }
  .ckg-bd-note { display: none; }
  .ckg-h2 { font-size: 22px; }

  /* Competitor header: name + volume, then the share bar on its own line */
  .ckg-comp__head { flex-wrap: wrap; gap: 6px 10px; }
  .ckg-comp > .ckg-comp__head .ckg-comp__vol { margin-left: auto; }
  .ckg-comp__head .ckg-share { width: 100%; margin-left: 0; }
  .ckg-comp__head .ckg-share .ckg-bar { flex: 1; width: auto; }
  .ckg-acc .ckg-share { min-width: 0; }
  .ckg-acc .ckg-share .ckg-bar { width: auto; }
  .ckg-comp__meta { display: none; }
  .ckg-flag { margin-left: 0; }

  /* Tables become stacked keyword cards */
  .ckg-kw thead { display: none; }
  .ckg-kw, .ckg-kw tbody { display: block; }
  .ckg-kw tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 16px; border-top: 1px solid #eef0f3; }
  .ckg-kw td { display: block; padding: 0; border: 0; text-align: left !important; width: auto !important; }
  .ckg-kw td.kw { grid-column: 1; font-weight: 600; }
  .ckg-kw td.tag { grid-column: 2; grid-row: 1; }
  .ckg-kw td.vol, .ckg-kw td.cpc, .ckg-kw td.comp { grid-column: 1 / -1; display: inline; font-size: 13px; }
  .ckg-kw tr { grid-template-areas: none; }
  .ckg-kw td.line { grid-column: 1 / -1; font-size: 13px; color: var(--text-mid); }
  .ckg-kw td.line b { color: var(--num-blue); font-weight: 600; }
  .ckg-kw td.vol, .ckg-kw td.cpc, .ckg-kw td.comp { display: none; }
  .ckg-own { grid-template-columns: 1fr; }
  .ckg-own__stat { padding: 20px 18px; }
  .ckg-own__num { font-size: 38px; }
  .ckg-own__body { padding: 18px 18px 20px; }
  .ckg-own__body h3 { font-size: 18px; }

  /* Ownership / bidding tables become stacked cards */
  .ckg-serp thead { display: none; }
  .ckg-serp, .ckg-serp tbody { display: block; }
  .ckg-serp tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 13px 16px; border-bottom: 1px solid #eef0f3; }
  .ckg-serp tr:last-child { border-bottom: 0; }
  .ckg-serp td { display: block; padding: 0; border: 0; font-size: 13px; }
  .ckg-serp td.kw { font-size: 14px; }
  .ckg-serp td.who { grid-column: 1 / -1; }
  .ckg-serp td.cpc { grid-column: auto; }
  .ckg-serp td.you { grid-column: 1 / -1; }
  .ckg-ai { margin: 6px 0 0; display: table; }
  .ckg-aitab tr { grid-template-columns: repeat(3, 1fr); }
  .ckg-aitab td.kw { grid-column: 1 / -1; }
  .ckg-aitab td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--text-mid); }
  .ckg-aitab .ckg-pill { white-space: normal; }
  .ckg-story { padding: 20px 18px; }
  .ckg-story__quote { font-size: 18px; }
  .ckg-plan { grid-template-columns: 1fr; }
  .ckg-line { font-size: 14px; }
  .ckg-sendbox { padding: 20px 16px; }
  .ckg-share__row { flex-direction: column; }

  .ckg-howto__grid, .ckg-videos__grid { grid-template-columns: 1fr; }
  .ckg-videos { padding: 46px 0; }
  .ckg-videos .ckg-h2 { font-size: 22px; }
  .ckg-logos { gap: 18px 34px; }
  .ckg-logos img { width: 96px; }
  .ckg-quote blockquote { font-size: 15px; }
  .ckg-faq summary { padding: 18px; }
  .ckg-faq summary h3 { font-size: 15px; }
  .ckg-faq__a { padding: 0 18px 20px; }
  .ckg-cta .ckg-h2 { font-size: 24px; }
}
@media (min-width: 768px) { .ckg-kw td.line { display: none; } }
@media (prefers-reduced-motion: reduce) { .ckg *, .ckg *::before { animation: none !important; transition: none !important; } }