.design-page {
  overflow: hidden;
}

.design-page .section {
  position: relative;
}

.design-page .section::before {
  position: absolute;
  z-index: 0;
  width: min(73.75rem, calc(100% - 4rem));
  height: 1px;
  top: 0;
  left: 50%;
  background-image: repeating-linear-gradient(90deg, var(--color-line) 0 4px, transparent 4px 9px);
  content: "";
  opacity: 0.65;
  transform: translateX(-50%);
}

.design-page .container {
  position: relative;
  z-index: 1;
}

.design-page .sheet,
.design-page .panel {
  min-width: 0;
}

.design-page .sheet > :last-child,
.design-page .panel > :last-child {
  margin-block-end: 0;
}

.design-hero {
  padding-block: var(--space-10) var(--space-9);
}

.design-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(23.75rem, 44fr);
  grid-template-areas: "sheet image" "annotation image";
  gap: var(--space-6);
  align-items: start;
}

.design-hero__sheet {
  grid-area: sheet;
  width: 100%;
  padding: var(--space-7);
}

.design-hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.design-hero__intro .eyebrow,
.design-hero__intro h1,
.design-hero__intro p {
  margin: 0;
}

.design-hero__intro h1 {
  max-width: 40rem;
}

.design-hero__intro .lead {
  max-width: 42rem;
}

.design-hero__independence {
  max-width: 42rem;
  color: var(--color-muted-ink);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.design-hero__image {
  grid-area: image;
  width: 100%;
  padding: var(--space-2);
}

.design-hero__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.design-hero__image figcaption {
  padding-inline: var(--space-2);
}

.design-hero__annotation {
  grid-area: annotation;
  width: min(100%, 20rem);
  padding: var(--space-5);
  border-radius: var(--radius-sheet);
}

.design-hero__annotation .micro-label,
.design-hero__annotation ol {
  margin: 0;
}

.design-hero__annotation ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-default);
}

.design-restoration__header {
  width: min(100%, 46rem);
}

.design-restoration__header .eyebrow {
  margin-block-end: var(--space-3);
}

.design-restoration__notes {
  display: grid;
  grid-template-columns: minmax(0, 31fr) minmax(0, 38fr) minmax(0, 31fr);
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-6);
}

.design-restoration__note {
  width: 100%;
  min-width: 0;
  padding: var(--space-5);
}

.design-restoration__note--shop {
  margin-top: var(--space-3);
}

.design-restoration__note--damage {
  margin-top: var(--space-5);
}

.design-restoration__note h3,
.design-restoration__note p {
  margin-block: 0;
}

.design-restoration__note h3 {
  margin-top: var(--space-3);
}

.design-restoration__note p {
  margin-top: var(--space-4);
}

.design-restoration__states {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-default);
  color: var(--color-muted-ink);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-micro);
  text-transform: uppercase;
}

.design-restoration__states span:last-child {
  color: var(--color-ink);
}

.design-restoration__source {
  width: min(100%, 46rem);
  margin-top: var(--space-6);
  margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: 1px dotted var(--color-line);
  color: var(--color-muted-ink);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.design-comparison__layout {
  display: grid;
  grid-template-columns: minmax(0, 68fr) minmax(18rem, 32fr);
  gap: var(--space-6);
  align-items: end;
}

.design-comparison__prints {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  align-items: stretch;
}

.design-comparison__print {
  width: 100%;
  min-width: 0;
  padding: var(--space-2);
}

.design-comparison__print img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.design-comparison__tab {
  display: inline-block;
  margin: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-ink);
  color: var(--color-paper-bright);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design-comparison__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2) var(--space-2);
}

.design-comparison__copy h3,
.design-comparison__copy p {
  margin: 0;
}

.design-comparison__join {
  width: 8px;
  min-width: 8px;
  min-height: 100%;
  background: var(--color-terracotta);
}

.design-comparison__check {
  width: 100%;
  min-width: 0;
  border-left: 4px solid var(--color-sage);
}

