:root {
  --page: calc(100vw - 48px);
  --opus47-amber: #b56a24;
  --opus47-amber-soft: #f2e5d5;
  --opus47-green: #178153;
}

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

.opus47-hero {
  min-height: 700px;
  grid-template-columns: minmax(500px, .83fr) minmax(0, 1.17fr);
}
.opus47-hero .hero-copy { padding-inline: clamp(44px, 4vw, 76px); }
.opus47-hero .hero-copy h1 {
  max-width: 810px;
  font-size: clamp(52px, 5vw, 88px);
}
.opus47-hero .hero-visual {
  min-height: 700px;
  display: grid;
  place-items: center;
  background: #f6f2eb;
}
.opus47-hero .hero-visual img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.opus47-hero .hero-visual::after { box-shadow: inset 0 0 86px rgb(18 20 25 / 4%); }
.opus47-hero .eyebrow { color: var(--opus47-amber); }

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

.opus47-price { background: #14171b; color: #fff; border-color: #14171b; }
.opus47-price .section-label { color: #e5a45f; }
.opus47-price .price-decision-copy p:last-child { color: #aeb5bd; }
.price-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
  border: 1px solid rgb(255 255 255 / 14%);
}
.price-triad > div { padding: 32px 25px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid rgb(255 255 255 / 12%); }
.price-triad > div:nth-child(3) { border-right: 0; }
.price-triad > div.is-selected { background: #8b4c1f; }
.price-triad span { font: 700 9px/1 var(--mono); letter-spacing: .08em; color: #aeb5bd; }
.price-triad .is-selected span { color: #ffd6aa; }
.price-triad strong { font-size: clamp(28px, 2.5vw, 42px); letter-spacing: -.05em; }
.price-triad small { color: #aeb5bd; }
.price-triad .is-selected small { color: #f3d9bf; }
.price-triad > p { grid-column: 1 / -1; margin: 0; padding: 19px 25px; border-top: 1px solid rgb(255 255 255 / 12%); color: #949ca5; font-size: 12px; line-height: 1.55; }

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

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

@media (min-width: 1921px) {
  .opus47-hero, .opus47-hero .hero-visual { min-height: 740px; }
}

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

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

@media (max-width: 620px) {
  .opus47-hero .hero-copy { padding-inline: 23px; }
  .opus47-use-grid { grid-template-columns: 1fr; }
  .opus47-use-grid article { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
  .opus47-use-grid article:last-child { border-bottom: 0; }
  .price-triad { grid-template-columns: 1fr; }
  .price-triad > div { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 12%); }
  .price-triad > div:nth-child(3) { border-bottom: 0; }
  .review-line { width: 100%; }
  .review-line > div { padding: 40px 23px 30px; }
  .review-line ol { grid-template-columns: 1fr; }
  .review-line li { border-right: 0; border-bottom: 1px solid var(--line); }
  .review-line li:last-child { border-bottom: 0; }
  .review-line figcaption { position: static; display: block; border-width: 1px 0 0; }
  .opus47-migration { width: 100%; padding: 40px 23px; }
}