/* ═══════════════════════════════════════════════
   Castquill — profile.css
   The creator's own profile page: /c/<slug>.

   v2 — the board. The page is a set of tiles a
   creator arranges rather than one column: a
   portrait beside a name tile, the intro video
   beside a pull quote, then reach, shots, what a
   brand gets back, who's watching, and the work.

   Seven choices reach this file, and each arrives
   in exactly one way:
     • theme  → data-theme  (fixed list, server-side)
     • frame  → data-frame  (fixed list, server-side)
     • accent → --cp-accent (validated #rrggbb)
     • corners, spacing → --cp-radius, --cp-gap
     • typeface → --cp-head / --cp-body
     • watermark, name tile → data attributes
   So nothing has to be generated per creator, and
   nothing a creator types becomes a selector.
   ═══════════════════════════════════════════════ */

/* The profile page is the one page on the site that doesn't load style.css —
   it has its own palette and its own type — so the box model it takes for
   granted has to be set here too. Without this, every tile is as wide as its
   flex basis plus its padding, and the name tile hangs off the right edge of
   a phone. */
.cp-page, .cp-page *, .cp-page *::before, .cp-page *::after { box-sizing: border-box; }

.cp-page {
  /* Nocturne is the default ground: the palette v2 was drawn in. */
  --cp-bg: #161826;
  --cp-surface: #232532;
  --cp-ink: #e9e9ed;
  /* 68%, not the 55% v1 used: secondary text on the warmer light grounds sits
     at 4.3:1 by 62% and only clears 4.5:1 here. */
  --cp-muted: color-mix(in srgb, var(--cp-ink) 68%, transparent);
  --cp-line: color-mix(in srgb, var(--cp-ink) 14%, transparent);
  /* Small accent text — kickers, handles, the footer link. A creator's accent
     is picked against the page at button size; at 11px on a light ground the
     saturated ones fall under 4.5:1, so text pulls a quarter of the way back
     towards the page's ink. Buttons, borders and bars keep the accent whole. */
  --cp-accent-text: color-mix(in srgb, var(--cp-accent) 68%, var(--cp-ink));
  --cp-tile: #e4e7f5;          /* the name tile — the one panel that flips */
  --cp-tile-ink: #292b31;
  --cp-accent: #9184d9;
  --cp-accent-soft: #9184d92e;
  --cp-shadow: 0 0 0 1px color-mix(in srgb, var(--cp-ink) 12%, transparent);
  --cp-shadow-lift: 0 0 0 1px color-mix(in srgb, var(--cp-ink) 22%, transparent), 0 8px 26px rgba(0,0,0,.45);
  --cp-glow: color-mix(in srgb, var(--cp-accent) 26%, transparent);
  --cp-radius: 16px;
  --cp-gap: 18px;
  --cp-head: 'Inter', system-ui, -apple-system, sans-serif;
  --cp-body: 'Inter', system-ui, -apple-system, sans-serif;

  background: var(--cp-bg);
  color: var(--cp-ink);
  min-height: 100vh;
  font-family: var(--cp-body);
  overflow-x: hidden;
}

/* ── THEMES ── */
.cp-page[data-theme="ink"] {
  --cp-bg: #0d0e15; --cp-surface: #1b1d29; --cp-ink: #fafafc;
  --cp-tile: #e4e7f5; --cp-tile-ink: #292b31; --cp-accent: #b9a8ff;
}
.cp-page[data-theme="slate"] {
  --cp-bg: #292b31; --cp-surface: #3a3d46; --cp-ink: #f3f5fe;
  --cp-tile: #e4e7f5; --cp-tile-ink: #292b31; --cp-accent: #84a9d9;
}
/* The light grounds swap the shadow model with the ground: a hairline ring
   reads as an edge on a dark page and as nothing at all on a white one. */
