/* =========================================================================
   Ludic Media Studio — Build Your Campaign (build-your-campaign.html)
   Loaded on that page only, after sections.css, audience.css and site.css,
   via the page's `css` in _build/build_campaign_builder.py. `cb-` classes.

   Same rules as every stylesheet here: no ID selectors, the documented
   breakpoints only (36 / 48 / 64 / 80rem, 47.999 / 63.999 for max-width are
   NOT used), measured colour pairs only, never white on yellow. Everything
   the script hides or reveals hangs off a class or attribute it sets, so
   with no script this page is a plain, complete form.
   ========================================================================= */

:root {
  --cb-shadow: 0.5rem 0.5rem 0 var(--black);
  --cb-shadow-y: 0.5rem 0.5rem 0 var(--yellow);
  --cb-sticky: calc(var(--header-h) + var(--v2-subnav-h, 3.25rem) + 1rem);
}

[data-cb-nav][hidden],
[data-cb-actions][hidden],
[data-cb-extras][hidden],
.cb-shuffle[hidden],
.cb-block__rec[hidden],
.cb-dock[hidden],
.cb-dots[hidden],
.cb-q[hidden] { display: none; }

/* ---------- hero --------------------------------------------------------- */
.cb-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-md); }
.cb-facts li { padding: 0.25rem 0.75rem; border: 2px solid var(--yellow); color: var(--yellow); font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.cb-hero .button-group { margin-top: var(--space-md); }

.cb-demo {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 34rem;
  padding: var(--space-sm);
  background: var(--white);
  color: var(--black);
  border: 3px solid var(--black);
  box-shadow: 0.75rem 0.75rem 0 var(--yellow);
  transform: rotate(1.5deg);
}
.cb-demo__name { display: grid; padding-bottom: 0.625rem; border-bottom: 2px dashed var(--black); font-size: var(--text-xl); font-weight: 900; line-height: 1.05; }
.cb-demo__name span { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cb-demo__lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; min-height: 11rem; }
.cb-demo__lane { display: flex; flex-direction: column; padding: 0.5rem 0.375rem; background: var(--cream); }
.cb-demo__stage { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.cb-demo__bricks { display: grid; gap: 0.375rem; margin-top: auto; padding-top: 0.5rem; }
.cb-demo__brick {
  padding: 0.375rem 0.4375rem;
  border: 2px solid var(--black);
  background: var(--yellow);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.15;
  animation: cb-drop 0.6s cubic-bezier(.3, 1.4, .5, 1) both;
  animation-delay: calc(var(--i, 0) * 0.35s + 0.4s);
}
.cb-demo__brick:nth-child(even) { background: var(--black); color: var(--yellow); }
@keyframes cb-drop { from { opacity: 0; transform: translateY(-160%) rotate(-8deg); } }
.cb-demo__meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 1rem; margin-top: 0.75rem; }
.cb-demo__meters li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.cb-demo__meters i { display: block; height: 0.625rem; border: 2px solid var(--black); background: linear-gradient(90deg, var(--black) var(--v, 50%), transparent var(--v, 50%)); }
.cb-demo__plus {
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--black);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  animation: cb-pop 0.6s 2.6s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes cb-pop { from { transform: scale(0); } }

/* ---------- step 1: the brief --------------------------------------------- */
.cb-brief { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 64rem) { .cb-brief { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xl); } }
@media (min-width: 64rem) { .cb-brief__intro { position: sticky; top: var(--cb-sticky); } }
.cb-dots { display: flex; gap: 0.5rem; margin-top: var(--space-md); }
.cb-dots li { width: 2.25rem; height: 0.5rem; background: var(--white); border: 2px solid var(--black); transition: background var(--duration) var(--ease); }
.cb-dots li.is-done { background: var(--black); }
.cb-dots li.is-now { background: var(--yellow); }

