/* ============================================================
   WISTERIA · CONSENT GRAPH
   The site's first dark section. Tokens only, .consent__ only.
   ============================================================ */

#consent {
  /* avatar geometry — the travelling elements have one intrinsic
     size and are scaled into whichever slot they are flying to. */
  --consent-av:       88px;   /* intrinsic avatar box            */
  --consent-solo:     74px;   /* solo card slot                  */
  --consent-group:    56px;   /* group card slot                 */
  --consent-overlap:  12px;   /* cluster overlap inside the card */

  --consent-travel-dur:  880ms;
  --consent-travel-ease: var(--ease-spring);
  --consent-travel-lead: 150ms;

  position: relative;
  overflow: hidden;
}

/* ambient bloom — the tonal shift into intimacy */
.consent__bloom {
  position: absolute;
  top: -18%;
  right: -14%;
  width: min(920px, 82vw);
  aspect-ratio: 1;
  background: var(--grad-bloom);
  filter: blur(80px);
  opacity: .17;
  pointer-events: none;
  z-index: 0;
}
#consent > .wrap { position: relative; z-index: 1; }

/* ---------- header ---------- */
.consent__head { max-width: 46rem; }
.consent__head .eyebrow { margin-bottom: 1.4rem; }
.consent__head h2 { margin-bottom: 1.5rem; }

/* ============================================================
   DEMO SHELL
   ============================================================ */
.consent__demo {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(1.1rem, 2.6vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--sh-lg);
}

.consent__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem 1.25rem;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
}

.consent__steps {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
}
.consent__step {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  padding: .58em .9em;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px transparent;
  transition: color var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.consent__step:hover { color: var(--text); background: color-mix(in srgb, var(--on-dark) 7%, transparent); }
.consent__step[aria-current="step"] {
  color: var(--text);
  background: color-mix(in srgb, var(--w-wisteria) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-wisteria-lt) 40%, transparent);
}
.consent__step-n {
  font-family: var(--font-mono);
  font-size: .82em;
  letter-spacing: .04em;
  opacity: .62;
}
.consent__step[aria-current="step"] .consent__step-n { opacity: .9; }

.consent__replay { flex: none; margin-left: auto; }

/* ---------- two-column body ---------- */
.consent__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 940px) {
  .consent__grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

/* ============================================================
   STAGE
   .consent__row and .consent__group share one grid cell so both
   are always in layout — every slot rect stays measurable at all
   times, which is what makes the FLIP travel exact.
   ============================================================ */
.consent__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: clamp(330px, 33vw, 400px);
  padding: 0;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--w-wisteria) 12%, transparent) 0%, transparent 68%),
    var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}

/* --- three solo cards --- */
.consent__row {
  grid-area: 1 / 1;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.25rem, 1.4vw, 1rem);
  padding-inline: clamp(.5rem, 2vw, 1.75rem);
  z-index: 1;
}
.consent__solo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: clamp(.85rem, 1.6vw, 1.15rem) .5rem clamp(.9rem, 1.6vw, 1.2rem);
  text-align: center;
}
.consent__solo-shell {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--sh-sm);
  transform-origin: 50% 60%;
  transition: opacity 360ms var(--ease),
              transform 520ms var(--ease);
}
.consent__solo-name,
.consent__solo-kind {
  position: relative;
  transition: opacity 300ms var(--ease);
}
.consent__solo-name {
  margin-top: .7rem;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}
.consent__solo-kind {
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.4;
}

/* the slot is a pure geometric placeholder — never transformed,
   never painted. Everything measures against it. */
.consent__slot {
  display: block;
  width: var(--consent-solo);
  height: var(--consent-solo);
  border-radius: 50%;
  flex: none;
}
.consent__slot--group {
  width: var(--consent-group);
  height: var(--consent-group);
}

