/*
Homepage-only color identity preview for the Sun, Water & Earth palette.
Created: 2026-07-29
Last modified: 2026-07-30
*/

body.page-home {
  --home-water-blue: #3d6fdb;
  --home-water-blue-rgb: 61 111 219;
  --home-sun-yellow: #ffd84d;
  --home-sun-yellow-rgb: 255 216 77;
  --home-terracotta: #e06a4b;
  --home-terracotta-rgb: 224 106 75;
  --home-warm-white: #f3f1ec;
  --home-warm-white-rgb: 243 241 236;
  --home-charcoal: #2e3133;
  --home-charcoal-rgb: 46 49 51;

  --cream: var(--home-warm-white);
  --map-cream: var(--home-warm-white);
  --map-land: var(--home-sun-yellow);
  --ink: var(--home-charcoal);
  --deep-ink: var(--home-charcoal);
  --white: var(--home-warm-white);
  --line: rgb(var(--home-charcoal-rgb) / 0.42);
  --soft-line: rgb(var(--home-charcoal-rgb) / 0.2);
  --muted: rgb(var(--home-charcoal-rgb) / 0.72);

  color: var(--home-charcoal);
  background: var(--home-warm-white);
}

body.page-home .nav-wrap {
  background: rgb(var(--home-warm-white-rgb) / 0.96);
  border-color: rgb(var(--home-charcoal-rgb) / 0.18);
}

body.page-home .nav.site-nav .brand {
  color: var(--home-charcoal);
}

body.page-home .nav.site-nav .nav-link,
body.page-home .nav.site-nav .dropdown-button,
body.page-home .nav.site-nav .nav-cta,
body.page-home .nav.site-nav .mobile-menu-button {
  --frame-color: rgb(var(--home-charcoal-rgb) / 0.42);
  --frame-corner-color: var(--home-charcoal);
  --frame-background: var(--home-warm-white);
  --frame-text: var(--home-charcoal);
}

body.page-home .nav.site-nav .nav-link:hover,
body.page-home .nav.site-nav .dropdown-button:hover,
body.page-home .nav.site-nav .dropdown:hover .dropdown-button,
body.page-home .nav.site-nav .dropdown:focus-within .dropdown-button,
body.page-home .nav.site-nav .dropdown.active .dropdown-button,
body.page-home .nav.site-nav .dropdown[data-open="true"] .dropdown-button {
  --frame-color: var(--home-charcoal);
  --frame-corner-color: var(--home-charcoal);
  --frame-background: var(--home-sun-yellow);
  --frame-text: var(--home-charcoal);
}

body.page-home .nav.site-nav .nav-link.active {
  --frame-color: var(--home-charcoal);
  --frame-corner-color: var(--home-charcoal);
  --frame-background: var(--home-warm-white);
  --frame-text: var(--home-charcoal);
}

body.page-home .nav.site-nav .nav-cta {
  --frame-color: var(--home-charcoal);
  --frame-corner-color: var(--home-charcoal);
  --frame-background: var(--home-warm-white);
  --frame-text: var(--home-charcoal);
}

body.page-home .nav.site-nav .nav-cta:hover,
body.page-home .nav.site-nav .nav-cta.active {
  --frame-color: var(--home-water-blue);
  --frame-corner-color: var(--home-water-blue);
  --frame-background: var(--home-water-blue);
  --frame-text: var(--home-warm-white);
  color: var(--home-warm-white);
  background: var(--home-water-blue);
}

body.page-home .nav.site-nav :is(.nav-link, .dropdown-button, .nav-cta, .mobile-menu-button):focus-visible,
body.page-home .nav.site-nav .brand:focus-visible,
body.page-home .nav.site-nav .dropdown-card:focus-visible {
  outline-color: rgb(var(--home-water-blue-rgb) / 0.42);
}

body.page-home .nav.site-nav .dropdown-menu,
body.page-home .nav.site-nav .dropdown-card {
  background: var(--home-warm-white);
}