.cb-deck { display: grid; gap: var(--space-md); }
.cb-q { padding: var(--space-md); background: var(--white); border: 3px solid var(--black); box-shadow: var(--cb-shadow); }
@media (min-width: 48rem) { .cb-q { padding: var(--space-lg); } }
.cb-deck.is-live .cb-q { animation: cb-in 0.4s var(--ease); }
@keyframes cb-in { from { opacity: 0; transform: translateX(1.5rem) rotate(1deg); } }
.cb-q__n { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cb-q__n span { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--yellow); border: 2px solid var(--black); font-size: var(--text-base); letter-spacing: 0; }
.cb-q__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.cb-q__title { margin-top: var(--space-xs); padding: 0; font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.cb-q__sub { margin-top: var(--space-md); padding: 0; font-size: var(--text-md); font-weight: 800; }
.cb-q__hint { margin-top: 0.375rem; color: var(--ink-muted); }
.cb-pick { margin-top: var(--space-sm); gap: 0.625rem; }
.cb-pick .v2-pick__label { padding: 0.625rem 1.125rem; font-size: var(--text-base); border-width: 2px; transition: background var(--duration) var(--ease), transform var(--duration) var(--ease); }
.cb-pick .v2-pick__input:checked + .v2-pick__label { transform: rotate(-1.5deg); box-shadow: 0.25rem 0.25rem 0 var(--yellow); }
.cb-q__say { min-height: 1.5em; margin-top: var(--space-sm); font-weight: 700; }
.cb-q__say:not(:empty)::before { content: "\201C"; display: inline-block; margin-right: 0.375rem; padding: 0 0.375rem; background: var(--yellow); font-weight: 900; }
.cb-q__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 2px dashed var(--black); }
.cb-q__nav .button { margin-left: auto; }
.cb-q__back { padding: 0.5rem 0; border: 0; background: none; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- step 2: name it ------------------------------------------------ */
.cb-name { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .cb-name { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.cb-name__form { display: grid; gap: var(--space-sm); }
.cb-name__form .vx-lede { margin-bottom: var(--space-xs); }
.cb-name__form > .vx-eyebrow { justify-self: start; }
.cb-field__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cb-field__row .v2-form__input { flex: 1 1 14rem; width: auto; font-size: var(--text-md); font-weight: 800; }
.cb-shuffle { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border: 2px solid var(--black); background: var(--yellow); font-weight: 800; cursor: pointer; }
.cb-shuffle:hover { background: var(--black); color: var(--yellow); }
.cb-shuffle span { font-size: 1.25rem; line-height: 1; }
.cb-moods .v2-pick { margin-top: 0.5rem; }

.cb-preview { padding: var(--space-sm); background: var(--cream); border: 3px solid var(--black); }
.cb-preview__label { display: inline-block; padding: 0 0.5rem; background: var(--black); color: var(--yellow); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cb-preview__note { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--ink-muted); }
.cb-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
@media (min-width: 48rem) {
  .cb-assets { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 0.9fr); align-items: start; }
  .cb-asset--poster { grid-row: 1 / span 2; }
  .cb-asset--phone { grid-row: 1 / span 2; }
  .cb-asset--banner { grid-column: 1 / -1; }
  .cb-asset--badge { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
.cb-asset { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--black); background: var(--black); color: var(--white); transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease), border-radius 0.35s var(--ease); }
.cb-asset__tag { position: absolute; z-index: 1; top: 0.375rem; left: 0.375rem; padding: 0 0.375rem; background: var(--white); color: var(--black); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cb-asset__img { width: 100%; object-fit: cover; }
.cb-asset__name { padding: 0.5rem 0.625rem 0; font-size: var(--text-lg); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--yellow); overflow-wrap: anywhere; }
.cb-asset__line { padding: 0.25rem 0.625rem 0.625rem; font-size: var(--text-xs); line-height: 1.35; }
.cb-asset--poster .cb-asset__img { aspect-ratio: 4 / 3; }
.cb-asset--poster .cb-asset__name { font-size: var(--text-xl); padding-top: 0.75rem; }
.cb-asset--poster .cb-asset__line { padding-bottom: 0.875rem; }
.cb-asset--phone { border-width: 5px; border-radius: 1.25rem; }
.cb-asset__screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 16; }
.cb-asset__screen .cb-asset__img { position: absolute; top: 0; left: 0; height: 60%; }
.cb-asset__screen .cb-asset__name { position: relative; margin-top: auto; padding-bottom: 0.25rem; }
.cb-asset__swipe { position: relative; padding: 0 0.625rem 0.75rem; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.cb-asset--banner { flex-direction: row; align-items: stretch; min-height: 6rem; }
.cb-asset--banner .cb-asset__name { flex: 1; padding-top: 1.75rem; }
.cb-asset--banner .cb-asset__line { display: none; }
.cb-asset--banner .cb-asset__img { width: 38%; flex: none; }
@media (min-width: 48rem) {
  .cb-asset--banner .cb-asset__line { display: block; position: absolute; left: 0; bottom: 0; max-width: 60%; }
  .cb-asset--banner .cb-asset__name { padding-bottom: 2rem; }
}
.cb-asset--badge { align-items: center; padding: 1.75rem 0.5rem 1rem; text-align: center; border-radius: 0.75rem; }
.cb-asset--badge::before { content: ""; width: 2rem; height: 0.5rem; margin-bottom: 0.625rem; border-radius: 1rem; background: currentColor; }
.cb-asset__hello { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.cb-asset--badge .cb-asset__name { padding: 0.25rem 0 0; font-size: var(--text-md); }

/* moods — every pair is one checks.py measures */
.cb-mood--warm .cb-asset { background: var(--cream); color: var(--black); border-radius: 0.75rem; }
.cb-mood--warm .cb-asset__name { color: var(--black); }
.cb-mood--warm .cb-asset__line { color: var(--dark-grey); }
.cb-mood--warm .cb-asset__name span { background: linear-gradient(transparent 62%, var(--yellow) 62%); }
.cb-mood--warm .cb-asset__tag { background: var(--black); color: var(--white); }
.cb-mood--playful .cb-asset { background: var(--yellow); color: var(--black); border-style: dashed; border-width: 3px; }
.cb-mood--playful .cb-asset__name { color: var(--black); }
.cb-mood--playful .cb-asset--poster { transform: rotate(-2deg); }
.cb-mood--playful .cb-asset--phone { transform: rotate(2deg); }
.cb-mood--playful .cb-asset--badge { transform: rotate(-3deg); }
.cb-mood--playful .cb-asset__tag { background: var(--black); color: var(--yellow); }
.cb-mood--calm .cb-asset { background: var(--white); color: var(--black); border-width: 1px; }
.cb-mood--calm .cb-asset__name { color: var(--black); font-weight: 800; letter-spacing: -0.01em; }
.cb-mood--calm .cb-asset__line { color: var(--dark-grey); }
.cb-mood--calm .cb-asset__tag { background: var(--cream); color: var(--black); }
.cb-assets.is-new .cb-asset__name { animation: cb-pop 0.4s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- step 3: build it ----------------------------------------------- */
.cb-build__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm); }
.cb-build-wrap .button--secondary { background: transparent; color: var(--white); border-color: var(--white); }
.cb-build-wrap .button--secondary:hover,
.cb-build-wrap .button--secondary:focus-visible { background: var(--white); color: var(--black); }
.cb-build { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 64rem) { .cb-build { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr); gap: var(--space-lg); } }
.cb-stages { display: grid; gap: var(--space-lg); }
.cb-stage__head { display: grid; gap: 0.25rem; margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 2px dashed var(--yellow); }
.cb-stage__when { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.cb-stage__name { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; line-height: 1.05; }
.cb-stage__goal { font-size: var(--text-sm); }
.cb-blocks { display: grid; gap: var(--space-sm); }
@media (min-width: 48rem) { .cb-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-block { position: relative; }
.cb-block__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-block__label {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
  height: 100%;
  padding: 0.75rem 3.25rem 0.75rem 0.75rem;
  background: var(--white);
  color: var(--black);
  border: 3px solid var(--white);
  cursor: pointer;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.cb-block__label:hover { transform: translate(-0.125rem, -0.125rem); box-shadow: 0.375rem 0.375rem 0 var(--yellow); }
.cb-block__input:focus-visible + .cb-block__label { outline: 3px solid var(--yellow); outline-offset: 3px; }
.cb-block__input:checked + .cb-block__label { border-color: var(--yellow); box-shadow: var(--cb-shadow-y); }
.cb-block__media img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--black); }
.cb-block__text { display: grid; gap: 0.25rem; align-content: start; }
.cb-block__sol { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dark-grey); }
.cb-block__name { font-size: var(--text-base); font-weight: 900; line-height: 1.2; }
.cb-block__body { font-size: var(--text-xs); line-height: 1.45; color: var(--dark-grey); }
.cb-block__plus {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--black);
  transition: transform 0.3s cubic-bezier(.3, 1.6, .5, 1), background var(--duration) var(--ease);
}
.cb-block__plus::before { content: "+"; font-size: 1.375rem; font-weight: 900; line-height: 1; }
.cb-block__input:checked + .cb-block__label .cb-block__plus { background: var(--black); color: var(--yellow); transform: rotate(360deg); }
.cb-block__input:checked + .cb-block__label .cb-block__plus::before { content: "\2713"; font-size: 1rem; }
.cb-block__rec { position: absolute; bottom: 0.75rem; right: 0.75rem; padding: 0 0.375rem; background: var(--yellow); color: var(--black); border: 2px solid var(--black); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(-3deg); }
.cb-block.is-rec .cb-block__label { padding-bottom: 2.25rem; }

