/* Warm workshop finish: softer contrast, practical materials and safe containment. */
:root {
  --black: #171512;
  --panel: #211e19;
  --line: #3c3830;
  --white: #f4efe4;
  --muted: #aaa294;
  --red: #f05245;
  --blue: #4d7fd6;
  --green: #49a96e;
}

body,
.hero { background: #171512; }
.hero .shell { width: min(calc(100% - 64px), 1500px); }
header { background: #171512e8; border-bottom-color: #f4efe41a; }
.grid-bg {
  opacity: .28;
  background-image: linear-gradient(#514b40 1px, transparent 1px), linear-gradient(90deg, #514b40 1px, transparent 1px);
}
.difference { background: #211e19; }
.compare article { background: #29251f; }
.modes { background: #eee6d6; color: #25211b; }
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); border-color: #c8c0b1; }
.cards article { min-width: 0; }
.cards article + article { border-color: #c8c0b1; }
.diagram {
  border-color: #b9af9d;
  background-image: linear-gradient(#ddd4c3 1px, transparent 1px), linear-gradient(90deg, #ddd4c3 1px, transparent 1px);
}

.showcase {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  max-width: 100%;
  min-height: 0;
  padding: clamp(48px, 6vw, 90px);
  gap: clamp(42px, 6vw, 96px);
  align-items: center;
  overflow: hidden;
  background: #211e19;
}
.showcase-image {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1733 / 907;
  border: 1px solid #4a453b;
  background-color: #11100e;
  background-image: url('og-basemate.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 24px 70px #0005;
}
.showcase-copy {
  width: 100%;
  min-width: 0;
  max-width: 650px;
  padding: 0;
}
.showcase-copy h2 { overflow-wrap: anywhere; }
.process { background: #e5dccb; color: #25211b; }
.download { background: #29251f; }
.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 10px #0006;
}
.download-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  border-radius: 22px;
  box-shadow: 0 18px 45px #0008;
}
.store { cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.store img { width: 34px; height: 34px; border-radius: 8px; }
.store:hover,
.store:focus-visible { background: #f4efe4; border-color: #f4efe4; color: #171512; }
.accuracy { background: #d8cfbd; color: #25211b; }

/* Switch the hero to one column before the instrument starts to compress. */
@media (max-width: 1500px) {
  .hero { min-height: 0; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-copy { max-width: 780px; }
  .hero h1 { white-space: normal; }
  .instrument {
    width: min(100%, 680px);
    margin: 0 auto;
    transform: none;
  }
}

@media (max-width: 950px) {
  #site-nav { background: #211e19; }
  .showcase {
    grid-template-columns: minmax(0, 1fr);
    padding: 48px clamp(20px, 5vw, 48px) 72px;
    gap: 52px;
  }
  .showcase-image {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1733 / 907;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .showcase-copy { max-width: 700px; padding: 0; }
}

@media (max-width: 650px) {
  .hero .shell { width: min(calc(100% - 28px), 1500px); }
  .showcase-image { min-height: 0; }
  .showcase-copy { padding: 0; }
}