/* ==========================================================================
   « Couple et parents » vertical (template/couple-parents/). The evening of the
   kit page, the quiz and the game for the tools, a quiet reading page below.
   ========================================================================== */

.cp-page {
  --cp-ink: #2a142d;
  --cp-muted: #6f5a71;
  --cp-pink: #e91e75;
  --cp-hot: #f72585;
  --cp-violet: #8b2cf6;
  --cp-lamp: #ffb070;
  --cp-line: #f0e3ef;
  --cp-soft: #fbf6fc;
  --cp-ease: cubic-bezier(.2, .8, .2, 1);
  color: var(--cp-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.lc-cp-page {
  background: #fff7fb;
}

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

.cp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cp-page :is(button, a, input):focus-visible {
  outline: 3px solid rgba(255, 185, 56, .9);
  outline-offset: 3px;
}

/* ---- Icons (static/images/couple-parents/icons.svg) and the colours of the evening ---- */
.cp-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
}

.cp-tone--violet {
  --tone: linear-gradient(145deg, #8b2cf6 0%, #e91e75 100%);
  --tone-shadow: rgba(139, 44, 246, .3);
}

.cp-tone--amber {
  --tone: linear-gradient(145deg, #ff9f4a 0%, #f72585 100%);
  --tone-shadow: rgba(247, 37, 133, .28);
}

.cp-tone--pink {
  --tone: linear-gradient(145deg, #ff6f91 0%, #b5179e 100%);
  --tone-shadow: rgba(181, 23, 158, .28);
}

.cp-tone--night {
  --tone:
    radial-gradient(90% 80% at 100% 0%, rgba(247, 37, 133, .35), transparent 60%),
    linear-gradient(150deg, #34123c 0%, #4a1d6e 100%);
  --tone-shadow: rgba(42, 15, 51, .35);
}

/* The four profiles of the test, each on its own medal. */
.cp-medal {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--medal);
  color: #fff;
  box-shadow: 0 12px 26px var(--medal-shadow);
}

.cp-medal .cp-icon {
  width: 52%;
  height: 52%;
}

.cp-medal--equipe {
  --medal: linear-gradient(145deg, #ff5c8a 0%, #8b2cf6 100%);
  --medal-shadow: rgba(139, 44, 246, .32);
}

.cp-medal--complices {
  --medal: linear-gradient(145deg, #ffb070 0%, #f72585 100%);
  --medal-shadow: rgba(247, 37, 133, .3);
}

.cp-medal--colocs {
  --medal: linear-gradient(145deg, #39c6c6 0%, #5b6cff 100%);
  --medal-shadow: rgba(91, 108, 255, .3);
}

.cp-medal--tempete {
  --medal: linear-gradient(145deg, #7f6cf0 0%, #2a0f33 100%);
  --medal-shadow: rgba(42, 15, 51, .35);
}

/* Blocks rising in as they come on screen (static/js/couple-parents/reveal.js). */
.cp-reveal-pending {
  opacity: 0;
  transform: translateY(22px);
}

.cp-reveal-pending.cp-reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease var(--cp-delay, 0ms), transform .75s var(--cp-ease) var(--cp-delay, 0ms);
}

.cp-container {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
}

.cp-container--text {
  width: min(720px, calc(100% - 32px));
}

/* ---- Evening sky behind the tool: the lamp breathing, warm lights drifting up ---- */
.cp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 5vw, 56px) 0 clamp(36px, 6vw, 72px);
  color: #fff;
  background:
    radial-gradient(70% 60% at 8% 6%, rgba(247, 37, 133, .30), transparent 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(139, 44, 246, .32), transparent 70%),
    linear-gradient(160deg, #2a0f33 0%, #3b163f 48%, #4a1d6e 100%);
}

.cp-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -14%;
  left: 50%;
  width: min(820px, 130vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 120, .32) 0%, rgba(247, 37, 133, .15) 45%, transparent 70%);
  translate: -50% 0;
  animation: cp-breathe 7s ease-in-out infinite;
  pointer-events: none;
}

.cp-lights {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cp-lights span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 72%);
  box-shadow: 0 0 calc(var(--s) * 1.6) var(--c);
  opacity: 0;
  animation: cp-drift var(--d) ease-in-out var(--delay) infinite;
}

.cp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .72);
  font-size: .85rem;
  font-weight: 700;
}

.cp-breadcrumb a {
  color: #ffd1e3;
  text-decoration: none;
}

.cp-breadcrumb a:hover {
  text-decoration: underline;
}

.cp-hero__head {
  margin-bottom: clamp(18px, 3vw, 26px);
  animation: cp-rise .7s var(--cp-ease) backwards;
}

.cp-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #ffe3ef;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cp-hero h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.03em;
}

.cp-answer {
  max-width: 40em;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1.02rem, 2.2vw, 1.14rem);
  font-weight: 600;
  line-height: 1.6;
}

/* ---- The tool: how much time, then an idea to do tonight ---- */
.cp-tool {
  padding: clamp(18px, 4vw, 30px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(16, 4, 24, .42);
  color: var(--cp-ink);
  animation: cp-rise .7s var(--cp-ease) .1s backwards;
}

.cp-times {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.cp-time {
  min-height: 46px;
  padding: 0 10px;
  border: 2px solid var(--cp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cp-ink);
  font-size: .98rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s var(--cp-ease);
}

.cp-time:hover {
  border-color: rgba(233, 30, 117, .4);
  transform: translateY(-1px);
}

.cp-time.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cp-pink), var(--cp-violet));
  color: #fff;
  box-shadow: 0 10px 22px rgba(233, 30, 117, .3);
}

/* A switch for the ideas that make no noise. */
.cp-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--cp-muted);
  font-size: .95rem;
  font-weight: 750;
  cursor: pointer;
}

.cp-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cp-switch__track {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #e9dcea;
  transition: background .25s ease;
}

.cp-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(42, 20, 45, .25);
  transition: transform .25s var(--cp-ease);
}