/* --- the group card --- */
.consent__group {
  grid-area: 1 / 1;
  justify-self: center;
  position: relative;
  width: min(400px, 92%);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1rem, 2.2vw, 1.6rem) clamp(1.15rem, 2.2vw, 1.5rem);
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.consent__group-glow {
  position: absolute;
  inset: -26%;
  background: var(--grad-bloom);
  filter: blur(46px);
  opacity: 0;
  transform: scale(.68);
  z-index: -1;
  transition: opacity 620ms var(--ease) var(--consent-travel-lead),
              transform 900ms var(--ease-spring) var(--consent-travel-lead);
}
.consent__group-shell {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--w-wisteria) 14%, var(--surface)) 0%,
      var(--surface) 58%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--w-wisteria-lt) 26%, transparent),
    var(--sh-lg);
  opacity: 0;
  transform: scale(.84);
  transform-origin: 50% 50%;
  transition: opacity 380ms var(--ease) var(--consent-travel-lead),
              transform 760ms var(--ease-spring) var(--consent-travel-lead);
}
.consent__group-body { position: relative; }
/* everything except the cluster fades + rises; the cluster holds the
   measurement slots and must never move. */
.consent__group-body > *:not(.consent__cluster) {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 400ms var(--ease) 460ms,
              transform 560ms var(--ease) 460ms;
}
.consent__cluster {
  display: flex;
  justify-content: center;
  margin-bottom: .85rem;
}
.consent__cluster .consent__slot + .consent__slot { margin-left: calc(var(--consent-overlap) * -1); }

.consent__group-kind {
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
}
.consent__group-name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin-top: .18rem;
  color: var(--text);
}
.consent__group-members {
  font-size: var(--t-sm);
  color: var(--text-2);
  margin-top: .3rem;
}
.consent__group-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .9rem;
  margin-top: .7rem;
  font-size: var(--t-xs);
  color: var(--text-3);
}
.consent__group-meta li { position: relative; }
.consent__group-meta li + li::before {
  content: "";
  position: absolute;
  left: -.5rem;
  top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}
.consent__group-badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: .95rem;
  padding: .45em .8em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--w-sage) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-sage) 40%, transparent);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--text);
}
.consent__group-badge span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--w-sage);
  flex: none;
}

/* --- relationship links --- */
.consent__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  transition: opacity 300ms linear;
}
.consent__link {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
  transition: stroke-dashoffset 620ms var(--ease),
              opacity 280ms linear;
}
.consent__link.is-drawn { opacity: .85; }

/* --- travelling avatars --- */
.consent__avatars {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.consent__origin {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
}
.consent__avatar {
  position: absolute;
  top: 0; left: 0;
  width: var(--consent-av);
  height: var(--consent-av);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform-origin: 0 0;
  transform: translate3d(-999px, -999px, 0);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 252, 248, .30),
    0 10px 26px -8px rgba(26, 19, 32, .72);
  transition: transform var(--consent-travel-dur) var(--consent-travel-ease);
  transition-delay: calc(var(--i) * 70ms);
  will-change: transform;
}
.consent__avatar--dusk   { background: var(--grad-dusk); }
.consent__avatar--warm   { background: var(--grad-warm); }
.consent__avatar--violet { background: var(--grad-violet); }

.consent__initial {
  font-family: var(--font-display);
  font-size: calc(var(--consent-av) * .38);
  line-height: 1;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 72;
  color: #FFFCF8;
  text-shadow: 0 1px 10px rgba(26, 19, 32, .45);
  letter-spacing: -0.02em;
}

/* ---------- state: the group card is live ---------- */
[data-consent].is-live { --consent-travel-dur: 900ms; --consent-travel-ease: var(--ease-spring); }
[data-consent]:not(.is-live) { --consent-travel-dur: 540ms; --consent-travel-ease: var(--ease); --consent-travel-lead: 0ms; }

[data-consent].is-live .consent__avatar { transition-delay: calc(var(--consent-travel-lead) + var(--i) * 80ms); }
[data-consent]:not(.is-live) .consent__avatar { transition-delay: calc(var(--i) * 45ms); }

[data-consent].is-live .consent__solo-shell { opacity: 0; transform: scale(.9); }
[data-consent].is-live .consent__solo-name,
[data-consent].is-live .consent__solo-kind { opacity: 0; }

[data-consent].is-live .consent__group-shell { opacity: 1; transform: scale(1); }
[data-consent].is-live .consent__group-glow  { opacity: .34; transform: scale(1); }
[data-consent].is-live .consent__group-body > * { opacity: 1; transform: none; }

[data-consent].is-live .consent__links { opacity: 0; transition-delay: 210ms; }