body.page-home .nav.site-nav .dropdown-card:hover,
body.page-home .nav.site-nav .dropdown-card:focus-visible {
  background: rgb(var(--home-sun-yellow-rgb) / 0.34);
}

body.page-home .hero {
  padding-top: clamp(58px, 5vw, 74px);
  background: var(--home-warm-white);
}

body.page-home .audience-switch {
  margin-bottom: clamp(62px, 6vw, 88px);
  border-color: var(--home-charcoal);
}

body.page-home .audience-tab + .audience-tab {
  border-color: var(--home-charcoal);
}

body.page-home .audience-tab:hover:not(.active) {
  background: rgb(var(--home-water-blue-rgb) / 0.1);
}

body.page-home .audience-tab.active {
  color: var(--home-warm-white);
  background: var(--home-charcoal);
}

body.page-home .audience-tab:focus-visible {
  outline-color: var(--home-water-blue);
}

body.page-home .display {
  font-size: clamp(64px, 9.6vw, 148px);
}

body.page-home .hero-grid {
  gap: clamp(42px, 7vw, 110px);
  padding-bottom: clamp(54px, 6vw, 82px);
}

body.page-home .hero-copy > .label {
  border-left: 4px solid var(--home-water-blue);
  padding-left: 14px;
}

body.page-home .hero-copy .body-large {
  margin-top: 26px;
  border-left: 4px solid var(--home-terracotta);
  padding-left: 18px;
}

body.page-home .hero-action {
  padding-bottom: 4px;
}

body.page-home .action-label {
  border-left: 4px solid var(--home-terracotta);
  padding-left: 12px;
  color: var(--home-charcoal);
}

body.page-home .hero-action .button {
  min-width: min(100%, 340px);
  min-height: 66px;
  border-color: var(--home-charcoal);
  border-radius: 0;
  color: var(--home-charcoal);
  background: var(--home-sun-yellow);
  font-size: 18px;
}

body.page-home .hero-action .button:hover {
  color: var(--home-warm-white);
  background: var(--home-charcoal);
}

body.page-home .pattern {
  height: 156px;
  margin-top: -78px;
  margin-bottom: 0;
  background: var(--home-warm-white);
}

body.page-home .pattern::before,
body.page-home .pattern::after {
  content: none;
}

body.page-home .signal-bar {
  --signal-rgb: var(--home-sun-yellow-rgb);
  width: clamp(6px, calc(var(--w) * 2.2), 16px);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgb(var(--signal-rgb));
  border-radius: 0;
  outline: 0;
  background: rgb(var(--signal-rgb));
  box-shadow: none;
  filter: none;
  animation-name: home-signal-fade;
}

body.page-home .signal-bar:nth-child(4n) {
  --signal-rgb: var(--home-water-blue-rgb);
}

body.page-home .signal-bar:nth-child(7n) {
  --signal-rgb: var(--home-terracotta-rgb);
}

@keyframes home-signal-fade {
  0%,
  18%,
  100% {
    opacity: 0;
  }

  24%,
  50% {
    opacity: 1;
  }

  64% {
    opacity: 0;
  }
}

body.page-home .intro,
body.page-home .products,
body.page-home .faq,
body.page-home .cta,
body.page-home footer {
  background: var(--home-warm-white);
}

body.page-home .solution-grid {
  gap: clamp(22px, 2.8vw, 42px);
}

body.page-home .solution,
body.page-home .solution + .solution {
  border-right: 0;
  padding-right: 0;
  padding-left: 0;
}

body.page-home .solution .index {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--home-warm-white);
  background: var(--home-charcoal);
}

body.page-home .solution:nth-child(4n + 1) .index {
  background: var(--home-water-blue);
}

body.page-home .solution:nth-child(4n + 2) .index {
  background: var(--home-terracotta);
}

body.page-home .solution:nth-child(4n + 3) .index {
  color: var(--home-charcoal);
  background: var(--home-sun-yellow);
}

body.page-home .solution:nth-child(4n) .index {
  background: var(--home-charcoal);
}

body.page-home .benefit:nth-child(4n + 1) .benefit-mark {
  color: var(--home-water-blue);
}