.design-comparison__check h3 {
  margin-block-end: var(--space-4);
}

.design-comparison__check ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.design-comparison__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.design-comparison__button {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-ink);
  border-radius: var(--radius-small);
  background: var(--color-paper-bright);
  font-weight: 700;
  line-height: 1.3;
}

.design-comparison__button[aria-pressed="true"] {
  border-color: var(--color-terracotta);
  background: var(--color-paper);
}

.design-comparison__print.is-active {
  outline: 3px solid var(--color-terracotta);
  outline-offset: 3px;
}

.design-merge__layout {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  grid-template-areas: "reading canvas" "notes canvas";
  gap: var(--space-6);
  align-items: start;
}

.design-merge__reading {
  grid-area: reading;
  width: 100%;
  padding: var(--space-6);
}

.design-merge__reading .eyebrow,
.design-merge__reading h2,
.design-merge__reading p {
  margin: 0;
}

.design-merge__reading h2 {
  margin-top: var(--space-3);
}

.design-merge__reading .lead {
  max-width: 42rem;
  margin-top: var(--space-4);
}

.design-merge__canvas {
  grid-area: canvas;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
  padding: var(--space-6);
  border: var(--border-default);
  background-color: var(--color-paper-bright);
  background-image: linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: var(--radius-small);
}

.design-merge__canvas > * {
  min-width: 0;
}

.design-merge__canvas .micro-label {
  align-self: flex-start;
}

.design-merge__sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.design-merge__tile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 7rem;
  padding: var(--space-4);
  border: var(--border-ink);
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.35;
  transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.design-merge__tile--pink {
  background: var(--color-dusty-pink);
}

.design-merge__tile--lavender {
  background: var(--color-lavender);
}

.design-merge__tile--result {
  width: 48%;
  min-height: 8rem;
  background: var(--color-sage);
}

.design-merge__connector {
  width: 1px;
  height: 2rem;
  background: var(--color-ink);
}

.design-merge__caption {
  width: 100%;
  margin: 0;
  color: var(--color-muted-ink);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.design-merge__canvas:hover .design-merge__tile--pink,
.design-merge__canvas:focus .design-merge__tile--pink {
  transform: translate(3px, 3px);
}

.design-merge__canvas:hover .design-merge__tile--lavender,
.design-merge__canvas:focus .design-merge__tile--lavender {
  transform: translate(-3px, 3px);
}

.design-merge__canvas:hover .design-merge__tile--result,
.design-merge__canvas:focus .design-merge__tile--result {
  background: var(--color-success-tint);
  box-shadow: var(--shadow-sheet);
}

.design-merge__notes {
  grid-area: notes;
  width: min(100%, 42rem);
}

.design-merge__notes blockquote {
  margin-block-end: var(--space-4);
}

.design-merge__notes p {
  margin-block-end: var(--space-4);
}

.design-merge__source {
  color: var(--color-muted-ink);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.design-moodboard__layout {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  grid-template-areas: "reading board" "caution caution";
  gap: var(--space-6);
  align-items: start;
}

.design-moodboard__reading {
  grid-area: reading;
  width: 100%;
  padding: var(--space-6);
}

.design-moodboard__reading .eyebrow,
.design-moodboard__reading h2,
.design-moodboard__reading p {
  margin: 0;
}

.design-moodboard__reading h2 {
  margin-top: var(--space-3);
}

.design-moodboard__reading .lead {
  max-width: 44rem;
  margin-top: var(--space-4);
}

.design-moodboard__board {
  grid-area: board;
  display: grid;
  grid-template-columns: minmax(0, 31fr) minmax(0, 38fr) minmax(0, 31fr);
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  min-width: 0;
}

.design-moodboard__swatch {
  width: 100%;
  min-width: 0;
  padding: var(--space-4);
}

.design-moodboard__swatch--soft {
  margin-top: var(--space-4);
  background: var(--color-success-tint);
}

.design-moodboard__swatch--crisp {
  background: var(--color-paper-bright);
}

.design-moodboard__swatch--warm {
  margin-top: var(--space-6);
  background: var(--color-dusty-pink);
}

.design-moodboard__swatch h3,
.design-moodboard__swatch p {
  margin: 0;
}

.design-moodboard__swatch h3 {
  margin-top: var(--space-3);
}

.design-moodboard__swatch p {
  margin-top: var(--space-3);
}

.design-moodboard__swatch h3::after {
  display: block;
  width: 0;
  height: 1px;
  margin-top: var(--space-2);
  background: var(--color-ink);
  content: "";
  transition: width var(--transition-fast);
}

.design-moodboard__swatch:hover h3::after,
.design-moodboard__swatch:focus h3::after {
  width: 3rem;
}

.design-moodboard__caution {
  grid-area: caution;
  width: min(100%, 42rem);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-line);
  color: var(--color-muted-ink);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.design-unlocks__header {
  width: min(100%, 46rem);
}

.design-unlocks__context {
  width: 100%;
  margin-top: var(--space-6);
  border-left: 4px solid var(--color-sage);
}

.design-unlocks__context p {
  width: min(100%, 42rem);
  margin: 0;
}

.design-unlocks__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-6);
}