/* first paint / resize — snap, never slide in from the corner */
[data-consent].is-instant .consent__avatar,
[data-consent].is-instant .consent__link,
[data-consent].is-instant .consent__solo-shell,
[data-consent].is-instant .consent__group-shell,
[data-consent].is-instant .consent__group-glow,
[data-consent].is-instant .consent__group-body > * { transition: none !important; }

/* ---------- caption ---------- */
.consent__caption {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  min-height: 4.4em;
  max-width: 54ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-2);
}
.consent__caption.is-in { animation: consent-cap 520ms var(--ease) both; }
@keyframes consent-cap {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.consent__caption b {
  font-weight: 500;
  color: var(--text);
}

/* ============================================================
   CONTROL PANEL
   ============================================================ */
.consent__panel {
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
  border-radius: var(--r-lg);
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur) var(--ease);
}
[data-consent].is-hinting .consent__panel {
  animation: consent-hint 2.4s var(--ease-soft) 3;
}
@keyframes consent-hint {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--border); }
  40%      { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-wisteria-lt) 62%, transparent); }
}

/* stacked-but-wide: keep the two control blocks side by side so the
   rows don't stretch into a sparse table */
@media (min-width: 600px) and (max-width: 939.98px) {
  .consent__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.75rem);
    align-items: start;
  }
  .consent__panel-rule { display: none; }
}
.consent__panel-rule { margin-block: clamp(1rem, 2vw, 1.3rem); }
.consent__panel-title {
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .9rem;
}

/* --- switches --- */
.consent__switch { position: relative; }
.consent__switch + .consent__switch { margin-top: .3rem; }

.consent__switch-label {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .55rem;
  margin-inline: -.55rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft);
}
.consent__switch-label:hover { background: color-mix(in srgb, var(--on-dark) 6%, transparent); }

.consent__switch-track {
  position: relative;
  flex: none;
  width: 40px;
  height: 23px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--on-dark) 13%, transparent);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft);
}
.consent__switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--on-dark-3);
  transition: transform var(--dur) var(--ease-spring),
              background-color var(--dur) var(--ease-soft);
}
.consent__switch-input:checked + .consent__switch-label .consent__switch-track {
  background: var(--w-wisteria);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-wisteria-lt) 55%, transparent);
}
.consent__switch-input:checked + .consent__switch-label .consent__switch-thumb {
  transform: translateX(17px);
  background: #FFFCF8;
}
.consent__switch-input:focus-visible + .consent__switch-label .consent__switch-track {
  outline: 2px solid var(--w-wisteria-lt);
  outline-offset: 3px;
}
.consent__switch-input:disabled + .consent__switch-label {
  cursor: default;
  opacity: .42;
}
.consent__switch-input:disabled + .consent__switch-label:hover { background: none; }

.consent__switch-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.consent__switch-name {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
}
.consent__switch-state {
  font-size: var(--t-label);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.3;
}
.consent__switch-input:not(:checked) + .consent__switch-label .consent__switch-state {
  color: var(--w-terra-lt);
}

.consent__note {
  margin-top: .9rem;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--text-3);
}

/* --- explore readout --- */
.consent__explore { display: grid; gap: .1rem; }
.consent__explore-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .38rem 0;
  font-size: var(--t-xs);
  color: var(--text-3);
  transition: color var(--dur) var(--ease-soft);
}
.consent__explore-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: background-color var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft),
              transform var(--dur) var(--ease-spring);
}
.consent__explore-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.consent__explore-state {
  flex: none;
  font-family: var(--font-mono);
  font-size: .95em;
  letter-spacing: -0.01em;
  opacity: .8;
}
.consent__explore-row[data-on="1"] { color: var(--text); }
.consent__explore-row[data-on="1"] .consent__explore-dot {
  background: var(--w-sage);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-sage) 70%, transparent);
  transform: scale(1.12);
}

/* ============================================================
   FOUR-LAYER MODEL
   ============================================================ */
.consent__model {
  margin-top: clamp(4rem, 9vw, 7.5rem);
}
.consent__model > .eyebrow { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

.consent__layers {
  position: relative;
  padding-left: clamp(1.4rem, 3vw, 2.2rem);
}
.consent__layers::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .55rem;
  bottom: .55rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--border-strong) 8%,
    var(--border-strong) 92%,
    transparent 100%
  );
}

