/* Additive styles, copied with the design tokens into this draft's own assets. */
.comparative-page,
.comparison-page { background: var(--color-page); }

.visually-hidden,
.timeline__points dt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.preview-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  padding: 0.55rem var(--page-gutter);
  color: var(--graphite-950);
  background: var(--sage-200);
  font-size: 0.875rem;
  line-height: 1.5;
}
.preview-strip a { font-weight: 600; }
.comparative-page .site-nav { grid-column: 5 / 13; }
.comparative-page .hero { min-height: 0; }
.comparative-page .hero__intro { grid-column: 2 / 8; }
.comparative-page .hero__note { grid-column: 1 / 7; font-size: 0.75rem; }
.hero-actions { display: flex; flex-direction: column; align-items: start; gap: 0.7rem; }
.hero-actions__secondary { font-size: var(--step--1); color: var(--color-muted); }

.dna { color: var(--ivory-50); background: var(--graphite-950); }
.dna__inner { padding-block: var(--space-6); }
.dna__heading { grid-column: 1 / 6; }
.dna__heading h2 { margin-top: var(--space-3); }
.dna__intro { grid-column: 7 / 13; align-self: end; color: var(--sage-200); }
.foundations {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-4);
  margin-top: var(--space-5);
}
.foundation {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(248, 245, 237, 0.35);
}
.foundation__index { color: var(--sage-200); font-family: var(--font-mono); font-size: 0.875rem; }
.foundation h3 { max-width: 24ch; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.foundation p { margin-top: var(--space-2); color: var(--sage-200); }
.conviction { padding-block: var(--space-5); }
.conviction p {
  grid-column: 3 / 11;
  max-width: none;
  padding-block: var(--space-3);
  border-block: 1px solid var(--color-line);
  color: var(--sage-700);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.services { padding-block: var(--space-4) var(--space-6); }
.services__heading { grid-column: 1 / 7; }
.services__heading h2 { margin-top: var(--space-3); }
.services__intro { grid-column: 8 / 13; align-self: end; color: var(--color-muted); }
.existing-shortcut { margin-top: var(--space-2); font-size: 0.875rem; letter-spacing: 0.025em; text-transform: none; }

.timeline { grid-column: 1 / 13; margin-top: var(--space-5); }
.timeline__caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-3); }
.timeline__caption h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.timeline__caption p { max-width: 29rem; color: var(--color-muted); font-size: var(--step--1); }
.timeline__axes { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-2); border-top: 1px solid var(--color-line); }
.timeline__axes p { max-width: none; color: var(--sage-700); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; }
.timeline__cycle { display: flex; justify-content: space-between; gap: 1rem; }
.timeline__graphic { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-2); }
.timeline__row-labels { padding-top: 5.25rem; }
.timeline__row-labels span { display: flex; align-items: center; min-height: 6.5rem; padding-right: 1rem; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.timeline__stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.timeline__stage { min-width: 0; }
.timeline__stage h4 { display: flex; align-items: start; min-height: 5.25rem; margin: 0; padding: 0 0.8rem 1rem; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.timeline__points { margin: 0; padding: 0; }
.timeline__point { position: relative; display: flex; align-items: center; min-height: 6.5rem; padding: 1.3rem 0.8rem 1rem; }
.timeline__point::before { content: ""; position: absolute; inset: 0.75rem 0 auto; height: 1px; background: var(--sage-500); }
.timeline__point::after { content: ""; position: absolute; top: 0.5rem; left: 0.8rem; width: 0.55rem; height: 0.55rem; background: var(--sage-700); }
.timeline__point:nth-child(2) { background: var(--ivory-100); }
.timeline__point:nth-child(2)::after { background: var(--graphite-950); }
.timeline__point:nth-child(3)::after { background: var(--ochre-600); }
.timeline__points dd { margin: 0; max-width: 16ch; font-size: 0.9rem; line-height: 1.5; }
.timeline__note { max-width: 48rem; margin-top: var(--space-3); margin-left: calc(12rem + var(--space-2)); color: var(--color-muted); font-size: var(--step--1); }

.missions { grid-column: 1 / 13; margin-top: var(--space-5); }
.missions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.mission { padding-block: var(--space-4); border-top: 1px solid var(--color-ink); }
.mission__number { display: block; margin-bottom: var(--space-3); color: var(--color-accent); font-family: var(--font-mono); font-size: 0.875rem; }
.mission h4 { max-width: 24ch; margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.1; letter-spacing: -0.018em; text-wrap: balance; }
.mission__lead { margin-top: var(--space-2); color: var(--sage-700); font-weight: 600; }
.mission__body { margin-top: var(--space-2); color: var(--color-muted); }
.missions__posture { max-width: 55rem; margin-top: var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--sage-500); }

.existing { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--space-5); padding: var(--space-4); background: var(--sage-200); }
.existing__heading { grid-column: 1 / 6; }
.existing h3 { margin-top: var(--space-3); font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.15; }
.existing__copy { grid-column: 7 / 13; }
.existing__scope { margin-top: var(--space-2); font-weight: 600; }
.existing .text-link { margin-top: var(--space-3); color: var(--graphite-950); font-size: 0.875rem; letter-spacing: 0.025em; text-transform: none; }

