/* ==========================================================
   SCA AI Portal · design tokens (scoped to .sca-cc-ai)
   Forked from portal-design.css (.sca-cc) with the violet
   accent palette in place of sky-blue. Spine of the design
   (Poppins + Playfair, navy ink, paper backgrounds, JetBrains
   eyebrows) is intentionally identical to the .co.uk portal
   so the two sites feel like one editorial system.
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500;1,600&display=swap");

.sca-cc-ai {
  --cc-ink:        #253551;
  --cc-ink-2:      #3a4968;
  --cc-ink-inv:    #ffffff;
  --cc-paper:      #f6f8fc;
  --cc-paper-2:    #eef2f8;
  --cc-paper-3:    #d6dde9;
  --cc-rule:       #d6dde9;
  --cc-rule-2:     #bfc8d9;
  --cc-muted:      #6b7890;

  /* Violet replaces sky as the italic / accent colour. */
  --cc-vio:        #7c3aed;
  --cc-vio-2:      #6d28d9;
  --cc-vio-soft:   #ede9fe;
  --cc-indigo:     #4f46e5;
  --cc-lav:        #c4b5fd;

  /* Sister-site (.co.uk) link-back palette. Both values match the
     .co.uk portal's design tokens exactly, so when a user crosses
     from the AI side to scarevision.co.uk they're meeting the
     same blues they just saw on the sister-site strip. */
  --cc-sky:        #7DA8F0;
  --cc-sky-soft:   #B8D2F7;

  --cc-serif:      "Playfair Display", Georgia, serif;
  --cc-r-lg: 16px;
  --cc-ease: cubic-bezier(.2,.7,.2,1);

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--cc-paper);
  color: var(--cc-ink);
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 80px;
}
.sca-cc-ai *, .sca-cc-ai *::before, .sca-cc-ai *::after { box-sizing: border-box; }
.sca-cc-ai a { color: inherit; text-decoration: none; }
.sca-cc-ai button { font: inherit; color: inherit; cursor: pointer; }
.sca-cc-ai h1, .sca-cc-ai h2, .sca-cc-ai h3, .sca-cc-ai h4 {
  margin: 0; font-weight: 600; letter-spacing: -0.02em;
  font-family: "Poppins", sans-serif;
}
.sca-cc-ai h1 { font-weight: 600; letter-spacing: -0.025em; }

/* =========================================================
   Shell
   ========================================================= */
.sca-cc-ai .cc-shell {
  max-width: 1540px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 32px) 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =========================================================
   Context strip (avatar only — exam date removed because there
   is no cross-site identity bridge to surface it from .co.uk)
   ========================================================= */
.sca-cc-ai .cc-strip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.sca-cc-ai .cc-strip-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cc-ink), var(--cc-vio));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}

/* =========================================================
   Greeting header
   ========================================================= */
.sca-cc-ai .cc-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  padding-bottom: 18px;
}
.sca-cc-ai .cc-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-muted);
  margin-bottom: 10px;
}
.sca-cc-ai .cc-eyebrow-inv { color: rgba(255,255,255,0.65); }
.sca-cc-ai .cc-eyebrow-vio { color: var(--cc-vio); }

.sca-cc-ai .cc-col-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-muted);
  padding: 4px 0 2px;
  margin: 6px 0 -4px;
}
.sca-cc-ai .cc-col-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cc-rule);
}
.sca-cc-ai .cc-hello h1 {
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1;
  color: var(--cc-ink);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.sca-cc-ai .cc-hello h1 .cc-italic,
.sca-cc-ai .cc-hello h1 em {
  font-family: var(--cc-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cc-vio);
  letter-spacing: -0.02em;
}
.sca-cc-ai .cc-sub {
  color: var(--cc-ink-2);
  max-width: 56ch;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.55;
}
.sca-cc-ai .cc-sub b { color: var(--cc-ink); font-weight: 600; }
.sca-cc-ai .cc-sub .cc-sub-strong {
  color: var(--cc-vio);
  font-weight: 700;
}

/* Inline top-up nudge — appears when credits == 0 */
.sca-cc-ai .cc-sub-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cc-vio);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background .2s;
}
.sca-cc-ai .cc-sub-cta:hover { background: var(--cc-vio-2); }

