/* =============================================================================
 * Creytix Site Kit — PROFESSIONAL ELEMENTS LIBRARY  (css/elements.css)
 *
 * The systematic "pro-website" component layer that turns a page from
 * hand-authored one-offs into a coherent, elite-bar system: announcement bars,
 * promotional banners, trust strips, logo clouds, stat bands, testimonials,
 * ribbons/badges/pills, and feature callouts. These are the recurring
 * "professional elements" every competitive marketing site ships — first-class
 * here, so a builder DROPS them in instead of re-inventing inline CSS each time.
 *
 * Loads AFTER base.css (it consumes base.css's :root system — --ck-radius,
 * --ck-shadow, --ck-hairline, --ck-gutter, --ck-maxw, --ck-photo-*):
 *
 *     <link rel="stylesheet" href="css/base.css">
 *     <link rel="stylesheet" href="css/elements.css">   <-- this file
 *
 * Three laws (same as the rest of the kit):
 *   1 · TOKENS ONLY. Every color/type reads --ctx-* (with a neutral fallback in
 *       every var()); no hard-coded brand color, no hard-coded font. Swap the
 *       brand token sheet and every element re-skins — light shell or dark.
 *   2 · SELF-CONTAINED. No CDN, no webfont fetch, no external asset. SVG data-URI
 *       only. Opens offline.
 *   3 · TASTEFUL BY DEFAULT. Restraint, one accent, hairlines, the kit radius +
 *       shadow scale, generous whitespace — built to
 *       docs/creytix/CREYTIX_DESIGN_TASTE_INVENTORY.md. Every motion respects
 *       prefers-reduced-motion. Contrast is AA-clean (verified with
 *       creytix:design:contrast on the light Villas shell).
 *
 * Namespacing: `.ck-*` (the website/editorial kit — NOT the `.cx-*` product kit
 * in archetypes/_shared/ui-kit.css, and NOT the standalone `.cxb` Banner Studio
 * ad-unit system in tools/creytix-banners; this is the in-page editorial layer).
 * Coordinates with (does not collide with) assets/signature.css (hero-intro /
 * view-transitions / motif) — different file, different class prefixes.
 *
 * Dismiss behaviour for [data-ck-dismiss] targets is wired by the tiny, optional
 * assets/elements.js (progressive enhancement; the markup renders + reads fine
 * with no JS — the element is simply not dismissible without it).
 * =========================================================================== */

/* ----------------------------------------------------------------------------
 * 0 · Element-local tone tokens. Semantic tones fall back to sensible,
 *     AA-capable defaults but PREFER a brand's --ctx-* slot when it defines one.
 *     Text inside toned surfaces stays --ctx-color-primary-text (guaranteed
 *     contrast); the tone colours only borders, icons and accents.
 * -------------------------------------------------------------------------- */
