/* Free Google Ads check-up. Follows "Free Google Ads Check-up.dc.html" from
   Claude Design; every color, font, radius and shadow comes from the site
   tokens in /styles.css. The package's reference/src/checkup.css variables map as:
   --bg → --color-bg, --surface → --color-surface, --card → --color-neutral-100,
   --text → --color-text, --muted → --color-neutral-700, --pine → --color-accent,
   --pine-deep → --color-accent-800, --marigold → --color-accent-2,
   --marigold-soft → --color-accent-2-100/200, --brick → --color-danger,
   --line → --color-neutral-200/300, --serif → --font-heading, --sans → --font-body.
   Header, footer and the lead form live in /assets/site.css. */

.ck-view[hidden] { display: none !important; }

.ck-view { max-width: 1200px; margin: 0 auto; }

/* — intake — */
.ck-intake {
  padding: clamp(28px, 5vw, 64px) clamp(16px, 5vw, 56px) clamp(48px, 7vw, 96px);
  display: flex; flex-direction: column; gap: 28px;
}
.ck-intro { max-width: 760px; }
.ck-badge { background: var(--color-accent-900); color: var(--color-accent-100); font-size: 13px; font-weight: 600; padding: 6px 14px; margin-bottom: 20px; }
.ck-intro h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.05; margin: 0 0 18px; text-wrap: balance; }
.ck-lede { font-size: 18px; color: var(--color-neutral-800); margin: 0 0 14px; }
.ck-points { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ck-points li { display: flex; gap: 10px; }
.ck-points li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); margin-top: 9px; }
.ck-privacy { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; font-weight: 600; color: var(--color-accent-800); }
.ck-privacy svg { flex: none; }

.ck-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.ck-slot {
  border-radius: 28px; padding: 22px; border: 2px solid var(--color-neutral-300); background: var(--color-neutral-100);
  display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, background .2s;
}
.ck-slot.ok { border-color: var(--color-accent); background: var(--color-accent-100); }
.ck-slot-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ck-slot-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface); color: var(--color-neutral-700); display: grid; place-items: center; }
.ck-slot.ok .ck-slot-icon { background: var(--color-accent); color: var(--color-bg); }
.ck-slot-n { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--color-neutral-700); }
.ck-slot-t { font-family: var(--font-heading); font-size: 21px; line-height: 1.2; margin: 0; }
.ck-slot-sub { font-size: 15px; font-weight: 600; color: var(--color-neutral-800); }
.ck-slot-status { font-size: 14px; color: var(--color-neutral-700); min-height: 44px; overflow-wrap: anywhere; }
.ck-slot.ok .ck-slot-file { font-weight: 700; color: var(--color-text); }
.ck-slot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.ck-slot-actions .btn { white-space: nowrap; font-size: 14px; padding: 8px 14px; }
.ck-ghost-strong { font-family: var(--font-body); font-weight: 700; color: var(--color-accent-700); }
.ck-ghost-mute { font-family: var(--font-body); font-weight: 600; color: var(--color-neutral-700); }

.ck-dropwrap { display: flex; flex-direction: column; gap: 12px; }
.ck-drop {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  border: 2px dashed var(--color-accent-400); border-radius: 32px; padding: clamp(28px, 4vw, 44px) 20px;
  background: var(--color-accent-100); cursor: pointer; transition: background .15s, border-color .15s;
}
.ck-drop:hover, .ck-drop.over { background: var(--color-accent-200); border-color: var(--color-accent); }
.ck-drop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.ck-drop-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: var(--color-bg); display: grid; place-items: center; }
.ck-drop-title { font-family: var(--font-heading); font-size: 22px; line-height: 1.2; }
.ck-drop-sub { font-size: 14px; color: var(--color-neutral-700); }
.ck-errors { display: flex; flex-direction: column; gap: 8px; }
.ck-errors:empty { display: none; }
.ck-error {
  display: flex; gap: 10px; align-items: center; background: var(--color-danger-50); color: var(--color-danger);
  border-radius: 18px; padding: 10px 16px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere;
}
.ck-error svg { flex: none; }
.ck-links { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.ck-link { white-space: nowrap; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--color-accent-700); }
.ck-mid { white-space: nowrap; font-size: 15px; padding: 10px 18px; }