/* Stats (right side of header) */
.sca-cc-ai .cc-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.sca-cc-ai .cc-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.sca-cc-ai .cc-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cc-paper-2);
  border: 1px solid var(--cc-rule);
  display: grid;
  place-items: center;
  color: var(--cc-ink);
}
/* Violet variant — used on the Credits Remaining stat (defining metric) */
.sca-cc-ai .cc-stat-icon-vio {
  background: var(--cc-vio-soft);
  border-color: color-mix(in srgb, var(--cc-vio) 22%, var(--cc-rule));
  color: var(--cc-vio);
}
.sca-cc-ai .cc-stat-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-muted);
}
.sca-cc-ai .cc-stat-value {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--cc-ink);
  letter-spacing: -0.015em;
}
.sca-cc-ai .cc-stat-value-vio { color: var(--cc-vio); }
.sca-cc-ai .cc-stat-unit {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: var(--cc-muted);
  font-weight: 400;
  letter-spacing: 0;
}
.sca-cc-ai .cc-stat-frac-sep { color: var(--cc-paper-3); margin: 0 1px; }
.sca-cc-ai .cc-stat-frac-total {
  color: var(--cc-muted);
  font-weight: 400;
  font-size: 18px;
}

.sca-cc-ai .cc-stat-link {
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 10px;
  transition: background .2s;
}
.sca-cc-ai .cc-stat-link:hover { background: var(--cc-paper-2); }

/* Loading spinner used in the credits number */
.sca-cc-ai .sca-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--cc-paper-3);
  border-top-color: var(--cc-vio);
  border-radius: 50%;
  animation: sca-cc-ai-spin .8s linear infinite;
}
.sca-cc-ai .is-loading { opacity: 0.9; }
@keyframes sca-cc-ai-spin { to { transform: rotate(360deg); } }

/* =========================================================
   Cards base
   ========================================================= */
.sca-cc-ai .cc-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--cc-rule);
  border-radius: var(--cc-r-lg);
  padding: 20px;
  display: block;
  transition: transform .25s var(--cc-ease), box-shadow .25s, border-color .25s;
}
.sca-cc-ai .cc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -14px rgba(37,53,81,0.18);
  border-color: var(--cc-rule-2);
}

/* =========================================================
   Hero row: Try-this-case LEFT + Top-up-credits RIGHT
   ========================================================= */
.sca-cc-ai .cc-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* =========================================================
   "Try this case next" card
   ========================================================= */
.sca-cc-ai .cc-pick {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  background: #fff;
  color: var(--cc-ink);
  padding: 22px;
}
.sca-cc-ai .cc-pick .cc-eyebrow {
  color: var(--cc-muted);
  margin-bottom: 8px;
}
.sca-cc-ai .cc-pick h2 {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  margin: 2px 0 0;
  letter-spacing: -0.02em;
  color: var(--cc-ink);
}
.sca-cc-ai .cc-pick h2 em,
.sca-cc-ai .cc-pick h2 .cc-italic {
  font-family: var(--cc-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cc-vio);
  letter-spacing: -0.01em;
}
.sca-cc-ai .cc-pick-body { display: flex; flex-direction: column; }
.sca-cc-ai .cc-pick-blurb {
  color: var(--cc-ink-2);
  font-size: 15px;
  margin: 10px 0 14px;
  max-width: 52ch;
  line-height: 1.5;
}
.sca-cc-ai .cc-pick-thumb {
  position: relative;
  min-height: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  background: linear-gradient(140deg, var(--cc-vio), var(--cc-indigo) 60%, var(--cc-ink));
  display: grid;
  place-items: end start;
}
.sca-cc-ai .cc-pick-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 10px);
}
.sca-cc-ai .cc-pick-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sca-cc-ai .cc-pick-thumb-label {
  position: relative;
  z-index: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: rgba(255,255,255,.85);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 10px;
  background: rgba(0,0,0,.28);
  border-radius: 6px;
  margin: 10px;
}
.sca-cc-ai .cc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--cc-paper-2);
  color: var(--cc-ink-2);
  border: 1px solid var(--cc-rule);
}
.sca-cc-ai .cc-tag-vio {
  background: var(--cc-vio-soft);
  color: var(--cc-vio-2);
  border-color: color-mix(in srgb, var(--cc-vio) 22%, var(--cc-rule));
}
.sca-cc-ai .cc-pick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.sca-cc-ai .cc-cta-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}
.sca-cc-ai .cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--cc-rule);
  background: #fff;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.sca-cc-ai .cc-btn-primary {
  background: var(--cc-vio);
  color: #fff;
  border-color: var(--cc-vio);
}
.sca-cc-ai .cc-btn-primary:hover {
  background: var(--cc-vio-2);
  border-color: var(--cc-vio-2);
}
.sca-cc-ai .cc-btn-dark {
  background: var(--cc-ink);
  color: #fff;
  border-color: var(--cc-ink);
}
.sca-cc-ai .cc-btn-dark:hover { background: var(--cc-ink-2); border-color: var(--cc-ink-2); }
.sca-cc-ai .cc-btn-ghost {
  background: transparent;
  color: var(--cc-ink-2);
  border-color: var(--cc-rule);
}
.sca-cc-ai .cc-btn-ghost:hover { background: var(--cc-paper-2); color: var(--cc-ink); }
.sca-cc-ai .cc-btn-inv {
  background: #fff;
  color: var(--cc-ink);
  border-color: #fff;
}

