/* home-white.css — the white homepage (site/home-white.html), live build only.
   Added 21 September 2026. Colours and fonts measured on the live Simvoly
   homepage that day: body text Open Sans #3e3e3e, section titles Poiret One,
   lead lines Open Sans 24px bold #6a6a6a, green buttons #61bd6d, purple
   buttons #8b13f1, the MULTITRACKS title #610def. Goal: same page, close look,
   not pixel-perfect. */

/* The shared white shell caps <main> at 1100px with padding. This page is
   built from full-width bands (like Simvoly), so it lifts that cap for itself
   only; every section below re-centres its own content at 640px. */
main:has(.hw-hero) { max-width: none; width: 100%; padding: 0; }

.hw-hero {
  /* Local copy since 21 Sep 2026 (fetched from Simvoly's CDN; it was not in the crawl). */
  background: #222 url("/assets/home/riddimbank-mixing-board-hero.webp") center / cover no-repeat;
  color: #ffffff;
  text-align: center;
  padding: 64px 16px 72px;
}
.hw-hero-inner { max-width: 640px; margin: 0 auto; }
.hw-hero h1 {
  font-family: "Poiret One", "Open Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(44px, 9vw, 72px);
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 16px;
}
.hw-definition {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #e1e1e1;
  margin: 0 0 28px;
}

.hw-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px;
  text-align: center;
  font-family: "Open Sans", Arial, sans-serif;
  color: #3e3e3e;
}
.hw-title {
  font-family: "Poiret One", "Open Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 5vw, 32px);
  line-height: 1.25;
  color: #3e3e3e;
  margin: 0 0 20px;
}
.hw-title-purple { color: #610def; font-weight: 700; font-size: clamp(34px, 7vw, 48px); }
.hw-lead { font-size: 24px; font-weight: 700; color: #6a6a6a; margin: 0 0 14px; line-height: 1.35; }
.hw-small { font-size: 18px; font-weight: 400; }
.hw-center { font-size: 18px; color: #6a6a6a; margin: 0 0 14px; line-height: 1.6; }
.hw-body { font-size: 18px; color: #6a6a6a; text-align: justify; margin: 0 0 14px; line-height: 1.6; }
.hw-list { text-align: left; font-size: 18px; color: #6a6a6a; line-height: 1.6; margin: 0 0 20px; padding-left: 1.2em; }
.hw-list li { margin: 0 0 4px; }
.hw-link-bold { font-weight: 700; color: #2f50ef; word-break: break-all; }

.hw-rule { width: 32px; border: 0; border-top: 2px solid #3e3e3e; margin: 8px auto 28px; }
.hw-rule-wide { width: 100%; margin: 28px 0; }

.hw-video { position: relative; width: 100%; padding-bottom: 56.25%; margin: 12px 0 24px; }
.hw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 5px; overflow: hidden; }

.hw-img { display: block; width: 100%; max-width: 640px; height: auto; margin: 8px auto 20px; }
.hw-badge { display: block; width: 220px; height: auto; margin: 28px auto 0; }
.hw-wide { display: block; width: 100%; max-width: 800px; height: auto; margin: 0 auto; }

.hw-btn {
  display: inline-block;
  font-family: Arial, sans-serif;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 60px;
  padding: 12px 28px;
  font-size: 22px;
  line-height: 1.2;
  margin: 8px 0 4px;
  transition: filter 0.15s ease;
}
.hw-btn:hover { filter: brightness(1.08); }
.hw-btn-big { font-size: 20px; padding: 22px 46px; }
.hw-btn-green { background: #61bd6d; }
.hw-btn-purple { background: #8b13f1; }

.hw-quote { margin: 0 0 28px; padding: 0; text-align: left; }
.hw-quote p { font-size: 18px; color: #6a6a6a; margin: 0; line-height: 1.6; }
.hw-quote .hw-quote-name {
  font-family: "Poiret One", "Open Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #3e3e3e;
  margin-bottom: 6px;
}