/* Summary-only comparison, shared by the approved Playbook light theme and
   its Destreza adaptation. JavaScript owns the dot-fill opacity after load. */
.phase3.story-revision #summary .success-comparison {
  --success-ink: #272d36;
  --success-muted: #515b68;
  --success-line: rgba(112,125,144,.26);
  --success-empty: #cbd0d7;
  --success-fill: #4a525e;
  --success-increment: #788595;
  color: var(--success-ink);
  background: rgba(249,250,252,.70);
  border: 1px solid rgba(169,176,189,.34);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  padding: 30px 32px 24px;
  margin: 30px 0;
  min-width: 0;
  box-sizing: border-box;
}

.phase3.story-revision #summary .success-endpoints {
  display: grid;
  grid-template-columns: minmax(0,1fr) 30px minmax(0,1.4fr);
  align-items: end;
  gap: 22px;
}
.phase3.story-revision #summary .success-baseline,
.phase3.story-revision #summary .success-workflow { min-width: 0; }
.phase3.story-revision #summary .success-kicker {
  display: block;
  color: var(--success-muted);
  font-family: var(--font-body,"Mona Sans",sans-serif);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: .025em;
  margin: 0 0 10px;
}
.phase3.story-revision #summary .success-number {
  display: block;
  color: var(--success-ink);
  font-family: var(--font-display,"Mona Sans",sans-serif);
  font-size: clamp(48px,5.2vw,62px);
  font-weight: 450;
  line-height: .94;
  letter-spacing: -.065em;
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0 0 14px;
}
.phase3.story-revision #summary .success-number small {
  font-size: .43em;
  line-height: 1;
  font-weight: inherit;
  letter-spacing: -.025em;
  vertical-align: .12em;
}
.phase3.story-revision #summary .success-workflow .success-number {
  font-size: clamp(66px,7.2vw,88px);
  font-weight: 700;
}
.phase3.story-revision #summary .success-baseline > p,
.phase3.story-revision #summary .success-workflow > p {
  color: var(--success-muted);
  font-family: var(--font-body,"Mona Sans",sans-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.015em;
  margin: 0;
  max-width: 27ch;
  text-wrap: pretty;
}
.phase3.story-revision #summary .success-workflow > p {
  color: var(--success-ink);
  font-size: 19px;
  font-weight: 600;
}
.phase3.story-revision #summary .success-workflow > p strong {
  color: inherit;
  font-weight: 700;
}
.phase3.story-revision #summary .success-arrow {
  color: var(--success-muted);
  align-self: center;
  font-family: var(--font-body,"Mona Sans",sans-serif);
  font-size: 25px;
  line-height: 1;
  font-weight: 300;
  text-align: center;
  margin-top: 12px;
}

/* One hundred stable positions. Only the child fill changes; there is no
   timer, layout shift, clipping or disappearing endpoint during the scrub. */
.phase3.story-revision #summary .success-grid {
  display: grid;
  grid-template-columns: repeat(20,minmax(0,1fr));
  gap: 7px;
  align-items: center;
  padding: 24px 0 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--success-line);
}
.phase3.story-revision #summary .success-grid > i {
  display: block;
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 18px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--success-empty);
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.phase3.story-revision #summary .success-grid > i > span {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--success-fill);
  opacity: 0;
}
.phase3.story-revision #summary .success-grid > i.is-baseline > span,
.phase3.story-revision #summary .success-grid > i.is-workflow > span { opacity: 1; }
.phase3.story-revision #summary .success-grid > i.is-workflow > span { background: var(--success-increment); }

.phase3.story-revision #summary .success-chart-note,
.phase3.story-revision #summary .success-scroll-cue {
  font-family: var(--font-body,"Mona Sans",sans-serif);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--success-muted);
  margin: 14px 0 0;
}
.phase3.story-revision #summary .success-chart-note a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.phase3.story-revision #summary .success-scroll-cue {
  display: none;
  font-size: 10px;
  letter-spacing: .055em;
  margin-top: 9px;
}
.phase3.story-revision #summary .success-comparison[data-success-motion="scroll"] .success-scroll-cue { display: block; }
.phase3.story-revision #summary .success-comparison.is-complete .success-scroll-cue { visibility: hidden; }
.phase3.story-revision #summary .success-copy {
  margin: 0;
  color: var(--p3-ink,#272d36);
}
.phase3.story-revision #summary .success-copy > p {
  font-family: var(--font-body,"Mona Sans",sans-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.012em;
  margin: 0 0 18px;
  text-wrap: pretty;
}
.phase3.story-revision #summary .success-copy > p:last-child { margin-bottom: 0; }
.phase3.story-revision #summary .success-copy strong {
  color: inherit;
  font-weight: 700;
}
.phase3.story-revision #summary .success-offer-line,
.phase3.story-revision #summary .success-copy > p.success-offer-line {
  font-family: var(--font-body,"Mona Sans",sans-serif);
  font-size: 19px;
  font-weight: 450;
  line-height: 1.55;
  color: var(--muted,#515b68);
  border-top: 1px solid var(--rule,rgba(112,125,144,.26));
  padding-top: 20px;
  margin: 24px 0 18px;
}
.phase3.story-revision #summary .success-offer-line strong { color: var(--p3-ink,#272d36); font-weight: 700; }