.design-unlocks__note {
  width: 100%;
  min-width: 0;
  padding: var(--space-5);
}

.design-unlocks__note:nth-child(2) {
  margin-top: var(--space-3);
}

.design-unlocks__note:nth-child(3) {
  margin-top: var(--space-5);
}

.design-unlocks__number,
.design-checklist__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: var(--space-1) var(--space-2);
  border: var(--border-default);
  background: var(--color-paper);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.design-unlocks__note h3,
.design-unlocks__note p {
  margin: 0;
}

.design-unlocks__note h3 {
  margin-top: var(--space-4);
}

.design-unlocks__note p {
  margin-top: var(--space-3);
}

.design-checklist__header {
  width: min(100%, 40rem);
}

.design-checklist__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-6);
}

.design-checklist__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  min-width: 0;
}

.design-checklist__item {
  width: 100%;
  min-width: 0;
}

.design-checklist__item h3,
.design-checklist__item p {
  margin: 0;
}

.design-checklist__item h3 {
  margin-top: var(--space-3);
}

.design-checklist__item p {
  margin-top: var(--space-3);
}

.design-checklist__why {
  color: var(--color-muted-ink);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.design-checklist__number--pink {
  background: var(--color-dusty-pink);
}

.design-checklist__number--lavender {
  background: var(--color-lavender);
}

.design-checklist__number--terracotta {
  background: var(--color-terracotta);
  color: var(--color-paper-bright);
}

.design-checklist__item--closing {
  border-left: 4px solid var(--color-terracotta);
}

.design-verdict__statement {
  width: 100%;
  border-left: 4px solid var(--color-terracotta);
}

.design-verdict__statement .eyebrow,
.design-verdict__statement h2,
.design-verdict__statement p {
  margin: 0;
}

.design-verdict__statement h2 {
  max-width: 38rem;
  margin-top: var(--space-3);
}

.design-verdict__statement p {
  max-width: 38rem;
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-style: italic;
  line-height: 1.35;
}

.design-verdict__evidence {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-6);
}

.design-verdict__sheet {
  width: 100%;
  min-width: 0;
  padding: var(--space-5);
}

.design-verdict__sheet h3,
.design-verdict__sheet ul {
  margin: 0;
}

.design-verdict__sheet h3 {
  margin-top: var(--space-3);
}

.design-verdict__sheet ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.design-source__sheet {
  width: min(100%, 45rem);
  margin-inline: auto;
  padding: var(--space-6);
  border-top: 2px solid var(--color-line);
}

.design-source__sheet .eyebrow,
.design-source__sheet h2,
.design-source__sheet p {
  margin: 0;
}

.design-source__sheet h2 {
  margin-top: var(--space-3);
}