.cp-switch input:checked + .cp-switch__track {
  background: linear-gradient(135deg, #5b4bd6, var(--cp-violet));
}

.cp-switch input:checked + .cp-switch__track::after {
  transform: translateX(18px);
}

.cp-switch input:focus-visible + .cp-switch__track {
  outline: 3px solid rgba(255, 185, 56, .9);
  outline-offset: 3px;
}

/* The idea card. Behind the idea, the longest title, text and link, invisible: the card keeps one height, nothing jumps. */
.cp-stage {
  position: relative;
  display: grid;
}

.cp-idea {
  --kind: #6f7dff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 20px 20px 20px 24px;
  border: 1px solid var(--cp-line);
  border-radius: 22px;
  background: linear-gradient(160deg, #fff 0%, #fff6fb 100%);
  transition: opacity .28s ease, transform .34s var(--cp-ease);
}

.cp-idea::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 5px;
  border-radius: 0 6px 6px 0;
  background: var(--kind);
  transition: background .3s ease;
}

.cp-idea--parler { --kind: #6f7dff; }
.cp-idea--rire { --kind: #f59e0b; }
.cp-idea--tendresse { --kind: #ff5c8a; }
.cp-idea--rever { --kind: #8b2cf6; }
.cp-idea--equipe { --kind: #0f9f8f; }

.cp-idea.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition-duration: .18s;
}

.cp-idea.is-entering {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

.cp-idea__body {
  display: grid;
}

.cp-idea__copy {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-idea__sizer {
  visibility: hidden;
}

.cp-idea__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.cp-idea__time,
.cp-idea__kind,
.cp-idea__quiet {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .03em;
}

.cp-idea__time {
  background: #2a0f33;
  color: #fff;
}

.cp-idea__kind {
  background: color-mix(in srgb, var(--kind) 14%, #fff);
  color: color-mix(in srgb, var(--kind) 80%, #2a142d);
}

.cp-idea__quiet {
  background: #eeeaff;
  color: #4b3fb8;
  font-size: .9rem;
}

.cp-idea__quiet[hidden] {
  display: none;
}

.cp-idea__title {
  margin: 4px 0 0;
  color: var(--cp-ink);
  font-size: clamp(1.4rem, 4.4vw, 1.75rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.cp-idea__text {
  margin: 0;
  color: #4d3a50;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.55;
}

.cp-idea__link {
  align-self: flex-start;
  margin-top: 2px;
  color: var(--cp-pink);
  font-weight: 850;
  text-decoration: none;
}

.cp-idea__link:hover {
  text-decoration: underline;
}

.cp-idea__link[hidden] {
  display: none;
}

.cp-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.cp-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s var(--cp-ease), box-shadow .2s ease, background .2s ease, color .2s ease;
}

.cp-btn:active {
  transform: scale(.97);
}

.cp-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--cp-pink), var(--cp-violet));
  box-shadow: 0 14px 30px rgba(233, 30, 117, .3);
}

/* The light sweep of the kit page. */
.cp-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-18deg);
  animation: cp-shine 6.5s ease-in-out 1.5s infinite;
  pointer-events: none;
}

.cp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(233, 30, 117, .4);
}

.cp-btn--soft {
  color: #6b2a5f;
  background: #fff0f6;
}

.cp-btn--soft:hover {
  background: #ffe2ef;
}

.cp-heart {
  color: #d9b7cb;
  transition: color .2s ease, transform .3s var(--cp-ease);
}

.cp-btn[aria-pressed="true"] .cp-heart {
  color: var(--cp-hot);
  transform: scale(1.2);
}

.cp-saved {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cp-line);
}

.cp-saved[hidden] {
  display: none;
}

.cp-saved__title {
  margin: 0 0 10px;
  color: var(--cp-muted);
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cp-saved__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.cp-saved__list li {
  list-style: none;
}

.cp-saved__list button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--cp-line);
  border-radius: 999px;
  background: var(--cp-soft);
  color: var(--cp-ink);
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .2s ease;
}

.cp-saved__list button:hover {
  border-color: rgba(233, 30, 117, .4);
}

.cp-noscript {
  margin: 14px 0 0;
  color: var(--cp-pink);
  font-weight: 800;
}

/* ---- Below the tool: the guide, every idea, the questions, the sources ---- */
.cp-content {
  padding: clamp(36px, 6vw, 64px) 0 clamp(48px, 7vw, 84px);
  background: linear-gradient(180deg, #fff7fb 0%, #fff 30%, #fff7fb 100%);
}

.cp-byline {
  margin: 0 0 22px;
  color: var(--cp-muted);
  font-size: .9rem;
  font-weight: 700;
}

.cp-section {
  margin-bottom: clamp(36px, 6vw, 52px);
  scroll-margin-top: 20px;
}

.cp-section h2 {
  margin: 0 0 14px;
  color: var(--cp-ink);
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.cp-section h3 {
  margin: 28px 0 12px;
  color: var(--cp-ink);
  font-size: 1.2rem;
  font-weight: 900;
  scroll-margin-top: 20px;
}

.cp-section p {
  margin: 0 0 14px;
  color: var(--cp-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.cp-steps {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  counter-reset: cp-step;
}

.cp-steps + p {
  margin-top: 20px;
}

.cp-steps li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 18px 16px 62px;
  border: 1px solid var(--cp-line);
  border-radius: 18px;
  background: #fff;
  list-style: none;
  counter-increment: cp-step;
}

.cp-steps li::before {
  content: counter(cp-step);
  position: absolute;
  top: 14px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cp-pink), var(--cp-violet));
  color: #fff;
  font-size: .95rem;
  font-weight: 900;
}

.cp-steps strong {
  color: var(--cp-ink);
  font-size: 1.04rem;
  font-weight: 900;
}

.cp-steps span {
  color: var(--cp-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.cp-kit {
  margin: 0 0 clamp(36px, 6vw, 52px);
}

.cp-faq details {
  margin-bottom: 10px;
  border: 1px solid var(--cp-line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.cp-faq details[open] {
  border-color: rgba(233, 30, 117, .3);
  box-shadow: 0 12px 26px rgba(72, 22, 64, .07);
}

.cp-faq summary {
  position: relative;
  padding: 16px 52px 16px 18px;
  color: var(--cp-ink);
  font-weight: 850;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.cp-faq summary::-webkit-details-marker {
  display: none;
}

.cp-faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 16px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: #fff0f6;
  color: var(--cp-hot);
  font-weight: 900;
  transition: rotate .3s var(--cp-ease);
}

.cp-faq details[open] summary::after {
  rotate: 45deg;
}

.cp-faq details p {
  margin: 0;
  padding: 0 18px 18px;
  animation: cp-fade .35s ease both;
}

/* The studies the page quotes. */
.cp-studies__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-studies__list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--cp-line);
  border-radius: 16px;
  background: #fff;
  color: var(--cp-muted);
  font-size: .92rem;
  line-height: 1.5;
}

.cp-studies__list .cp-icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--cp-violet);
}

.cp-studies__list a {
  color: #4b2a55;
  font-weight: 700;
  text-decoration: none;
}

.cp-studies__list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Going further: one colour of the evening per card. */
.cp-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cp-related__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 172px;
  padding: 20px 20px 18px;
  border-radius: 24px;
  background: var(--tone);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 36px var(--tone-shadow);
  transition: transform .3s var(--cp-ease), box-shadow .3s ease;
}

.cp-related__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -36px;
  bottom: -56px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .24), transparent 66%);
  transition: transform .5s var(--cp-ease);
}

