/* ---------------------------------------------------------------------------
   Insight Clinic - Playground sections

   Two rules this file exists to obey:

   1. Base element defaults are wrapped in :where() so they carry ZERO
      specificity. A host theme scoping its defaults as body.theme h2 wins at
      (0,1,2) and silently clobbers every single-class section rule. Any
      component class must beat the base, so the base must weigh nothing.

   2. Never put angle brackets in a comment here. PHP finfo then reads the file
      as text/html and the importer skips it without a word, and the page ships
      unstyled.

   Colour: every section is white, a warm off-white, or the brand pink at 50
   percent. Text is always ink, so nothing ever needs white-on-colour.
--------------------------------------------------------------------------- */

/* Every section breathes by default. 50-100px top and bottom, so the hero
   never runs straight into the next heading. The builder's own padding control
   still adds on top of this when an editor wants more. */
.icp { padding-block: clamp(50px, 6vw, 100px); }
.icp-hero, .icp-playstrip { padding-block: 0; }
.icp-hero { padding-top: clamp(50px, 6vw, 100px); }

.icp,
.icp *,
.icp *::before,
.icp *::after { box-sizing: border-box; }

:where(.icp) {
  color: var(--ic-ink);
  font: 400 var(--icp-body) / 1.72 var(--icp-font);
  -webkit-font-smoothing: antialiased;
}
:where(.icp h1, .icp h2, .icp h3) {
  margin: 0 0 0.5em;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
}
:where(.icp p) { margin: 0 0 1em; }
:where(.icp img) { max-width: 100%; height: auto; display: block; }
:where(.icp ul, .icp ol) { margin: 0 0 1em; padding-left: 1.25rem; }

.icp :focus-visible {
  outline: 3px solid var(--ic-rose-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.icp [hidden] { display: none !important; }

.icp-rt :last-child { margin-bottom: 0; }

/* ---------------- layout ---------------- */

.icp-wrap {
  width: 100%;
  max-width: var(--icp-wrap);
  margin-inline: auto;
  padding-inline: var(--icp-gutter);
}
.icp-wrap--narrow { max-width: var(--icp-wrap-narrow); }

.icp-head { max-width: 62ch; margin-bottom: 2.5rem; }
.icp .icp-h2 { font-size: var(--icp-h2); }
.icp .icp-eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: var(--ic-rose-deep);
}
.icp-eyebrow::after {
  content: '';
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 0.6rem;
  background: var(--ic-rose);
}
.icp .icp-lede { font-size: 1.15rem; line-height: 1.65; color: var(--ic-ink-soft); }

/* ---------------- tone ----------------
   There is no dark band any more. The real brand rose is a LIGHT pink, and
   white on it is 2.16:1 - unusable - which is what pushed the earlier version
   to a burgundy that was not their colour at all. Solved the other way: the
   pink is used at 50 percent strength (#f3cece), where INK reads at 4.80:1,
   and it appears on exactly one section. Everything else is white or a warm
   off-white, so no text ever sits on a saturated colour. */

/* Cursor magnetism. JS writes --mx/--my; the CSS decides whether to honour it,
   so Calm mode is a real stop rather than a slower version of the same thing. */
[data-icp-mode='playful'] .icp-svc__card,
[data-icp-mode='playful'] .icp-cbox,
[data-icp-mode='playful'] .icp-mate {
  /* Deliberately small. At the earlier strength the cards leaned far enough to
     touch their neighbours, which reads as broken rather than alive. The JS
     also clamps the offset, so a fast pointer cannot push them into contact. */
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
  transition: transform 220ms var(--icp-ease), border-color var(--icp-dur) var(--icp-ease),
    box-shadow var(--icp-dur) var(--icp-ease);
}
[data-icp-mode='playful'] .icp-svc__card:hover { box-shadow: var(--icp-shadow-2); }

/* ---------------- buttons, chips, time ---------------- */

.icp .icp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid var(--ic-rose-deep);
  border-radius: var(--icp-pill);
  background: transparent;
  color: var(--ic-rose-deep);
  font: 600 var(--icp-small) / 1.2 var(--icp-font);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--icp-dur) var(--icp-ease),
    transform var(--icp-press) var(--icp-spring);
}
.icp-btn--primary { background: var(--ic-rose-deep); color: #fff; }
.icp-btn--primary:hover { background: #7f4444; }
.icp-btn--ghost { border-color: var(--ic-line); color: var(--ic-ink); }
.icp-btn:active { transform: scale(0.975); }

.icp-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.icp .icp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border: 1.5px solid var(--ic-line);
  border-radius: var(--icp-pill);
  background: #fff;
  color: var(--ic-ink);
  font: 500 var(--icp-small) / 1.3 var(--icp-font);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: border-color var(--icp-dur) var(--icp-ease),
    background var(--icp-dur) var(--icp-ease),
    transform var(--icp-press) var(--icp-spring);
}
.icp-chip:hover { border-color: var(--ic-rose); }
.icp-chip:active { transform: scale(0.975); }
.icp-chip[aria-pressed='true'] {
  background: var(--ic-rose-deep);
  border-color: var(--ic-rose-deep);
  color: #fff;
}
.icp-chip__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--p-rose);
  flex: none;
}
.icp-chip[aria-pressed='true'] .icp-chip__dot { background: rgba(255, 255, 255, 0.85); }