.cp-page[data-theme="studio"],
.cp-page[data-theme="sand"],
.cp-page[data-theme="mint"],
.cp-page[data-theme="blush"] {
  --cp-shadow: 0 1px 2px rgba(23,21,31,.06), 0 0 0 1px rgba(23,21,31,.07);
  --cp-shadow-lift: 0 8px 26px rgba(23,21,31,.13), 0 0 0 1px rgba(23,21,31,.09);
  --cp-line: color-mix(in srgb, var(--cp-ink) 12%, transparent);
}
.cp-page[data-theme="studio"] {
  --cp-bg: #f3f5fe; --cp-surface: #ffffff; --cp-ink: #17151f;
  --cp-tile: #1c1e2b; --cp-tile-ink: #f3f5fe; --cp-accent: #7c3aed;
}
.cp-page[data-theme="sand"] {
  --cp-bg: #fbf6ef; --cp-surface: #fffdfa; --cp-ink: #2b241c;
  --cp-tile: #2b241c; --cp-tile-ink: #fbf6ef; --cp-accent: #c2703c;
}
.cp-page[data-theme="mint"] {
  --cp-bg: #f1faf6; --cp-surface: #ffffff; --cp-ink: #12241e;
  --cp-tile: #12241e; --cp-tile-ink: #f1faf6; --cp-accent: #118a6e;
}
.cp-page[data-theme="blush"] {
  --cp-bg: #fdf3f7; --cp-surface: #ffffff; --cp-ink: #2b1721;
  --cp-tile: #2b1721; --cp-tile-ink: #fdf3f7; --cp-accent: #c4467f;
}

/* The name tile is the page's one inverted panel. Turned off, it settles back
   into the same surface as every other tile. */
.cp-page[data-nametile="off"] { --cp-tile: var(--cp-surface); --cp-tile-ink: var(--cp-ink); }

/* ── FRAMES ──
   Media only — the portrait, the shots, the video, the campaign thumbs. Tiles
   made of text take the page's corner radius and nothing else, so a bold or
   ring frame reads as a treatment of the pictures rather than a border round
   every paragraph on the page. */
.cp-frame { border-radius: var(--cp-radius); overflow: hidden; background: var(--cp-surface); }
[data-frame="soft"] .cp-frame { box-shadow: inset 0 0 0 1px var(--cp-line); }
[data-frame="bold"] .cp-frame { box-shadow: inset 0 0 0 3px var(--cp-accent); }
[data-frame="ring"] .cp-frame {
  box-shadow: inset 0 0 0 2px var(--cp-accent), 0 0 0 4px var(--cp-bg), 0 0 0 6px var(--cp-accent-soft);
}
[data-frame="film"] .cp-frame { box-shadow: inset 0 0 0 5px var(--cp-accent); border-radius: 0; }
[data-frame="none"] .cp-frame { box-shadow: none; }
/* The ring's outer halo needs room the flex gap doesn't otherwise leave. */
[data-frame="ring"] { --cp-gap: max(var(--cp-gap), 26px); }

/* ── SHELL ── */
.cp-nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; padding: 18px 28px;
}
/* a.cp-nav-logo, not .cp-nav-logo: ".cp-nav a" below outranks a lone class,
   and the logo would inherit the 13px link size — 1em on the image with it */
.cp-nav a.cp-nav-logo { display: flex; align-items: center; gap: .34em; margin-right: auto; text-decoration: none; color: inherit; font-size: 21px; }
.cp-nav-logo svg, .cp-nav-logo img { height: 1em; width: auto; display: block; }
.cp-nav-word { font-family: var(--cp-head); font-weight: 600; letter-spacing: -.02em; }
.cp-nav a { color: var(--cp-muted); text-decoration: none; font-size: 13px; }
.cp-nav a:hover { color: var(--cp-accent-text); }
.cp-nav-logo:hover { color: var(--cp-ink); }

/* The mark, very large and very quiet, pinned to the bottom-right of the page.
   Decorative: it is the only thing that says whose page this is once a shot
   has been screenshotted out of context. */
.cp-watermark {
  position: fixed; right: -6vw; bottom: -6vh; width: min(520px, 46vw);
  color: var(--cp-ink); opacity: .07; pointer-events: none; z-index: 0;
}
.cp-page[data-watermark="off"] .cp-watermark,
.cp-page[data-watermark="off"] .cp-shot-mark { display: none; }

.cp-board {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto; padding: 0 28px 96px;
  display: flex; flex-direction: column; gap: var(--cp-gap);
}
.cp-row { display: flex; flex-wrap: wrap; gap: var(--cp-gap); }
.cp-tile {
  border-radius: var(--cp-radius); background: var(--cp-surface);
  box-shadow: var(--cp-shadow); padding: 26px;
}
a.cp-tile, button.cp-tile { text-decoration: none; color: inherit; display: block; text-align: left; border: 0; font: inherit; cursor: pointer; }
a.cp-tile:hover, button.cp-tile:hover { box-shadow: var(--cp-shadow-lift); }

