/* Local design study: stable page proportions, precise links, warm charcoal. */
:root {
  --paper: #f7f7f2;
  --ink: #252729;
  --muted: #64676a;
  --line: #d9dad6;
  --dark: #242628;
  --dark-line: #505355;
  --dark-muted: #c6c8c8;
}

/* Zooming out reveals the surrounding canvas instead of stretching the media.
   Container-relative type and spacing stop growing with the page itself. */
html { scroll-padding-top: 0; background: #edede8; }
body {
  position: relative;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  container-type: inline-size;
  box-shadow: 0 0 0 1px #2527290a;
}
.site-header, main, .site-footer, section, .hero-copy, .hero-media {
  min-width: 0;
}
.section-pad, .site-header, .performance-strip {
  padding-inline: clamp(24px, 4.25cqi, 72px);
}
.hero {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: clamp(640px, 43cqi, 720px);
}
.hero-copy {
  justify-content: center;
  padding: 54px 34px 54px clamp(24px, 4.25cqi, 72px);
}
.hero h1 { font-size: clamp(64px, 6.2cqi, 104px); }
.hero-media { min-height: 0; }
.hero-description { color: var(--muted); }
.hero-photo-caption > div {
  border-left: 2px solid var(--amber);
  padding-left: 16px;
}
.hero-media::after {
  background: linear-gradient(180deg, #17191b50, transparent 30%, transparent 65%, #17191ba6);
}
.video-toggle { background: #24262880; }
.video-toggle:hover { background: var(--dark); }
.hardware-image { max-width: 1200px; margin-inline: auto; }
.hardware-image > img, .platform-frame img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.coverage-visual { width: 100%; max-width: 720px; justify-self: center; }
.about-wide-photo { margin-inline: clamp(24px, 4.25cqi, 72px); }
.about-wide-photo img { height: auto; object-fit: contain; }

/* Neutral secondary tones keep the amber accent crisp against charcoal. */
.performance-strip { border-color: var(--dark-line); }
.performance-strip > div { border-color: var(--dark-line); }
.performance-strip .metric-detail,
.hardware-heading > p, .hardware-specs p, .hardware-image figcaption,
.coverage-caption p, .principles-grid p, .roadmap-strip p {
  color: var(--dark-muted);
}
.performance-strip strong small { color: #e4e5e3; }
.hardware-specs > div, .principles-grid article, .roadmap-strip {
  border-color: var(--dark-line);
}
.coverage-visual, .coverage-controls, .coverage-caption {
  border-color: var(--dark-line);
}
.coverage-controls button { color: #dedfdd; border-color: #747779; }
.coverage-controls button[aria-pressed=true] { color: var(--ink); border-color: var(--amber); }
.coverage-section, .testimonial, .about-team { background: #efefed; }
.platform-frame { background: #e8eae6; }
.pallet-figure { background: #3c3e3f; }
.pallet-figure figcaption { background: #242628f0; }
.button-dark:hover { background: #3a3d3f; }
.demo-dialog::backdrop { background: #202224b8; }
.optional-arc { stroke: #b9bdbf; }
.coverage-diagram [fill="#242820"] { fill: var(--dark); }
.coverage-diagram [fill="#2d3327"], .coverage-diagram [fill="#36402e"] { fill: #35393b; }
.coverage-diagram [fill="#c0c8b9"], .coverage-diagram [fill="#b5c0a9"] { fill: #c6c8c8; }
.coverage-diagram [stroke="#68735c"], .coverage-diagram [stroke="#859278"],
.coverage-diagram [stroke="#7b876d"], .coverage-diagram [stroke="#a3b194"] { stroke: #858b8e; }
.coverage-diagram [stroke="#434d3a"], .coverage-diagram [stroke="#4e5b43"] { stroke: #555b5e; }
.coverage-diagram [stroke="#e6eddd"] { stroke: #e6e8e7; }

@media (max-width: 1000px) and (min-width: 701px) {
  .hero-copy { padding-block: 40px; padding-right: 26px; }
}
@media (max-width: 700px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding: 36px 24px; }
  .hero h1 { font-size: clamp(54px, 17cqi, 94px); }
  .hero-media { aspect-ratio: 4 / 5; min-height: 0; }
  .hero-photo-caption > div { padding-left: 12px; }
  .performance-strip > div,
  .performance-strip > div:nth-child(odd),
  .performance-strip > div:nth-child(n+4) { border-color: var(--dark-line); }
}
@media (max-width: 480px) {
  .site-header { padding-inline: 20px; }
}