/* Examples / Studies layer over guides.css (Comparison Spine system).
 * Scoped under body.gd-study, stacked on home-parity.css + guides.css +
 * guides-rich.css by the study pages (which extend guide_rich_base).
 * The comparison grammar uses semantic ROLES, not literal wave letters:
 *   --baseline      the initial structure (neutral warm gray, solid)
 *   --comparison    the revised structure (brand purple, solid)
 *   --directional   a follow-up wave that is directional evidence (dashed)
 * A page may use 2..4 lanes; each lane binds one role.
 */

.gd-study {
  --st-baseline: #56514f;
  --st-baseline-bg: #f2eeec;
  --st-comparison: #643995;
  --st-comparison-bg: #f5f0ff;
  --st-directional: #F90473;
  --st-directional-bg: #ffffff;
  --st-track: #f2eeec;
}

/* ---------- Lane chips (the role legend, reused in every figure) ---------- */

.st-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1.5px solid;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  background-color: white;
  white-space: nowrap;
}

.st-chip--baseline { color: var(--st-baseline); border-color: var(--st-baseline); background-color: var(--st-baseline-bg); }
.st-chip--comparison { color: var(--st-comparison); border-color: var(--st-comparison); background-color: var(--st-comparison-bg); }
.st-chip--directional { color: var(--st-directional); border-color: var(--st-directional); border-style: dashed; }

.st-chip--tag {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 8px;
  margin-left: 6px;
}

/* Dagger footnote marker used on confounded values. These are links to the
 * appendix, but they read as reference marks: no underline at rest
 * (.gd-article a would otherwise win on specificity), a dotted affordance on
 * hover, and the shared visible focus ring kept for keyboard users. */
.gd-article a.st-dag {
  color: var(--st-comparison);
  font-weight: 700;
  text-decoration: none;
  padding: 0 1px;
}

.gd-article a.st-dag:hover {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.gd-article a.st-dag:focus-visible {
  outline: 2px solid var(--st-comparison);
  outline-offset: 1px;
  border-radius: 2px;
}

/* ---------- Editorial hero: lede beside the admin schematic ---------- */

.st-hero { margin-bottom: 8px; }

@media (min-width: 1100px) {
  .st-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: 36px;
    align-items: start;
  }
}

.st-admin-sketch { margin: 8px 0 0; }

.st-admin-sketch__frame {
  display: grid;
  grid-template-columns: 116px 1fr;
  border: 1px solid #e3dedd;
  border-radius: 10px;
  background-color: white;
  overflow: hidden;
  min-height: 190px;
}

.st-admin-sketch__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  background-color: #faf8f6;
  border-right: 1px solid #f2eeec;
}

.st-admin-sketch__nav span {
  font-size: 12px;
  color: #56514f;
  padding: 4px 14px;
}

.st-admin-sketch__nav .is-active {
  color: #643995;
  font-weight: 700;
  border-left: 3px solid #643995;
  padding-left: 11px;
  background-color: #f5f0ff;
}

/* ---------- Source-app chips (provenance visual) ---------- */

.st-apps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0 8px;
}

.st-apps a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border: 1px solid #e3dedd;
  border-radius: 10px;
  background-color: white;
  color: #303030;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(37, 44, 97, 0.05);
}

.st-apps a:hover { box-shadow: 2px 2px 0 #E0BBF5; }

.st-apps img { width: 34px; height: 34px; border-radius: 8px; flex: none; }

.st-apps__text { display: flex; flex-direction: column; min-width: 0; }

.st-apps__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }

