.hero,
.delivery,
.responsibility,
.approval,
.feedback,
.outcome,
.timing,
.demo {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-block: var(--mobile-section-space);
  overflow: visible !important;
}

.hero > .rail,
.delivery > .rail,
.responsibility > .rail,
.approval > .rail,
.feedback > .rail,
.outcome > .rail,
.timing > .rail,
.demo > .rail {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.hero {
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  padding-block: var(--mobile-hero-top) var(--mobile-hero-bottom);
  overflow: visible;
}

.hero-grid {
  width: 100%;
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  overflow: visible;
}

.hero-copy {
  min-width: 0;
  padding: 0;
}

.hero-copy h1,
.hero-copy > p:not(.eyebrow),
.hero-copy .button {
  max-width: 100%;
}

.hero-copy .button {
  width: 100%;
}

.hero-cards,
.stage-row,
.responsibility-grid,
.approval-grid,
.feedback-grid,
.outcome-grid,
.timing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.hero-cards {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0;
  transform: none;
  overflow: visible;
}

.hero-cards .finished-card {
  min-height: 0 !important;
  padding: 20px;
}

.hero-cards .finished-card .check-list {
  margin-top: 16px !important;
}

.stage-row {
  padding: 0;
  list-style: none;
}

.journey-card,
.stage-row li,
.responsibility-grid article,
.approval-grid article,
.feedback-grid article,
.outcome-grid article,
.timing-grid article {
  min-height: 0;
  padding: 20px;
  border: 1px solid #cfd7d2;
  border-radius: 8px;
  background: #fff;
}

.journey-card,
.finished-card {
  width: 100%;
  height: auto;
  position: static;
  overflow: visible;
  box-shadow: none;
}

.journey-card > picture,
.journey-arrow,
.large-arrow,
.demo-underlay {
  display: none;
}

.journey-card .approval-mark {
  display: none;
}

.hero .window-dots {
  display: none !important;
}

.journey-card h2 img,
.stage-row img,
.responsibility-grid header img,
.approval-grid article > img,
.feedback-grid article > img,
.outcome-grid article > img,
.timing-grid article > img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.journey-card h2 {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: var(--own-site-small-title-font-size);
  line-height: var(--own-site-small-title-line-height);
  font-weight: var(--own-site-small-title-font-weight);
  letter-spacing: var(--own-site-small-title-letter-spacing);
}

.journey-card.finished-card h2 {
  display: block;
  width: 100%;
  max-width: none;
}

.journey-card h2 img {
  width: 32px;
  height: 32px;
}

.stage-row li {
  display: grid;
  grid-template-columns: 48px 32px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 8px;
  text-align: left;
}

.stage-row li > b {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: static;
  margin: 0;
  align-self: center;
}

.stage-row li h3 {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  font-size: var(--own-site-small-title-font-size);
  text-align: left;
  line-height: var(--own-site-small-title-line-height);
  font-weight: var(--own-site-small-title-font-weight);
  letter-spacing: var(--own-site-small-title-letter-spacing);
}

.stage-row li > img {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.stage-row li > p {
  grid-column: 3;
  grid-row: 2;
  margin: 0;
  text-align: left;
}

.stage-row::before,
.stage-row::after {
  content: none;
}

.responsibility-grid article header,
.timing-grid article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.responsibility-grid,
.approval-grid,
.feedback-grid,
.outcome-grid,
.timing-grid {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 14px !important;
  overflow: visible !important;
}

.responsibility-grid {
  border: 0;
  border-radius: 0;
}

.responsibility-grid article {
  height: auto !important;
  overflow: visible !important;
  border: 1px solid #cfd7d2 !important;
}

.responsibility-grid article:first-child,
.responsibility-grid article:last-child {
  padding: 20px !important;
  border: 1px solid #cfd7d2 !important;
}

.responsibility-grid article header {
  min-height: 54px;
}

.responsibility-grid h3,
.approval-grid h3,
.feedback-grid h3,
.outcome-grid h3,
.timing-grid h3 {
  margin-top: 0;
  font-size: var(--own-site-small-title-font-size);
  line-height: var(--own-site-small-title-line-height);
  font-weight: var(--own-site-small-title-font-weight);
  letter-spacing: var(--own-site-small-title-letter-spacing);
}

.responsibility-grid article header + *,
.approval-grid article > :not(img),
.feedback-grid article > :not(img),
.outcome-grid article > :not(img),
.timing-grid article > :not(img) {
  grid-column: 2;
}

.responsibility-grid article header + * {
  grid-column: 1 / -1;
  margin-top: 18px;
}

.approval-grid article,
.feedback-grid article {
  height: auto !important;
  min-height: 0 !important;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 14px;
  overflow: visible !important;
  border: 1px solid #cfd7d2 !important;
}

.approval-grid article:first-child,
.approval-grid article:last-child,
.feedback-grid article:first-child,
.feedback-grid article:last-child {
  padding: 20px !important;
  border: 1px solid #cfd7d2 !important;
}

.approval-grid article > img,
.feedback-grid article > img {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.approval-grid article > div,
.feedback-grid article > div {
  display: contents;
}

.approval-grid article h3,
.feedback-grid article h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  text-align: left;
}

.approval-grid article p,
.approval-grid article ul,
.feedback-grid article p {
  grid-column: 1 / -1;
  margin-inline: 0;
  text-align: left;
}

.approval-grid article p,
.feedback-grid article p {
  margin-top: 0;
}

.approval-grid article ul {
  margin-top: 0;
}

.feedback-grid article .feedback-output {
  margin-top: -4px;
}

.outcome-grid article {
  height: auto !important;
  min-height: 0 !important;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  overflow: visible !important;
  border: 1px solid #cfd7d2 !important;
  text-align: left;
}

.outcome-grid article:first-child,
.outcome-grid article:last-child {
  padding: 20px !important;
  border: 1px solid #cfd7d2 !important;
}

.outcome-grid article > img {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}

.outcome-grid article > h3,
.outcome-grid article > p {
  grid-column: 2;
  margin: 0;
  text-align: left;
}

.outcome-grid article > h3 {
  grid-row: 1;
  align-self: end;
}

.outcome-grid article > p {
  grid-row: 2;
  align-self: start;
}

.timing-grid article,
.timing-grid article:first-child,
.timing-grid article:last-child {
  width: 100%;
  min-height: 112px;
  padding: 20px;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  transform: none;
  border: 1px solid #cfd7d2 !important;
}

.timing-grid article > img {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.timing-grid article > div {
  min-width: 0;
  grid-column: 2;
}

.timing-grid h3,
.timing-grid p {
  text-align: left;
}

.demo-band {
  min-height: 0;
}

.demo-copy {
  position: static;
  max-width: 42rem;
}

/* Spec348: approved Workflow copy determines block height. */
.workflow-hosting { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; }
.workflow-hosting h3 { font-size: var(--own-site-small-title-font-size); line-height: var(--own-site-small-title-line-height); }
.workflow-hosting p, .workflow-timing-intro { margin-top: 12px; color: var(--muted); line-height: 1.5; }
.workflow-timing-intro { max-width: 1100px; margin-inline: auto; text-align: center; }

/* The Hero cards explain the journey, so their compact visuals remain on mobile. */
.hero-cards .journey-card > picture { display: block; width: 100%; height: auto; max-width: 223px; margin: 16px auto 0; }
.hero-cards .journey-card > picture > img { display: block; width: 100%; height: auto; }
.hero-cards .journey-arrow { display: block; position: relative; justify-self: center; width: 1px; height: 24px; background: #48534c; }
.hero-cards .journey-arrow::after { content: ''; position: absolute; bottom: 0; left: -4px; width: 8px; height: 8px; border-right: 1px solid #48534c; border-bottom: 1px solid #48534c; transform: rotate(45deg); }

.hero-cards .check-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hero-cards .check-list li { position: relative; padding-left: 20px; }
.hero-cards .check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--forest); font-weight: 700; }