/* "Why this case" panel — left-bordered violet block under the headline */
.sca-cc-ai .cc-why {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--cc-vio-soft);
  border-left: 3px solid var(--cc-vio);
  border-radius: 8px;
}
.sca-cc-ai .cc-why-ic {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff;
  color: var(--cc-vio);
  display: grid;
  place-items: center;
  font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--cc-vio) 25%, transparent);
}
.sca-cc-ai .cc-why-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sca-cc-ai .cc-why-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-vio-2);
  font-weight: 600;
}
.sca-cc-ai .cc-why-text {
  font-size: 14px;
  color: var(--cc-ink);
  line-height: 1.45;
}
.sca-cc-ai .cc-why-text b { font-weight: 600; }

/* =========================================================
   "Top up credits" feature card (RIGHT side of hero)
   Mirrors the .cc-ai-feature pattern but in the smaller slot.
   ========================================================= */
.sca-cc-ai .cc-feature-credits {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--cc-r-lg);
  background: linear-gradient(135deg, #2B3F66 0%, #2A1F5C 50%, #4A2A8E 100%);
  color: var(--cc-ink-inv);
  overflow: hidden;
  border: 0;
  transition: transform .25s var(--cc-ease), box-shadow .25s;
}
.sca-cc-ai .cc-feature-credits:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -16px rgba(74,42,142,0.55);
}
.sca-cc-ai .cc-feature-credits-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(340px 340px at 110% -30%, rgba(167,139,250,0.42), transparent 60%),
    radial-gradient(300px 240px at -10% 130%, rgba(99,102,241,0.22), transparent 55%);
  filter: blur(8px);
}
.sca-cc-ai .cc-feature-credits-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sca-cc-ai .cc-feature-credits-body .cc-eyebrow {
  color: var(--cc-lav);
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 2px;
}
.sca-cc-ai .cc-feature-credits-body h2 {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sca-cc-ai .cc-feature-credits-body h2 em,
.sca-cc-ai .cc-feature-credits-body h2 .cc-italic {
  font-family: var(--cc-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cc-lav);
  letter-spacing: -0.01em;
}
.sca-cc-ai .cc-feature-credits-sub {
  color: rgba(214,221,233,0.85);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* =========================================================
   Pack tiles — credits count is the visual hero, price on the
   action pill. Matches the existing portal's hierarchy.
   ========================================================= */
.sca-cc-ai .cc-packs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: auto;
}
.sca-cc-ai .cc-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.sca-cc-ai .cc-pack:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(196,181,253,0.5);
  transform: translateY(-1px);
}

/* Pack name — JetBrains-mono eyebrow at top of the card */
.sca-cc-ai .cc-pack-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-lav);
  font-weight: 700;
}

