/* ZARYA V28.82 final engineering remediation.
   Scoped, minimal corrections for the 19 outstanding observations.
   Loaded after every earlier stylesheet. Selectors below were checked against the live DOM
   (V28.80 shipped several selectors that matched nothing; see the root-cause report). */

/* ------------------------------------------------------------------
   A. One vertical rhythm for chapter pages (obs 04, 05, 07, 15, 17, 18, 19)
   Cause: each chapter panel kept 76-96px of its own bottom padding and some blocks added a
   further bottom margin, so the space above Previous / Next changed from chapter to chapter.
   Rule: the panel ends where its content ends; the action row owns the spacing.
   content -> buttons: 40px   buttons -> footer divider: 40px (32px on phones)
   ------------------------------------------------------------------ */
main #home-opportunity.zj-panel,
main #home-visibility.zj-panel,
main #home-accountability.zj-panel,
main #home-deployment.zj-panel,
main #home-vision.zj-panel,
/* Earnings panels carry a hairline top and bottom, so they keep a measured 40px above that line */
main #discovery.zj-panel,
main #z-oe.zj-panel,
main #weekly-app.zj-panel,
main #eligibility.zj-panel { padding-bottom: 40px !important; }

main #z-oe .oe5-compact-note { margin-bottom: 0 !important; }
main #z-oe .oe5-bottom.oe8-bottom { padding-bottom: 0 !important; }

body.home .zj-canvas .zj-actions {
  margin-block-start: 40px !important;
  padding-block-end: 40px !important;
  min-height: 0 !important;
}
body.earnings-page .zj-canvas .zj-actions {
  margin-block-start: 32px !important;
  padding-block-end: 40px !important;
  min-height: 0 !important;
}
#howItWorksStory .experience-actions {
  margin-top: 24px !important;
  padding-bottom: 40px !important;
}
@media (max-width: 800px) {
  body.home .zj-canvas .zj-actions { margin-block-start: 32px !important; padding-block-end: 32px !important; }
  body.earnings-page .zj-canvas .zj-actions { margin-block-start: 24px !important; padding-block-end: 32px !important; }
  #howItWorksStory .experience-actions { margin-top: 20px !important; padding-bottom: 32px !important; }
}

/* ------------------------------------------------------------------
   B. Chapter progress (obs 14, 16, 17, 18, 19) - same language as the raised tab:
   warm tab fill, soft lift, 3px gold rule on the left. Text only, no pill outline.
   ------------------------------------------------------------------ */