.st-apps__fact { font-size: 11.5px; color: #79747e; line-height: 1.35; }

.st-apps__note {
  font-size: 12px !important;
  color: #79747e !important;
  margin: 6px 0 20px !important;
}

/* ---------- Study flow strip ---------- */

.st-flowband {
  margin: 24px 0 8px;
  padding: 22px 24px 20px;
  border: 1px solid #e4d8f5;
  border-radius: 12px;
  background-color: #f5f0ff;
}

.st-flowband__t {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #643995;
}

.st-flowband__stages {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.st-flowband__stage {
  background-color: white;
  border: 1px solid #e3dedd;
  border-radius: 9px;
  padding: 10px 10px 8px;
  font-size: 11.5px;
  line-height: 1.4;
}

.st-flowband__stage b { display: block; font-size: 12.5px; margin-bottom: 2px; color: #303030; }
.st-flowband__stage small { color: #79747e; font-size: 11px; }

.st-flowband__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #303030;
  margin-bottom: 7px;
}

.st-flowband__stage--1 .st-flowband__dot { background-color: #FFE5BB; }
.st-flowband__stage--2 .st-flowband__dot { background-color: #E0BBF5; }
.st-flowband__stage--3 .st-flowband__dot { background-color: #BBDAFF; }
.st-flowband__stage--4 .st-flowband__dot { background-color: #BBDAFF; }
.st-flowband__stage--c { border-style: dashed; border-color: #f9a9cd; }
.st-flowband__stage--c .st-flowband__dot { background-color: white; border: 2px dashed var(--st-directional); color: var(--st-directional); }
.st-flowband__stage--c .st-flowband__dot--6 { background-color: #FFB3D9; border: none; color: #303030; }
.st-flowband__stage--go .st-flowband__dot { background-color: #D4FFBB; }

/* ---------- Finding kickers (pastel numbered markers) ---------- */

.gd-study .st-kick {
  position: relative;
  margin: 52px 0 2px;
  padding-top: 26px;
}

/* The section hairline moves onto the kicker so the divider stays above it */
.gd-study .st-kick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #E0BBF5, #BBFFF0 60%, transparent);
}
.gd-study .st-kick .gd-kicker__num { color: #303030; }
.gd-study .st-kick--1 .gd-kicker__num { background-color: #E0BBF5; }
.gd-study .st-kick--2 .gd-kicker__num { background-color: #FFD1BB; }
.gd-study .st-kick--3 .gd-kicker__num { background-color: #D4FFBB; }
.gd-study .st-kick--4 .gd-kicker__num { background-color: #BBDAFF; }
.gd-study .st-kick--5 .gd-kicker__num { background-color: #FFB3D9; }
.gd-study .st-kick + h2 { margin-top: 6px; padding-top: 0; }
.gd-study .st-kick + h2::before { display: none; }

/* ---------- "Several plausible homes" schematic ---------- */

.st-homes {
  margin: 24px auto;
  max-width: 480px;
  text-align: center;
}

.st-homes__stem {
  width: 2px;
  height: 16px;
  margin: 0 auto;
  background-color: #d3c4ea;
}

.st-homes__opts {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.st-homes__opts span {
  position: relative;
  padding: 3px 12px;
  border: 1px solid #b9b2ae;
  border-radius: 999px;
  background-color: white;
  color: #56514f;
  font-size: 12.5px;
  font-weight: 600;
}

.st-homes .ev-figure__caption { text-align: center; margin-top: 14px; }

/* Breathing room before major sections (over the guides' 40px default) */
.gd-study .gd-content > h2 { margin-top: 52px; }

/* A kicker carries the section's divider and spacing; its heading hugs it */
.gd-study .gd-content > .st-kick + h2 { margin-top: 6px; padding-top: 0; }

/* ---------- Rich-frame softening (pass 2) ----------
 * guides-rich gives gd-glance and gd-tree-sample 2px dark borders with pastel
 * offset shadows. On a study page those frames outweigh the lane cards and
 * triple up around the tree excerpt, so the study skin returns both to the
 * quiet guides.css treatment; lane identity comes from chips and highlights. */

.gd-study .gd-glance {
  border: 1px solid #d3c4ea;
  background-color: #f5f0ff;
  box-shadow: 0 1px 2px rgba(37, 44, 97, 0.05);
}

.gd-study .st-tree-lanes .gd-tree-sample {
  border: 1px solid #e3dedd;
  background-color: #faf8f6;
  box-shadow: none;
}

/* ---------- Study facts: lane legend strip above the glance box ---------- */

.st-lanes-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0 12px;
}

.st-lanes-legend__lane {
  border: 1px solid #e3dedd;
  border-radius: 8px;
  padding: 10px 12px;
  background-color: white;
}

.st-lanes-legend__lane--directional { border-style: dashed; border-color: #fbb0d3; }

.st-lanes-legend__n {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #56514f;
}

/* ---------- Evidence figures ---------- */

.ev-figure {
  margin: 26px 0;
  padding: 16px 20px 14px;
  border: 1px solid #e3dedd;
  border-radius: 10px;
  background-color: #fdfcfb;
  box-shadow: 0 1px 2px rgba(37, 44, 97, 0.05), 0 10px 26px rgba(37, 44, 97, 0.05);
}

.ev-figure > figcaption {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #643995;
  margin: 0 0 14px;
}

.ev-figure__caption {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #56514f;
}

.ev-figure__caption + .ev-figure__caption { margin-top: 6px; }

/* Wide break-out (reserved): this page's outline rail is tall, so breaking out
 * to the right would cover it. Figures stay in-column for now; revisit when a
 * study page has a short rail or the rail collapses after scroll. */
.gd-study .ev-figure--wide { width: auto; }

/* ---------- ev-bars: labeled horizontal bars (overall Direct) ---------- */

.ev-bars { display: flex; flex-direction: column; gap: 14px; }

.ev-bars__row { display: grid; grid-template-columns: 128px 1fr; gap: 10px 14px; align-items: center; }

.ev-bars__track {
  position: relative;
  height: 22px;
  background-color: var(--st-track);
  border-radius: 5px;
}

.ev-bars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 5px;
  min-width: 2px;
}

.ev-bars__fill--baseline { background-color: var(--st-baseline); opacity: 0.55; }
.ev-bars__fill--comparison { background-color: var(--st-comparison); opacity: 0.75; }
.ev-bars__fill--directional {
  background-color: var(--st-directional-bg);
  border: 1.5px dashed var(--st-directional);
}

.ev-bars__val {
  grid-column: 2;
  font-size: 13px;
  color: #56514f;
  font-variant-numeric: tabular-nums;
}

/* ---------- ev-dist: first-click distribution groups ---------- */

.ev-dist { display: flex; flex-direction: column; gap: 20px; }

.ev-dist__group { border-top: 1px solid #f2eeec; padding-top: 14px; }
.ev-dist__group:first-child { border-top: 0; padding-top: 0; }

.ev-dist__head { margin: 0 0 8px; font-size: 13.5px; color: #56514f; }

.ev-dist__row {
  display: grid;
  grid-template-columns: 218px 1fr 84px;
  gap: 10px;
  align-items: center;
  margin: 4px 0;
  font-size: 13px;
  color: #303030;
}

.ev-dist__row .ev-bars__track { height: 14px; }

.ev-dist__count { text-align: right; color: #56514f; font-variant-numeric: tabular-nums; }

/* ---------- ev-ladder: per-task A->B track plus separate directional sub-track ---------- */

.ev-ladder { display: flex; flex-direction: column; gap: 18px; }

.ev-ladder__row {
  display: grid;
  grid-template-columns: 150px 1fr 196px;
  gap: 8px 18px;
  align-items: center;
}

.ev-ladder__task { font-size: 14px; font-weight: 600; color: #303030; }

.ev-ladder__tracks { display: flex; flex-direction: column; gap: 5px; }

.ev-ladder__track {
  position: relative;
  height: 12px;
  background-color: var(--st-track);
  border-radius: 4px;
}

.ev-ladder__track--sub { height: 8px; opacity: 0.9; }

.ev-ladder__link {
  position: absolute;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background-color: #cbb6e6;
  border-radius: 2px;
}

.ev-ladder__dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-sizing: border-box;
}

.ev-ladder__dot--baseline { background-color: var(--st-baseline); }
.ev-ladder__dot--comparison { background-color: var(--st-comparison); }
.ev-ladder__dot--directional {
  width: 17px;
  height: 17px;
  background-color: transparent;
  border: 2px dashed var(--st-directional);
  z-index: 2;
}

/* Inline legend above the ladder: plain-English marker key */
.ev-ladder__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 650;
  color: #56514f;
}

.ev-ladder__legend span { display: inline-flex; align-items: center; gap: 8px; }

.ev-ladder__legend .ev-ladder__dot {
  position: static;
  transform: none;
  flex: none;
}

.ev-ladder__vals {
  display: grid;
  grid-template-columns: 92px auto;
  gap: 0 12px;
  font-size: 13px;
  color: #56514f;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ev-ladder__ab { text-align: right; }

.ev-ladder__c { color: var(--st-directional); font-weight: 600; }

/* ---------- ev-quiet: single-structure deep-dive panel (visually calmer) ---------- */

.ev-quiet {
  border: 1px solid #e3dedd;
  border-radius: 10px;
  background-color: #faf8f6;
  padding: 16px 20px 14px;
  margin: 26px 0;
}

.ev-quiet > figcaption {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #79747e;
  margin: 0 0 12px;
}

.ev-quiet .ev-bars__row { grid-template-columns: minmax(150px, 236px) 1fr 108px; }
.ev-quiet .ev-bars__row .ev-bars__val { grid-column: auto; text-align: right; }
.ev-quiet .ev-bars__label { font-size: 13.5px; color: #303030; }
.ev-quiet .ev-bars__fill--elsewhere { background-color: #b9b2ae; }
.ev-quiet .ev-bars__fill--twin { background-color: #8a8482; }
.ev-quiet .ev-quiet__nest { margin-left: 26px; }

/* ---------- Method note ---------- */

.st-method {
  margin: 32px 0;
  padding: 16px 20px;
  border: 1px solid #e3dedd;
  border-left: 4px solid #79747e;
  border-radius: 0 8px 8px 0;
  background-color: #faf8f6;
}

.st-method ul { margin: 8px 0 0; }
.st-method li { font-size: 14px; }

/* ---------- Appendix (collapsed by default) ---------- */

.st-appendix { margin: 32px 0; }

.st-appendix > summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: #303030;
  padding: 12px 16px;
  border: 1px solid #e3dedd;
  border-radius: 8px;
  background-color: #faf8f6;
  list-style-position: inside;
}

.st-appendix[open] > summary { border-radius: 8px 8px 0 0; }

.st-appendix__body {
  border: 1px solid #e3dedd;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 4px 16px 12px;
}

.st-appendix .gd-table-scroll { margin: 8px 0; }
.st-appendix td, .st-appendix th { font-size: 13.5px; }
.st-appendix__legend { font-size: 13px; color: #56514f; margin: 8px 0 4px; }


/* ---------- Tree excerpt lanes ---------- */

.st-tree-lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.st-tree-lanes .gd-tree-sample {
  margin: 8px 0 0;
  font-size: 13px;
  padding: 12px 14px;
}

.st-tree-lanes mark {
  background-color: #f5f0ff;
  color: #643995;
  font-weight: 700;
  border-radius: 3px;
  padding: 0 2px;
}

/* CTA: guides' gd-cta centers its text but gd-cta-row starts flex at the left;
 * on the study page the lone button should sit under the centered copy. */
.gd-study .gd-cta .gd-cta-row { justify-content: center; }

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  .st-admin-sketch { max-width: 420px; }
  .st-apps { grid-template-columns: 1fr 1fr; }
  .st-flowband__stages { grid-template-columns: 1fr 1fr; }
  .st-decide__row { grid-template-columns: 1fr; gap: 6px; }
  .st-decide__arr { display: none; }
  .st-decide__act { justify-self: start; }

  /* Compact the top stack: lane cards become single rows, tighter gaps */
  .st-lanes-legend { grid-template-columns: 1fr; gap: 6px; margin: 16px 0 10px; }
  .st-lanes-legend__lane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 12px; }
  .st-lanes-legend__n { display: inline; margin-top: 0; }
  .gd-study .gd-glance { padding: 12px 14px; }
  .gd-study .gd-glance__row { padding: 6px 0; gap: 10px; }

  .st-tree-lanes { grid-template-columns: 1fr; }
  .ev-bars__row { grid-template-columns: 92px 1fr; }
  .ev-dist__row { grid-template-columns: 1fr; gap: 3px; }
  .ev-dist__count { text-align: left; }
  .ev-ladder__row { grid-template-columns: 1fr; gap: 6px; }
  .ev-ladder__vals { white-space: normal; grid-template-columns: auto auto; justify-content: start; }
  .ev-ladder__ab { text-align: left; }
  .ev-quiet .ev-bars__row { grid-template-columns: 1fr; gap: 3px; }
  .ev-quiet .ev-bars__row .ev-bars__val { text-align: left; }
}


/* ---------- Relabel-or-restructure decision visual ---------- */

.st-decide {
  margin: 28px 0;
  border: 1px solid #e3dedd;
  border-radius: 12px;
  overflow: hidden;
}

.st-decide__t {
  margin: 0;
  padding: 13px 20px;
  background-color: #faf8f6;
  border-bottom: 1px solid #f2eeec;
  font-size: 14.5px;
  font-weight: 700;
  color: #303030;
}

.st-decide__row {
  display: grid;
  grid-template-columns: 1fr auto 200px;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f2eeec;
  font-size: 13.5px;
}

.st-decide__row:last-child { border-bottom: none; }

.st-decide__sig { color: #56514f; }
.st-decide__arr { color: #b7a8cc; font-weight: 700; }

.st-decide__act {
  display: inline-block;
  text-align: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
}

.st-decide__act--relabel { background-color: #f5f0ff; color: #643995; border: 1.5px solid #643995; }
.st-decide__act--restructure { background-color: #643995; color: white; border: 1.5px solid #643995; }
.st-decide__act--task { background-color: #fff4e5; color: #8a5a00; border: 1.5px solid #e8c48a; }
.st-decide__act--validate { background-color: #f3fce3; color: #2f6d1e; border: 1.5px solid #a9d47f; }

/* ---------- V3: the one wider editorial evidence moment ----------
 * The rich layer's 84px rail gap leaves 820px clear of the outline rail at
 * any desktop width (column 740 + gap 84 puts the rail 824px from the
 * column's left edge). Only V3 takes this scale. */
@media (min-width: 1100px) {
  .gd-study .ev-figure--v3wide { width: 820px; }
}

/* Mobile override for the decision visual: must live after the desktop rules
 * above (appended later in the file), or the 3-column row grid wins. */
@media (max-width: 760px) {
  .gd-study .st-decide__row { grid-template-columns: 1fr; gap: 6px; }
  .gd-study .st-decide__arr { display: none; }
  .gd-study .st-decide__act { justify-self: start; }
}

/* ---------- Hero hybrid: a feature looking for its home (P13) ----------
 * Reuses the st-admin-sketch frame/nav; the sketch body is replaced by a
 * dashed hot-pink feature card (envelope -> arrow -> stars). */

@media (min-width: 1100px) {
  .st-hero--vis { grid-template-columns: minmax(0, 1fr) 368px; }
  .st-hero--vis .st-hero__lead { grid-column: 1 / -1; margin-bottom: 4px; }
  .st-hero--vis .st-admin-sketch__frame { grid-template-columns: 104px 1fr; }
}

/* Below the two-column breakpoint the figure is full-column; cap it so the
 * stage never turns into a large empty field around the feature card. */
.st-hero--vis .st-admin-sketch { max-width: 460px; }

.st-hero--vis .st-admin-sketch__nav span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.st-hero-vis__q {
  color: var(--st-directional);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}

.st-hero-vis__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
}

.st-hero-vis__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 16px 12px;
  border: 2px dashed var(--st-directional);
  border-radius: 12px;
  background-color: white;
}

.st-hero-vis__row { display: flex; align-items: center; gap: 7px; }

.st-hero-vis__row svg { display: block; flex: none; }

.st-hero-vis__label {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--st-directional);
  text-align: center;
  line-height: 1.3;
}

/* ---------- In-body review-request illustration (P13) ----------
 * Replaces the text-only feature pill inside st-homes: the email, the rating
 * it collects, then the three plausible homes. Scoped under --illus so the
 * comparison pages keep the original text diagram. */

.st-homes--illus {
  max-width: 520px;
  padding: 24px 20px 16px;
  border: 1px solid #e3dedd;
  border-radius: 12px;
  background-color: #fdfcfb;
}

.st-homes__illus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}

.st-homes__illus svg { display: block; flex: none; }

.st-homes__ask {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #643995;
}

.st-homes--illus .st-homes__opts { margin-top: 12px; }

/* The ambiguity mark inside each candidate home: reads as part of the
 * question, not label punctuation — spaced off the text, hot pink like the
 * hero's menu question marks. */
.st-homes__q {
  color: var(--st-directional);
  font-weight: 800;
  margin-left: 3px;
}

@media (max-width: 760px) {
  .st-homes__illus { gap: 10px; }
}

/* ---------- Motion (P13): entrance staging, arrow nudge, border cue ----------
 * All motion is opacity/transform/box-shadow only (no layout shift) and lives
 * behind prefers-reduced-motion: no-preference; without it, or without JS
 * (scroll reveal is gated on html.st-js), everything renders static. */

@media (prefers-reduced-motion: no-preference) {
  @keyframes st-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes st-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(3px); } }
  @keyframes st-halo {
    0% { box-shadow: 0 0 0 0 rgba(249, 4, 115, 0.22); }
    75% { box-shadow: 0 0 0 8px rgba(249, 4, 115, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 4, 115, 0); }
  }

  /* Hero: staged entrance on load; the halo pulses three times, then rests */
  .st-hero-vis__feature { animation: st-rise 0.55s ease-out 0.15s both, st-halo 2.1s ease-out 1.2s 3; }
  .st-hero-vis__mail { animation: st-rise 0.5s ease-out 0.35s both; }
  .st-hero-vis__arr { animation: st-fade 0.45s ease-out 0.55s both, st-nudge 2.6s ease-in-out 1.8s infinite; }
  .st-hero-vis__stars { animation: st-rise 0.5s ease-out 0.7s both; }
  .st-hero-vis__label { animation: st-fade 0.5s ease-out 0.9s both; }
  .st-hero-vis__q { animation: st-fade 0.45s ease-out both; }
  .st-hero-vis__q--1 { animation-delay: 1.3s; }
  .st-hero-vis__q--2 { animation-delay: 1.45s; }
  .st-hero-vis__q--3 { animation-delay: 1.6s; }

  /* In-body figure: staged fade-up when scrolled into view */
  html.st-js .st-reveal .st-homes__illus,
  html.st-js .st-reveal .st-homes__ask,
  html.st-js .st-reveal .st-homes__stem,
  html.st-js .st-reveal .st-homes__opts span {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  html.st-js .st-reveal.is-inview .st-homes__illus,
  html.st-js .st-reveal.is-inview .st-homes__ask,
  html.st-js .st-reveal.is-inview .st-homes__stem,
  html.st-js .st-reveal.is-inview .st-homes__opts span {
    opacity: 1;
    transform: none;
  }

  html.st-js .st-reveal.is-inview .st-homes__ask { transition-delay: 0.15s; }
  html.st-js .st-reveal.is-inview .st-homes__stem { transition-delay: 0.25s; }
  html.st-js .st-reveal.is-inview .st-homes__opts span:nth-child(1) { transition-delay: 0.3s; }
  html.st-js .st-reveal.is-inview .st-homes__opts span:nth-child(2) { transition-delay: 0.4s; }
  html.st-js .st-reveal.is-inview .st-homes__opts span:nth-child(3) { transition-delay: 0.5s; }
}