/* Credit count — the visual hero */
.sca-cc-ai .cc-pack-num {
  font-family: "Poppins", sans-serif;
  font-size: clamp(40px, 4.2vw, 50px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
  margin-top: 6px;
}

/* "credits" — small unit label under the number */
.sca-cc-ai .cc-pack-unit {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* Price — white pill button pinned to the bottom of the card */
.sca-cc-ai .cc-pack-price {
  margin-top: 14px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--cc-ink);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: background .2s, color .2s, transform .15s;
}
.sca-cc-ai .cc-pack:hover .cc-pack-price {
  background: var(--cc-lav);
}
.sca-cc-ai .cc-pack-price i { transition: transform .15s; }
.sca-cc-ai .cc-pack:hover .cc-pack-price i { transform: translateX(2px); }

/* "Best value" variant — lavender-tinted card + badge */
.sca-cc-ai .cc-pack-best {
  background: rgba(196,181,253,0.16);
  border-color: rgba(196,181,253,0.55);
}
.sca-cc-ai .cc-pack-best::before {
  content: "Best value";
  position: absolute;
  top: -8px;
  right: 10px;
  background: var(--cc-lav);
  color: #1e1b4b;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* =========================================================
   Summary strip (3 cards — This Week / Recent Average / Coverage)
   ========================================================= */
.sca-cc-ai .cc-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sca-cc-ai .cc-summary-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 16px;
  background: #fff;
  border: 1px solid var(--cc-rule);
  border-radius: var(--cc-r-lg);
  transition: transform .25s var(--cc-ease), box-shadow .25s, border-color .25s;
}
.sca-cc-ai .cc-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -14px rgba(37,53,81,0.18);
  border-color: var(--cc-rule-2);
}
.sca-cc-ai .cc-summary-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sca-cc-ai .cc-summary-eyebrow i { color: var(--cc-vio); }
.sca-cc-ai .cc-summary-num {
  font-family: "Poppins", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--cc-ink);
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
}
.sca-cc-ai .cc-summary-num em {
  font-family: var(--cc-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cc-vio);
  letter-spacing: -0.02em;
}
.sca-cc-ai .cc-summary-num-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-muted);
  letter-spacing: 0;
}
.sca-cc-ai .cc-summary-sub {
  font-size: 13.5px;
  color: var(--cc-ink-2);
  line-height: 1.5;
}
.sca-cc-ai .cc-summary-sub b { color: var(--cc-ink); font-weight: 600; }
.sca-cc-ai .cc-summary-cta {
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-vio);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  transition: color .2s;
}
.sca-cc-ai .cc-summary-cta:hover { color: var(--cc-vio-2); }
.sca-cc-ai .cc-summary-cta i { transition: transform .2s; }
.sca-cc-ai .cc-summary-card:hover .cc-summary-cta i { transform: translateX(3px); }

/* =========================================================
   Bento (3-column library)
   ========================================================= */