/* the board */
.cb-board[hidden] { display: none; }
@media (min-width: 64rem) { .cb-board { position: sticky; top: var(--cb-sticky); } }
.cb-board__inner { padding: var(--space-sm); background: var(--white); color: var(--black); border: 3px solid var(--yellow); box-shadow: 0.75rem 0.75rem 0 var(--yellow); }
@media (min-width: 64rem) { .cb-board__inner { max-height: calc(100vh - var(--cb-sticky) - 1.5rem); overflow-y: auto; } }
.cb-board__kicker { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cb-board__title { font-size: var(--text-xl); font-weight: 900; line-height: 1.05; overflow-wrap: anywhere; }
.cb-board__count { margin-top: 0.25rem; font-size: var(--text-sm); color: var(--dark-grey); }
.cb-lanes { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.cb-lane { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: 0.5rem; align-items: start; padding: 0.5rem; background: var(--cream); }
.cb-lane__name { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding-top: 0.25rem; }
.cb-lane__bricks { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.cb-lane__bricks:empty { display: none; }
.cb-brick { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.25rem 0.5rem; border: 2px solid var(--black); background: var(--yellow); font-size: var(--text-xs); font-weight: 800; line-height: 1.2; animation: cb-drop 0.45s cubic-bezier(.3, 1.4, .5, 1); }
.cb-brick:nth-child(even) { background: var(--black); color: var(--yellow); }
.cb-lane__empty { font-size: var(--text-xs); color: var(--dark-grey); padding-top: 0.25rem; }
.cb-lane__bricks:not(:empty) + .cb-lane__empty { display: none; }
.cb-strength { display: flex; align-items: baseline; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.625rem; border-top: 2px dashed var(--black); }
.cb-strength__lbl { font-size: var(--text-sm); font-weight: 800; }
.cb-strength__val { padding: 0 0.375rem; background: var(--yellow); font-size: var(--text-xl); font-weight: 900; font-variant-numeric: tabular-nums; }
.cb-meters { display: grid; gap: 0.375rem; margin-top: 0.5rem; }
.cb-meter { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) 2rem; gap: 0.5rem; align-items: center; font-size: var(--text-xs); font-weight: 800; }
.cb-meter__bar { height: 0.75rem; border: 2px solid var(--black); }
.cb-meter__fill { display: block; height: 100%; width: 0; background: var(--black); transition: width 0.6s cubic-bezier(.2, .7, .2, 1); }
.cb-meter:nth-child(odd) .cb-meter__fill { background: var(--yellow); }
.cb-meter__val { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) {
  /* two columns of meters, so the whole board fits a laptop screen */
  .cb-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 1rem; }
  .cb-meter { grid-template-columns: minmax(0, 1fr) 1.75rem; gap: 0.125rem 0.375rem; }
  .cb-meter__bar { grid-column: 1 / -1; grid-row: 2; }
  .cb-lane { padding: 0.375rem 0.5rem; }
  .cb-board__title { font-size: var(--text-lg); }
}
.cb-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.cb-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border: 2px dashed var(--mid-grey); color: var(--dark-grey); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.02em; }
.cb-badge__ico { opacity: 0.35; }
.cb-badge.is-on { border: 2px solid var(--black); background: var(--yellow); color: var(--black); animation: cb-pop 0.45s cubic-bezier(.3, 1.6, .5, 1); }
.cb-badge.is-on .cb-badge__ico { opacity: 1; }
.cb-coach { position: relative; display: grid; gap: 0.25rem; margin-top: 0.875rem; padding: 0.625rem 0.75rem; background: var(--black); color: var(--white); font-size: var(--text-sm); line-height: var(--leading-mid); }
.cb-coach::before { content: ""; position: absolute; top: -0.5rem; left: 1.25rem; border-inline: 0.5rem solid transparent; border-bottom: 0.5rem solid var(--black); }
.cb-coach__who { justify-self: start; padding: 0 0.375rem; background: var(--yellow); color: var(--black); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cb-board__send { margin-top: 0.875rem; width: 100%; }

/* the dock: phones and tablets, once something is on the board */
.cb-dock {
  position: fixed;
  z-index: 45;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem 0.875rem;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  background: var(--black);
  color: var(--white);
  border: 2px solid var(--yellow);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.cb-dock > span { white-space: nowrap; }
.cb-dock strong { color: var(--yellow); }
.cb-dock__go { margin-left: auto; padding: 0.25rem 0.625rem; background: var(--yellow); color: var(--black); font-weight: 800; }
@media (min-width: 64rem) { .cb-dock { display: none; } }

/* ---------- proof ------------------------------------------------------------ */
.cb-proof { display: grid; gap: var(--space-md); }
@media (min-width: 48rem) { .cb-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-proof__card { display: grid; align-content: start; gap: 0.5rem; padding: var(--space-sm); background: var(--white); border: 3px solid var(--black); box-shadow: var(--cb-shadow); }
.cb-proof__link { display: grid; gap: 0.375rem; text-decoration: none; }
.cb-proof__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid var(--black); }
.cb-proof__title { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; font-size: var(--text-md); font-weight: 900; }
.cb-proof__big { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.cb-proof__what { font-size: var(--text-sm); color: var(--dark-grey); }
.cb-proof__built { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 2px dashed var(--black); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cb-proof__chips { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.cb-proof__chips li { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.125rem 0.5rem; border: 2px solid var(--black); background: var(--yellow); font-size: var(--text-xs); font-weight: 800; }

/* ---------- step 4: send it --------------------------------------------------- */
.cb-send-wrap { background: var(--black); color: var(--white); }
/* Build it and Send it are both black and run on from each other; the
   shared foundation rule drops the seam between them, so mark the step. */
.cb-build-wrap + .cb-send-wrap .cb-send::before { content: ""; grid-column: 1 / -1; border-top: 2px dashed var(--yellow); }
.cb-send { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .cb-send { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.cb-send__card { display: grid; gap: var(--space-sm); }
.cb-sum { margin-top: var(--space-md); padding: var(--space-md); background: var(--white); color: var(--black); border: 3px solid var(--yellow); box-shadow: 0.75rem 0.75rem 0 var(--yellow); transform: rotate(-1deg); }
.cb-sum[hidden] { display: none; }
.cb-sum__kicker { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cb-sum__name { margin-top: 0.25rem; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cb-sum__line { margin-top: 0.375rem; color: var(--dark-grey); }
.cb-sum__head { margin-top: var(--space-sm); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cb-sum__list { display: grid; gap: 0; margin-top: 0.5rem; border-top: 2px solid var(--black); }
.cb-sum__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.4375rem; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.cb-sum__row dt { font-weight: 800; }
.cb-sum__row dd { margin: 0; }
.cb-sum__strength { margin-top: var(--space-sm); font-weight: 800; }
.cb-sum__strength strong { padding: 0 0.375rem; background: var(--yellow); }
.cb-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: var(--space-xs); border-top: 2px dashed var(--black); }
.cb-extra { padding: 0.375rem 0.875rem; border: 2px solid var(--black); background: var(--white); color: var(--black); font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.cb-extra:hover { background: var(--yellow); }
.cb-extras__msg { flex-basis: 100%; min-height: 1.25em; font-size: var(--text-sm); font-weight: 700; }
.cb-done { padding: var(--space-sm); background: var(--yellow); color: var(--black); border: 2px solid var(--black); }
.cb-done[hidden] { display: none; }
.cb-done__title { font-size: var(--text-lg); font-weight: 900; }
.cb-done p + p { margin-top: 0.25rem; }

/* ---------- print: the campaign on a page, and nothing else ------------------- */
/* Only once the script has filled the summary in (html.cb-ready); without it,
   the page prints as itself. Everything that neither is nor holds the summary
   goes, so the plan prints on one page. */
@media print {
  .cb-ready body *:not(:has(.cb-sum)):not(.cb-sum):not(.cb-sum *) { display: none !important; }
  .cb-ready body *:has(.cb-sum) { margin: 0 !important; padding: 0 !important; min-height: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  .cb-ready .cb-sum::after { content: "Made with the Ludic Media Studio campaign builder \00b7  creatives@ludicgroup.com"; display: block; margin-top: 1.25rem; font-size: 9pt; }
  .cb-ready .cb-sum { width: 100%; max-width: none; margin: 0; padding: 1.5rem; transform: none !important; box-shadow: none !important; border: 2px solid #000 !important; }
}