:root {
  --ck-tone-info:    var(--ctx-color-info,    #2f6feb);
  --ck-tone-success: var(--ctx-color-success, #2e7d5b);
  --ck-tone-warn:    var(--ctx-color-warning, #b8763f);
  --ck-tone-alert:   var(--ctx-color-error,   #b8452f);

  /* One consistent "muted metadata" ink, reused by trust/logocloud/testimonial.
   * (Kept AA-safe for small text on both light AND dark shells — see the
   * light-Villas + dark-Aurelia contrast audits.) */
  --ck-el-muted: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 64%, transparent);
  --ck-el-faint: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 55%, transparent);
}

/* ============================================================================
 * 1 · ANNOUNCEMENT / NOTICE BAR  ·  .ck-announce
 *    Top-of-page dismissible strip. Variants: (default) hairline, --promo
 *    (accent-tinted), --launch (solid accent), --alert (warm/error tone).
 * ========================================================================== */
.ck-announce {
  position: relative;
  z-index: 55;
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  background: color-mix(in srgb, var(--ctx-color-surface, #171b22) 88%, var(--ctx-color-background, #0b0f14));
  border-bottom: 1px solid var(--ck-hairline);
}
.ck-announce__inner {
  max-width: var(--ck-maxw);
  margin-inline: auto;
  padding: clamp(0.55rem, 1.4vw, 0.85rem) var(--ck-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  text-align: center;
  font-size: var(--ctx-type-caption, 0.9rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 88%, transparent);
}
/* A leading pill tag ("New", "Launch", a date) */
.ck-announce__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--ctx-type-overline, 0.72rem);
  font-weight: 700;
  letter-spacing: var(--ctx-tracking-overline, 0.14em);
  text-transform: uppercase;
  padding: 0.2em 0.7em;
  border-radius: var(--ck-radius-pill);
  background: var(--ctx-color-brand-accent, #c9a24b);
  color: var(--ctx-color-background, #0b0f14);
  flex: none;
}
.ck-announce__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--ctx-color-brand-accent, #c9a24b);
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.ck-announce__link:hover { text-decoration: underline; }
.ck-announce__link .ck-announce__arrow { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.ck-announce__link:hover .ck-announce__arrow { transform: translateX(3px); }
/* Dismiss (opt-in — wired by assets/elements.js) */
.ck-announce__close {
  position: absolute;
  top: 50%;
  right: calc(var(--ck-gutter) * 0.5);
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ck-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity .2s ease, background .2s ease;
}
.ck-announce__close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.ck-announce__close svg { width: 0.95rem; height: 0.95rem; }
/* When dismissed by elements.js */
.ck-announce[hidden] { display: none; }

/* -- variant · promo (accent-tinted, still airy) -- */
.ck-announce--promo {
  background: color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 12%, var(--ctx-color-background, #0b0f14));
  border-bottom-color: color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 30%, transparent);
}

/* -- variant · launch (solid accent — highest emphasis; on-accent text mirrors
 *    the primary button so it inherits the brand's proven accent contrast) -- */
.ck-announce--launch {
  background: var(--ctx-color-brand-accent, #c9a24b);
  border-bottom-color: transparent;
}
.ck-announce--launch .ck-announce__inner { color: var(--ctx-color-background, #0b0f14); }
.ck-announce--launch .ck-announce__tag {
  background: color-mix(in srgb, var(--ctx-color-background, #0b0f14) 82%, transparent);
  color: var(--ctx-color-brand-accent, #c9a24b);
}
.ck-announce--launch .ck-announce__link {
  color: var(--ctx-color-background, #0b0f14);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ctx-color-background, #0b0f14) 45%, transparent);
}

/* -- variant · alert (warm error tone — outages, urgent notices; still tasteful) -- */
.ck-announce--alert {
  background: color-mix(in srgb, var(--ck-tone-alert) 92%, black);
  border-bottom-color: color-mix(in srgb, var(--ck-tone-alert) 55%, black);
}
.ck-announce--alert .ck-announce__inner { color: #fff; }
.ck-announce--alert .ck-announce__tag { background: rgba(255,255,255,0.92); color: color-mix(in srgb, var(--ck-tone-alert) 85%, black); }
.ck-announce--alert .ck-announce__link { color: #fff; text-decoration: underline; }

/* ============================================================================
 * 2 · BANNER / CTA BAND  ·  .ck-banner
 *    Full-bleed promotional band (the thing Ricardo keeps asking for). Split
 *    layout: copy left, actions right; stacks on mobile. Variants: (default)
 *    --gradient art-directed, --solid accent, --image (drop a photo). Sizes:
 *    --sm / (default) / --lg.
 * ========================================================================== */
.ck-banner {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: var(--ck-radius-lg);
  border: 1px solid var(--ck-hairline);
  padding: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  flex-wrap: wrap;
}
/* Full-bleed helper: pair with .ck-bleed section or wrap in a plain full-width
 * container; a squared-off edge-to-edge band drops the radius/border. */
.ck-banner--bleed { border-radius: 0; border-inline: 0; }

.ck-banner__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(90% 130% at 88% -20%, color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 32%, transparent), transparent 60%),
    linear-gradient(120deg, color-mix(in srgb, var(--ctx-color-surface, #171b22) 94%, transparent), color-mix(in srgb, var(--ctx-color-background, #0b0f14) 96%, transparent));
}
/* photo variant: put <img class="ck-banner__img"> as first child */
.ck-banner__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--ck-photo-filter);
}
/* legibility scrim over a photo */
.ck-banner--image .ck-banner__bg,
.ck-banner__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ctx-color-background, #0b0f14) 82%, transparent) 0%,
    color-mix(in srgb, var(--ctx-color-background, #0b0f14) 45%, transparent) 60%,
    transparent 100%);
}

.ck-banner__body { max-width: 46ch; position: relative; z-index: 1; }
.ck-banner__body .ck-overline { margin-bottom: 0.75rem; }
.ck-banner__title {
  font-family: var(--ctx-font-display, Georgia, serif);
  font-size: var(--ctx-type-h3, clamp(1.6rem, 2vw, 2.375rem));
  font-weight: 500;
  line-height: var(--ctx-leading-heading, 1.12);
  letter-spacing: var(--ctx-tracking-tight, -0.02em);
  text-wrap: balance;
  margin: 0;
}
.ck-banner__text {
  margin: 0.65rem 0 0;
  color: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 78%, transparent);
  font-size: var(--ctx-type-body, 1.0625rem);
}
.ck-banner__actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
  position: relative; z-index: 1; flex: none;
}

/* -- variant · solid accent (highest emphasis) --
 * The accent lives as a SOLID background on the element itself (so effective
 * contrast is measurable + real — dark/light text on the brand accent, exactly
 * like .ck-btn--primary); the __bg layer only adds a subtle depth gradient. */
.ck-banner--solid { border-color: transparent; background: var(--ctx-color-brand-accent, #c9a24b); }
.ck-banner--solid .ck-banner__bg {
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, black 20%, transparent));
}
.ck-banner--solid .ck-overline,
.ck-banner--solid .ck-banner__title { color: var(--ctx-color-background, #0b0f14); }
.ck-banner--solid .ck-banner__text { color: color-mix(in srgb, var(--ctx-color-background, #0b0f14) 82%, transparent); }
/* on a solid-accent band, the ghost button flips to a dark hairline for contrast */
.ck-banner--solid .ck-btn--ghost { color: var(--ctx-color-background, #0b0f14); border-color: color-mix(in srgb, var(--ctx-color-background,#0b0f14) 40%, transparent); }
.ck-banner--solid .ck-btn--primary { background: var(--ctx-color-background, #0b0f14); color: var(--ctx-color-brand-accent, #c9a24b); }

/* -- sizes -- */
.ck-banner--sm { padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.4vw, 2rem); }
.ck-banner--sm .ck-banner__title { font-size: var(--ctx-type-h4, 1.5rem); }
.ck-banner--lg { padding: clamp(2.75rem, 5vw, 5rem) clamp(2rem, 4vw, 4.5rem); }
.ck-banner--lg .ck-banner__title { font-size: var(--ctx-type-h2, clamp(2rem, 3vw, 3.5rem)); }

/* -- centered layout modifier -- */
.ck-banner--center { flex-direction: column; text-align: center; }
.ck-banner--center .ck-banner__body { max-width: 52ch; }
.ck-banner--center .ck-banner__text { margin-inline: auto; }

@media (max-width: 720px) {
  .ck-banner { flex-direction: column; align-items: flex-start; text-align: left; }
  .ck-banner--center { align-items: center; text-align: center; }
}

/* ============================================================================
 * 3 · TRUST STRIP  ·  .ck-trust
 *    "As seen in" / guarantees / rating row. Variants: --logos (muted wordmarks),
 *    --ratings (stars + score), --guarantees (icon + label). Optional label.
 * ========================================================================== */
.ck-trust {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  flex-wrap: wrap;
  justify-content: center;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}
.ck-trust__label {
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  font-size: var(--ctx-type-overline, 0.72rem);
  font-weight: 600;
  letter-spacing: var(--ctx-tracking-overline, 0.16em);
  text-transform: uppercase;
  color: var(--ck-el-muted);
  flex: none;
}
.ck-trust__items {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  flex-wrap: wrap;
  justify-content: center;
}
.ck-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ck-el-muted);
  font-size: var(--ctx-type-caption, 0.9rem);
}
/* a wordmark item (text "as seen in" logos) — restrained, muted */
.ck-trust__name {
  font-family: var(--ctx-font-display, Georgia, serif);
  font-size: var(--ctx-type-body-lg, 1.25rem);
  font-weight: 500;
  letter-spacing: var(--ctx-tracking-tight, -0.01em);
  color: var(--ck-el-muted);
}
/* ratings block */
.ck-trust__stars { display: inline-flex; gap: 0.1rem; color: var(--ctx-color-brand-accent, #c9a24b); }
.ck-trust__stars svg { width: 1.05rem; height: 1.05rem; }
.ck-trust__score { color: var(--ctx-color-primary-text, #f4efe6); font-weight: 600; }
.ck-trust__score small { color: var(--ck-el-muted); font-weight: 400; margin-left: 0.35em; }
/* guarantee item icon */
.ck-trust__icon { color: var(--ctx-color-brand-accent, #c9a24b); flex: none; }
.ck-trust__icon svg { width: 1.25rem; height: 1.25rem; }
/* hairline separators between items (opt-in) */
.ck-trust--divided .ck-trust__item:not(:last-child) { padding-right: clamp(1.25rem, 3vw, 2.75rem); border-right: 1px solid var(--ck-hairline); }

/* ============================================================================
 * 4 · LOGO CLOUD  ·  .ck-logocloud
 *    Client / partner logo grid, muted + tasteful, brightens on hover.
 *    Variants: (default) borderless · --bordered (hairline cells) · --sm.
 * ========================================================================== */
.ck-logocloud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  align-items: stretch;
}
.ck-logocloud__item {
  display: grid;
  place-items: center;
  min-height: 5rem;
  padding: clamp(1rem, 2vw, 1.75rem);
  color: var(--ck-el-muted);
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease, color .3s ease;
}
.ck-logocloud__item:hover { opacity: 1; filter: grayscale(0); color: var(--ctx-color-primary-text, #f4efe6); }
/* a text wordmark logo (when no SVG asset) */
.ck-logocloud__name {
  font-family: var(--ctx-font-display, Georgia, serif);
  font-size: var(--ctx-type-body-lg, 1.25rem);
  font-weight: 500;
  letter-spacing: var(--ctx-tracking-tight, -0.01em);
}
.ck-logocloud__item img,
.ck-logocloud__item svg { max-height: 2.25rem; width: auto; }
/* -- variant · bordered cells -- */
.ck-logocloud--bordered { gap: 0; border: 1px solid var(--ck-hairline); border-radius: var(--ck-radius); overflow: hidden; }
.ck-logocloud--bordered .ck-logocloud__item { border: 1px solid var(--ck-hairline); margin: -0.5px; }
/* -- variant · small -- */
.ck-logocloud--sm { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.ck-logocloud--sm .ck-logocloud__item { min-height: 3.5rem; }
.ck-logocloud--sm .ck-logocloud__name { font-size: var(--ctx-type-body, 1.0625rem); }
@media (prefers-reduced-motion: reduce) { .ck-logocloud__item { transition: none; } }

/* ============================================================================
 * 5 · STAT BAND  ·  .ck-statband
 *    Big-number metrics band (full-bleed friendly). Reuses .ck-stat-num +
 *    data-cx-count (the scroll counter). Variants: (default) plain · --surface
 *    (panel) · --divided (vertical hairlines) · --bordered (top/bottom rules).
 * ========================================================================== */
.ck-statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.ck-statband__item { text-align: center; }
.ck-statband__num {
  display: block;
  font-family: var(--ctx-font-display, Georgia, serif);
  font-size: clamp(2.75rem, 1.5rem + 5vw, 5rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: var(--ctx-tracking-tighter, -0.03em);
  font-variant-numeric: tabular-nums;
  color: var(--ctx-color-primary-text, #f4efe6);
}
.ck-statband__num .ck-accent { color: var(--ctx-color-brand-accent, #c9a24b); }
.ck-statband__label {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  font-size: var(--ctx-type-overline, 0.72rem);
  font-weight: 600;
  letter-spacing: var(--ctx-tracking-overline, 0.16em);
  text-transform: uppercase;
  color: var(--ck-el-muted);
}
.ck-statband__note { margin: 0.5rem 0 0; font-size: var(--ctx-type-caption, 0.85rem); color: var(--ck-el-faint); }
/* -- variant · surface panel -- */
.ck-statband--surface {
  background: color-mix(in srgb, var(--ctx-color-surface, #171b22) 88%, var(--ctx-color-background, #0b0f14));
  border: 1px solid var(--ck-hairline);
  border-radius: var(--ck-radius-lg);
  padding-inline: clamp(1.5rem, 3vw, 3rem);
}
/* -- variant · vertical dividers -- */
.ck-statband--divided .ck-statband__item:not(:first-child) { border-left: 1px solid var(--ck-hairline); }
@media (max-width: 720px) {
  .ck-statband--divided .ck-statband__item { border-left: 0 !important; }
}
/* -- variant · top/bottom rules -- */
.ck-statband--bordered { border-block: 1px solid var(--ck-hairline); }
/* accent tick above each number (draws in on scroll, like base .ck-stat) */
.ck-statband--tick .ck-statband__item { position: relative; padding-top: 1.25rem; }
.ck-statband--tick .ck-statband__item::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleX(0);
  width: 2.5rem; height: 2px; background: var(--ctx-color-brand-accent, #c9a24b); transform-origin: center;
}
@keyframes ck-tick-grow { to { transform: translateX(-50%) scaleX(1); } }
@supports (animation-timeline: view()) {
  .ck-statband--tick .ck-statband__item::before { animation: ck-tick-grow auto linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-statband--tick .ck-statband__item::before { transform: translateX(-50%) scaleX(1); animation: none; }
}

/* ============================================================================
 * 6 · TESTIMONIAL  ·  .ck-testimonial
 *    Quote card, single-quote spotlight, and a carousel/grid-ready wrapper.
 *    .ck-testimonials      = grid of cards
 *    .ck-testimonials--rail= horizontal scroll-snap rail (carousel-ready)
 *    .ck-testimonial       = a quote card
 *    .ck-testimonial--spotlight = one large centered pull-quote
 * ========================================================================== */
.ck-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.ck-testimonials--rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85vw, 26rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.ck-testimonials--rail::-webkit-scrollbar { display: none; }
.ck-testimonials--rail > .ck-testimonial { scroll-snap-align: start; }

.ck-testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2vw, 1.6rem);
  background: color-mix(in srgb, var(--ctx-color-surface, #171b22) 90%, var(--ctx-color-background, #0b0f14));
  border: 1px solid var(--ck-hairline);
  border-radius: var(--ck-radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
}
/* signature quote mark */
.ck-testimonial::before {
  content: "\201C";
  position: absolute;
  top: clamp(0.5rem, 1.5vw, 1rem);
  right: clamp(1rem, 2.4vw, 2rem);
  font-family: var(--ctx-font-display, Georgia, serif);
  font-size: 5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 26%, transparent);
  pointer-events: none;
}
.ck-testimonial__quote {
  margin: 0;
  font-family: var(--ctx-font-display, Georgia, serif);
  font-size: var(--ctx-type-body-lg, 1.25rem);
  line-height: var(--ctx-leading-relaxed, 1.55);
  font-weight: 450;
  color: var(--ctx-color-primary-text, #f4efe6);
  position: relative; z-index: 1;
  text-wrap: pretty;
}
.ck-testimonial__cite {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  font-style: normal;
}
.ck-testimonial__avatar {
  width: 2.75rem; height: 2.75rem; border-radius: var(--ck-radius-pill);
  object-fit: cover; flex: none;
  background: color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 22%, var(--ctx-color-surface, #171b22));
  display: grid; place-items: center;
  color: var(--ctx-color-brand-accent, #c9a24b);
  font-family: var(--ctx-font-display, Georgia, serif); font-weight: 600;
  border: 1px solid var(--ck-hairline);
}
.ck-testimonial__who { display: flex; flex-direction: column; gap: 0.1rem; }
.ck-testimonial__name { font-weight: 600; color: var(--ctx-color-primary-text, #f4efe6); font-size: var(--ctx-type-caption, 0.9rem); }
.ck-testimonial__role { font-size: var(--ctx-type-caption, 0.85rem); color: var(--ck-el-muted); }
/* rating inside a testimonial */
.ck-testimonial__stars { display: inline-flex; gap: 0.1rem; color: var(--ctx-color-brand-accent, #c9a24b); }
.ck-testimonial__stars svg { width: 1rem; height: 1rem; }

/* -- variant · spotlight (one big pull-quote, centered, no card) -- */
.ck-testimonial--spotlight {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 44rem;
  margin-inline: auto;
}
.ck-testimonial--spotlight::before {
  position: static;
  font-size: 6rem;
  height: 2.5rem;
  color: color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 40%, transparent);
}
.ck-testimonial--spotlight .ck-testimonial__quote {
  font-size: var(--ctx-type-h3, clamp(1.6rem, 2vw, 2.375rem));
  line-height: var(--ctx-leading-snug, 1.2);
  letter-spacing: var(--ctx-tracking-tight, -0.015em);
  text-wrap: balance;
}
.ck-testimonial--spotlight .ck-testimonial__cite { justify-content: center; }

/* ============================================================================
 * 7 · RIBBON / BADGE / PILL  ·  .ck-ribbon · .ck-badge · .ck-pill
 * ========================================================================== */

/* --- 7a · BADGE — small status/feature marker (inline) --- */
.ck-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  font-size: var(--ctx-type-overline, 0.72rem);
  font-weight: 700;
  letter-spacing: var(--ctx-tracking-overline, 0.1em);
  text-transform: uppercase;
  line-height: 1;
  padding: 0.4em 0.7em;
  border-radius: var(--ck-radius-sm);
  background: color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 16%, var(--ctx-color-background, #0b0f14));
  color: var(--ctx-color-brand-accent, #c9a24b);
  border: 1px solid transparent;
}
.ck-badge svg { width: 0.85em; height: 0.85em; }
.ck-badge--solid { background: var(--ctx-color-brand-accent, #c9a24b); color: var(--ctx-color-background, #0b0f14); }
.ck-badge--outline { background: transparent; border-color: var(--ck-hairline); color: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 82%, transparent); }
.ck-badge--dot::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
/* semantic tones — a tone-tinted surface + a tone-coloured dot carry the meaning,
 * while the label stays --ctx-color-primary-text so contrast is guaranteed on ANY
 * shell (a single tone hue can't hit AA as small text over both a light and a dark
 * tint). Verified on light Villas + dark Aurelia. */
.ck-badge--success,
.ck-badge--warn,
.ck-badge--info { color: var(--ctx-color-primary-text, #f4efe6); }
.ck-badge--success { background: color-mix(in srgb, var(--ck-tone-success) 20%, var(--ctx-color-background, #0b0f14)); }
.ck-badge--warn    { background: color-mix(in srgb, var(--ck-tone-warn) 20%, var(--ctx-color-background, #0b0f14)); }
.ck-badge--info    { background: color-mix(in srgb, var(--ck-tone-info) 20%, var(--ctx-color-background, #0b0f14)); }
.ck-badge--success::before,
.ck-badge--warn::before,
.ck-badge--info::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; flex: none; }
.ck-badge--success::before { background: var(--ck-tone-success); }
.ck-badge--warn::before    { background: var(--ck-tone-warn); }
.ck-badge--info::before    { background: var(--ck-tone-info); }

/* --- 7b · PILL — tag / filter chip (rounded-full, slightly larger than badge) --- */
.ck-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  font-size: var(--ctx-type-caption, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.5em 0.95em;
  border-radius: var(--ck-radius-pill);
  border: 1px solid var(--ck-hairline);
  background: transparent;
  color: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 80%, transparent);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
a.ck-pill:hover, button.ck-pill:hover { color: var(--ctx-color-primary-text, #f4efe6); border-color: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 30%, transparent); }
.ck-pill--active,
.ck-pill[aria-pressed="true"] {
  color: var(--ctx-color-brand-accent, #c9a24b);
  background: color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 12%, transparent);
  border-color: color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 45%, transparent);
}
.ck-pill--solid { background: var(--ctx-color-brand-accent, #c9a24b); color: var(--ctx-color-background, #0b0f14); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .ck-pill { transition: none; } }

/* --- 7c · RIBBON — diagonal corner banner on a card/frame ---
 * Put .ck-ribbon-host on the positioned parent (position:relative; overflow:hidden),
 * then a .ck-ribbon child. Default top-right; add --left for top-left. */
.ck-ribbon-host { position: relative; overflow: hidden; }
.ck-ribbon {
  position: absolute;
  top: 1.1rem; right: -3.25rem;
  z-index: 3;
  transform: rotate(45deg);
  transform-origin: center;
  width: 12rem;
  padding: 0.4rem 0;
  text-align: center;
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  font-size: var(--ctx-type-overline, 0.7rem);
  font-weight: 700;
  letter-spacing: var(--ctx-tracking-overline, 0.14em);
  text-transform: uppercase;
  background: var(--ctx-color-brand-accent, #c9a24b);
  color: var(--ctx-color-background, #0b0f14);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.5);
  pointer-events: none;
}
.ck-ribbon--left { right: auto; left: -3.25rem; transform: rotate(-45deg); }
.ck-ribbon--solid { background: var(--ctx-color-primary-text, #f4efe6); color: var(--ctx-color-background, #0b0f14); }
.ck-ribbon--alert { background: var(--ck-tone-alert); color: #fff; }
/* a subtler flag ribbon (top-left tab, not diagonal) */
.ck-ribbon-flag {
  position: absolute; top: 0; left: 1.5rem; z-index: 3;
  padding: 0.5rem 0.7rem 0.7rem;
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  font-size: var(--ctx-type-overline, 0.7rem); font-weight: 700;
  letter-spacing: var(--ctx-tracking-overline, 0.12em); text-transform: uppercase;
  background: var(--ctx-color-brand-accent, #c9a24b); color: var(--ctx-color-background, #0b0f14);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

/* ============================================================================
 * 8 · FEATURE CALLOUT  ·  .ck-callout
 *    Highlighted info/feature block. Tones: (default) accent · --info ·
 *    --success · --warn. Left accent rule + tinted surface + optional icon.
 *    Text stays --ctx-color-primary-text for guaranteed contrast on any shell.
 * ========================================================================== */
.ck-callout {
  --ck-callout-tone: var(--ctx-color-brand-accent, #c9a24b);
  display: flex;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 2.2vw, 1.85rem);
  border-radius: var(--ck-radius);
  border: 1px solid color-mix(in srgb, var(--ck-callout-tone) 24%, var(--ck-hairline));
  border-left: 3px solid var(--ck-callout-tone);
  background: color-mix(in srgb, var(--ck-callout-tone) 8%, var(--ctx-color-surface, #171b22));
}
.ck-callout__icon {
  flex: none;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border-radius: var(--ck-radius-sm);
  color: var(--ck-callout-tone);
  background: color-mix(in srgb, var(--ck-callout-tone) 16%, transparent);
}
.ck-callout__icon svg { width: 1.15rem; height: 1.15rem; }
.ck-callout__body { min-width: 0; }
.ck-callout__title {
  margin: 0 0 0.3rem;
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  font-size: var(--ctx-type-body, 1.0625rem);
  font-weight: 650;
  line-height: var(--ctx-leading-snug, 1.25);
  color: var(--ctx-color-primary-text, #f4efe6);
}
.ck-callout__text {
  margin: 0;
  font-size: var(--ctx-type-caption, 0.9rem);
  line-height: var(--ctx-leading-relaxed, 1.55);
  color: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 78%, transparent);
}
.ck-callout__text a { color: var(--ck-callout-tone); text-underline-offset: 0.2em; text-decoration: underline; }
/* -- tones -- */
.ck-callout--info    { --ck-callout-tone: var(--ck-tone-info); }
.ck-callout--success { --ck-callout-tone: var(--ck-tone-success); }
.ck-callout--warn    { --ck-callout-tone: var(--ck-tone-warn); }