/* Figtree, self-hosted. Open Font Licence. One variable file covers every
   weight used here. Self-hosted rather than loaded from Google so that no
   visitor request ever reaches a third party. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-variable.woff2") format("woff2");
}

/* ============================================================
   Switch Power Co
   Palette and construction come from the wordmark itself:
   true black slabs, true white slabs, volt lime used twice.
   ============================================================ */

:root {
  --ink:        #000000;
  --paper:      #FFFFFF;
  --volt:       #D5FD52;
  --volt-deep:  #8FB81E;   /* rules + markers on white; never body text */
  --grey:       #6B6B6B;   /* muted on white  */
  --grey-ink:   #A3A3A3;   /* muted on black  */
  --hair:       rgba(0,0,0,.14);
  --hair-ink:   rgba(255,255,255,.18);

  --measure:    62ch;
  --gutter:     clamp(1.25rem, 5vw, 3rem);
  --slab-y:     clamp(4.5rem, 10vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--volt);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--volt);
  color: var(--ink);
  padding: .75rem 1.25rem;
  font-weight: 800;
  z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- structure ---------- */

.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.slab { padding-block: var(--slab-y); }
.slab--ink   { background: var(--ink);   color: var(--paper); }
.slab--paper { background: var(--paper); color: var(--ink);   }
.slab--volt  { background: var(--volt);  color: var(--ink);   }

/* ---------- nav ---------- */

.nav {
  background: var(--ink);
  padding-block: 1.5rem;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav__logo { display: block; }
.nav__logo img { width: clamp(7.5rem, 17vw, 10.5rem); }

/* ---------- type ---------- */

.display {
  font-size: clamp(3.1rem, 11vw, 8rem);
  line-height: .9;
  letter-spacing: -.045em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
.display--sm { font-size: clamp(2.6rem, 8vw, 5.5rem); }

/* the lime full stop echoes the dot on the i in the wordmark */
.dot { color: var(--volt); }
.dot--ink { color: var(--ink); }

.h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0 0 1.5rem;
  max-width: 20ch;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.55;
  max-width: var(--measure);
  color: var(--grey);
  margin: 0 0 1.25rem;
}
.lede--ink  { color: var(--grey-ink); }
.lede--volt { color: rgba(0,0,0,.72); }

.fineprint {
  font-size: .9375rem;
  color: var(--grey);
  max-width: var(--measure);
  margin: 2.5rem 0 0;
}
.fineprint--volt { color: rgba(0,0,0,.6); }

/* ---------- buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2rem;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--sm { padding: .7rem 1.4rem; font-size: .9688rem; }

.btn--volt { background: var(--volt); color: var(--ink); }
.btn--volt:hover { background: var(--paper); }

.btn--ghost { border-color: rgba(255,255,255,.35); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--paper); color: var(--ink); }

.btn--outline-ink { border-color: rgba(0,0,0,.4); color: var(--ink); }
.btn--outline-ink:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* ---------- hero ---------- */

.slab.hero { padding-top: clamp(3rem, 7vw, 5.5rem); }

.hero__sub {
  max-width: 46ch;
  font-size: 1.125rem;
  color: var(--grey-ink);
  margin: 0;
}

/* ---------- the switch ---------- */

.flip {
  margin: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--hair-ink);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.flip__control {
  display: flex;
  align-items: center;
  gap: clamp(.875rem, 2.5vw, 1.5rem);
  flex-wrap: wrap;
}

.flip__label {
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: -.02em;
  color: var(--grey-ink);
  transition: color .2s ease;
}
.flip__label[data-side="off"] { color: var(--paper); }
.flip.is-on .flip__label[data-side="off"] { color: var(--grey-ink); }
.flip.is-on .flip__label[data-side="on"]  { color: var(--volt); }

.switch {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: none;
}
.switch__track {
  /* Everything below is derived from these three, so the knob always lands
     flush with the same inset it starts from. */
  --track-w: clamp(6.5rem, 15vw, 9rem);
  --track-h: clamp(3.25rem, 7.5vw, 4.5rem);
  --track-bd: 2px;
  --track-pad: .375rem;

  display: block;
  position: relative;
  width: var(--track-w);
  height: var(--track-h);
  border-radius: 999px;
  border: var(--track-bd) solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.06);
  transition: background-color .25s ease, border-color .25s ease;
}
.switch__knob {
  position: absolute;
  top: var(--track-pad);
  left: var(--track-pad);
  width: calc(var(--track-h) - (2 * var(--track-bd)) - (2 * var(--track-pad)));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .28s cubic-bezier(.4,.9,.3,1.1), background-color .25s ease;
}
.flip.is-on .switch__track { background: rgba(213,253,82,.16); border-color: var(--volt); }
.flip.is-on .switch__knob {
  background: var(--volt);
  /* inner width - knob width - 2 * pad, which reduces to exactly this */
  transform: translateX(calc(var(--track-w) - var(--track-h)));
}

