.studio-page .studio-hero,
.studio-page .studio-final {
  background: var(--dark);
  color: var(--paper);
}

.studio-hero { padding: clamp(52px, 7vw, 100px) 0; }
.studio-hero-grid,
.studio-section-heading,
.studio-ideas-grid,
.studio-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 5vw, 72px);
}
.studio-hero-grid { align-items: center; }
.studio-kicker { color: var(--mint); }
.studio-kicker span { padding-inline: .45em; }
.studio-hero h1 { font-size: clamp(49px, 5.9vw, 86px); }
.studio-hero h1 span { color: var(--mint); }
.studio-hero .studio-lede {
  max-width: 41ch;
  color: #e0d3e2;
  font-size: clamp(18px, 2vw, 22px);
}
.studio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.studio-page .studio-primary { background: var(--mint); color: var(--ink); }
.studio-page .studio-primary:hover { background: #a5f4da; }
.studio-text-link { color: var(--paper); font-weight: 800; text-underline-offset: .24em; }
.studio-text-link:hover { text-decoration: underline; }
.studio-hero .studio-trial { color: #e0d3e2; margin: 14px 0 0; font-size: 14px; }
.studio-hero-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid #745c77;
  border-radius: 22px;
  background: #302137;
}
.studio-hero-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.studio-hero-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  color: var(--paper);
  font: 800 12px/1.4 var(--body);
  letter-spacing: .08em;
}
.studio-hero-figure figcaption span:nth-child(2) { color: var(--mint); }

.studio-section { padding: clamp(55px, 8vw, 112px) 0; }
.studio-section .eyebrow { margin-bottom: 16px; }
.studio-workflow { background: #d9f6e9; }
.studio-steps,
.studio-screens {
  display: grid;
  gap: 24px;
}
.studio-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 38px 0 0; list-style: none; }
.studio-steps li { padding-top: 16px; border-top: 1px solid #7ca895; }
.studio-steps li > span { display: block; margin-bottom: 12px; font-weight: 900; color: #335b4d; }
.studio-steps h3 { margin-bottom: 10px; }
.studio-steps p { max-width: 35ch; margin: 0; }

.studio-section-heading { align-items: end; margin-bottom: 30px; }
.studio-section-heading h2 { margin-bottom: 0; }
.studio-section-heading > p { max-width: 41ch; margin: 0; }
.studio-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-screens figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fffdf8;
}
.studio-screens a { display: block; }
.studio-screens a:focus-visible { outline-offset: -4px; }
.studio-screens img { width: 100%; border-bottom: 1px solid var(--line); }
.studio-screens figcaption { display: grid; gap: 4px; padding: 16px 20px; }
.studio-screens figcaption span,
.studio-sample-note { color: var(--muted); font-size: 14px; }
.studio-sample-note { margin: 14px 0 0; }

.studio-ideas { background: #f9e7d1; }
.studio-ideas dl { margin: 0; }
.studio-ideas dl > div { border-top: 1px solid #b99d82; padding: 15px 0; }
.studio-ideas dt { font-weight: 900; }
.studio-ideas dd { margin: 2px 0 0; color: var(--muted); }
.studio-faq details { border-top: 1px solid var(--line); }
.studio-faq details:last-child { border-bottom: 1px solid var(--line); }
.studio-faq summary { cursor: pointer; padding: 14px 0; font-weight: 900; }
.studio-faq details p { margin: 0 0 16px; max-width: 50ch; }
.studio-final { text-align: center; }
.studio-final .eyebrow { color: var(--mint); }
.studio-final p { color: #e0d3e2; }
.studio-page a:focus-visible,
.studio-page summary:focus-visible { outline: 3px solid #a45300; outline-offset: 3px; }
.studio-hero a:focus-visible,
.studio-final a:focus-visible { outline-color: var(--mint); }

@media (max-width: 820px) {
  .studio-hero-grid,
  .studio-section-heading,
  .studio-ideas-grid,
  .studio-faq-grid { grid-template-columns: 1fr; }
  .studio-hero-figure { max-width: 650px; }
  .studio-ideas h2,
  .studio-faq h2 { margin-bottom: 0; }
}

@media (max-width: 620px) {
  .studio-steps,
  .studio-screens { grid-template-columns: 1fr; }
  .studio-hero h1 { font-size: clamp(41px, 11.3vw, 63px); }
  .studio-hero-figure figcaption { padding: 11px 12px; font-size: 10px; }
}