/* Homepage Get started fork, shared with pages that open the same chooser. */

.start-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--ec-radius-xl);
  background: var(--ec-neutral-0);
  box-shadow: var(--ec-ring-default);
  color: var(--ec-text-primary);
  overflow: hidden;
}
.start-modal[open] { display: flex; flex-direction: column; }
.start-modal::backdrop { background: var(--ec-surface-scrim); }
.start-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ec-space-6);
  padding: 32px 32px 0;
  flex-shrink: 0;
}
.start-modal-eyebrow {
  font-family: var(--ec-font-mono);
  font-size: var(--ec-label-sm-size);
  letter-spacing: var(--ec-label-sm-ls);
  text-transform: uppercase;
  color: var(--ec-text-tertiary);
  margin-bottom: var(--ec-space-3);
}
.start-modal-head h2 {
  margin: 0;
  font-family: var(--ec-font-display);
  font-weight: 500; font-size: var(--ec-h3-size); line-height: var(--ec-h3-lh); letter-spacing: var(--ec-h3-ls);
}
.start-modal-close {
  appearance: none; border: 0; cursor: pointer;
  width: 34px; height: 34px;
  border-radius: var(--ec-radius-xs);
  background: var(--ec-action-secondary);
  color: var(--ec-text-primary);
  font-size: 18px; line-height: 1;
}
.start-modal-close:hover { background: var(--ec-action-secondary-hover); }
.start-modal-body { padding: 24px 32px 32px; display: flex; flex-direction: column; gap: var(--ec-space-6); overflow-y: auto; min-height: 0; }
.start-modal-intro {
  margin: 0;
  font-family: var(--ec-font-body);
  font-weight: 300; font-size: var(--ec-body-size); line-height: var(--ec-body-lh);
  color: var(--ec-text-secondary);
}
.start-options { display: flex; gap: var(--ec-space-4); flex-wrap: wrap; }
.start-option {
  flex: 1; min-width: 260px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px;
  border-radius: var(--ec-radius-md);
  background: var(--ec-surface-muted);
  text-decoration: none;
  color: var(--ec-text-primary);
  transition: var(--ec-transition-color);
}
.start-option:hover { background: var(--ec-action-secondary-hover); color: var(--ec-text-primary); }
.start-option-label {
  font-family: var(--ec-font-mono);
  font-size: var(--ec-label-sm-size);
  letter-spacing: var(--ec-label-sm-ls);
  text-transform: uppercase;
  color: var(--ec-orange-500);
}
.start-option h3 {
  margin: 0;
  font-family: var(--ec-font-display);
  font-weight: 500; font-size: var(--ec-h5-size); line-height: var(--ec-h5-lh); letter-spacing: var(--ec-h5-ls);
}
.start-option p {
  margin: 0; flex: 1;
  font-family: var(--ec-font-body);
  font-weight: 300; font-size: var(--ec-body-sm-size); line-height: var(--ec-body-sm-lh);
  color: var(--ec-text-secondary);
}
.start-option-cta {
  font-family: var(--ec-font-mono);
  font-size: var(--ec-label-sm-size);
  letter-spacing: var(--ec-label-sm-ls);
  text-transform: uppercase;
  color: var(--ec-text-primary);
}

@media (max-width: 640px) {
  .start-modal-head { padding: 24px 20px 0; }
  .start-modal-body { padding: 20px; }
  .start-options { flex-direction: column; }
}