.flip__panel {
  display: grid;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.flip__text {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--grey-ink);
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.flip__text.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.flip__text[data-state="on"].is-shown { color: var(--paper); }

/* ---------- tenets (culture) ---------- */

.tenets {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
}
.tenet {
  display: grid;
  gap: .5rem 3rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--hair);
}
.tenet:last-child { border-bottom: 1px solid var(--hair); }
.tenet__h {
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 0;
  position: relative;
}
.tenet p {
  margin: 0;
  color: var(--grey);
  max-width: var(--measure);
}

@media (min-width: 52rem) {
  .tenet { grid-template-columns: 5fr 7fr; }
}

/* ---------- rhythm (the week) ---------- */

.rhythm {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}
.rhythm__row {
  display: grid;
  gap: .375rem 3rem;
  padding-block: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hair-ink);
}
.rhythm__row:last-child { border-bottom: 1px solid var(--hair-ink); }
.rhythm dt {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -.02em;
  color: var(--volt);
}
.rhythm dd {
  margin: 0;
  color: var(--grey-ink);
  max-width: var(--measure);
}

@media (min-width: 52rem) {
  .rhythm__row { grid-template-columns: 4fr 8fr; }
}

/* ---------- ladder (growth) ---------- */

.ladder {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 2.25rem;
}
.rung {
  padding-top: 1.5rem;
  border-top: 3px solid var(--volt-deep);
  position: relative;
}
.rung__h {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .375rem;
}
.rung p { margin: 0; color: var(--grey); }

@media (min-width: 52rem) {
  .ladder { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  /* the rules rise, so the progression is visible without numbering it */
  .rung:nth-child(1) { margin-top: 3rem; }
  .rung:nth-child(2) { margin-top: 1.5rem; }
  .rung:nth-child(3) { margin-top: 0; }
}

/* ---------- steps (joining: a genuine sequence) ---------- */

.steps {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem 2rem;
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--hair-ink);
}
.step:last-child { border-bottom: 1px solid var(--hair-ink); }
.step__n {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--volt);
  font-variant-numeric: tabular-nums;
}
.step__h {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 .375rem;
}
.step__body p { margin: 0; color: var(--grey-ink); max-width: var(--measure); }

/* ---------- partner ---------- */

.partner .lede + .lede { margin-top: 1.5rem; }

/* ---------- footer ---------- */

.foot { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--hair-ink); }
.foot__inner {
  display: grid;
  gap: 2rem;
  align-items: end;
}
.foot__brand { display: grid; gap: 1.5rem; justify-items: start; }
.foot__logo { width: clamp(8rem, 20vw, 11rem); }

/* Continuum's mark sits under ours and is held deliberately smaller than the
   Switch wordmark in both width and rendered height. Do not enlarge it past
   the Switch logo, and do not recolour it — see their brand guide. */
/* Spacing lives on the wrapper so the <img> box measures the artwork itself,
   which keeps the "never larger than the Switch wordmark" rule verifiable. */
.foot__partner {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair-ink);
}
/* The "POWERED BY" inside Continuum's lock-up renders ~3px tall at any size
   that stays under the Switch wordmark, and the brand guide forbids altering
   the artwork. So the credit is also set as real text, which is legible,
   selectable and readable by screen readers. */
.foot__partner-label {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--volt);
}
.foot__partner-logo { width: clamp(6.5rem, 15vw, 8.5rem); }