.icp .icp-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--icp-pill);
  background: var(--soft-sage);
  color: var(--on-sage);
  font-size: 0.8125rem;
  font-weight: 600;
}

.icp-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ic-rose-deep);
  font: 500 var(--icp-small) / 1.4 var(--icp-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------------- hero ---------------- */

.icp-hero { position: relative; overflow: hidden; }
.icp-hero__bg { position: absolute; inset: 0; z-index: 0; background: #1a1714; }
.icp-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}
.icp-hero__slide:first-child { opacity: 1; }
[data-icp-mode='playful'] .icp-hero__slide {
  animation: icp-bgfade 48s linear infinite;
  opacity: 0;
}
[data-icp-mode='playful'] .icp-hero__slide:nth-child(2) { animation-delay: -36s; }
[data-icp-mode='playful'] .icp-hero__slide:nth-child(3) { animation-delay: -24s; }
[data-icp-mode='playful'] .icp-hero__slide:nth-child(4) { animation-delay: -12s; }
@keyframes icp-bgfade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  25% { opacity: 1; }
  31% { opacity: 0; }
  100% { opacity: 0; }
}
.icp-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20, 18, 16, 0.78), rgba(20, 18, 16, 0.84));
}
.icp-hero__inner { position: relative; z-index: 1; }
.icp .icp-hero__h { font-size: var(--icp-h1); color: #fff; max-width: 16ch; }
.icp .icp-hero__lede { max-width: 52ch; font-size: 1.2rem; color: rgba(255, 255, 255, 0.82); }
.icp-hero__toy {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: clamp(150px, 20vh, 210px);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  touch-action: none;
  cursor: grab;
}

.icp-needs { margin-top: 2.5rem; }
.icp .icp-needs__q { font-weight: 600; margin-bottom: 0.9rem; color: rgba(255, 255, 255, 0.82); }
.icp-answer {
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #fff;
  border-radius: var(--icp-r-lg);
  box-shadow: var(--icp-shadow-1);
  max-width: 640px;
  color: var(--ic-ink);
}
.icp-answer[data-empty='true'] { color: var(--ic-ink-soft); }
.icp-answer__ph { margin: 0; }
.icp .icp-answer__title { font-size: var(--icp-h3); margin-bottom: 0.35rem; }
.icp-answer__actions {
  display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-top: 1.1rem;
}
.icp-answer__more,
.icp-answer__explain {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--ic-line);
  font-size: var(--icp-small);
}
.icp-answer__explain {
  border-top: 0;
  border-left: 3px solid var(--ic-rose);
  padding: 0.9rem 1.1rem;
  background: var(--soft-rose);
  border-radius: 0 var(--icp-r-sm) var(--icp-r-sm) 0;
}

/* ---------------- services ---------------- */