.design-source__sheet p {
  max-width: 42rem;
  margin-top: var(--space-4);
}

.design-source__independence {
  position: relative;
  padding-left: var(--space-4);
  color: var(--color-muted-ink);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.design-source__independence::before {
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-terracotta);
  content: "";
}

.design-cta {
  padding-block-start: var(--space-9);
}

.design-cta__sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: min(100%, 40rem);
  margin-inline: auto;
  padding: var(--space-7);
  text-align: center;
}

.design-cta__sheet .eyebrow,
.design-cta__sheet h2,
.design-cta__sheet p,
.design-cta__sheet small {
  margin: 0;
}

.design-cta__sheet h2 {
  max-width: 34rem;
}

.design-cta__sheet p {
  max-width: 34rem;
}

.design-cta__sheet small {
  color: var(--color-muted-ink);
}

@media (max-width: 980px) {
  .design-comparison__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-comparison__check {
    width: min(100%, 42rem);
  }
}

@media (max-width: 900px) {
  .design-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sheet" "image" "annotation";
  }

  .design-hero__annotation {
    width: 100%;
  }

  .design-restoration__notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-restoration__note--house {
    order: -1;
  }

  .design-restoration__note--shop,
  .design-restoration__note--damage {
    margin-top: 0;
  }

  .design-restoration__note--damage {
    grid-column: 1 / -1;
  }

  .design-merge__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "reading" "canvas" "notes";
  }

  .design-merge__notes {
    width: min(100%, 42rem);
  }

  .design-moodboard__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "reading" "board" "caution";
  }

  .design-moodboard__board {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .design-moodboard__swatch--soft,
  .design-moodboard__swatch--warm {
    margin-top: 0;
  }

  .design-checklist__columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .design-verdict__evidence {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .design-unlocks__notes {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .design-unlocks__note:nth-child(2),
  .design-unlocks__note:nth-child(3) {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .design-page .section::before {
    width: calc(100% - 2rem);
  }

  .design-hero {
    padding-block: var(--space-7);
  }

  .design-hero__sheet,
  .design-merge__reading,
  .design-moodboard__reading,
  .design-source__sheet,
  .design-cta__sheet {
    padding: var(--space-5);
  }

  .design-hero__intro h1 {
    max-width: none;
  }

  .design-restoration__notes {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .design-restoration__note--damage {
    grid-column: auto;
  }

  .design-comparison__prints {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .design-comparison__join {
    width: 100%;
    min-width: 0;
    min-height: 6px;
    height: 6px;
  }

  .design-comparison__controls {
    flex-direction: column;
  }

  .design-comparison__button {
    width: 100%;
  }

  .design-merge__canvas {
    align-items: stretch;
    padding: var(--space-5);
  }

  .design-merge__sources {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-merge__tile--result {
    width: 100%;
  }

  .design-merge__connector {
    align-self: center;
  }

  .design-merge__canvas:hover .design-merge__tile--pink,
  .design-merge__canvas:focus .design-merge__tile--pink,
  .design-merge__canvas:hover .design-merge__tile--lavender,
  .design-merge__canvas:focus .design-merge__tile--lavender {
    transform: none;
  }

  .design-unlocks__context {
    padding: var(--space-4);
  }

  .design-checklist__columns,
  .design-checklist__column {
    gap: var(--space-4);
  }

  .design-cta__sheet {
    align-items: flex-start;
    text-align: left;
  }

  .design-cta__sheet .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .design-page .interactive-sheet,
  .design-page .design-merge__tile,
  .design-page .design-moodboard__swatch h3::after {
    transition: none;
  }

  .design-page .design-merge__canvas:hover .design-merge__tile--pink,
  .design-page .design-merge__canvas:focus .design-merge__tile--pink,
  .design-page .design-merge__canvas:hover .design-merge__tile--lavender,
  .design-page .design-merge__canvas:focus .design-merge__tile--lavender {
    transform: none;
  }
}