.cp-related__card:hover {
  color: #fff;
  box-shadow: 0 24px 46px var(--tone-shadow);
  transform: translateY(-4px) rotate(-.4deg);
}

.cp-related__card:hover::after {
  transform: scale(1.25);
}

.cp-related__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .18);
  font-size: 23px;
}

.cp-related__card strong {
  padding-right: 28px;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.25;
}

.cp-related__sub {
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.45;
  opacity: .9;
}

.cp-related__card .cp-related__go {
  position: absolute;
  top: 22px;
  right: 18px;
  width: 22px;
  height: 22px;
  opacity: .85;
  transition: transform .3s var(--cp-ease);
}

.cp-related__card:hover .cp-related__go {
  transform: translateX(4px);
}

/* ---- Article pages (couple après bébé…): a shorter evening, then the reading page ---- */
/* The page's icon, floating in the evening beside the title on wide screens. */
.cp-hero__mark {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: max(3vw, calc(50% - 600px));
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  margin-top: -80px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 70%);
  color: rgba(255, 255, 255, .88);
  font-size: 88px;
  animation: cp-float 7s ease-in-out infinite;
}

@media (max-width: 1180px) {
  .cp-hero__mark {
    display: none;
  }
}

.cp-hero--article .cp-hero__head {
  margin-bottom: 0;
}

.cp-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.cp-jumps a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #ffe3ef;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s ease, transform .2s var(--cp-ease);
}

.cp-jumps a:hover {
  background: rgba(255, 255, 255, .16);
  transform: translateY(-1px);
}

.cp-more {
  color: var(--cp-pink);
  font-weight: 850;
  text-decoration: none;
}

.cp-more:hover {
  text-decoration: underline;
}

.cp-section .cp-section__outro {
  margin-top: 16px;
  color: var(--cp-ink);
  font-weight: 700;
}

/* The five fronts: one card each, with something to try. */
.cp-terrains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.cp-terrain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--cp-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(72, 22, 64, .05);
}

.cp-terrain:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.cp-terrain__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--tone);
  color: #fff;
  font-size: 23px;
  box-shadow: 0 10px 22px var(--tone-shadow);
}

.cp-section .cp-terrain h3 {
  margin: 4px 0 0;
  font-size: 1.1rem;
}

.cp-section .cp-terrain p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
}

.cp-section .cp-terrain__try {
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cp-soft);
  color: var(--cp-ink);
  font-size: .95rem;
}

.cp-terrain__try strong {
  color: var(--cp-pink);
}

/* The four weeks, on the thread of the kit page, from the lamp to the night. */
.cp-plan {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 20px 0 0;
  padding: 0;
}

.cp-plan::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 47px;
  width: 2px;
  background: linear-gradient(180deg, var(--cp-lamp), var(--cp-hot) 55%, var(--cp-violet));
}

.cp-plan__week {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  list-style: none;
}

.cp-plan__label {
  position: relative;
  z-index: 1;
  justify-self: center;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #3b163f;
  color: #ffe3ef;
  font-size: .8rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 0 0 4px #fff7fb, 0 0 16px rgba(247, 37, 133, .35);
}

.cp-plan__body {
  padding: 14px 16px;
  border: 1px solid var(--cp-line);
  border-radius: 16px;
  background: #fff;
}

.cp-section .cp-plan__body h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.cp-section .cp-plan__body p {
  margin: 0 0 6px;
  font-size: .98rem;
}

/* Tonight, in a few minutes. */
.cp-tonight {
  margin: 0 0 clamp(36px, 6vw, 52px);
  padding: clamp(20px, 4vw, 28px);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(247, 37, 133, .35), transparent 60%),
    linear-gradient(160deg, #2a0f33 0%, #3b163f 50%, #4a1d6e 100%);
  box-shadow: 0 22px 50px rgba(42, 12, 48, .22);
}

.cp-tonight__title {
  margin: 0 0 6px;
  color: #ffd98a;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cp-tonight__text {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .88);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.55;
}

.cp-tonight .cp-btn {
  text-decoration: none;
}

/* When to talk to a professional: calm and easy to find. */
.cp-help {
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid #dcd7f5;
  border-radius: 22px;
  background: #f6f4ff;
}

.cp-section.cp-help h2 {
  color: #2f2669;
}

.cp-section.cp-help p {
  color: #4a4566;
}

.cp-help__signs {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}

.cp-help__signs li {
  position: relative;
  padding-left: 22px;
  color: #2f2669;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
}

.cp-help__signs li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b5bd2;
}

.cp-help__urgent {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 4px solid #6b5bd2;
  border-radius: 10px;
  background: #fff;
}

.cp-section.cp-help .cp-help__urgent p {
  margin: 0 0 6px;
  color: #2f2669;
  font-weight: 700;
}

.cp-section.cp-help .cp-help__urgent p:last-child {
  margin-bottom: 0;
}

/* Signs, as short cards. */
.cp-signs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
}

.cp-signs li {
  position: relative;
  overflow: hidden;
  padding: 16px 18px 16px 22px;
  border: 1px solid var(--cp-line);
  border-radius: 16px;
  background: #fff;
  color: var(--cp-ink);
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.5;
  list-style: none;
}

.cp-signs li::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--cp-lamp), var(--cp-hot));
}

/* A sentence parents say, then what it means. */
.cp-sign__quote {
  display: block;
  color: var(--cp-ink);
  font-size: 1.06rem;
  font-weight: 900;
  line-height: 1.3;
}

.cp-sign__detail {
  display: block;
  margin-top: 6px;
  color: var(--cp-muted);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.45;
}

.cp-section .cp-section__more {
  margin: 12px 0 0;
}

/* Baby clash, baby blues, postpartum depression: a table, each row a card on phones. */
.cp-compare {
  width: 100%;
  margin-top: 18px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--cp-line);
  border-radius: 18px;
  background: #fff;
  font-size: .95rem;
  line-height: 1.5;
}

.cp-compare th,
.cp-compare td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--cp-line);
  text-align: left;
  vertical-align: top;
}

.cp-compare tbody tr:last-child th,
.cp-compare tbody tr:last-child td {
  border-bottom: 0;
}

.cp-compare thead th {
  background: #2a0f33;
  color: #fff;
  font-size: .9rem;
  font-weight: 900;
}

.cp-compare thead th:first-of-type {
  background: linear-gradient(135deg, var(--cp-pink), var(--cp-violet));
}

.cp-compare thead td {
  background: #2a0f33;
  border-bottom: 1px solid var(--cp-line);
}

.cp-compare tbody th {
  width: 22%;
  color: var(--cp-ink);
  font-weight: 900;
}

.cp-compare tbody td {
  color: #4d3a50;
}