.icp-svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.25rem;
}
.icp-svc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--ic-line);
  border-radius: var(--icp-r-lg);
  box-shadow: var(--icp-shadow-1);
  overflow: hidden;
  color: var(--ic-ink);
}
.icp .icp-svc__img {
  width: calc(100% + 3.2rem);
  margin: -1.6rem -1.6rem 1.1rem;
  height: 168px;
  object-fit: cover;
  max-width: none;
  background: var(--soft-sky);
}
.icp-svc__blob {
  display: block;
  width: 46px; height: 46px;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: var(--p-rose);
  margin-bottom: 1rem;
  transition: border-radius 900ms var(--icp-ease), transform var(--icp-dur) var(--icp-ease);
}
[data-icp-mode='playful'] .icp-svc__card:hover .icp-svc__blob {
  border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%;
  transform: scale(1.12) rotate(8deg);
}
.icp-svc__card:nth-child(6n+2) .icp-svc__blob { background: var(--p-sky); }
.icp-svc__card:nth-child(6n+3) .icp-svc__blob { background: var(--p-lilac); }
.icp-svc__card:nth-child(6n+4) .icp-svc__blob { background: var(--p-sage); }
.icp-svc__card:nth-child(6n+5) .icp-svc__blob { background: var(--p-butter); }
.icp-svc__card:nth-child(6n)   .icp-svc__blob { background: var(--p-clay); }
.icp .icp-svc__name { font-size: 1.19rem; font-weight: 600; margin-bottom: 0; }
.icp-svc__tabs { display: flex; gap: 0.3rem; margin: 0.9rem 0 0.85rem; flex-wrap: wrap; }
.icp-svc__tab {
  border: 1px solid var(--ic-line);
  background: none;
  border-radius: var(--icp-pill);
  padding: 0.3rem 0.62rem;
  font: 500 0.78rem / 1.3 var(--icp-font);
  color: var(--ic-ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.icp-svc__tab[aria-selected='true'] {
  background: var(--ic-ink);
  border-color: var(--ic-ink);
  color: #fff;
}
.icp .icp-svc__panel { font-size: var(--icp-small); color: var(--ic-ink-soft); min-height: 5.6em; }
.icp-svc__foot { margin-top: 2rem; }

/* ---------------- finder plus balloons ----------------
   The pit is not a container beside the card. It IS the section: a canvas
   pinned to all four edges, full bleed, with the finder card floating over it
   inside the normal content measure. */
.icp-finderwrap { position: relative; }
.icp-finderwrap__toy {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.icp-finderwrap__inner { position: relative; z-index: 1; }
.icp-toy__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.icp-toy__hint,
.icp-toy__calm {
  position: absolute;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.45rem 0.9rem;
  border-radius: var(--icp-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ic-ink-soft);
  font-size: 0.8125rem;
  pointer-events: none;
  white-space: nowrap;
}
.icp-toy__calm { display: none; }
.icp-toy__calm p { margin: 0; }
[data-icp-mode='calm'] .icp-toy__calm { display: block; }
[data-icp-mode='calm'] .icp-toy__hint { display: none; }
[data-icp-mode='calm'] .icp-toy__canvas,
[data-icp-mode='calm'] .icp-hero__toy,
[data-icp-mode='calm'] .icp-playstrip__toy { pointer-events: none; cursor: default; }
.icp-toy__msg {
  position: absolute;
  z-index: 2;
  max-width: 260px;
  padding: 0.8rem 1rem;
  background: #fff;
  color: var(--ic-ink);
  border-radius: var(--icp-r-md);
  box-shadow: var(--icp-shadow-2);
  font-size: var(--icp-small);
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 2px) scale(0.94);
  transition: opacity 240ms var(--icp-ease), transform 340ms var(--icp-spring);
}
.icp-toy__msg[data-show='true'] { opacity: 1; transform: translate(-50%, -12px) scale(1); }
.icp-toy__msg b { display: block; color: var(--ic-rose-deep); margin-bottom: 0.2rem; }

/* the card sits on the right so the balloons read across the whole band */
.icp-finder {
  width: min(100%, 620px);
  margin-left: auto;
  background: #fff;
  border-radius: var(--icp-r-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  color: var(--ic-ink);
  box-shadow: var(--icp-shadow-2);
}
.icp .icp-finder .icp-eyebrow { color: var(--ic-rose-deep); }
.icp-finder .icp-eyebrow::after { background: var(--ic-rose); }
.icp .icp-finder .icp-lede { color: var(--ic-ink-soft); }
.icp-finder__prog { display: flex; gap: 0.4rem; margin-bottom: 1.4rem; }
.icp-finder__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(90, 90, 84, 0.18);
  transition: background var(--icp-dur) var(--icp-ease), transform var(--icp-dur) var(--icp-ease);
}
.icp-finder__dot[data-on='true'] { background: var(--ic-rose-deep); transform: scale(1.25); }
.icp .icp-finder__q { font-size: var(--icp-h3); margin-bottom: 1.2rem; }
.icp-finder__nav { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.icp-finder__note {
  margin-top: 1.25rem;
  padding: 0.85rem 1.1rem;
  background: var(--soft-rose);
  border-radius: var(--icp-r-sm);
  font-size: 0.875rem;
  color: var(--ic-ink);
}
.icp-finder__result { margin: 0 0 0 1.25rem; }
.icp-finder__result li { margin-bottom: 0.5rem; }
@media (max-width: 900px) { .icp-finder { margin-inline: auto; } }

/* ---------------- journey ---------------- */

.icp-journey { display: grid; gap: 0.75rem; }
.icp-journey__row { display: grid; grid-template-columns: 54px 1fr; gap: 1.1rem; align-items: start; }
.icp-journey__num {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--soft-rose);
  color: var(--deep-rose);
  font-weight: 600;
  border: 2px solid var(--ic-rose);
  position: relative;
}
.icp-journey__row:not(:last-child) .icp-journey__num::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  width: 2px; height: calc(100% + 0.75rem);
  background: var(--ic-line);
  transform: translateX(-50%);
}
.icp-journey__btn {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--ic-line);
  border-radius: var(--icp-r-md);
  padding: 1rem 1.25rem;
  cursor: pointer;
  font: inherit;
  color: var(--ic-ink);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transition: border-color var(--icp-dur) var(--icp-ease), transform var(--icp-press) var(--icp-spring);
}
.icp-journey__btn:hover { border-color: var(--ic-rose); }
.icp-journey__btn:active { transform: scale(0.99); }
.icp .icp-journey__label { font-weight: 600; margin-right: auto; }
.icp-journey__caret { transition: transform var(--icp-dur) var(--icp-ease); opacity: 0.6; }
.icp-journey__btn[aria-expanded='true'] .icp-journey__caret { transform: rotate(90deg); }
.icp .icp-journey__body { padding: 0.9rem 1.25rem 0.4rem; font-size: var(--icp-small); color: var(--ic-ink-soft); }

