/* ════════════════════════════════════════════════════════════
   COMPLAINT MIRROR — pinned quote stage. See js/mirror.js.
   Revert: remove this <link> and the mirror <script>. The original
   six-card grid renders again; nothing here touches it except the
   .cm-grid--replaced rule, which only applies once the script has run.
   ════════════════════════════════════════════════════════════ */

.cm-grid--replaced { display: none; }

.cmx {
  position: relative;
  /* height is set in JS from the viewport — one screen per step */
}

.cmx__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  /* Tier 2: above the vine, in line with every other container on the page.
     See the tier table in css/vine.css. */
  z-index: 2;
}

.cmx__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* ── LEFT: the objection ─────────────────────────────────── */
.cmx__left { position: relative; }

.cmx__count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest, #204F2D);
  margin-bottom: clamp(18px, 3vh, 34px);
}
.cmx__n {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  /* Tabular figures: 01 → 02 must not shift the slash sitting next to it. */
  font-variant-numeric: tabular-nums;
}
.cmx__of { opacity: 0.45; }

/* The quotes are stacked on top of each other and only one is lit. A grid
   with every child in cell 1/1 sizes the box to the TALLEST quote, so the
   answer panel beside it never jumps as the sequence advances — which
   absolute positioning would have caused. */
.cmx__quotes {
  display: grid;
  min-height: 4em;
}
.cmx__q {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--near-black, #1C1C19);
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 0.5s ease, transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
/* Leaving upward when the scroll is going down, so the column reads as one
   moving element rather than six unrelated fades. */
.cmx__q.is-up { transform: translate3d(0, -34px, 0); }
.cmx__q.is-on {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* The opening quote mark, set as a mark rather than as punctuation — it
   anchors the block and keeps the first line from floating. */
.cmx__q::before {
  content: '\201C';
  display: block;
  font-size: 2.4em;
  line-height: 0.5;
  margin-bottom: 0.24em;
  color: var(--forest, #204F2D);
  opacity: 0.22;
}

.cmx__dots {
  display: flex;
  gap: 7px;
  margin-top: clamp(22px, 4vh, 42px);
}
.cmx__dot {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.16;
  transition: opacity 0.4s ease;
}
.cmx__dot.is-on { opacity: 0.8; }

/* ── RIGHT: the answer ───────────────────────────────────── */
.cmx__answers {
  display: grid;
  position: relative;
}
.cmx__a {
  grid-area: 1 / 1;
  background: var(--bone, #F5F1EA);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 22px 48px rgba(28, 28, 25, 0.10);
  border-left: 3px solid var(--forest, #204F2D);
  opacity: 0;
  transform: translate3d(26px, 0, 0);
  /* The wipe. clip-path animates on the compositor and does not reflow the
     text inside, so the answer arrives as a pass across the panel rather
     than as a box being drawn. */
  clip-path: inset(0 100% 0 0 round 14px);
  transition:
    opacity 0.4s ease 0.22s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.22s,
    clip-path 0.66s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
  pointer-events: none;
}
.cmx__a.is-on {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0% 0 0 round 14px);
  pointer-events: auto;
}
.cmx__a-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest, #204F2D);
  margin-bottom: 10px;
}
.cmx__a p {
  margin: 0;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.6;
  color: var(--near-black, #1C1C19);
}

/* ── PHONE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cmx__grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vh, 34px);
    align-content: center;
  }
  /* The quote can no longer be the biggest thing on screen — the answer has
     to fit under it inside one viewport, and on a phone that is the whole
     budget. */
  .cmx__q { font-size: clamp(1.35rem, 6.4vw, 1.95rem); }
  .cmx__q::before { font-size: 1.9em; margin-bottom: 0.18em; }
  .cmx__dots { margin-top: 16px; }
  .cmx__dot { width: 18px; }
  .cmx__count { margin-bottom: 14px; }
  .cmx__a { padding: 18px 18px 20px; }
  /* Sliding in sideways on a narrow column reads as a glitch; on a phone the
     answer rises instead, and the wipe is dropped. */
  .cmx__a {
    transform: translate3d(0, 18px, 0);
    clip-path: none;
    transition: opacity 0.38s ease 0.18s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
  }
  .cmx__a.is-on { clip-path: none; }
}