.cp-compare tbody td:nth-child(2) {
  background: #fff6fb;
  color: var(--cp-ink);
  font-weight: 650;
}

/* Sentences to swap: the one that hurts in front, the one that soothes behind (static/js/couple-parents/swap.js).
   Without the script both faces stay one under the other. */
.cp-swaps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
}

.cp-swap {
  list-style: none;
}

.cp-swap__card {
  display: grid;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.cp-swap__face {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
  padding: 18px 18px 20px;
  border-radius: 18px;
}

.cp-swap__face--before {
  border: 1px solid var(--cp-line);
  background: #fff;
  box-shadow: 0 12px 28px rgba(72, 22, 64, .05);
}

.cp-swap__face--after {
  color: #fff;
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(247, 37, 133, .35), transparent 60%),
    linear-gradient(160deg, #2a0f33 0%, #3b163f 55%, #4a1d6e 100%);
  box-shadow: 0 16px 34px rgba(42, 12, 48, .2);
}

.cp-swap__label {
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cp-swap__face--before .cp-swap__label {
  color: #c2185b;
}

.cp-swap__face--after .cp-swap__label {
  color: #ffd98a;
}

.cp-swap__text {
  padding-right: 26px;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.35;
}

.cp-swap__face--before .cp-swap__text {
  color: var(--cp-ink);
}

.cp-swap__turn {
  display: none;
}

/* With the script: one face at a time, turned over by a tap. */
.cp-swaps.is-ready .cp-swap__card {
  gap: 0;
  perspective: 1000px;
  cursor: pointer;
}

.cp-swaps.is-ready .cp-swap__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  transition: transform .6s var(--cp-ease), box-shadow .25s ease;
}

.cp-swaps.is-ready .cp-swap__face--after {
  transform: rotateY(180deg);
}

.cp-swaps.is-ready .cp-swap__card[aria-pressed="true"] .cp-swap__face--before {
  transform: rotateY(-180deg);
}

.cp-swaps.is-ready .cp-swap__card[aria-pressed="true"] .cp-swap__face--after {
  transform: rotateY(0deg);
}

.cp-swaps.is-ready .cp-swap__card:hover .cp-swap__face--before {
  box-shadow: 0 16px 32px rgba(72, 22, 64, .1);
}

.cp-swaps.is-ready .cp-swap__turn {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff0f6;
  color: var(--cp-hot);
  font-size: 15px;
  transition: transform .4s var(--cp-ease);
}

.cp-swaps.is-ready .cp-swap__card:hover .cp-swap__turn {
  transform: rotate(-60deg);
}

/* A word from the midwife's side: calm, set apart from the reading. */
.cp-callout {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid #dcd7f5;
  border-radius: 18px;
  background: #f6f4ff;
}

.cp-section .cp-callout__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: #2f2669;
  font-size: 1.08rem;
  font-weight: 900;
}

.cp-callout__title .cp-icon {
  color: #6b5bd2;
  font-size: 1.25rem;
}

.cp-section .cp-callout p {
  color: #4a4566;
  font-size: 1rem;
}

.cp-section .cp-callout p:last-child {
  margin-bottom: 0;
}

/* Gestures of tenderness: small cards, a heart each. */
.cp-gestures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
}

.cp-gestures li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  padding: 16px;
  border: 1px solid var(--cp-line);
  border-radius: 18px;
  background: #fff;
  list-style: none;
}

.cp-gestures__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff6f91 0%, #b5179e 100%);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(181, 23, 158, .25);
}

.cp-gestures strong {
  color: var(--cp-ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.3;
}

.cp-gestures li > span:last-child {
  color: var(--cp-muted);
  font-size: .95rem;
  line-height: 1.5;
}

/* When it is no longer an argument: calm, but impossible to miss. */
.cp-violence {
  padding: clamp(20px, 4vw, 26px);
  border: 1px solid #f6cbd6;
  border-left: 5px solid #e11d48;
  border-radius: 20px;
  background: #fff5f7;
}

.cp-section.cp-violence h2 {
  color: #9f1239;
  font-size: clamp(1.3rem, 3.2vw, 1.6rem);
}

.cp-section.cp-violence p {
  color: #5b2333;
}

.cp-section.cp-violence p:last-child {
  margin-bottom: 0;
  font-weight: 700;
}

/* ---- Cards of questions (partials/deck.php, static/js/couple-parents/deck.js) ---- */
.cp-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.cp-cat {
  --kind: var(--cp-pink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--cp-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cp-ink);
  font-size: .92rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s var(--cp-ease);
}

.cp-cat[data-cp-cat]:not([data-cp-cat=""])::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kind);
}

.cp-cat:hover {
  border-color: color-mix(in srgb, var(--kind) 45%, #fff);
  transform: translateY(-1px);
}

.cp-cat.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cp-pink), var(--cp-violet));
  color: #fff;
  box-shadow: 0 10px 22px rgba(233, 30, 117, .26);
}

.cp-cat.is-active::before {
  background: #fff;
}

.cp-qcard {
  --kind: #6f7dff;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 22px 22px 24px 26px;
  border: 1px solid var(--cp-line);
  border-radius: 22px;
  background: linear-gradient(160deg, #fff 0%, #fff6fb 100%);
  transition: opacity .28s ease, transform .34s var(--cp-ease);
}

.cp-qcard::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 5px;
  border-radius: 0 6px 6px 0;
  background: var(--kind);
  transition: background .3s ease;
}

.cp-qcard.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition-duration: .18s;
}

.cp-qcard.is-entering {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

.cp-qcard__meta {
  margin: 0 0 12px;
}

.cp-qcard__cat {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kind) 14%, #fff);
  color: color-mix(in srgb, var(--kind) 80%, #2a142d);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .03em;
}

/* The question and, behind it, the longest one, invisible: the card keeps one height. */
.cp-qcard__body {
  display: grid;
}

.cp-qcard__text {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--cp-ink);
  font-size: clamp(1.4rem, 4.4vw, 1.8rem);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.02em;
}

.cp-qcard__sizer {
  visibility: hidden;
}

.cp-actions--two {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.cp-deck-tool .cp-actions:not(.cp-actions--two) {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);
}

/* The themes of « Questions avant bébé », a few examples each. */
.cp-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.cp-theme {
  --kind: var(--cp-pink);
  padding: 18px 18px 16px;
  border: 1px solid var(--cp-line);
  border-top: 4px solid var(--kind);
  border-radius: 18px;
  background: #fff;
}

.cp-section .cp-theme h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
}

.cp-section .cp-theme p {
  margin: 0 0 10px;
  font-size: .96rem;
  line-height: 1.55;
}

.cp-theme ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.cp-theme li {
  position: relative;
  padding-left: 18px;
  color: var(--cp-ink);
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.45;
  list-style: none;
}