.formats { grid-column: 1 / 13; margin-top: var(--space-5); }
.formats > h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.formats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.format { padding-top: var(--space-2); border-top: 1px solid var(--color-line); }
.format__duration { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.format h4 { margin: var(--space-2) 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; line-height: 1.2; }
.format > p:last-child { color: var(--color-muted); }
.formats__note { margin-top: var(--space-4); max-width: 55rem; color: var(--color-muted); font-size: var(--step--1); }
.comparative-page .site-footer > .text-link { color: var(--ivory-50); }

.comparison { padding-block: var(--space-5); }
.comparison__intro { grid-column: 1 / 10; }
.comparison h1 { margin-top: var(--space-3); font-size: clamp(3rem, 5vw, 5.5rem); max-width: 18ch; }
.comparison__intro .lead { max-width: 45rem; margin-top: var(--space-3); }
.comparison__options { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.comparison-option { display: flex; flex-direction: column; padding: var(--space-4); border: 1px solid var(--color-line); }
.comparison-option:last-child { background: var(--sage-200); }
.comparison-option__label { color: var(--sage-700); font-family: var(--font-mono); font-size: 0.875rem; }
.comparison-option h2 { margin-block: var(--space-3) var(--space-2); font-size: var(--step-2); }
.comparison-option .text-link { margin-top: auto; padding-top: var(--space-4); color: var(--graphite-950); }
.comparison__note { grid-column: 1 / 13; margin-top: var(--space-3); color: var(--color-muted); font-size: var(--step--1); }

@media (max-width: 64rem) {
  .comparative-page .site-header { padding-block: var(--space-2); row-gap: var(--space-2); }
  .comparative-page .site-header .brand { grid-column: 1 / 13; }
  .comparative-page .site-nav { grid-column: 1 / 13; justify-content: flex-start; flex-wrap: wrap; gap: 0.8rem 1.5rem; }
  .timeline__axes { display: flex; justify-content: space-between; }
  .timeline__scope { display: none; }
  .timeline__cycle { flex: 1; }
  .timeline__cycle span { transform: rotate(90deg); }
  .timeline__graphic { display: block; }
  .timeline__row-labels { display: none; }
  .timeline__stages { display: block; border-left: 1px solid var(--sage-500); margin-left: 0.3rem; }
  .timeline__stage { position: relative; padding-left: var(--space-3); padding-bottom: var(--space-4); }
  .timeline__stage:last-child { padding-bottom: 0; }
  .timeline__stage::before { content: ""; position: absolute; top: 0.3rem; left: -0.3rem; width: 0.55rem; height: 0.55rem; background: var(--ochre-600); }
  .timeline__stage h4 { min-height: 0; padding: 0; margin-bottom: var(--space-2); font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }
  .timeline__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .timeline__point { display: block; min-height: 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--color-line); }
  .timeline__point:nth-child(2) { background: none; }
  .timeline__point::before, .timeline__point::after { display: none; }
  .timeline__points dt { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; white-space: normal; color: var(--sage-700); font-size: 0.875rem; line-height: 1.4; }
  .timeline__points dd { max-width: none; margin-top: 0.5rem; font-size: 1rem; }
  .timeline__note { margin-left: 0; }
  .foundations, .missions__grid { column-gap: var(--space-4); }
}

@media (max-width: 48rem) {
  .preview-strip { padding-block: 0.65rem; }
  .comparative-page .hero__copy { display: block; }
  .comparative-page .hero__intro { grid-column: 1 / 13; }
  .comparative-page .hero__note { grid-column: 1 / 13; }
  .dna__heading, .dna__intro, .services__heading, .services__intro { grid-column: 1 / 13; }
  .dna__intro, .services__intro { margin-top: var(--space-3); }
  .foundations, .missions__grid, .formats__grid { grid-template-columns: 1fr; }
  .foundation { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .foundation h3 { max-width: none; }
  .conviction p { grid-column: 1 / 13; }
  .timeline__caption { display: block; }
  .timeline__caption p { margin-top: 0.75rem; }
  .existing { padding: var(--space-3); }
  .existing__heading, .existing__copy { grid-column: 1 / 13; }
  .existing__copy { margin-top: var(--space-2); }
  .comparison__intro { grid-column: 1 / 13; }
  .comparison__options { grid-template-columns: 1fr; }
  .comparison-page .site-header .brand { grid-column: 1 / 13; }
}

@media (max-width: 36rem) {
  .timeline__points { display: block; }
  .timeline__point { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0.8rem; padding-block: 0.75rem; }
  .timeline__points dd { margin-top: 0; }
  .comparative-page .site-nav { column-gap: 1.1rem; }
  .comparative-page .site-nav a { letter-spacing: 0; }
}

@media print {
  .preview-strip, .site-nav, .skip-link { display: none; }
  .foundation, .mission, .format, .timeline__stage { break-inside: avoid; }
}