/* ---------------- team ---------------- */

.icp-mates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.icp-mate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.5rem 1.1rem;
  border: 0;
  border-radius: var(--icp-r-lg);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform var(--icp-press) var(--icp-spring), background 300ms var(--icp-ease);
}
[data-icp-mode='playful'] .icp-mate:not([data-popped='true']):hover { transform: translateY(-4px); }
.icp-mate__face {
  position: relative;
  /* Fills the card rather than floating at a fixed 148px, so the photograph is
     the thing you see first. aspect-ratio keeps it a true circle at any width. */
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--p-rose);
  margin: 0 auto 0.75rem;
}
.icp-mate[data-hue='sky'] .icp-mate__face { background: var(--p-sky); }
.icp-mate[data-hue='sage'] .icp-mate__face { background: var(--p-sage); }
.icp-mate[data-hue='butter'] .icp-mate__face { background: var(--p-butter); }
.icp-mate[data-hue='lilac'] .icp-mate__face { background: var(--p-lilac); }
.icp-mate[data-hue='clay'] .icp-mate__face { background: var(--p-clay); }
.icp .icp-mate__face img {
  width: 100%; height: 100%;
  object-fit: cover;
  max-width: none;
  mix-blend-mode: luminosity;
  opacity: 0.92;
  transition: opacity 420ms var(--icp-ease);
}
@keyframes icp-sploge-face {
  0%, 100% { border-radius: 48% 52% 51% 49% / 50% 48% 52% 50%; }
  33% { border-radius: 55% 45% 44% 56% / 46% 55% 45% 54%; }
  66% { border-radius: 44% 56% 55% 45% / 56% 44% 56% 44%; }
}
/* The splodge morphs the FRAME, which made a portrait sit oddly inside a
   non-circular mask. Keep the frame a true circle and let the colour do the
   playful work instead. */