.cp-theme li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kind);
}

/* A sheet printed on its own: the questions, or the « qui pense à quoi » list (deck.js, charge.js add it
   to the page while printing). */
.cp-print-sheet {
  display: none;
}

@media print {
  body.cp-printing > *:not(.cp-print-sheet) {
    display: none !important;
  }

  body.cp-printing .cp-print-sheet {
    display: block;
    color: #000;
    font: 12pt/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  .cp-print-sheet h1 {
    margin: 0 0 16pt;
    font-size: 20pt;
  }

  .cp-print-sheet h2 {
    margin: 14pt 0 6pt;
    padding-bottom: 3pt;
    border-bottom: 1.5pt solid #000;
    font-size: 13pt;
    break-after: avoid;
  }

  .cp-print-sheet ul {
    margin: 0;
    padding-left: 14pt;
  }

  .cp-print-sheet li {
    margin-bottom: 4pt;
    break-inside: avoid;
  }

  .cp-print-sheet p {
    margin-top: 18pt;
    font-size: 10pt;
  }

  .cp-print-sheet__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18pt;
  }

  .cp-print-sheet__cols h2 {
    margin-top: 0;
  }
}

/* ---- Hub: an evening with ideas dealt like cards, the figures that reassure, one door per page ---- */
.cp-container--wide {
  width: min(1040px, calc(100% - 32px));
}

.cp-hero--hub {
  padding-bottom: clamp(40px, 7vw, 84px);
}

.cp-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(20px, 5vw, 64px);
}

.cp-hub-hero__copy {
  animation: cp-rise .7s var(--cp-ease) backwards;
}

.cp-hero--hub h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.1rem);
  line-height: .98;
}

.cp-hub-hero__line {
  display: block;
}

.cp-hub-hero__line + .cp-hub-hero__line {
  background: linear-gradient(100deg, #ffd1e3 0%, #ffb070 45%, #ff8fb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cp-hub-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.cp-hub-hero__ctas .cp-btn {
  padding: 0 24px;
}

.cp-btn {
  text-decoration: none;
}

.cp-btn__note {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: .78rem;
  font-weight: 800;
}

.cp-btn--glass {
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.cp-btn--glass:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  transform: translateY(-2px);
}

/* Three ideas of « 10 minutes à deux », dealt like the cards of the online game. */
.cp-deck {
  display: grid;
  place-items: center;
  min-height: 340px;
  margin: 0;
  padding: 20px 0;
  list-style: none;
}

.cp-deck__item {
  grid-area: 1 / 1;
  width: min(272px, 80%);
  transform: rotate(var(--r, 0deg)) translate(var(--x, 0px), var(--y, 0px));
  transition: transform .5s var(--cp-ease);
  animation: cp-deal .9s var(--cp-ease) backwards;
  animation-delay: calc(var(--i, 0) * 140ms + 250ms);
}

.cp-deck__item:nth-child(1) { --r: -11deg; --x: -58px; --y: 24px; }
.cp-deck__item:nth-child(2) { --r: 8deg; --x: 52px; --y: 12px; }
.cp-deck__item:nth-child(3) { --r: -2deg; }

.cp-deck:hover .cp-deck__item:nth-child(1) { --r: -15deg; --x: -88px; --y: 30px; }
.cp-deck:hover .cp-deck__item:nth-child(2) { --r: 12deg; --x: 82px; --y: 16px; }

.cp-deck__card {
  --kind: #6f7dff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 252px;
  padding: 24px 20px 20px;
  border-radius: 24px;
  background: linear-gradient(165deg, #fff 0%, #fff4fa 100%);
  color: var(--cp-ink);
  text-decoration: none;
  box-shadow: 0 30px 60px rgba(16, 4, 24, .45);
}

.cp-deck__card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--kind);
}

.cp-deck__item:last-child .cp-deck__card {
  animation: cp-float 6s ease-in-out 1.6s infinite;
}

.cp-deck__card:hover {
  color: var(--cp-ink);
}

.cp-deck__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-deck__time,
.cp-deck__kind {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.cp-deck__time {
  background: #2a0f33;
  color: #fff;
}

.cp-deck__kind {
  background: color-mix(in srgb, var(--kind) 14%, #fff);
  color: color-mix(in srgb, var(--kind) 80%, #2a142d);
}

.cp-deck__card strong {
  font-size: 1.32rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.cp-deck__text {
  color: #5d4960;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Behind the front card, only the title shows anyway. */
.cp-deck__item:not(:last-child) .cp-deck__text {
  visibility: hidden;
}

.cp-section .cp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--cp-pink);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cp-section .cp-kicker::before {
  content: "";
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cp-lamp), var(--cp-hot));
}

.cp-section .cp-lead {
  max-width: 40em;
  color: #5d4960;
  font-size: 1.12rem;
  font-weight: 600;
}

.cp-hub-section {
  margin-bottom: clamp(48px, 8vw, 84px);
}

.cp-hub-section h2 {
  font-size: clamp(1.8rem, 4.4vw, 2.6rem);
}

/* Not alone: the figures of the studies, counted up when they come on screen. */
.cp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin-top: 26px;
}

.cp-stat {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 24px 22px 22px;
  border: 1px solid var(--cp-line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(72, 22, 64, .07);
}

.cp-stat::after {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 37, 133, .12), transparent 70%);
}

.cp-stat__value {
  display: block;
  background: linear-gradient(120deg, #f72585 10%, #8b2cf6 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(3rem, 7vw, 4.2rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.cp-stat__value small {
  font-size: .42em;
  letter-spacing: 0;
}

.cp-stat figcaption {
  margin-top: 12px;
  color: #5d4960;
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.5;
}

.cp-stat cite {
  display: block;
  margin-top: 10px;
  color: var(--cp-violet);
  font-size: .78rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .02em;
}

.cp-good {
  margin-top: 16px;
  padding: 24px 26px;
  border-radius: 26px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(255, 176, 120, .26), transparent 60%),
    linear-gradient(150deg, #34123c, #4a1d6e);
  color: #fff;
  box-shadow: 0 20px 50px rgba(42, 15, 51, .25);
}

.cp-section .cp-good__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: #ffd1e3;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cp-section .cp-good__text {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .92);
  font-size: 1.1rem;
  font-weight: 700;
}

.cp-good__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-good__items li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-weight: 800;
}

.cp-good__items .cp-icon {
  color: #ff8fb8;
}

/* Where to start: one door per page, opened by a sentence that parents say. */
.cp-voices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.cp-voice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 290px;
  padding: 26px;
  border-radius: 28px;
  background: var(--tone);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 22px 50px var(--tone-shadow);
  transition: transform .35s var(--cp-ease), box-shadow .35s ease;
}

