.design--onesystem {
  --page-bg: #ebe5da;
  --stone: #ebe5da;
}
.design--onesystem .site-header {
  background: var(--stone);
  border-bottom-color: rgba(28, 27, 25, 0.08);
}
.hero--onesystem {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  background: var(--stone);
}
.hero--onesystem .hero__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.hero--onesystem .hero__pic,
.hero--onesystem .hero__pic img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero--onesystem .hero__pic img {
  object-fit: cover;
  object-position: 26% 50%;
}
.hero--onesystem .hero__copy {
  padding: clamp(1.75rem, 6vw, 2.5rem) var(--gutter) clamp(2.75rem, 7vw, 3.5rem);
}
.hero--onesystem .hero__title {
  margin: 1.1rem 0 1.25rem;
  font-size: clamp(2.1rem, 1.25rem + 2.95vw, 3.875rem);
}
.hero--onesystem .hero__lead {
  max-width: 35rem;
  font-size: clamp(1.03rem, 0.96rem + 0.4vw, 1.16rem);
}
.hero__list {
  margin-top: clamp(1.4rem, 3vw, 1.65rem);
}
.no-js .hero__list {
  display: none;
}
.hero__list-label {
  margin-bottom: 0.65rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 34rem;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.hero-chip .icon {
  width: 15px;
  height: 15px;
  color: var(--accent-dark);
}
.hero-chip__check {
  display: none;
}
.hero-chip:hover {
  border-color: var(--ink);
}
.hero-chip[aria-pressed=true] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.hero-chip[aria-pressed=true] .hero-chip__plus {
  display: none;
}
.hero-chip[aria-pressed=true] .hero-chip__check {
  display: block;
  color: var(--accent-tint);
}
.hero--onesystem .hero__actions {
  margin-top: clamp(1.5rem, 3vw, 1.75rem);
}
.hero--onesystem .hero__micro {
  margin-top: 1rem;
}
.hero--onesystem .hero__proof {
  margin-top: 1.5rem;
}
@media (max-width: 639px) {
  .hero--onesystem .hero__actions .btn {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .hero--onesystem {
    grid-template-columns: minmax(0, 690fr) minmax(0, 750fr);
    min-height: clamp(42rem, 100svh - var(--header-h), 51.75rem);
  }
  .hero--onesystem .hero__photo {
    aspect-ratio: auto;
  }
  .hero--onesystem .hero__copy {
    align-self: center;
    padding: 3rem max(var(--gutter), calc((100vw - var(--container)) / 2)) 3.5rem clamp(2.5rem, 5.5vw, 5rem);
  }
}
.design--onesystem main > section:not(.conversion):not(.hero) {
  background: var(--stone);
}
.design--onesystem main > :is(#plan-the-system, #how-it-works) {
  background: #f7f4ee;
}
.design--onesystem main > #faq {
  background: #fff;
}
.system__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.system__card {
  margin: 0;
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.2vw, 1.4rem) 1rem;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 50px -30px rgba(34, 30, 25, 0.5);
}
.system__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.system__head .eyebrow {
  margin: 0;
}
.system__tag {
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  background: rgba(28, 27, 25, 0.78);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.house {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.4rem;
  overflow: visible;
}
.sys-link {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 3 6;
  stroke-opacity: 0.75;
  transition: stroke-width 0.3s, stroke-opacity 0.3s;
}
.sys-link.is-on {
  stroke-width: 2.6;
  stroke-dasharray: none;
  stroke-opacity: 1;
}
.sys-node circle {
  fill: #fbf9f5;
  stroke: #c9c1b4;
  stroke-width: 1.6;
  transition: fill 0.3s, stroke 0.3s;
}
.sys-node.is-on circle {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 2.2;
}
.sys-node__icon {
  color: #8a847a;
  transition: color 0.3s;
}
.sys-node.is-on .sys-node__icon {
  color: var(--accent-dark);
}
@media (max-width: 599px) {
  .sys-node text {
    font-size: 19px;
  }
}
.system__copy .section-title {
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);
}
.system__copy .text-link {
  margin-top: 1.4rem;
}
@media (min-width: 960px) {
  .system__grid {
    grid-template-columns: minmax(0, 600fr) minmax(0, 560fr);
  }
}
.design--onesystem #what-we-review .areas__mark {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -14px rgba(34, 30, 25, 0.6);
}
@media (min-width: 1100px) {
  .design--onesystem #what-we-review .areas__list {
    --cols: 5;
  }
  .design--onesystem #what-we-review .areas__list--n6 {
    --cols: 3;
  }
}
.design--onesystem .areas--grid.areas--photo .areas__pic img {
  aspect-ratio: 3 / 2;
}
@media (min-width: 900px) {
  .design--onesystem .areas--grid.areas--photo .areas__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: 0 clamp(2.5rem, 6vw, 5rem);
  }
  .design--onesystem .areas--grid.areas--photo .areas__head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
  }
  .design--onesystem .areas--grid.areas--photo .areas__photo {
    grid-column: 2;
    grid-row: 1;
    position: static;
    margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  }
  .design--onesystem .areas--grid.areas--photo .areas__list {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}