.sca-cc-ai .cc-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sca-cc-ai .cc-cat {
  background: #fff;
  border: 1px solid var(--cc-rule);
  border-radius: var(--cc-r-lg);
  padding: 18px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .25s var(--cc-ease), box-shadow .25s, border-color .25s;
}
.sca-cc-ai .cc-cat:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -14px rgba(37,53,81,0.18);
  border-color: var(--cc-rule-2);
}
.sca-cc-ai .cc-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--cc-rule);
}
.sca-cc-ai .cc-cat-head h3 {
  font-family: "Poppins", sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--cc-ink);
}
.sca-cc-ai .cc-cat-head h3 em,
.sca-cc-ai .cc-cat-head h3 .cc-italic {
  font-family: var(--cc-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cc-vio);
  letter-spacing: -0.005em;
}
.sca-cc-ai .cc-cat-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--cc-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}
.sca-cc-ai .cc-cat-items {
  display: flex;
  flex-direction: column;
}
.sca-cc-ai .cc-tile {
  display: grid;
  grid-template-columns: 32px 1fr 18px;
  gap: 12px;
  align-items: center;
  padding: 11px 6px;
  border-bottom: 1px solid var(--cc-rule);
  transition: background .2s;
}
.sca-cc-ai .cc-tile:last-child { border-bottom: 0; }
.sca-cc-ai .cc-tile:hover { background: var(--cc-vio-soft); }
.sca-cc-ai .cc-tile-ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cc-vio-soft);
  border: 1px solid color-mix(in srgb, var(--cc-vio) 18%, var(--cc-rule));
  display: grid;
  place-items: center;
  color: var(--cc-vio);
}
.sca-cc-ai .cc-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sca-cc-ai .cc-tile-title {
  font-weight: 600;
  font-size: 15.5px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--cc-ink);
}
.sca-cc-ai .cc-tile-desc {
  color: var(--cc-muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sca-cc-ai .cc-tile-arrow {
  color: var(--cc-muted);
  opacity: 0;
  transition: opacity .2s, transform .2s;
}
.sca-cc-ai .cc-tile:hover .cc-tile-arrow {
  opacity: 1;
  transform: translateX(2px);
  color: var(--cc-vio);
}
.sca-cc-ai .cc-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-ink-2);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.sca-cc-ai .cc-link:hover { color: var(--cc-vio); }

.sca-cc-ai .cc-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--cc-paper-3);
  color: var(--cc-ink);
  text-transform: uppercase;
  font-weight: 500;
}
.sca-cc-ai .cc-badge-vio {
  background: var(--cc-vio-soft);
  color: var(--cc-vio-2);
}

/* =========================================================
   Sister-site feature strip — subdued navy gradient. Pattern
   echoes the .co.uk plum strip exactly (#2B3F66 → #253551 →
   accent), with the accent dialled back to a deep navy-blue
   so the body stays restrained; the brightest blue (.co.uk's
   --cc-sky #7DA8F0) only shows through the radial bloom
   overlays and as the italic accent word.
   ========================================================= */