.ck-settings { background: var(--color-surface); border-radius: 32px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 22px; }
.ck-settings-title { font-size: 22px; margin: 0; }
.ck-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 20px 24px; align-items: start; }
.ck-fields .field > label { font-size: 14px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.ck-fields .input { min-height: 46px; font-size: 15px; background: var(--color-neutral-100); }
.ck-hint { display: block; font-size: 13px; line-height: 1.45; color: var(--color-neutral-700); margin-top: 6px; }
.ck-seg { display: flex; background: var(--color-neutral-100); border-radius: 999px; padding: 4px; }
.ck-seg button {
  flex: 1; border: 0; cursor: pointer; border-radius: 999px; padding: 10px 8px;
  font: 600 14px var(--font-body); background: transparent; color: var(--color-text);
}
.ck-seg button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.ck-seg button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-bg); }
.ck-run { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ck-big { white-space: nowrap; font-size: 17px; padding: 16px 28px; }
.ck-run-hint { font-size: 14px; color: var(--color-neutral-700); }
.ck-err { color: var(--color-danger); font-size: 14px; font-weight: 600; }
.ck-err:empty { display: none; }

/* — working — */
.ck-working { padding: clamp(80px, 12vw, 160px) 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.ck-working-title { font-family: var(--font-heading); font-size: 28px; }
.ck-bar { width: 100%; max-width: 360px; height: 12px; border-radius: 999px; background: var(--color-surface); overflow: hidden; }
.ck-bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--color-accent); transition: width .15s; }
.ck-working-line { font-size: 15px; color: var(--color-neutral-700); }

/* — export panel (native <dialog>: focus trap and Esc come free) — */
.ck-panel {
  margin: 0 0 0 auto; padding: 0; border: 0; height: 100%; max-height: 100%; width: min(580px, 100%); max-width: 100%;
  background: var(--color-bg); color: var(--color-text); border-radius: 32px 0 0 32px; box-shadow: var(--shadow-lg);
}
.ck-panel::backdrop { background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }
.ck-panel-inner { padding: clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: 18px; min-height: 100%; }
.ck-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ck-panel-head h3 { font-size: clamp(24px, 3vw, 30px); margin: 0; }
.ck-close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--color-surface); cursor: pointer; display: grid; place-items: center; color: var(--color-text); }
.ck-close:hover { background: var(--color-neutral-300); }
.ck-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ck-steps li { display: flex; gap: 12px; align-items: flex-start; }
.ck-steps li > span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent); color: var(--color-bg); display: grid; place-items: center; font-size: 13px; font-weight: 700; margin-top: -1px; }
.ck-prompts { display: flex; flex-direction: column; gap: 12px; }
.ck-prompt { background: var(--color-surface); border-radius: 24px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ck-prompt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ck-prompt-t { font-weight: 700; font-size: 15px; }
.ck-prompt-sub { font-size: 13px; color: var(--color-neutral-700); }
.ck-prompt-head .btn { white-space: nowrap; font-size: 13px; padding: 7px 14px; }
.ck-prompt-text { background: var(--color-neutral-100); border-radius: 16px; padding: 12px 14px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-neutral-800); overflow-wrap: anywhere; user-select: all; }
.ck-panel-note { background: var(--color-accent-2-100); color: var(--color-accent-2-900); border-radius: 20px; padding: 14px 18px; margin: 0; font-size: 14px; }
.ck-panel .btn-primary { align-self: flex-start; }

/* — results — */
.ck-results {
  padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 56px) clamp(48px, 7vw, 96px);
  display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px);
}
.ck-res-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.ck-res-head h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; margin: 0 0 8px; }
.ck-res-head h1:focus { outline: none; }
.ck-back { white-space: nowrap; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--color-accent-700); padding: 6px 0; margin-bottom: 8px; }
.ck-meta { font-size: 15px; color: var(--color-neutral-700); }
.ck-sample-tag { font-size: 12px; font-weight: 600; background: var(--color-surface); color: var(--color-neutral-700); padding: 6px 12px; }
.ck-jumps { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-jumps a { font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.ck-jumps a:hover { background: var(--color-neutral-300); }

.ck-hero {
  background: var(--color-accent-800); color: var(--color-neutral-100);
  border-radius: clamp(28px, 4vw, 40px); padding: clamp(24px, 4vw, 44px);
  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end;
}
.ck-hero-main { flex: 1 1 420px; min-width: 0; }
.ck-hero-k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-200); }
.ck-hero .big { font-family: var(--font-heading); font-size: clamp(56px, 9vw, 104px); line-height: 1; margin: 12px 0 16px; color: var(--color-accent-2-300); overflow-wrap: anywhere; }
.ck-hero p { font-size: 17px; color: var(--color-accent-100); margin: 0; max-width: 600px; text-wrap: pretty; }
.ck-hero-parts { flex: 0 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ck-hero-part { background: var(--color-accent-700); border-radius: 20px; padding: 14px 18px; display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }

.ck-teaser {
  border: 2px solid var(--color-accent-2-500); background: var(--color-neutral-100); border-radius: 32px;
  padding: clamp(22px, 3.5vw, 36px); display: flex; flex-wrap: wrap; gap: 20px 40px;
}
.ck-teaser-main { flex: 1 1 440px; min-width: 0; }
.ck-teaser-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ck-teaser-head h2 { font-size: clamp(24px, 3vw, 30px); margin: 0; }
.ck-lockbadge { width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent-2-200); color: var(--color-accent-2-800); display: grid; place-items: center; flex: none; }
.ck-teaser p { font-size: 16px; color: var(--color-neutral-800); margin: 0 0 10px; max-width: 680px; text-wrap: pretty; }
.ck-teaser-ctas { flex: 0 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ck-teaser-ctas .btn { font-size: 16px; padding: 14px 22px; }
.ck-teaser-note { font-size: 13px; color: var(--color-neutral-700); text-align: center; }

.ck-sec { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; scroll-margin-top: 80px; }
.ck-sec-head { max-width: 760px; }
.ck-sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 6px; }
.ck-sec-head p { font-size: 16px; color: var(--color-neutral-700); margin: 0; }