/* The page's icon, large and faint, in the corner of the door. */
.cp-voice .cp-voice__mark {
  position: absolute;
  z-index: -1;
  top: -18px;
  right: -18px;
  width: 150px;
  height: 150px;
  opacity: .13;
  transform: rotate(-12deg);
  transition: transform .6s var(--cp-ease);
}

.cp-voice:hover .cp-voice__mark {
  transform: rotate(-4deg) scale(1.06);
}

.cp-voice::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -55%;
  left: -25%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
  transition: transform .6s var(--cp-ease);
}

.cp-voice:hover {
  color: #fff;
  box-shadow: 0 30px 60px var(--tone-shadow);
  transform: translateY(-5px);
}

.cp-voice:hover::after {
  transform: translate(12%, -8%) scale(1.1);
}

.cp-voice__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .18);
  font-size: 26px;
}

.cp-voice__quote {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.015em;
}

.cp-voice__title {
  margin-top: auto;
  padding-top: 10px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}

.cp-voice__text {
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.5;
  opacity: .92;
}

.cp-voice__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: #2a0f33;
  font-size: .95rem;
  font-weight: 900;
}

.cp-voice__cta .cp-icon {
  transition: transform .3s var(--cp-ease);
}

.cp-voice:hover .cp-voice__cta .cp-icon {
  transform: translateX(4px);
}

/* The tools for tonight: white doors, an evening-coloured badge each. */
.cp-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.cp-tool-door {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 20px;
  border: 1px solid var(--cp-line);
  border-radius: 24px;
  background: #fff;
  color: var(--cp-ink);
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(72, 22, 64, .07);
  transition: transform .3s var(--cp-ease), box-shadow .3s ease, border-color .3s ease;
}

.cp-tool-door:hover {
  border-color: rgba(233, 30, 117, .3);
  color: var(--cp-ink);
  box-shadow: 0 22px 44px rgba(72, 22, 64, .12);
  transform: translateY(-4px);
}

.cp-tool-door__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 6px;
  border-radius: 16px;
  background: var(--tone);
  color: #fff;
  font-size: 25px;
  box-shadow: 0 10px 22px var(--tone-shadow);
  transition: transform .4s var(--cp-ease);
}

.cp-tool-door:hover .cp-tool-door__icon {
  transform: rotate(-6deg) scale(1.06);
}

.cp-tool-door strong {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.25;
}

.cp-tool-door__text {
  color: var(--cp-muted);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
}

.cp-tool-door__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--cp-pink);
  font-size: .95rem;
  font-weight: 900;
}

.cp-tool-door__cta .cp-icon {
  transition: transform .3s var(--cp-ease);
}

.cp-tool-door:hover .cp-tool-door__cta .cp-icon {
  transform: translateX(4px);
}

/* ---- The test: one situation per screen, then a profile (static/js/couple-parents/test.js) ---- */
.cp-test {
  display: grid;
  animation: cp-rise .7s var(--cp-ease) .1s backwards;
}

.cp-test__panel {
  padding: clamp(20px, 4.5vw, 38px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(16, 4, 24, .42);
  color: var(--cp-ink);
  scroll-margin-top: 16px;
}

/* One panel at a time: the old one fades out, the new one rises in. */
.cp-test__intro,
.cp-test__stage,
.cp-test__result {
  transition: opacity .3s ease, transform .36s var(--cp-ease);
}

.cp-test .is-hiding {
  opacity: 0;
  transform: translateY(-12px) scale(.985);
}

.cp-test .is-showing {
  opacity: 0;
  transform: translateY(18px);
  transition: none;
}

.cp-test__intro {
  text-align: center;
}

.cp-test__faces {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}

.cp-test__faces .cp-medal {
  width: 50px;
  height: 50px;
  margin-left: -10px;
  border: 3px solid #fff;
}

.cp-test__faces .cp-medal:first-child {
  margin-left: 0;
}

.cp-test__title {
  margin: 0 0 14px;
  color: var(--cp-ink);
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* Reassurance under the button, one short line each, ticked. */
.cp-test__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 18px 0 0;
  padding: 0;
}

.cp-test__points li {
  color: var(--cp-muted);
  font-size: .9rem;
  font-weight: 800;
  list-style: none;
}

.cp-test__points li::before {
  content: "✓";
  margin-right: 6px;
  color: var(--cp-pink);
  font-weight: 900;
}

.cp-test__start {
  min-width: min(100%, 280px);
}

.cp-btn:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
}

.cp-btn--ghost {
  border: 2px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}

.cp-btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
}

/* The card of the situations: its head stays, its body slides from one situation to the next. */
.cp-test__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cp-test__back {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--cp-muted);
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: color .2s ease;
}

.cp-test__back::before {
  content: "←";
  display: inline-block;
  margin-right: 6px;
  transition: transform .2s var(--cp-ease);
}

.cp-test__back:hover {
  color: var(--cp-pink);
}

.cp-test__back:hover::before {
  transform: translateX(-3px);
}

.cp-test__kind {
  margin: 0;
  color: var(--cp-violet);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}

.cp-test__kind.is-in {
  animation: cp-fade .45s ease both;
}

/* The thread of the test, from the warm lamp to the night, one node per step. */
.cp-test__thread {
  position: relative;
  height: 20px;
}

.cp-test__thread::before,
.cp-test__thread-fill {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 999px;
}

.cp-test__thread::before {
  right: 6px;
  background: #f1e6f3;
}

.cp-test__thread-fill {
  width: calc((100% - 12px) * var(--p, 0));
  background: linear-gradient(90deg, var(--cp-lamp), var(--cp-hot) 55%, var(--cp-violet));
  box-shadow: 0 0 12px rgba(247, 37, 133, .45);
  transition: width .55s var(--cp-ease);
}