.sca-cc-ai .cc-ai-feature-wrap { margin: 0; }
.sca-cc-ai .cc-ai-feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  background: linear-gradient(135deg, #2B3F66 0%, #253551 55%, #2F4980 100%);
  color: var(--cc-ink-inv);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 0;
  padding: 26px 28px;
  transition: transform .25s var(--cc-ease), box-shadow .25s;
}
.sca-cc-ai .cc-ai-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -16px rgba(37,73,128,0.5);
}
.sca-cc-ai .cc-ai-feature-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(340px 340px at 110% -30%, rgba(125,168,240,0.18), transparent 60%),
    radial-gradient(300px 240px at -10% 130%, rgba(125,168,240,0.10), transparent 55%);
  filter: blur(8px);
}
.sca-cc-ai .cc-ai-feature-left {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  color: var(--cc-ink-inv);
  text-decoration: none;
  background: transparent;
}
.sca-cc-ai .cc-ai-feature-left .cc-eyebrow {
  color: var(--cc-sky-soft);
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 4px;
}
.sca-cc-ai .cc-ai-feature-left h2 {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 4px;
}
.sca-cc-ai .cc-ai-feature-left h2 em,
.sca-cc-ai .cc-ai-feature-left h2 .cc-italic {
  font-family: var(--cc-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cc-sky);
  letter-spacing: -0.01em;
}
.sca-cc-ai .cc-ai-feature-left p {
  color: rgba(214,221,233,0.85);
  font-size: 14.5px;
  max-width: 52ch;
  margin: 4px 0 0;
  line-height: 1.55;
}
.sca-cc-ai .cc-ai-feature-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.sca-cc-ai .cc-ai-feature .cc-btn-inv {
  background: #fff;
  color: var(--cc-ink);
  border-color: #fff;
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 600;
}
.sca-cc-ai .cc-ai-feature .cc-btn-inv:hover {
  background: var(--cc-sky-soft);
  border-color: var(--cc-sky-soft);
  color: var(--cc-ink);
}
.sca-cc-ai .cc-ai-feature-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 10px;
  background: transparent;
  position: relative;
  align-self: stretch;
}
.sca-cc-ai .cc-ai-feature-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(20px);
  transition: background .2s, border-color .2s, transform .2s;
}
.sca-cc-ai .cc-ai-feature-tile:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(184,210,247,0.4);
  transform: translateY(-1px);
}
.sca-cc-ai .cc-ai-feature-tile-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(125,168,240,0.15);
  border: 1px solid rgba(125,168,240,0.22);
  display: grid;
  place-items: center;
  color: var(--cc-sky-soft);
  font-size: 13px;
}
.sca-cc-ai .cc-ai-feature-tile-t,
.sca-cc-ai .cc-ai-feature-tile > span:not(.cc-ai-feature-tile-ic):not(.cc-ai-feature-tile-n) {
  font-family: "Poppins", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.sca-cc-ai .cc-ai-feature-tile-n {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(214,221,233,0.75);
  letter-spacing: 0;
  line-height: 1.4;
}

/* =========================================================
   Recently added rail
   ========================================================= */
.sca-cc-ai .cc-recent {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sca-cc-ai .cc-recent-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sca-cc-ai .cc-recent-head h3 {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--cc-ink);
  letter-spacing: -0.02em;
}
.sca-cc-ai .cc-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.sca-cc-ai .cc-rail::-webkit-scrollbar { height: 8px; }
.sca-cc-ai .cc-rail::-webkit-scrollbar-thumb {
  background: var(--cc-rule-2);
  border-radius: 4px;
}
.sca-cc-ai .cc-rail-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sca-cc-ai .cc-rail-thumb {
  aspect-ratio: 1/1;
  border-radius: 10px;
  border: 1px solid var(--cc-rule);
  background-color: var(--cc-paper-2);
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(45deg, rgba(124,58,237,0.05) 0 1px, transparent 1px 10px);
}
.sca-cc-ai .cc-rail-thumb[data-i="0"] { background-color: var(--cc-paper-2); }
.sca-cc-ai .cc-rail-thumb[data-i="1"] { background-color: var(--cc-vio-soft); }
.sca-cc-ai .cc-rail-thumb[data-i="2"] { background-color: var(--cc-paper-3); }
.sca-cc-ai .cc-rail-thumb[data-i="3"] { background-color: var(--cc-paper-2); }
.sca-cc-ai .cc-rail-thumb[data-i="4"] { background-color: var(--cc-vio-soft); }
.sca-cc-ai .cc-rail-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sca-cc-ai .cc-rail-thumb-num {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--cc-ink-2);
  letter-spacing: 0.08em;
}
.sca-cc-ai .cc-rail-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sca-cc-ai .cc-rail-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cc-muted);
}
.sca-cc-ai .cc-rail-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--cc-ink);
}

/* =========================================================
   Footer
   ========================================================= */
.sca-cc-ai .cc-footer {
  margin-top: 8px;
  padding: 16px 0 0;
  border-top: 1px solid var(--cc-rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-muted);
  text-align: center;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .sca-cc-ai .cc-header { grid-template-columns: 1fr; }
  .sca-cc-ai .cc-stats { flex-wrap: wrap; gap: 14px; }
  .sca-cc-ai .cc-hero { grid-template-columns: 1fr; }
  .sca-cc-ai .cc-pick { grid-template-columns: 1fr; }
  .sca-cc-ai .cc-pick-thumb { min-height: 140px; }
  .sca-cc-ai .cc-ai-feature { grid-template-columns: 1fr; }
  .sca-cc-ai .cc-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sca-cc-ai .cc-bento { grid-template-columns: repeat(2, 1fr); }
  .sca-cc-ai .cc-packs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .sca-cc-ai .cc-bento { grid-template-columns: 1fr; }
  .sca-cc-ai .cc-summary { grid-template-columns: 1fr; }
  .sca-cc-ai .cc-hello h1 { font-size: clamp(30px, 9vw, 42px); }
  .sca-cc-ai .cc-packs { grid-template-columns: 1fr; }
  .sca-cc-ai .cc-pack { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
  .sca-cc-ai .cc-pack-num { font-size: 36px; margin-top: 0; }
  .sca-cc-ai .cc-pack-name { order: -1; flex: 0 0 100%; }
  .sca-cc-ai .cc-pack-unit { margin-top: 0; margin-left: 4px; }
  .sca-cc-ai .cc-pack-price { margin-top: 0; margin-left: auto; align-self: center; }
}