.ck-callout { background: var(--color-accent-2-100); border-radius: 24px; padding: 18px 22px; display: flex; gap: 14px; align-items: flex-start; }
.ck-callout-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent-2-300); color: var(--color-accent-2-900); display: grid; place-items: center; }
.ck-callout p { min-width: 0; margin: 0; font-size: 15px; color: var(--color-neutral-900); text-wrap: pretty; }

.ck-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.ck-card {
  flex: 1 1 100%; min-width: 0; background: var(--color-neutral-100); border-radius: 28px;
  padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm);
}
.ck-card.half { flex-basis: 420px; }
.ck-card-title { font-family: var(--font-heading); font-size: 19px; line-height: 1.25; margin: 0; padding: 0 8px; }
.ck-card-intro, .ck-card-note { font-size: 14px; color: var(--color-neutral-700); margin: 0; padding: 0 8px; }
.ck-card .empty { color: var(--color-neutral-700); font-style: italic; font-size: 14px; margin: 0; padding: 0 8px; }
.ck-fitnote { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-accent-2-800); padding: 2px 8px 0; margin: 0; }
.ck-fitnote svg { flex: none; }

.tw { overflow-x: auto; }
.tw:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 12px; }
.tw table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tw th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--color-neutral-700); padding: 8px; white-space: nowrap;
}
.tw td { padding: 10px 8px; border-top: 1px solid var(--color-neutral-200); vertical-align: middle; font-variant-numeric: tabular-nums; }
.tw td:first-child { font-weight: 600; min-width: 150px; }
.tw td.n, .tw th.n { text-align: right; white-space: nowrap; }
.tw td.url { word-break: break-all; min-width: 200px; }
.tw td.cap { text-transform: capitalize; }
.tw th.fit { color: var(--color-accent-2-800); }

.pill { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pill-good { background: var(--color-accent-200); color: var(--color-accent-800); }
.pill-bad { background: var(--color-danger-100); color: var(--color-danger); }
.pill-mute { background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* AI fit: blurred placeholder bars only. The free tool never scores anything. */
.locked { width: 72px; }
.fitbar { display: flex; align-items: center; height: 20px; width: 64px; border-radius: 999px; background: var(--color-accent-2-100); padding: 0 6px; cursor: help; }
.fitbar span { display: block; height: 8px; border-radius: 999px; background: var(--color-accent-2-500); filter: blur(2.5px); opacity: .75; }
.fitbar .w0 { width: 52px; } .fitbar .w1 { width: 34px; } .fitbar .w2 { width: 60px; } .fitbar .w3 { width: 44px; }
.fitbar .w0, .fitbar .w2 { max-width: 100%; }

.ck-cta {
  background: var(--color-accent-200); border-radius: clamp(28px, 4vw, 48px); padding: clamp(28px, 5vw, 64px);
  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; margin-top: 12px;
}
.ck-cta-main { flex: 1 1 440px; min-width: 0; }
.ck-cta h2 { font-size: clamp(30px, 4vw, 48px); margin: 0 0 12px; color: var(--color-accent-900); }
.ck-cta p { font-size: 17px; color: var(--color-accent-900); margin: 0; max-width: 600px; text-wrap: pretty; }
.ck-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ck-cta-row .btn { white-space: nowrap; font-size: 17px; padding: 16px 26px; }
.ck-cta .btn-light { background: var(--color-neutral-100); color: var(--color-accent-900); }
.ck-cta .btn-light:hover { background: var(--color-accent-100); }

@media (max-width: 600px) {
  .ck-cta-row .btn, .ck-teaser-ctas .btn { flex: 1 1 100%; white-space: normal; }
  .ck-panel { border-radius: 0; }
}