.start-page {
  --start-header-height: 78px;
  --start-column: minmax(0, 1fr);
  background: #050505;
}

.start-main {
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(320px, 38vw) minmax(0, 1fr);
  padding-top: var(--start-header-height);
}

.start-context {
  position: sticky;
  top: var(--start-header-height);
  display: flex;
  height: calc(100svh - var(--start-header-height));
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(62px, 8vh, 108px) clamp(30px, 4.5vw, 74px) clamp(50px, 8vh, 86px) var(--pad);
}

.start-context-copy {
  max-width: 650px;
}

.start-kicker {
  margin: 0 0 22px;
  color: var(--soft);
  font-family: var(--mono);
  font-size: var(--type-utility-size);
  line-height: var(--type-utility-line);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.start-context h1 {
  max-width: 660px;
  margin: 0;
  font-size: var(--type-display-size);
  font-weight: var(--weight-display);
  line-height: var(--type-display-line);
  letter-spacing: var(--tracking-display);
}

.start-workspace {
  display: grid;
  min-height: calc(100svh - var(--start-header-height));
  align-items: start;
  padding: clamp(48px, 5vh, 72px) clamp(30px, 4.2vw, 72px) clamp(48px, 6vh, 72px);
  background: #edede7;
  color: #111;
  scroll-margin-top: 78px;
}

#projectBrief,
.start-confirmation {
  width: min(100%, 850px);
  margin-inline: auto;
}

.start-step {
  animation: step-in .36s cubic-bezier(.22, 1, .36, 1) both;
}

.start-step[hidden],
.start-confirmation[hidden] {
  display: none;
}

.start-step h2,
.start-confirmation h2 {
  max-width: 840px;
  margin: 0;
  font-size: var(--type-section-size);
  font-weight: var(--weight-display);
  line-height: var(--type-section-line);
  letter-spacing: var(--tracking-display);
}

.start-step h2:focus,
.start-confirmation:focus {
  outline: none;
}

.brief-progress {
  --brief-progress-ratio: .1;
  width: clamp(180px, 32vw, 320px);
  margin-block-end: 30px;
  margin-inline-end: auto;
}

.brief-progress__track,
.brief-progress__fill {
  display: block;
  height: 5px;
}

.brief-progress__track {
  overflow: hidden;
  background: #c5c5be;
}

.brief-progress__fill {
  width: 100%;
  background: #111;
  transform: scaleX(var(--brief-progress-ratio));
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}

[dir="rtl"] .brief-progress__fill { transform-origin: right center; }

.step-intro {
  max-width: 660px;
  margin: 16px 0 22px;
  color: #5f5f59;
  font-size: var(--type-body-size);
  font-weight: var(--weight-body);
  line-height: var(--type-body-line);
}

.step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

.action-primary,
.action-secondary {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 0;
  padding: 0 22px;
  cursor: pointer;
  text-decoration: none;
}

.action-primary {
  background: #101010;
  color: #fff;
}

.action-primary:hover,
.action-primary:focus-visible {
  background: #222;
}

.action-secondary {
  gap: 16px;
  padding-inline: 0;
  background: transparent;
  color: #4b4b46;
}

.action-secondary:hover,
.action-secondary:focus-visible,
.text-button:hover,
.text-button:focus-visible {
  color: #000;
}

.action-primary:focus-visible,
.action-secondary:focus-visible,
.text-button:focus-visible,
.voice-button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

.action-primary[disabled] {
  cursor: wait;
  opacity: .56;
}

.start-confirmation .start-kicker {
  color: #55554f;
}

.start-confirmation > p:not(.start-kicker) {
  max-width: 650px;
  margin: 34px 0;
  color: #55554f;
  font-size: var(--type-body-size);
  font-weight: var(--weight-body);
  line-height: var(--type-body-line);
}

.confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  align-items: center;
  margin-top: 48px;
}

@media (min-width: 821px) {
  .start-page {
    height: 100svh;
    overflow: hidden;
  }

  .start-main {
    height: 100svh;
    min-height: 0;
  }

  .start-workspace {
    height: calc(100svh - var(--start-header-height));
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .start-step { animation: none; }
  .brief-progress__fill { transition: none; }
}