[data-icp-mode='playful'] .icp-mate:not([data-popped='true']) .icp-mate__face {
  animation: none;
}
[data-icp-mode='playful'] .icp-mate:nth-child(even):not([data-popped='true']) .icp-mate__face {
  animation-duration: 21s;
  animation-delay: -7s;
}
.icp-mate[data-popped='true'] {
  cursor: default;
  background: #fff;
  box-shadow: var(--icp-shadow-1);
  color: var(--ic-ink);
}
.icp-mate[data-popped='true']:hover { transform: none; }
.icp-mate[data-popped='true'] .icp-mate__face { border-radius: 50%; background: transparent; animation: none; }
.icp-mate[data-popped='true'] .icp-mate__face img { mix-blend-mode: normal; opacity: 1; }
.icp .icp-mate__name { font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.icp .icp-mate__role { font-size: 0.8125rem; color: var(--ic-ink-soft); line-height: 1.4; }
.icp .icp-mate__hint {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--deep-rose);
}
.icp-mate[data-popped='true'] .icp-mate__hint { display: none; }
.icp-mate[data-popped='true'] .icp-mate__name { color: var(--ic-ink); }
.icp-mate[data-popped='true'] .icp-mate__role { color: var(--ic-ink-soft); }
.icp .icp-mate__bio {
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--ic-rose);
  font: 400 var(--icp-small) / 1.6 var(--icp-font);
  color: var(--ic-ink);
  text-align: left;
}
.icp-team__group { margin: 2.5rem 0 0; text-align: center; }
.icp .icp-team__group img {
  width: 100%;
  max-width: 760px;
  height: auto;
  border-radius: var(--icp-r-lg);
  margin: 0 auto 0.75rem;
}
.icp-team__group figcaption { font-size: 0.8125rem; color: var(--ic-ink-soft); }

/* ---------------- questions ---------------- */

.icp-pops { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 2.5rem; align-items: flex-start; }
.icp-pop {
  position: relative;
  border: 0;
  cursor: pointer;
  width: 184px;
  height: 184px;
  flex: none;
  /* NOT a percentage. Percentage padding resolves against the containing
     block's width, not the element's own, which blew these up to 342px and
     crushed the text. A 184px circle inscribes about 130px, so 27px a side. */
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 50%;
  background: var(--p-rose);
  color: var(--on-rose);
  font: 600 0.95rem / 1.4 var(--icp-font);
  text-align: left;
  transition: border-radius 400ms var(--icp-ease), transform var(--icp-press) var(--icp-spring);
}
.icp-pop[data-hue='sky'] { background: var(--p-sky); color: var(--on-sky); }
.icp-pop[data-hue='sage'] { background: var(--p-sage); color: var(--on-sage); }
.icp-pop[data-hue='butter'] { background: var(--p-butter); color: var(--on-butter); }
.icp-pop[data-hue='lilac'] { background: var(--p-lilac); color: var(--on-lilac); }
.icp-pop[data-hue='clay'] { background: var(--p-clay); color: var(--on-clay); }
[data-icp-mode='playful'] .icp-pop:hover { transform: translateY(-3px); }
.icp-pop:active { transform: scale(0.97); }
.icp .icp-pop__q { display: block; }
.icp-pop__hint {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}
@keyframes icp-sploge {
  0%, 100% { border-radius: 47% 53% 51% 49% / 50% 47% 53% 50%; }
  20% { border-radius: 56% 44% 43% 57% / 45% 56% 44% 55%; }
  40% { border-radius: 42% 58% 56% 44% / 57% 42% 58% 43%; }
  60% { border-radius: 53% 47% 45% 55% / 44% 57% 43% 56%; }
  80% { border-radius: 45% 55% 57% 43% / 55% 44% 56% 45%; }
}
/* The :not() matters. A popped balloon sets animation:none, but at equal
   specificity the later rule wins, so a bare .icp-pop selector here kept the
   splodge running and held the blob shape after the colour had gone. */
[data-icp-mode='playful'] .icp-pop:not([data-popped='true']) {
  animation: icp-sploge 18s ease-in-out infinite;
}
[data-icp-mode='playful'] .icp-pop:not([data-popped='true']):nth-child(2) { animation-duration: 22s; animation-delay: -6s; }
[data-icp-mode='playful'] .icp-pop:not([data-popped='true']):nth-child(3) { animation-duration: 15s; animation-delay: -11s; }
[data-icp-mode='playful'] .icp-pop:not([data-popped='true']):nth-child(4) { animation-duration: 25s; animation-delay: -3s; }

