:root {
  --page: calc(100vw - 48px);
  --sonnet-amber: #b96b2a;
  --sonnet-amber-soft: #f4e6d7;
}

.header-inner { width: calc(100% - 32px); }

.sonnet-hero {
  min-height: 680px;
  grid-template-columns: minmax(480px, .82fr) minmax(0, 1.18fr);
}
.sonnet-hero .hero-copy { padding-inline: clamp(44px, 4vw, 76px); }
.sonnet-hero .hero-copy h1 { max-width: 780px; font-size: clamp(54px, 5.3vw, 92px); }
.sonnet-hero .hero-visual {
  min-height: 680px;
  display: grid;
  place-items: center;
  background: #f5f2eb;
}
.sonnet-hero .hero-visual img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.sonnet-hero .hero-visual::after { box-shadow: inset 0 0 80px rgb(18 20 25 / 4%); }
.sonnet-hero .eyebrow { color: var(--sonnet-amber); }

.sonnet-use-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--surface);
}
.sonnet-use-grid article {
  min-height: 320px;
  padding: clamp(28px, 2.5vw, 44px);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}
.sonnet-use-grid article:last-child { border-right: 0; }
.sonnet-use-grid span { color: var(--sonnet-amber); font: 700 10px/1 var(--mono); }
.sonnet-use-grid h3 { margin: auto 0 14px; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.045em; }
.sonnet-use-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.sonnet-workflow {
  width: var(--page);
  margin: 0 auto 150px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.sonnet-workflow > div {
  padding: 58px clamp(36px, 4vw, 72px) 42px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 9%;
  align-items: end;
}
.sonnet-workflow > div .section-label { grid-column: 1 / -1; margin-bottom: -5px; }
.sonnet-workflow h2 { margin: 0; font-size: clamp(42px, 5vw, 78px); line-height: .96; letter-spacing: -.066em; }
.sonnet-workflow > div > p:last-child { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.sonnet-workflow figure { margin: 0; position: relative; overflow: hidden; border-block: 1px solid var(--line); background: #f5f2eb; }
.sonnet-workflow figure img { width: 100%; height: auto; display: block; object-fit: contain; }
.sonnet-workflow figcaption { position: absolute; right: 22px; bottom: 20px; padding: 11px 14px; border: 1px solid var(--line); background: rgb(255 255 255 / 91%); font: 650 9px/1.4 var(--mono); }
.sonnet-workflow ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.sonnet-workflow li { min-height: 120px; padding: 25px 28px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-content: center; border-right: 1px solid var(--line); }
.sonnet-workflow li:last-child { border-right: 0; }
.sonnet-workflow li span { grid-row: 1 / 3; color: var(--sonnet-amber); font: 700 10px/1.5 var(--mono); }
.sonnet-workflow li strong { font-size: 16px; }
.sonnet-workflow li small { color: var(--muted); font-size: 11px; }

.migration-section {
  width: var(--page);
  margin: 0 auto 150px;
  padding: clamp(42px, 5vw, 78px);
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 9%;
  background: var(--sonnet-amber-soft);
  border: 1px solid rgb(185 107 42 / 18%);
}
.migration-section h2 { margin-bottom: 24px; font-size: clamp(42px, 5vw, 74px); line-height: .97; letter-spacing: -.065em; }
.migration-section > div > p:last-child { color: var(--muted); font-size: 16px; line-height: 1.7; }
.migration-section ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(18 20 25 / 18%); }
.migration-section li { padding: 25px 0; display: grid; grid-template-columns: 42px 1fr; gap: 16px; border-bottom: 1px solid rgb(18 20 25 / 13%); }
.migration-section li > span { color: var(--sonnet-amber); font: 700 10px/1.5 var(--mono); }
.migration-section h3 { margin-bottom: 8px; font-size: 19px; letter-spacing: -.035em; }
.migration-section li p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

@media (min-width: 1921px) {
  .sonnet-hero { min-height: 720px; }
  .sonnet-hero .hero-visual { min-height: 720px; }
}

@media (max-width: 1180px) {
  .sonnet-hero { grid-template-columns: 1fr; }
  .sonnet-hero .hero-visual { min-height: 0; border-top: 1px solid var(--line); }
  .sonnet-use-grid { grid-template-columns: 1fr 1fr; }
  .sonnet-use-grid article:nth-child(2) { border-right: 0; }
  .sonnet-use-grid article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 900px) {
  :root { --page: min(100% - 28px, 760px); }
  .sonnet-workflow, .migration-section { margin-bottom: 100px; }
  .sonnet-workflow > div, .migration-section { grid-template-columns: 1fr; gap: 22px; }
  .sonnet-workflow ol { grid-template-columns: 1fr 1fr; }
  .sonnet-workflow li:nth-child(2) { border-right: 0; }
  .sonnet-workflow li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .sonnet-hero .hero-copy { padding-inline: 23px; }
  .sonnet-hero .hero-visual { min-height: 0; }
  .sonnet-use-grid { grid-template-columns: 1fr; }
  .sonnet-use-grid article { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sonnet-use-grid article:last-child { border-bottom: 0; }
  .sonnet-workflow { width: 100%; }
  .sonnet-workflow > div { padding: 40px 23px 30px; }
  .sonnet-workflow ol { grid-template-columns: 1fr; }
  .sonnet-workflow li { border-right: 0; border-bottom: 1px solid var(--line); }
  .sonnet-workflow li:last-child { border-bottom: 0; }
  .sonnet-workflow figcaption { position: static; display: block; border-width: 1px 0 0; }
  .migration-section { width: 100%; padding: 40px 23px; }
}