/* ── HERO ── */
.cp-portrait {
  flex: 1 1 300px; min-width: 260px; min-height: clamp(380px, 40vw, 480px);
  position: relative; margin: 0;
}
.cp-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-portrait-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--cp-accent-soft); color: var(--cp-accent);
  font-family: var(--cp-head); font-size: 84px; font-weight: 600; letter-spacing: -.03em;
}
.cp-status {
  position: absolute; left: 14px; bottom: 14px; z-index: 1; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #e9e9ed; background: rgba(11,12,21,.58); backdrop-filter: blur(8px);
  padding: 6px 11px; border-radius: 999px;
}
.cp-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cp-accent); }
.cp-status[data-live="1"] .dot { animation: cpPulse 2.4s ease-in-out infinite; }
@keyframes cpPulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.cp-name-tile {
  flex: 2 1 460px; min-width: 300px;
  border-radius: var(--cp-radius); padding: clamp(26px, 3vw, 40px);
  background: var(--cp-tile); color: var(--cp-tile-ink); box-shadow: var(--cp-shadow);
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
}
.cp-eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.cp-eyebrow img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.cp-eyebrow .sep { opacity: .45; }
.cp-name {
  font-family: var(--cp-head); font-size: clamp(40px, 5.4vw, 78px); font-weight: 600;
  line-height: .98; letter-spacing: -.035em; margin: 0;
}
/* The opacities in here are held above .7 deliberately: this tile is the one
   place text sits on an inverted panel, and .5 of the tile's own ink on the
   tile drops under 4.5:1. */
.cp-tagline { font-size: 15px; margin: 14px 0 0; opacity: .75; max-width: 34em; line-height: 1.5; }
.cp-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cp-hero-actions .cp-mail { font-size: 13px; color: inherit; opacity: .72; text-decoration: none; margin-left: auto; }
.cp-hero-actions .cp-mail:hover { opacity: 1; }

/* Buttons. The name tile is inverted, so the button on it takes its colour
   from the tile rather than from the page accent. */
.cp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cp-head); font-size: 14px; font-weight: 600;
  padding: 11px 22px; border-radius: 11px; text-decoration: none; cursor: pointer;
  color: var(--cp-accent); border: 1px solid var(--cp-accent); background: none;
}
.cp-btn:hover { background: var(--cp-accent-soft); }
.cp-btn-quiet { color: inherit; border-color: color-mix(in srgb, currentColor 25%, transparent); }
.cp-btn-quiet:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
/* The accent was chosen against the page, not against the inverted tile, so on
   the tile it is pulled 40% towards the tile's own ink — enough to clear
   4.5:1 on a light tile and on a dark one, without losing the colour. */
.cp-name-tile .cp-btn { color: color-mix(in srgb, var(--cp-accent) 60%, var(--cp-tile-ink)); border-color: currentColor; }
.cp-name-tile .cp-btn-quiet { color: inherit; }

/* ── INTRO VIDEO + QUOTE ── */
.cp-video { flex: 2 1 440px; min-width: 300px; position: relative; aspect-ratio: 16 / 9; margin: 0; }
.cp-video iframe, .cp-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.cp-video-btn {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: var(--cp-accent-soft); cursor: pointer; display: block;
}
.cp-video-btn img { opacity: .82; }
.cp-video-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,12,21,.82), transparent 62%);
}
.cp-video-cue {
  position: absolute; left: 22px; bottom: 22px; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--cp-head); font-size: 14px; font-weight: 600; color: #e9e9ed;
}
.cp-video-cue .ring {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--cp-accent); background: rgba(11,12,21,.45);
}
.cp-video-cue svg { fill: var(--cp-accent); display: block; }
.cp-video-btn:hover .ring { background: var(--cp-accent); }
.cp-video-btn:hover .ring svg { fill: #0b0c15; }

.cp-quote {
  flex: 1 1 300px; min-width: 260px; margin: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: clamp(24px, 2.4vw, 34px);
}
.cp-kicker { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-accent-text); }
.cp-quote p {
  font-family: var(--cp-head); font-size: clamp(19px, 1.7vw, 24px); font-weight: 500;
  line-height: 1.3; letter-spacing: -.015em; margin: 0; text-wrap: pretty;
}