.zj-actions .zj-progress,
#howItWorksStory .experience-actions .progress {
  position: relative;
  display: inline-flex !important;
  align-items: baseline;
  justify-content: flex-start;
  gap: .5em;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 8px);
  min-height: 0 !important;
  margin: 0 auto !important;
  justify-self: center;
  padding: 10px 20px 10px 19px !important;
  border: 0 !important;
  border-radius: 5px 5px 2px 2px !important;
  background: #f9f0e3 !important;
  box-shadow: 0 8px 20px rgba(30, 29, 25, .10), 0 2px 5px rgba(30, 29, 25, .055) !important;
  color: #5a687a !important;
  font-family: "Inter ZARYA", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  letter-spacing: .03em !important;
  text-align: left !important;
  white-space: normal;
}
.zj-actions .zj-progress::before,
#howItWorksStory .experience-actions .progress::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: #a5712b;
}
.zj-progress .zj-pn,
.progress .zj-pn { color: #8f6224; font-weight: 700; font-variant-numeric: tabular-nums; }
.zj-progress .zj-po,
.progress .zj-po { color: #6b798d; }
.zj-progress .zj-pl,
.progress .zj-pl { color: #081321; }
@media (max-width: 800px) {
  .zj-actions .zj-progress { order: -1; flex: 1 0 auto !important; max-width: 100%; justify-content: center; }
  #howItWorksStory .experience-actions .progress { justify-self: center; }
}

/* ------------------------------------------------------------------
   C. Earnings ch01 vehicle image meets the card border on all five vehicles (obs 03)
   Cause: the stage was fixed at 660px while the card row grew to 669px (text column),
   leaving a strip of card background under the photograph. The stage now fills the row.
   ------------------------------------------------------------------ */
@media (min-width: 901px) {
  #discovery.s2-parity .results > .vehicle-stage.s2-stage { height: auto !important; align-self: stretch; position: relative; }
  #discovery.s2-parity .results > .vehicle-stage.s2-stage > .vehicle-art.s2-art { position: absolute; inset: 0; height: auto !important; }
}

/* ------------------------------------------------------------------
   D. Home Accountability icons align to the left edge of their text (obs 17)
   Cause: the icon holder was a full-width flex row with justify-content:center.
   Offsets compensate for the empty space inside each 24px line icon (measured from the SVG boxes).
   ------------------------------------------------------------------ */
#home-accountability .pillars > li > .n.n--icon { justify-content: flex-start !important; text-align: left !important; }
#home-accountability .pillars > li > .n.n--icon svg { margin-left: -2.2px; }
#home-accountability .pillars > li:nth-child(2) > .n.n--icon svg { margin-left: -2.2px; }
#home-accountability .pillars > li:nth-child(3) > .n.n--icon svg { margin-left: -6.2px; }
#home-accountability .pillars > li:nth-child(4) > .n.n--icon svg { margin-left: -1.6px; }
#home-accountability .pillars > li:nth-child(5) > .n.n--icon svg { margin-left: -1.2px; }

/* ------------------------------------------------------------------
   E. Owner App interactive demo - opening screen (obs 01)
   Tokens taken from the live site: eyebrow 13px / 750 / .18em / #855615,
   headline weight 760, tracking -.042em (size unchanged, never enlarged),
   lede 18.72px / #5b6a7e.
   ------------------------------------------------------------------ */
.z15-overlay .z15-kicker {
  font-size: 13px !important; font-weight: 750 !important; letter-spacing: .18em !important; color: #855615 !important;
  line-height: 1.4 !important;
}
.z15-overlay .z15-intro h2 .z17-headline-first,
.z15-overlay .z15-intro h2 .z17-headline-second { letter-spacing: -.042em !important; display: block; }
.z15-overlay .z15-intro > p:not(.z15-kicker):not(.z15-help),
.z15-overlay .z15-intro .z15-lede { font-size: 18.72px !important; line-height: 1.55 !important; color: #5b6a7e !important; }
.z15-overlay .z15-help { font-size: 16px !important; color: #5b6a7e !important; }
@media (max-width: 750px) {
  .z15-overlay .z15-intro h2 .z17-headline-first,
  .z15-overlay .z15-intro h2 .z17-headline-second { font-size: clamp(22px, 7.2vw, 29.64px) !important; line-height: 1.14 !important; white-space: nowrap; }
  /* destination buttons were four empty circles on phones: show the icon, keep the name for assistive technology */
  .z15-overlay .z15-nav button .z20-nav-icon { display: block !important; width: 22px !important; height: 22px !important; min-width: 22px !important; }
  .z15-overlay .z15-nav button .z16-nav-copy { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
}

/* ------------------------------------------------------------------
   F. How It Works active chapter: restore the gold left rule (obs 13, 14)
   Cause: a legacy !important rule (left/right 12px, height 3px, bottom 0) outranked the band rule, so the
   rule collapsed to a 3px dot at the top-left of the selected tab. Same geometry as every other journey band.
   ------------------------------------------------------------------ */
html body .integrated-journey .journey button.active::after {
  left: 0 !important; right: auto !important; top: 12px !important; bottom: 12px !important;
  width: 3px !important; height: auto !important;
  background: #a5712b !important; border-radius: 0 3px 3px 0 !important;
  transform: scaleY(1) !important; opacity: 1 !important;
}
