@import url('/seo/model-sonnet-4-6.css');

:root {
  --haiku45-cyan: #167c91;
  --haiku45-cyan-soft: #e6f2f1;
  --haiku45-coral: #dc684d;
  --haiku45-green: #1b8b5d;
}

.haiku45-hero { min-height: 700px; grid-template-columns: minmax(500px, .83fr) minmax(0, 1.17fr); }
.haiku45-hero .hero-copy { padding-inline: clamp(44px, 4vw, 76px); }
.haiku45-hero .hero-copy h1 { max-width: 850px; font-size: clamp(52px, 5vw, 88px); }
.haiku45-hero .hero-visual { min-height: 700px; display: grid; place-items: center; background: #f5f1e9; }
.haiku45-hero .hero-visual img { width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center; }
.haiku45-hero .eyebrow { color: var(--haiku45-cyan); }

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

.haiku45-price { background: #102226; color: #fff; border-color: #102226; }
.haiku45-price .section-label { color: #7ed0d8; }
.haiku45-price .price-decision-copy p:last-child { color: #b9c7c8; }
.haiku45-price .price-triad > div.is-selected { background: #176a72; }
.haiku45-price .price-triad .is-selected span { color: #cff8f4; }
.haiku45-price .price-triad .is-selected small { color: #d9f0ed; }

.haiku45-routing li span { color: var(--haiku45-coral); }
.haiku45-routing figure { background: #f5f1e9; }
.haiku45-routing figure img { width: 100%; height: auto; object-fit: contain; }
.haiku45-migration { background: var(--haiku45-cyan-soft); border-color: rgb(22 124 145 / 18%); }
.haiku45-migration li > span { color: var(--haiku45-cyan); }

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

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

@media (max-width: 620px) {
  .haiku45-hero { min-width: 0; }
  .haiku45-hero .hero-copy { min-width: 0; padding-inline: 23px; overflow: hidden; }
  .haiku45-hero .hero-copy h1 { max-width: 100%; font-size: clamp(37px, 11.3vw, 45px); overflow-wrap: anywhere; }
  .haiku45-use-grid { grid-template-columns: 1fr; }
  .haiku45-use-grid article { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
  .haiku45-use-grid article:last-child { border-bottom: 0; }
}