/* ── STAT TILES ── */
.cp-stat { flex: 1 1 200px; min-width: 168px; padding: 20px; display: flex; flex-direction: column; gap: 2px; }
.cp-stat-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); }
.cp-stat-value { font-family: var(--cp-head); font-size: 32px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.cp-stat-note { font-size: 13px; color: var(--cp-muted); }
a.cp-stat .cp-stat-note { color: var(--cp-accent-text); }

/* ── MARQUEE ── */
.cp-marquee {
  position: relative; z-index: 1; margin: 54px 0; padding: 14px 0;
  border-block: 1px solid var(--cp-line); overflow: hidden;
}
.cp-marquee-track {
  display: flex; width: max-content; animation: cpMarquee 34s linear infinite;
  font-family: var(--cp-head); font-size: 13px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--cp-ink) 70%, transparent);
}
.cp-marquee-track > span { display: flex; gap: 26px; padding-right: 26px; }
.cp-marquee .dia { color: var(--cp-accent); }
@keyframes cpMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ── SECTIONS ── */
.cp-sec { display: flex; flex-direction: column; gap: var(--cp-gap); }
.cp-sec + .cp-sec { margin-top: 34px; }
.cp-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 22px; }
.cp-sec-head h2 { font-family: var(--cp-head); font-size: 30px; font-weight: 600; letter-spacing: -.025em; margin: 0; }
.cp-sec-head span { font-size: 12px; color: var(--cp-muted); }

.cp-shot { flex: 1 1 260px; min-width: 200px; position: relative; padding: 0; cursor: zoom-in; }
.cp-shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s ease; display: block; }
.cp-shot:hover img { transform: scale(1.04); }
.cp-shot-mark {
  position: absolute; left: 14px; bottom: 14px; width: 15px; color: #fff; opacity: .8;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); pointer-events: none;
}
.cp-shot-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px 40px;
  font-size: 12px; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(11,12,21,.78), transparent);
}