.cp-test__thread-nodes {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cp-test__node {
  width: 12px;
  height: 12px;
  border: 2px solid #e8d9ec;
  border-radius: 50%;
  background: #fff;
  transition: background .3s ease, border-color .3s ease, transform .35s var(--cp-ease);
}

.cp-test__node.is-done {
  border-color: var(--cp-hot);
  background: var(--cp-hot);
}

.cp-test__node.is-current {
  border: 3px solid var(--cp-hot);
  transform: scale(1.35);
  animation: cp-node 1.8s ease-in-out infinite;
}

.cp-test__count {
  margin: 6px 0 0;
  color: var(--cp-muted);
  font-size: .82rem;
  font-weight: 800;
}

/* Its own block formatting context, so that clipping it during a slide changes nothing in its height. */
.cp-test__viewport {
  position: relative;
  display: flow-root;
  margin: 0 -10px;
  padding: 0 10px 10px;
}

/* Invisible copy where every situation is measured (lockHeight in test.js). */
.cp-test__probe {
  position: absolute;
  top: 0;
  right: 10px;
  left: 10px;
  visibility: hidden;
  pointer-events: none;
}

.cp-test__viewport.is-moving {
  overflow: hidden;
}

/* The space above the question is padding, not a margin that could slip outside the body. */
.cp-test__body {
  padding-top: 18px;
  transition: opacity .3s ease, transform .38s var(--cp-ease);
}

.cp-test__body.is-leaving,
.cp-test__body.is-leaving-back {
  opacity: 0;
  transition-duration: .2s;
}

.cp-test__body.is-leaving { transform: translateX(-28px); }
.cp-test__body.is-leaving-back { transform: translateX(28px); }

.cp-test__body.is-entering,
.cp-test__body.is-entering-back {
  opacity: 0;
  transition: none;
}

.cp-test__body.is-entering { transform: translateX(28px); }
.cp-test__body.is-entering-back { transform: translateX(-28px); }

.cp-test__question {
  margin: 0 0 20px;
  color: var(--cp-ink);
  font-size: clamp(1.4rem, 4.2vw, 1.9rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.02em;
  outline: none;
}

.cp-test__answers {
  display: grid;
  gap: 12px;
}

.cp-test__answer {
  position: relative;
  width: 100%;
  padding: 16px 54px 16px 20px;
  border: 2px solid var(--cp-line);
  border-radius: 18px;
  background: #fff;
  color: var(--cp-ink);
  font: inherit;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .25s var(--cp-ease), box-shadow .25s ease, opacity .3s ease;
  animation: cp-answer-in .45s var(--cp-ease) backwards;
  animation-delay: calc(var(--i, 0) * 55ms + 60ms);
}

.cp-test__answer:hover {
  border-color: rgba(233, 30, 117, .45);
  background: #fff7fb;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(72, 22, 64, .1);
}

.cp-test__answer[aria-pressed="true"] {
  border-color: var(--cp-pink);
  background: linear-gradient(135deg, #fff0f6, #f6efff);
}

/* The chosen answer gets a tick, the others step back. */
.cp-test__answers.has-pick .cp-test__answer:not(.is-picked) {
  opacity: .4;
  transform: none;
  box-shadow: none;
}

.cp-test__answer.is-picked {
  transform: scale(1.015);
  box-shadow: 0 12px 28px rgba(233, 30, 117, .2);
}

.cp-test__answer.is-picked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 16px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cp-pink), var(--cp-violet));
  color: #fff;
  font-size: .9rem;
  font-weight: 900;
  animation: cp-check .32s cubic-bezier(.2, .8, .2, 1.4) both;
}

/* Result: the profile and where it sits, strength and focus, three ideas, then the kit. */
.cp-test__result {
  display: grid;
  gap: 18px;
}

.cp-test__result[hidden] {
  display: none;
}

.cp-test__result.is-revealing .cp-test__reveal {
  animation: cp-rise .65s var(--cp-ease) backwards;
  animation-delay: calc(var(--d, 0) * 110ms + 140ms);
}

.cp-test__main {
  text-align: center;
}

.cp-test__kicker {
  margin: 0;
  color: var(--cp-violet);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cp-test__emoji {
  position: relative;
  display: block;
  width: fit-content;
  margin: 14px auto 10px;
  line-height: 1;
}

.cp-test__emoji-face {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .9), 0 18px 40px var(--medal-shadow);
}

.cp-test__result.is-revealing .cp-test__emoji-face {
  animation: cp-pop .85s cubic-bezier(.2, .8, .2, 1.3) .15s backwards;
}

.cp-test__sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cp-test__sparkles span {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
  animation: cp-spark var(--t) cubic-bezier(.15, .7, .3, 1) forwards;
}

.cp-test__name {
  margin: 0;
  background: linear-gradient(120deg, #2a142d 10%, #8b2cf6 65%, #e91e75 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2rem, 6.6vw, 2.9rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.03em;
  outline: none;
}

.cp-test__tagline {
  margin: 14px 0 0;
  color: var(--cp-pink);
  font-size: 1.1rem;
  font-weight: 800;
}

.cp-test__text {
  max-width: 34em;
  margin: 10px auto 0;
  color: var(--cp-muted);
  font-size: 1.06rem;
  line-height: 1.6;
}

/* The 4 profiles on the two axes, the visitor's one lit up. */
.cp-test__map {
  margin-top: 24px;
  padding: 18px;
  border-radius: 20px;
  background: var(--cp-soft);
  text-align: left;
}

.cp-test__map h3,
.cp-test__insight h3,
.cp-test__ideas h3 {
  margin: 0 0 10px;
  color: var(--cp-violet);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cp-test__map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.cp-test__map-axis {
  color: var(--cp-muted);
  font-size: .78rem;
  font-weight: 850;
  text-align: center;
}

.cp-test__map-row {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: var(--cp-muted);
  font-size: .78rem;
  font-weight: 850;
}

.cp-test__map-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--cp-line);
  border-radius: 14px;
  background: #fff;
  color: var(--cp-muted);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.25;
  opacity: .62;
}

.cp-test__map-cell.is-you {
  border-color: transparent;
  background: linear-gradient(135deg, #fff0f6, #f6efff);
  box-shadow: 0 0 0 2px var(--cp-pink), 0 10px 24px rgba(233, 30, 117, .2);
  color: var(--cp-ink);
  opacity: 1;
}

.cp-test__map-medal {
  width: 34px;
  height: 34px;
  box-shadow: none;
}

.cp-test__map-you {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cp-pink), var(--cp-violet));
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cp-test__insights {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
  text-align: left;
}

.cp-test__insight {
  padding: 18px;
  border: 1px solid var(--cp-line);
  border-radius: 20px;
}

.cp-test__insight p {
  margin: 0;
  color: #4d3a50;
  font-weight: 650;
  line-height: 1.5;
}

.cp-test__insight .cp-test__insight-label {
  margin-bottom: 6px;
  color: var(--cp-ink);
  font-size: 1.1rem;
  font-weight: 900;
}

.cp-test__insight a {
  display: inline-block;
  margin-top: 10px;
  color: var(--cp-pink);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cp-test__ideas {
  margin-top: 16px;
  padding: 18px;
  border-radius: 20px;
  background: #2a0f33;
  color: #fff;
  text-align: left;
}

.cp-test__ideas h3 {
  color: #ffd1e3;
}

.cp-test__ideas ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  counter-reset: cp-idea;
}

.cp-test__ideas li {
  position: relative;
  padding-left: 38px;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
  counter-increment: cp-idea;
}

.cp-test__ideas li::before {
  content: counter(cp-idea);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cp-pink), var(--cp-violet));
  font-size: .85rem;
  font-weight: 900;
}