.consent__layer {
  position: relative;
  display: grid;
  gap: .5rem 2.5rem;
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
}
@media (min-width: 800px) {
  .consent__layer { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 3.5rem); }
}
.consent__layer::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.4rem, 3vw, 2.2rem) * -1);
  top: calc(clamp(1.1rem, 2vw, 1.5rem) + .5em);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-wisteria) 18%, transparent);
}

/* The step marker is a word, not a code label — set it in the
   display serif so it reads as editorial numbering rather than
   as a field name. */
.consent__layer-n {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  line-height: 1.6;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.consent__layer-name { margin-top: .1rem; }
.consent__layer-body { max-width: 46rem; }
.consent__layer-def {
  color: var(--text-2);
  font-size: var(--t-body);
}
.consent__layer-def em {
  font-style: italic;
  color: var(--text);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
/* The second paragraph of each step — the "and here's what that
   means for you" line. Sits slightly quieter than the definition,
   marked by a hairline rather than a label. */
.consent__layer-plain {
  margin-top: .85rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border-strong);
  font-size: var(--t-sm);
  color: var(--text-2);
  line-height: 1.55;
}
.consent__layer-plain em {
  font-style: italic;
  color: var(--text);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

.consent__joint {
  position: relative;
  padding-block: .1rem;
  padding-left: .35rem;
  font-size: var(--t-xs);
  font-style: italic;
  color: var(--text-3);
  max-width: 34rem;
}
.consent__joint::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.4rem, 3vw, 2.2rem) * -1 + 3.5px);
  top: 50%;
  width: 5px; height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: 1px solid var(--text-3);
  border-bottom: 1px solid var(--text-3);
  opacity: .8;
}

/* ---------- the governing rule ---------- */
.consent__rule-quote {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--w-wisteria) 16%, transparent) 0%, transparent 62%),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.consent__rule-quote blockquote {
  display: grid;
  gap: clamp(1.6rem, 3.4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .consent__rule-quote blockquote {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}
.consent__rule-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  font-size: var(--t-body);
  color: var(--text-2);
}
.consent__rule-pair + .consent__rule-pair { margin-top: 1.5rem; }

/* The two questions the app actually asks. Set as speech in the
   display serif — they're what a person is asked, not a field. */
.consent__ask {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--text);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 60;
  text-wrap: balance;
}
.consent__rule-gloss { line-height: 1.45; }
.consent__rule-gloss b { font-weight: 600; color: var(--text); }
.consent__verdict {
  font-family: var(--font-display);
  line-height: 1.14;
  letter-spacing: -0.024em;
  color: var(--text);
}
.consent__rule-quote figcaption {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- nothing cascades ---------- */
.consent__cascade {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 800px) {
  .consent__cascade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
  }
}
.consent__cascade-title {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  color: var(--text);
  text-wrap: balance;
}
.consent__cascade-list {
  display: grid;
  gap: .55rem;
  max-width: 44rem;
}
.consent__cascade-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--text-2);
  letter-spacing: -0.011em;
}
.consent__cascade-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px; height: 1px;
  background: var(--accent);
}
.consent__cascade-note {
  margin-top: 1.6rem;
  font-size: var(--t-sm);
  color: var(--text-3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  #consent {
    --consent-solo: 58px;
    --consent-group: 46px;
    --consent-overlap: 9px;
  }
  .consent__stage { min-height: 320px; }
  .consent__solo { padding-inline: .25rem; }
  .consent__solo-name { margin-top: .5rem; }
  .consent__caption { min-height: 6em; }
}

@media (max-width: 460px) {
  #consent {
    --consent-solo: 50px;
    --consent-group: 42px;
  }
  .consent__stage { min-height: 300px; }
  .consent__group { width: min(340px, 96%); }
  .consent__solo-kind { font-size: .625rem; letter-spacing: .1em; }
  .consent__step { padding: .55em .7em; font-size: .75rem; }
  .consent__bar { gap: .7rem; }
  .consent__replay { width: 100%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .consent__avatar { will-change: auto; }
  .consent__bloom { filter: blur(60px); }
}