body.page-home .benefit:nth-child(4n + 2) .benefit-mark {
  color: #8a6b00;
}

body.page-home .benefit:nth-child(4n + 3) .benefit-mark {
  color: var(--home-terracotta);
}

body.page-home .visual,
body.page-home .visual.white {
  background: var(--home-warm-white);
}

body.page-home .product:nth-child(3n + 1) .visual {
  border-top: 4px solid var(--home-water-blue);
}

body.page-home .product:nth-child(3n + 2) .visual {
  border-top: 4px solid var(--home-sun-yellow);
}

body.page-home .product:nth-child(3n) .visual {
  border-top: 4px solid var(--home-terracotta);
}

body.page-home .ui-panel {
  background: var(--home-warm-white);
}

body.page-home .result-dot {
  background: var(--home-sun-yellow);
}

body.page-home .visual.dark,
body.page-home .code,
body.page-home .numbers {
  color: var(--home-warm-white);
  background: var(--home-charcoal);
}

body.page-home .product:nth-child(3) .visual.dark {
  color: var(--home-warm-white);
  background: var(--home-water-blue);
}

body.page-home .product:nth-child(3) .map {
  filter: url("#map-terracotta");
}

body.page-home .product:nth-child(3) .map-node,
body.page-home .product:nth-child(3) .map-card {
  border-color: var(--home-terracotta);
  color: var(--home-warm-white);
  background: var(--home-sun-yellow);
}

body.page-home .product:nth-child(3) .map-node {
  animation-name: home-map-pulse;
}

body.page-home .product:nth-child(3) .map-node.one {
  top: 48%;
  left: 22%;
}

body.page-home .product:nth-child(3) .map-node.two {
  top: 45%;
  left: 52%;
}

body.page-home .product:nth-child(3) .map-node.three {
  top: 67%;
  left: 31%;
}

body.page-home .product:nth-child(3) .map-node.four {
  top: 55%;
  left: 72%;
}

@keyframes home-map-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(255 216 77 / .65);
  }

  70% {
    box-shadow: 0 0 0 14px rgb(255 216 77 / 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255 216 77 / 0);
  }
}

body.page-home .benefits {
  background: var(--home-warm-white);
}

body.page-home .benefit-mark {
  background: transparent;
}

body.page-home .number-grid,
body.page-home .number {
  border-color: rgb(var(--home-warm-white-rgb) / 0.36);
}

body.page-home .number span {
  color: rgb(var(--home-warm-white-rgb) / 0.72);
}

body.page-home .number:nth-child(4n + 1) strong {
  color: var(--home-water-blue);
}

body.page-home .number:nth-child(4n + 2) strong {
  color: var(--home-sun-yellow);
}

body.page-home .number:nth-child(4n + 3) strong {
  color: var(--home-terracotta);
}

body.page-home .number:nth-child(4n) strong {
  color: var(--home-warm-white);
}

body.page-home .faq-item[open] .faq-question {
  color: var(--home-water-blue);
}

body.page-home .cta .button.dark {
  border-color: var(--home-charcoal);
  color: var(--home-charcoal);
  background: var(--home-sun-yellow);
}

body.page-home .cta .button.dark:hover {
  color: var(--home-warm-white);
  background: var(--home-charcoal);
}

@media (max-width: 920px) {
  body.page-home .nav.site-nav {
    background: var(--home-warm-white);
  }

  body.page-home .nav.site-nav .nav-links {
    background: var(--home-warm-white);
  }

  body.page-home .nav.site-nav .mobile-menu-button {
    --frame-background: var(--home-charcoal);
    --frame-text: var(--home-warm-white);
    color: var(--home-warm-white);
    background: var(--home-charcoal);
  }
}

@media (min-width: 981px) {
  body.page-home .hero-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

@media (max-width: 620px) {
  body.page-home .hero-copy .body-large {
    padding-left: 14px;
  }

  body.page-home .hero-action .button {
    width: 100%;
  }

  body.page-home .pattern {
    height: 116px;
    margin-top: -58px;
    margin-bottom: 0;
  }
}