/* Stable colour bands with a soft highlight on the current reading panel. */
main.refreshed-home {
  display: flex;
  flex-direction: column;
  background: #f7f8f9;
}
main.refreshed-home > * { flex-shrink: 0; }
main.refreshed-home > section,
main.refreshed-home > .home-wordmark {
  transition: background-color 360ms ease, box-shadow 360ms ease;
  box-shadow: inset 0 0 0 2px transparent, inset 0 0 28px transparent;
}
main.refreshed-home > .is-panel-active {
  box-shadow: inset 0 0 0 2px rgb(var(--panel-accent, var(--site-accent-rgb)) / 18%), inset 0 0 28px rgb(var(--panel-accent, var(--site-accent-rgb)) / 3%);
}
main.refreshed-home > section {
  position: relative;
  border-top: 0;
  border-bottom: 0;
  scroll-margin-top: 110px;
}

main.refreshed-home > section.experience-hero {
  background: #fff;
  border-bottom: 0;
}

main.refreshed-home > section.site-fold.working-day-fold { background: var(--site-surface); --panel-accent: var(--site-accent-rgb); }
main.refreshed-home > section.site-fold.home-proof { background: #fff; }
main.refreshed-home > section.site-fold.results-fold { background: var(--site-surface) !important; --panel-accent: var(--site-accent-rgb); }
/* Match the opaque wordmark artwork in both states, without a tinted surround. */
main.refreshed-home > .home-wordmark { background-color: #fff; border: 0; box-shadow: none; }
main.refreshed-home > .home-wordmark.is-panel-active {
  background-color: #fff;
  box-shadow: none;
}
main.refreshed-home > section.experience-hero.is-panel-active { background-color: var(--site-focus); }
main.refreshed-home > section.site-fold.working-day-fold.is-panel-active { background-color: var(--site-focus); }
main.refreshed-home > section.site-fold.home-proof.is-panel-active { background-color: var(--site-focus); }
main.refreshed-home > section.site-fold.results-fold.is-panel-active { background-color: var(--site-focus) !important; }

.whole-day-preview .preview-controls {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.whole-day-preview .scene-button {
  min-width: 0;
  min-height: 68px;
  overflow-wrap: anywhere;
}

.whole-day-preview .scene-button > span {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
}

@media (max-width: 760px) {
  .whole-day-preview .preview-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
  }

  .day-preview.whole-day-preview .scene-button {
    min-height: 68px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  main.refreshed-home > .home-wordmark,
  main.refreshed-home > section { transition: none; }
}

@media print {
  main.refreshed-home > .home-wordmark,
  main.refreshed-home > section { box-shadow: none; transition: none; background: white !important; }
}