.cp-test__help {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #f3d27a;
  border-radius: 18px;
  background: #fff8e6;
  text-align: left;
}

.cp-test__help p {
  margin: 0 0 8px;
  color: #5c4310;
  font-weight: 700;
  line-height: 1.5;
}

.cp-test__help a {
  color: #8a5a00;
  font-weight: 900;
}

.cp-test__kit .kit-promo--inline {
  margin: 0;
}

.cp-test__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
}

.cp-test__more {
  color: #ffd1e3;
  font-weight: 850;
  text-decoration: none;
}

.cp-test__more:hover {
  text-decoration: underline;
}

/* The 4 profiles, in the guide below the test. */
.cp-profiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.cp-profile {
  padding: 20px;
  border: 1px solid var(--cp-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(72, 22, 64, .05);
}

.cp-profile__medal {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
}

.cp-section .cp-profile h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.cp-section .cp-profile p {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.55;
}

.cp-section .cp-profile .cp-profile__tagline {
  color: var(--cp-pink);
  font-weight: 800;
}

.cp-section .cp-profile .cp-profile__helps {
  margin: 0;
}

.cp-profile__helps strong {
  color: var(--cp-ink);
}

/* Japanese lines break between word groups, not in the middle of one. */
.cp-page:lang(ja) :is(h1, h2, h3, p, li, summary) {
  word-break: auto-phrase;
}

@keyframes cp-breathe {
  0%, 100% { opacity: .72; scale: .95; }
  50% { opacity: 1; scale: 1.05; }
}

@keyframes cp-drift {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.7); }
  25% { opacity: .95; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(16px, -80px, 0) scale(1.1); }
}

@keyframes cp-shine {
  0%, 72% { left: -60%; }
  100% { left: 130%; }
}

@keyframes cp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes cp-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cp-deal {
  from { opacity: 0; transform: translateY(90px) rotate(0deg) scale(.92); }
}

@keyframes cp-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes cp-answer-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes cp-check {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes cp-node {
  0%, 100% { box-shadow: 0 0 0 3px rgba(247, 37, 133, .14), 0 0 10px rgba(247, 37, 133, .45); }
  50% { box-shadow: 0 0 0 6px rgba(247, 37, 133, .07), 0 0 18px rgba(247, 37, 133, .7); }
}

@keyframes cp-pop {
  0% { opacity: 0; transform: scale(.3) rotate(-18deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(6deg); }
  100% { transform: none; }
}

@keyframes cp-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(.4); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(1); }
}

@media (max-width: 860px) {
  .cp-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp-hub-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-deck {
    min-height: 290px;
  }

}

@media (max-width: 600px) {
  .cp-tool {
    border-radius: 22px;
  }

  .cp-times {
    gap: 6px;
  }

  .cp-time {
    min-height: 42px;
    padding: 0 4px;
    font-size: .9rem;
  }

  .cp-actions {
    grid-template-columns: 1fr 1fr;
  }

  .cp-actions .cp-btn--primary {
    grid-column: 1 / -1;
  }

  .cp-related__grid,
  .cp-terrains {
    grid-template-columns: 1fr;
  }

  .cp-plan::before {
    left: 39px;
  }

  .cp-signs {
    grid-template-columns: 1fr;
  }

  .cp-compare,
  .cp-compare tbody,
  .cp-compare tr,
  .cp-compare th,
  .cp-compare td {
    display: block;
    width: auto;
  }

  .cp-compare {
    border: 0;
    background: none;
  }

  .cp-compare thead {
    display: none;
  }

  .cp-compare tr {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--cp-line);
    border-radius: 16px;
    background: #fff;
  }

  .cp-compare tbody th {
    width: auto;
    background: #2a0f33;
    color: #fff;
  }

  .cp-compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--cp-pink);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .cp-compare tbody tr:last-child th,
  .cp-compare tbody tr:last-child td {
    border-bottom: 1px solid var(--cp-line);
  }

  .cp-compare tbody tr td:last-child {
    border-bottom: 0;
  }

  .cp-plan__week {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 10px;
  }

  .cp-voices {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-swaps,
  .cp-gestures,
  .cp-themes,
  .cp-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The themes on one line that scrolls sideways, fading out at the edge. */
  .cp-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -18px 16px;
    padding: 2px 18px 6px;
    scroll-snap-type: x proximity;
    scroll-padding: 0 18px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }

  .cp-cats::-webkit-scrollbar {
    display: none;
  }

  .cp-cat {
    flex: none;
    scroll-snap-align: start;
  }

  .cp-deck-tool .cp-actions:not(.cp-actions--two) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cp-deck-tool .cp-actions:not(.cp-actions--two) .cp-btn--primary {
    grid-column: 1 / -1;
  }

  .cp-voice {
    min-height: 0;
    padding: 22px;
  }

  .cp-deck__item {
    width: min(236px, 72%);
  }

  .cp-deck__item:nth-child(1) { --x: -40px; --y: 18px; }
  .cp-deck__item:nth-child(2) { --x: 38px; --y: 8px; }

  .cp-deck__card {
    min-height: 214px;
  }

  .cp-hub-hero__ctas .cp-btn {
    flex: 1 1 auto;
  }

  .cp-test__panel {
    border-radius: 22px;
  }

  .cp-test__insights,
  .cp-profiles {
    grid-template-columns: 1fr;
  }

  .cp-test__node {
    width: 10px;
    height: 10px;
  }

  .cp-test__map-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .cp-test__end .cp-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-hero::before,
  .cp-lights span,
  .cp-hero__head,
  .cp-tool,
  .cp-btn--primary::after,
  .cp-faq details p,
  .cp-test,
  .cp-test__answer,
  .cp-test__kind.is-in,
  .cp-test__node.is-current,
  .cp-test__result.is-revealing .cp-test__reveal,
  .cp-test__result.is-revealing .cp-test__emoji-face,
  .cp-hub-hero__copy,
  .cp-deck__item,
  .cp-deck__item:last-child .cp-deck__card,
  .cp-hero__mark {
    animation: none;
  }

  .cp-lights span {
    opacity: .5;
  }

  .cp-idea,
  .cp-time,
  .cp-btn,
  .cp-switch__track,
  .cp-switch__track::after,
  .cp-heart,
  .cp-related__card,
  .cp-voice,
  .cp-deck__item,
  .cp-test__intro,
  .cp-test__stage,
  .cp-test__result,
  .cp-test__body,
  .cp-test__thread-fill,
  .cp-test__node,
  .cp-test__answer,
  .cp-swap__face,
  .cp-swap__turn,
  .cp-cat,
  .cp-qcard,
  .cp-tool-door,
  .cp-tool-door__icon {
    transition: none;
  }
}