.foot__meta { margin: 0; color: var(--grey-ink); font-size: .9375rem; line-height: 1.7; }
.foot__copy { color: #6F6F6F; }
.foot__links { display: inline-flex; flex-wrap: wrap; gap: 1.25rem; padding-block: .5rem; }

@media (min-width: 52rem) {
  .foot__inner { grid-template-columns: auto 1fr; gap: 3rem; justify-items: start; }
  .foot__meta { text-align: right; justify-self: end; }
  .foot__links { justify-content: flex-end; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Homeowner page components
   ============================================================ */

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.nav__link {
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  color: var(--paper);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
.nav__link:hover { border-bottom-color: var(--volt); }

.hero__lede { margin-top: 2rem; }

.sub-h {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: clamp(3rem, 6vw, 4rem) 0 0;
  max-width: 24ch;
}

.fineprint--ink { color: var(--grey-ink); }

/* then / now */

.compare {
  display: grid;
  gap: 0;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  border-top: 1px solid var(--hair-ink);
  border-bottom: 1px solid var(--hair-ink);
}
.compare__col { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.compare__col + .compare__col { border-top: 1px solid var(--hair-ink); }
.compare__h {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .625rem;
  color: var(--grey-ink);
}
.compare__col--now .compare__h { color: var(--volt); }
.compare__col p { margin: 0; max-width: var(--measure); color: var(--grey-ink); }
.compare__col--now p { color: var(--paper); }

@media (min-width: 52rem) {
  .compare { grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); }
  .compare__col + .compare__col { border-top: 0; }
  .compare__col--now { border-left: 1px solid var(--hair-ink); padding-left: clamp(2rem, 5vw, 4rem); }
}

/* rhythm on a white slab */

.rhythm--paper .rhythm__row { border-top-color: var(--hair); }
.rhythm--paper .rhythm__row:last-child { border-bottom-color: var(--hair); }
.rhythm--paper dt { color: var(--ink); }
.rhythm--paper dd { color: var(--grey); }

/* financing table */

.table-hint {
  display: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 .75rem;
  font-size: .9375rem;
  color: var(--grey);
}
@media (max-width: 52rem) {
  .table-hint { display: block; }
  .table-scroll { margin-top: 0; }
}

.table-scroll {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* fades the right edge so it reads as scrollable rather than clipped */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
@media (min-width: 52rem) {
  .table-scroll { -webkit-mask-image: none; mask-image: none; }
}
.table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
}
.table__caption {
  text-align: left;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1rem;
  padding-bottom: .875rem;
  color: var(--grey);
}
.table thead th {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.02em;
  padding: 0 1.25rem 1rem 0;
  border-bottom: 3px solid var(--ink);
  vertical-align: bottom;
}
.table tbody th {
  font-weight: 800;
  color: var(--ink);
  width: 22%;
  padding: 1.125rem 1.25rem 1.125rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.table tbody td {
  color: var(--grey);
  padding: 1.125rem 1.25rem 1.125rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }

/* questions to ask */

.qa {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  max-width: 68ch;
}
.qa li {
  position: relative;
  padding: 1.125rem 0 1.125rem 2.25rem;
  border-top: 1px solid var(--hair-ink);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  letter-spacing: -.015em;
}
.qa li:last-child { border-bottom: 1px solid var(--hair-ink); }
/* the mark on the i, reused as a bullet */
.qa li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.65rem;
  width: .6875rem;
  height: .6875rem;
  border-radius: 50%;
  background: var(--volt);
}

.foot__link {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 2px solid var(--volt);
  padding-bottom: 1px;
}
.foot__link:hover { color: var(--volt); }

/* ---------- small screens ---------- */

@media (max-width: 34rem) {
  /* Side by side the logo, the cross-audience link and the CTA don't fit
     in 375px without wrapping every label, so give them their own row. */
  .nav__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .nav__links { width: 100%; }
  .actions .btn { width: 100%; }
}

.nav__link, .btn { white-space: nowrap; }

/* split block on a white slab */

.compare--paper {
  border-top-color: var(--hair);
  border-bottom-color: var(--hair);
}
.compare--paper .compare__col + .compare__col { border-top-color: var(--hair); }
.compare--paper .compare__h { color: var(--grey); }
.compare--paper .compare__col--now .compare__h { color: var(--volt-deep); }
.compare--paper .compare__col p { color: var(--grey); }
.compare--paper .compare__col--now p { color: var(--ink); }

@media (min-width: 52rem) {
  .compare--paper .compare__col--now { border-left-color: var(--hair); }
}

/* prose that follows a split block needs its own top margin, since the
   .lede + .lede adjacency no longer applies across it */
.compare + .lede { margin-top: clamp(2rem, 4vw, 2.75rem); }


.inline-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--volt-deep);
  padding-bottom: 1px;
}
.inline-link:hover { border-bottom-color: var(--ink); }


/* Continuum's mark inside the split block. Same rule as the footer: never
   larger than the Switch wordmark, never recoloured. */
.compare__mark {
  width: clamp(5.5rem, 12vw, 7rem);
  margin-bottom: 1rem;
}

/* Switch's own mark in the split block, paired with Continuum's. Sized so the
   Switch wordmark always reads larger than the Continuum lock-up beside it. */
.compare__mark--switch { width: clamp(6.5rem, 15vw, 8.5rem); }

/* table on a dark slab */

.table--ink thead th { border-bottom-color: var(--paper); color: var(--paper); }
.table--ink tbody th { color: var(--paper); border-bottom-color: var(--hair-ink); }
.table--ink tbody td { color: var(--grey-ink); border-bottom-color: var(--hair-ink); }
.table--ink .table__caption { color: var(--grey-ink); }

.inline-link--ink { border-bottom-color: var(--volt); }
.inline-link--ink:hover { border-bottom-color: var(--paper); }

/* four options rather than three, so give the columns room to breathe */
.table { min-width: 40rem; }
.table--wide { min-width: 52rem; }

/* Callout for a fact that changes the decision, not just informs it. */

.callout {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 2px solid var(--ink);
  border-left-width: 10px;
  border-left-color: var(--volt-deep);
}
.callout__h {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0 0 1rem;
  max-width: 28ch;
}
.callout p { margin: 0 0 1rem; max-width: var(--measure); color: var(--grey); }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); font-weight: 800; }
.callout__note { font-size: .9375rem; }