/* ZWorld additions on top of the textmode template stylesheet.
   Only new selectors and token overrides live here. */

:root {
  /* signal accent: terminal amber instead of the template's crimson */
  --tm-color-crimson: #c98a1a;
  --tm-color-crimson-readable: #f0b545;
}

/* header launch link uses an arrow instead of the store icon */
.header-install span { font-size: 1rem; }

/* section reveal (template did this inline from JS) */
.snap-section > .snap-section__motion {
  opacity: 0.96;
  transform: translateY(12px);
  transition: opacity 0.5s var(--tm-ease-out), transform 0.5s var(--tm-ease-out);
}
.snap-section.is-active > .snap-section__motion,
.hero > .snap-section__motion {
  opacity: 1;
  transform: none;
}

/* indexed tab panels: hidden state (template set these inline) */
.indexed-tabs__panel {
  transition: opacity 0.18s var(--tm-ease-out), transform 0.18s var(--tm-ease-out), visibility 0.18s;
}
.indexed-tabs__panel[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
}

/* mechanic: ASCII pipe diagram inside the demo stage */
.pipe-stage {
  display: grid;
  place-items: center;
  aspect-ratio: auto;
  min-height: 20rem;
}
.pipe {
  margin: 0;
  padding: 3.5rem 1rem 1rem;
  max-width: 100%;
  overflow-x: auto;
  color: var(--tm-paper);
  font-family: var(--tm-font-copy);
  font-size: clamp(0.72rem, 1.05vw, 1.15rem);
  line-height: 1.25;
  white-space: pre;
}
.pipe [data-asset] { color: var(--tm-signal-text); }
a.demo-control-button { text-decoration: none; }
.demo-control-button--transport strong { font-size: 1.5rem; }
.demo-shell .demo-note { max-width: 48rem; margin-left: auto; }

/* four steps instead of three */
.workflow-grid--four { grid-template-columns: repeat(4, 1fr); }
.workflow-grid--four .workflow-card { min-height: 22rem; }
.workflow-grid--four .workflow-card h3 { font-size: 4rem; }

/* assets list: name column can be a phrase */
.browser-name { text-transform: uppercase; }

/* small print number */
.privacy-number { color: var(--tm-signal); }

/* legal placeholders */
.legal-page {
  min-height: var(--tm-section-height);
  border-bottom: 1px solid var(--tm-rule);
  padding: var(--section-pad) var(--page-pad);
  display: grid;
  gap: 2rem;
  align-content: start;
}
.legal-page h1 {
  letter-spacing: -0.035em;
  text-transform: uppercase;
  font-size: 6rem;
  font-weight: 400;
  line-height: 0.75;
  max-width: 14ch;
}
.legal-page .legal-body {
  max-width: 48rem;
  display: grid;
  gap: 1.25rem;
}
.legal-page .legal-body p,
.legal-page .legal-body li {
  color: var(--tm-paper-muted);
  font-size: var(--tm-type-copy-large);
  line-height: 1.18;
}
.legal-page .legal-body ul { margin: 0; padding-left: 1.25rem; }
.legal-page .legal-body h2 {
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 0.8;
  margin-top: 1rem;
}
.legal-page .legal-status {
  border: 1px solid var(--tm-signal);
  color: var(--tm-signal-text);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  width: max-content;
  max-width: 100%;
}
.legal-shell .site-footer { min-height: auto; }

@media (max-width: 1100px) {
  .workflow-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .workflow-grid--four { grid-template-columns: 1fr; }
  .workflow-grid--four .workflow-card { min-height: 16rem; }
  .pipe-stage { min-height: 18rem; }
  .pipe { font-size: 0.55rem; padding-top: 3.25rem; }
  .demo-shell .demo-note { margin-left: 0; }
  .legal-page h1 { font-size: 3.5rem; }
}

/* FAQ has seven questions (template grid assumed six) */
.indexed-tabs--faq .indexed-tabs__list { grid-template-rows: repeat(7, minmax(0, 1fr)); }
.indexed-tabs--faq .indexed-tabs__list button { min-height: 3.75rem; }
@media (max-width: 760px) {
  .indexed-tabs--faq .indexed-tabs__list { grid-template-rows: repeat(4, minmax(0, 1fr)); }
}

/* steps grid: four cards need their own rows (template pins three) */
@media (max-width: 1100px) {
  .workflow.snap-section { block-size: auto; overflow: visible; }
  .workflow > .snap-section__motion { grid-template-rows: auto auto; block-size: auto; }
  .workflow-grid--four { grid-template-rows: none; grid-auto-rows: auto; }
}
@media (min-width: 761px) {
  .pipe { font-size: clamp(0.8rem, 1.45vw, 1.6rem); }
}

/* mechanic diagram: wide on desktop, vertical on phones */
.pipe--narrow { display: none; }
@media (max-width: 760px) {
  .pipe--wide { display: none; }
  .pipe--narrow { display: block; font-size: 1.15rem; line-height: 1.1; padding: 4rem .5rem 1rem; }
}
@media (max-width: 760px) {
  .demo-shell > .snap-section__motion { grid-template-rows: auto auto auto; }
  .pipe-stage { min-height: 0; height: auto; overflow: visible; }
  .pipe-stage .demo-side-label { display: none; }
  .pipe--narrow { padding: 1rem .5rem; }
}
@media (max-width: 760px) {
  .demo-shell.snap-section { block-size: auto; overflow: visible; }
  .demo-shell > .snap-section__motion { block-size: auto; }
}