:root {

  --sys-paper:   #FFFFFF;
  --sys-tint:    #F7F5F3;
  --sys-ink:     #2D2A26;

  --sys-sec:     #6B6560;
  --sys-ter:     #777169;
  --sys-hair:    #E5DFD5;

  --sys-green:   #3AB648;
  --sys-forest:  #2C5E44;

  --sys-wrap:    1240px;
  --sys-gutter:  clamp(1.5rem, 4vw, 2.5rem);
  --sys-band:    clamp(3.5rem, 8vw, 6.5rem);
  --sys-radius:  14px;
  --sys-radius-s: 9px;
}

body { background: var(--sys-paper); }

#cover, #problem, #howitworks, #evidence, #bigger, #partner, #whatis,
#team, #flywheel, #catalyst, #trajectory, #close, #docs {
  background: var(--sys-paper);
}

#problem, #howitworks, #evidence, #bigger, #partner, #whatis, #team,
#flywheel, #catalyst, #trajectory, #close, #docs {
  border-top: 1px solid var(--sys-green);
}

.wi, .fw, .pb, .hw, .ev, .bg, .pe, .tm, .ct, .tj, .cl, .dr, .cvx {
  max-width: var(--sys-wrap);
  margin-inline: auto;
  padding-inline: var(--sys-gutter);
}

[class$="-eyebrow"] {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sys-green);
}

section [class$="-head"], section .pe-h {
  color: var(--sys-ink);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
}
section#cover [class$="-head"], section#close [class$="-head"] {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  letter-spacing: -.035em;

  line-height: 1.08;
}
[class$="-lede"] {
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.55;
}

.sys-card {
  background: var(--sys-tint);
  border: 0;
  border-radius: var(--sys-radius);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  min-width: 0;
}
.sys-card > h3, .sys-card-h {
  margin: 0 0 .75rem;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--sys-ink);
}
.sys-card p, .sys-card-p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--sys-sec);
}
.sys-card-status {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--sys-hair);
  font-size: .82rem;
  color: var(--sys-ter);
}

.sys-badge {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sys-green);
  color: #FFFFFF;
  font-size: .78rem;
  font-weight: 700;
}

.sys-panel {
  margin: 1.4rem 0 0;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  background: var(--sys-green);
  color:#fff;
}
.sys-panel-k {
  margin: 0 0 .6rem;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:rgba(255,255,255,.86);
}
.sys-panel-rows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
}
.sys-panel-rows > div {
  padding: .8rem .9rem;
  border-radius: var(--sys-radius-s);
  background:rgba(255,255,255,.12);
}

.sys-panel-rows > div.is-us {
  background: #FFFFFF;
  color:var(--greenT, #3AB648);
}
.sys-panel-rows b {
  display: block;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
.sys-panel-rows span {
  display: block;
  margin-top: .25rem;
  font-size: .84rem;
  line-height: 1.35;
  opacity: .92;
}
.sys-panel-n {
  margin: .9rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color:#FBF8F2;
}
@media (max-width: 760px) {
  .sys-panel-rows { grid-template-columns: 1fr 1fr; }
}

.sys-rise {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease var(--d, .2s),
              transform .6s cubic-bezier(.2,.7,.2,1) var(--d, .2s);
}
.in .sys-rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sys-rise { opacity: 1; transform: none; transition: none; }
}