/* Destreza uses its established glass material. Strong copy intentionally
   remains visibly strong rather than inheriting the estate's light headings. */
.phase3.story-revision.destreza-adaptation #summary .success-comparison {
  --success-ink: #F3EFEA;
  --success-muted: rgba(243,239,234,.72);
  --success-line: rgba(255,255,255,.14);
  --success-empty: rgba(194,199,210,.22);
  --success-fill: linear-gradient(150deg,#EEF0F4,#C2C7D2 48%,#86A6DC);
  --success-increment: linear-gradient(150deg,#ADC0E1,#8FAAD5 48%,#7091C8);
  background: rgba(13,18,30,.46);
  border-color: rgba(255,255,255,.13);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.35),0 14px 34px -16px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}
.phase3.story-revision.destreza-adaptation #summary .success-workflow .success-number,
.phase3.story-revision.destreza-adaptation #summary .success-workflow > p strong,
.phase3.story-revision.destreza-adaptation #summary .success-copy strong,
.phase3.story-revision.destreza-adaptation #summary .success-offer-line strong {
  color: var(--cream,#F5F0EB);
  font-weight: 700;
}
.phase3.story-revision.destreza-adaptation #summary .success-workflow .success-kicker,
.phase3.story-revision.destreza-adaptation #summary .success-arrow { color: var(--cobalt-bright,#86A6DC); }

@media (max-width: 760px) {
  .phase3.story-revision #summary .success-comparison { padding: 24px 24px 20px; margin: 26px 0; }
  .phase3.story-revision #summary .success-endpoints { grid-template-columns: minmax(0,1fr) 22px minmax(0,1.4fr); gap: 16px; }
  .phase3.story-revision #summary .success-number { font-size: 48px; }
  .phase3.story-revision #summary .success-workflow .success-number { font-size: 68px; }
  .phase3.story-revision #summary .success-grid { gap: 5px; }
  .phase3.story-revision #summary .success-copy > p { font-size: 15px; line-height: 1.55; margin-bottom: 16px; }
  .phase3.story-revision #summary .success-offer-line,
  .phase3.story-revision #summary .success-copy > p.success-offer-line { font-size: 16px; }
}
@media (max-width: 520px) {
  .phase3.story-revision #summary .success-comparison { padding: 22px 20px 18px; }
  .phase3.story-revision #summary .success-endpoints { grid-template-columns: minmax(0,.9fr) 16px minmax(0,1.4fr); gap: 10px; }
  .phase3.story-revision #summary .success-number { font-size: 42px; margin-bottom: 12px; }
  .phase3.story-revision #summary .success-workflow .success-number { font-size: 60px; }
  .phase3.story-revision #summary .success-kicker { font-size: 12px; margin-bottom: 8px; }
  .phase3.story-revision #summary .success-baseline > p { font-size: 13px; }
  .phase3.story-revision #summary .success-workflow > p { font-size: 15px; }
  .phase3.story-revision #summary .success-arrow { font-size: 20px; }
  .phase3.story-revision #summary .success-grid { gap: 4px; padding-top: 20px; margin-top: 20px; }
}
@media (max-width: 420px) {
  .phase3.story-revision #summary .success-comparison { padding-inline: 16px; }
  .phase3.story-revision #summary .success-endpoints { gap: 8px; }
  .phase3.story-revision #summary .success-number { font-size: 38px; }
  .phase3.story-revision #summary .success-workflow .success-number { font-size: 56px; }
  .phase3.story-revision #summary .success-grid { grid-template-columns: repeat(10,minmax(0,1fr)); gap: 5px 7px; }
  .phase3.story-revision #summary .success-grid > i { max-width: 10px; }
  .phase3.story-revision #summary .success-chart-note { font-size: 10px; }
}

/* Motion-off and static readers see the authored 94-dot endpoint immediately.
   These rules also protect the initial paint while the script reads settings. */
html.motion-paused .phase3.story-revision #summary .success-grid > i > span,
html[data-motion="off"] .phase3.story-revision #summary .success-grid > i > span {
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}
html.motion-paused .phase3.story-revision #summary .success-grid > i.is-baseline > span,
html.motion-paused .phase3.story-revision #summary .success-grid > i.is-workflow > span,
html[data-motion="off"] .phase3.story-revision #summary .success-grid > i.is-baseline > span,
html[data-motion="off"] .phase3.story-revision #summary .success-grid > i.is-workflow > span { opacity: 1 !important; }
html.motion-paused .phase3.story-revision #summary .success-scroll-cue,
html[data-motion="off"] .phase3.story-revision #summary .success-scroll-cue { display: none !important; }

@media (prefers-reduced-motion: reduce), print {
  .phase3.story-revision #summary .success-grid > i > span {
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }
  .phase3.story-revision #summary .success-grid > i.is-baseline > span,
  .phase3.story-revision #summary .success-grid > i.is-workflow > span { opacity: 1 !important; }
  .phase3.story-revision #summary .success-scroll-cue { display: none !important; }
}