.cp-card { flex: 1 1 240px; min-width: 210px; padding: 22px; }
.cp-card h3 { font-family: var(--cp-head); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.cp-card p { font-size: 13px; color: var(--cp-muted); margin: 0; line-height: 1.5; }
.cp-about { flex-basis: 100%; padding: 26px; }
.cp-about p { font-size: 15px; color: var(--cp-ink); max-width: 68ch; line-height: 1.7; }

/* ── WHO'S WATCHING ── */
.cp-aud { flex: 1 1 260px; min-width: 230px; padding: 22px; }
.cp-aud h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cp-muted); margin: 0 0 16px;
}
.cp-aud-mid { display: flex; flex-direction: column; justify-content: center; }
.cp-bars { display: flex; flex-direction: column; gap: 11px; }
.cp-bar-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.cp-bar-row span:last-child { color: var(--cp-muted); }
.cp-bar { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--cp-ink) 10%, transparent); overflow: hidden; }
.cp-bar i { display: block; height: 100%; border-radius: 2px; background: var(--cp-accent); }
.cp-split { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.cp-split strong { font-family: var(--cp-head); font-size: 40px; font-weight: 600; letter-spacing: -.025em; }
.cp-split span { font-size: 13px; color: var(--cp-muted); }
.cp-split-bar { height: 3px; border-radius: 2px; overflow: hidden; display: flex; }
.cp-split-bar i:first-child { background: var(--cp-accent); }
.cp-split-bar i:last-child { background: color-mix(in srgb, var(--cp-ink) 18%, transparent); }
.cp-geo { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.cp-geo div { display: flex; justify-content: space-between; }
.cp-geo span { color: var(--cp-muted); }

/* ── CAMPAIGNS ── */
.cp-work { flex: 1 1 280px; min-width: 240px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.cp-work-title { font-family: var(--cp-head); font-size: 17px; font-weight: 600; line-height: 1.25; }
.cp-work-go { font-size: 13px; color: var(--cp-muted); margin-top: auto; }
a.cp-work:hover .cp-work-go { color: var(--cp-accent-text); }
.cp-work-thumb { display: block; margin: -22px -22px 4px; aspect-ratio: 16 / 9; overflow: hidden; }
.cp-work-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── CTA + FOOT ── */
.cp-cta {
  flex: 2 1 420px; min-width: 300px; position: relative; overflow: hidden;
  padding: clamp(28px, 3vw, 44px);
}
.cp-cta::before {
  content: ''; position: absolute; inset: auto -20% -70% 30%; height: 320px;
  background: radial-gradient(50% 50% at 50% 50%, var(--cp-glow), transparent 70%);
  pointer-events: none;
}
.cp-cta > * { position: relative; }
.cp-cta h2 { font-family: var(--cp-head); font-size: clamp(26px, 2.8vw, 38px); font-weight: 600; letter-spacing: -.03em; margin: 0 0 12px; }
.cp-cta p { font-size: 15px; color: var(--cp-muted); margin: 0 0 24px; max-width: 34em; line-height: 1.6; text-wrap: pretty; }
.cp-cta-shot { flex: 1 1 260px; min-width: 220px; margin: 0; }
.cp-cta-shot img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }

.cp-foot {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  margin-top: 34px; font-size: 12px; color: var(--cp-muted);
}
.cp-foot a { color: var(--cp-accent-text); text-decoration: none; }
.cp-foot a.plain { color: inherit; }
.cp-empty { font-size: 14px; color: var(--cp-muted); }

/* ── LIGHTBOX ── */
.cp-lightbox {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 22px;
  background: rgba(11,12,21,.9); backdrop-filter: blur(8px); cursor: zoom-out; border: 0;
}
.cp-lightbox[hidden] { display: none; }
.cp-lightbox figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 92vh; }
.cp-lightbox img { max-height: 74vh; max-width: min(92vw, 880px); object-fit: contain; border-radius: var(--cp-radius); }
.cp-lightbox .cp-shot-mark { left: 20px; bottom: 76px; width: 18px; }
.cp-lightbox figcaption { display: flex; align-items: center; gap: 16px; font-size: 12px; color: #e9e9ed; cursor: default; }
.cp-lb-btn {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid rgba(233,233,237,.3); color: #e9e9ed; font-size: 15px;
}
.cp-lb-btn:hover { background: rgba(233,233,237,.12); }
.cp-lb-cap { max-width: 40ch; text-align: center; opacity: .75; }

:where(.cp-page) :focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cp-marquee-track { animation: none; }
  .cp-status .dot { animation: none; }
  .cp-shot img { transition: none; }
}

@media (max-width: 720px) {
  .cp-nav, .cp-board { padding-left: 18px; padding-right: 18px; }
  .cp-tile { padding: 20px; }
  .cp-portrait { min-height: 340px; }
  .cp-sec-head h2 { font-size: 24px; }
  .cp-marquee { margin: 38px 0; }
  .cp-hero-actions .cp-mail { margin-left: 0; }
}

/* ══════════════════════════════════════════════
   EDITOR PREVIEW
   The appearance panel in the dashboard renders a miniature of the real page
   out of the real markup and this stylesheet, so what a creator sees while
   they choose is what /c/<slug> serves.
   ══════════════════════════════════════════════ */
.cp-preview {
  border-radius: 14px; border: 1px solid var(--border); overflow: hidden;
  padding: 18px; min-height: 200px;
}
.cp-preview .cp-board { padding: 0; }
.cp-preview .cp-portrait { min-height: 190px; flex-basis: 130px; min-width: 120px; }
.cp-preview .cp-portrait-fallback { font-size: 34px; }
.cp-preview .cp-name-tile { padding: 18px; gap: 14px; flex-basis: 220px; min-width: 190px; }
.cp-preview .cp-name { font-size: 30px; }
.cp-preview .cp-eyebrow { margin-bottom: 10px; font-size: 9px; gap: 7px; }
.cp-preview .cp-eyebrow img { width: 20px; height: 20px; }
.cp-preview .cp-tagline { font-size: 11px; margin-top: 8px; }
.cp-preview .cp-btn { font-size: 12px; padding: 7px 13px; }
.cp-preview .cp-stat { padding: 14px; }
.cp-preview .cp-stat-value { font-size: 22px; }
.cp-preview .cp-stat-label { font-size: 9px; }
.cp-preview .cp-stat-note { font-size: 11px; }
.cp-preview .cp-watermark { display: none; }

/* Theme + frame pickers. */
.cp-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 2px solid var(--border); border-radius: 13px; padding: 10px 12px;
  background: none; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--muted); transition: border-color .15s, color .15s;
}
.cp-swatch:hover { border-color: var(--violet); color: var(--ink); }
.cp-swatch[aria-pressed="true"] { border-color: var(--violet); color: var(--violet); }
.cp-swatch-chip { width: 46px; height: 30px; border-radius: 8px; border: 1px solid var(--border); display: block; }

/* Segmented pickers — corners, spacing, type, and the two switches. */
.cp-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cp-seg button {
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600;
  background: none; border: 0; border-left: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
}
.cp-seg button:first-child { border-left: 0; }
.cp-seg button:hover { color: var(--ink); }
.cp-seg button[aria-pressed="true"] { color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }

/* The deliverables tick list. */
.cp-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cp-check {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-size: 13px;
}
.cp-check:hover { border-color: var(--violet); }
.cp-check input { margin-top: 2px; accent-color: var(--violet); }
.cp-check strong { display: block; font-size: 13px; }
.cp-check span { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* Number rows — followers, reach, age bands, territories. */
.cp-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cp-geo-rows { display: flex; flex-direction: column; gap: 8px; }
.cp-geo-row { display: grid; grid-template-columns: 1fr 92px; gap: 8px; }