.icp-pop[data-popped='true'] {
  width: 264px;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ic-ink);
  cursor: default;
  animation: none;
  font-weight: 400;
}
.icp-pop[data-popped='true']:hover,
.icp-pop[data-popped='true']:active { transform: none; }
.icp-pop[data-popped='true'] .icp-pop__hint { display: none; }
.icp-pop[data-popped='true'] .icp-pop__q {
  font-weight: 600;
  font-size: 1.02rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.7rem;
  border-bottom: 2px solid var(--p-rose);
  color: var(--on-rose);
}
.icp-pop[data-popped='true'][data-hue='sky'] .icp-pop__q { border-bottom-color: var(--p-sky); color: var(--on-sky); }
.icp-pop[data-popped='true'][data-hue='sage'] .icp-pop__q { border-bottom-color: var(--p-sage); color: var(--on-sage); }
.icp-pop[data-popped='true'][data-hue='butter'] .icp-pop__q { border-bottom-color: var(--p-butter); color: var(--on-butter); }
.icp-pop[data-popped='true'][data-hue='lilac'] .icp-pop__q { border-bottom-color: var(--p-lilac); color: var(--on-lilac); }
.icp-pop[data-popped='true'][data-hue='clay'] .icp-pop__q { border-bottom-color: var(--p-clay); color: var(--on-clay); }
.icp-pop__a {
  display: block;
  font: 400 var(--icp-small) / 1.65 var(--icp-font);
  color: var(--ic-ink);
}
/* The burst belongs to the FACE, not the card, and carries that person's own
   overlay colour. It was rendering from the card centre, which put it below the
   photograph instead of over it. */
.icp-mate__burst {
  position: absolute;
  left: 50%;
  top: 1.5rem;   /* clears .icp-mate's padding so it lands on the face */
  width: calc(100% - 2.2rem);
  max-width: 260px;
  aspect-ratio: 1;
  height: auto;
  margin: 0;
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  border-radius: 50%;
  background: var(--p-rose);
  opacity: 0.9;
  pointer-events: none;
  z-index: 3;
}
.icp-mate[data-hue='sky'] .icp-mate__burst { background: var(--p-sky); }
.icp-mate[data-hue='sage'] .icp-mate__burst { background: var(--p-sage); }
.icp-mate[data-hue='butter'] .icp-mate__burst { background: var(--p-butter); }
.icp-mate[data-hue='lilac'] .icp-mate__burst { background: var(--p-lilac); }
.icp-mate[data-hue='clay'] .icp-mate__burst { background: var(--p-clay); }
[data-icp-mode='playful'] .icp-mate__burst { animation: icp-burst-face 560ms var(--icp-ease) forwards; }
[data-icp-mode='calm'] .icp-mate__burst { display: none; }
@keyframes icp-burst-face {
  0%   { transform: translateX(-50%) scale(1);    opacity: 0.9; }
  35%  { transform: translateX(-50%) scale(1.12); opacity: 0.55; }
  100% { transform: translateX(-50%) scale(1.6);  opacity: 0; }
}

.icp-pop__burst {
  position: absolute;
  left: 50%; top: 50%;
  width: 184px; height: 184px;
  margin: -92px 0 0 -92px;
  border-radius: 50%;
  background: var(--p-rose);
  opacity: 0.9;
  pointer-events: none;
}
[data-icp-mode='playful'] .icp-pop__burst { animation: icp-burst 520ms var(--icp-ease) forwards; }
[data-icp-mode='calm'] .icp-pop__burst { display: none; }
@keyframes icp-burst {
  0% { transform: scale(1); opacity: 0.9; }
  35% { transform: scale(1.14); opacity: 0.6; }
  100% { transform: scale(1.75); opacity: 0; }
}

