/* Hehku 20 product page. Everything general comes from brand/tokens.css and brand/components.css (Valo).
   This file holds only what belongs to Hehku 20: its accent and the hero arrangement. */
:root {
  --product: #e5483b;       /* the lit pixels: dots and marks only */
  --product-text: #b3261e;  /* 6.2:1 on snow, 5.6:1 on stage */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --product: #ff5a4d; --product-text: #ff8a7d; }
}
:root[data-theme="dark"] { --product: #ff5a4d; --product-text: #ff8a7d; }

.hero { padding-top: var(--s7); }
.hero h1 { margin-top: var(--s4); max-width: 15ch; }
.hero h1 .muted { display: block; }
.hero-side { display: grid; gap: var(--s5); }
.hero-stage { margin-top: var(--s7); }
.hero-note { margin-top: var(--s3); }
.hero-figures { margin-top: var(--s6); }
@media (min-width: 900px) {
  .hero { padding-top: var(--s9); }
  .hero .split { grid-template-columns: 8fr 4fr; }
  .hero-stage { margin-top: var(--s8); }
  .hero-figures { margin-top: var(--s7); }
}
.hero-stage > img { left: 10%; width: 80%; top: 10%; height: 80%; }

/* phone header: the model code alone, so the product name is not cut off */
@media (max-width: 420px) { .site-header-in, .crumb { gap: 6px; } .btn-small { padding: 0 8px; } .lang-switch a { padding: 0 2px; } }