.icp-faq { border-top: 1px solid var(--ic-line); margin-top: 1.5rem; }
.icp-faq__item { border-bottom: 1px solid var(--ic-line); }
.icp .icp-faq__q {
  width: 100%;
  display: flex;
  gap: 1rem;
  align-items: center;
  background: none;
  border: 0;
  padding: 1.1rem 0;
  font: 600 var(--icp-body) / 1.5 var(--icp-font);
  color: var(--ic-ink);
  text-align: left;
  cursor: pointer;
}
.icp-faq__q span:first-child { margin-right: auto; }
.icp .icp-faq__a { padding-bottom: 1.2rem; font-size: var(--icp-small); color: var(--ic-ink-soft); }
.icp-questionswrap .icp-chips { margin-bottom: 0.5rem; }

/* ---------------- contact ---------------- */

.icp-cform {
  background: #fff;
  border: 1px solid var(--ic-line);
  border-radius: var(--icp-r-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--icp-shadow-1);
  color: var(--ic-ink);
}
.icp-cboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-top: 1.25rem;
}
@media (max-width: 620px) { .icp-cboxes { grid-template-columns: 1fr; } }
.icp-cbox {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-areas: 'icon title' 'icon value' 'best best';
  column-gap: 0.9rem;
  row-gap: 0.15rem;
  padding: 1.35rem;
  border: 1px solid var(--ic-line);
  border-radius: var(--icp-r-lg);
  background: #fff;
  text-decoration: none;
  color: var(--ic-ink);
  box-shadow: var(--icp-shadow-1);
  transition: border-color var(--icp-dur) var(--icp-ease), box-shadow var(--icp-dur) var(--icp-ease);
}
.icp-cbox:hover { border-color: var(--ic-rose); box-shadow: var(--icp-shadow-2); }
.icp .icp-cbox__icon {
  grid-area: icon;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--soft-rose);
  color: var(--deep-rose);
  font-size: 1.2rem;
}
.icp-cbox[data-hue='sky'] .icp-cbox__icon { background: var(--soft-sky); color: var(--deep-sky); }
.icp-cbox[data-hue='sage'] .icp-cbox__icon { background: var(--soft-sage); color: var(--deep-sage); }
.icp-cbox[data-hue='butter'] .icp-cbox__icon { background: var(--soft-butter); color: var(--deep-butter); }
.icp-cbox[data-hue='lilac'] .icp-cbox__icon { background: var(--soft-lilac); color: var(--deep-lilac); }
.icp-cbox[data-hue='clay'] .icp-cbox__icon { background: var(--soft-clay); color: var(--deep-clay); }
.icp .icp-cbox__title { grid-area: title; font-weight: 600; align-self: end; }
.icp .icp-cbox__value {
  grid-area: value;
  color: var(--ic-rose-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.icp-cbox__best { grid-area: best; margin-top: 0.7rem; font-size: var(--icp-small); color: var(--ic-ink-soft); }
.icp-helpline { display: flex; justify-content: center; padding-top: 1.5rem; font-size: var(--icp-small); }
.icp-helpline a { color: var(--ic-rose-deep); }

/* ---------------- shape pile ---------------- */

.icp-playstrip, .icp-toy:not(.icp-finderwrap__toy) { position: relative; }
.icp-playstrip__note { font-size: var(--icp-small); color: var(--ic-ink-soft); padding-bottom: 0.5rem; }
.icp-playstrip__toy {
  display: block;
  width: 100%;
  height: 190px;
  touch-action: none;
  cursor: grab;
}
/* A little air under the pile. Without it the shapes rest flush against the
   theme footer and read as sliced off rather than resting on something. */
.icp-playstrip { padding-bottom: 28px; }

/* ---------------- playful and calm control ---------------- */

.icp-mode {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--ic-line);
  border-radius: var(--icp-pill);
  background: #fff;
  box-shadow: var(--icp-shadow-2);
}
.icp-mode__btn {
  border: 0;
  background: none;
  padding: 0.42rem 0.9rem;
  border-radius: var(--icp-pill);
  font: 600 0.8125rem / 1 var(--icp-font);
  color: var(--ic-ink-soft);
  cursor: pointer;
  transition: background var(--icp-dur) var(--icp-ease), color var(--icp-dur) var(--icp-ease);
}
.icp-mode__btn[aria-pressed='true'] { background: var(--ic-rose-deep); color: #fff; }
@media (max-width: 480px) {
  .icp-mode { left: 0.6rem; bottom: 0.6rem; }
  .icp-mode__btn { padding: 0.42rem 0.6rem; font-size: 0.75rem; }
}