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

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--wa-color-surface-default);
  overflow-x: clip;
}

body {
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-default);
  font-family: var(--wa-font-family-body);
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

h1,
h2,
h3,
p {
  margin: 0;
}

main,
wa-page > main {
  padding: 0;
}

wa-page::part(base),
wa-page::part(body),
wa-page::part(main-content) {
  background: var(--wa-color-surface-default);
}

wa-page::part(body),
wa-page::part(main-content) {
  gap: 0;
}

wa-page::part(main-content),
wa-page::part(header),
wa-page::part(footer) {
  padding: 0;
}

wa-page::part(header) {
  background: var(--wa-color-neutral-fill-loud);
  border-block-end: var(--wa-border-width-m) solid var(--wa-color-brand-fill-loud);
}

wa-page[view="desktop"]::part(navigation),
wa-page[view="desktop"]::part(navigation-header) {
  display: none;
}

wa-page::part(drawer__dialog),
wa-page::part(drawer__header),
wa-page::part(drawer__body),
wa-page::part(drawer__footer) {
  color: var(--wa-color-neutral-on-loud);
  background-color: var(--wa-color-neutral-fill-loud);
}

wa-page::part(drawer__close-button__base) {
  color: var(--wa-color-neutral-on-loud);
  background-color: transparent;
}

wa-page::part(drawer__close-button__base):hover {
  color: var(--wa-color-brand-fill-loud);
  background-color: color-mix(in oklab, var(--wa-color-neutral-on-loud) 10%, transparent);
}

wa-page[view="desktop"] .wa-mobile-only,
wa-page[view="mobile"] .wa-desktop-only {
  display: none;
}

.page-boundary {
  inline-size: min(100%, calc(var(--wa-space-5xl) * 15));
  margin-inline: auto;
}

.site-header {
  padding-block: var(--wa-space-s);
  padding-inline: var(--wa-space-xl);
  color: var(--wa-color-neutral-on-loud);
  background: var(--wa-color-neutral-fill-loud);
}

.brand-link {
  display: inline-block;
  inline-size: max-content;
}

.brand-logo {
  inline-size: min(calc(var(--wa-space-5xl) * 3.7), 48vw);
}

.site-header__actions {
  flex: 0 0 auto;
}

.site-top-nav__link {
  color: var(--wa-color-neutral-on-loud);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-action);
  padding-block: var(--wa-space-3xs);
  border-block-end: var(--wa-border-width-s) solid transparent;
}

.site-top-nav__link:hover,
.site-top-nav__link:focus-visible {
  color: var(--wa-color-brand-fill-loud);
  border-color: var(--wa-color-brand-fill-loud);
}

.site-drawer-section,
.site-navigation {
  color: var(--wa-color-neutral-on-loud);
  background-color: var(--wa-color-neutral-fill-loud);
  padding: var(--wa-space-l);
}

.drawer-summary {
  max-inline-size: 34ch;
  color: var(--wa-color-neutral-70);
}

.site-navigation {
  padding-block: var(--wa-space-s);
}

.drawer-actions {
  margin-block-start: var(--wa-space-l);
}

.drawer-actions wa-divider {
  --color: var(--wa-color-neutral-border-loud);
}

.site-nav-link {
  color: var(--wa-color-neutral-on-loud);
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-l);
  padding-block: var(--wa-space-xs);
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  color: var(--wa-color-brand-fill-loud);
}

.hero {
  min-block-size: 78dvh;
  padding-block: var(--wa-space-5xl);
  padding-inline: var(--wa-space-xl);
  color: var(--wa-color-neutral-on-loud);
  background-color: var(--wa-color-neutral-fill-loud);
  background-image:
    linear-gradient(
      90deg,
      var(--wa-color-neutral-fill-loud),
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 88%, transparent) 48%,
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 24%, transparent)
    ),
    url("/assets/index-background.webp");
  background-position: center;
  background-size: cover;
}

.hero-content {
  min-block-size: calc(78dvh - (var(--wa-space-5xl) * 2));
}

.hero-copy {
  max-inline-size: 66ch;
}

.hero h1 {
  max-inline-size: 13ch;
  color: var(--wa-color-neutral-on-loud);
  line-height: var(--wa-line-height-condensed);
}

.hero h1 span {
  display: block;
  color: var(--wa-color-brand-fill-loud);
}

.hero-lead {
  max-inline-size: 62ch;
  color: var(--wa-color-neutral-on-loud);
  line-height: var(--wa-line-height-expanded);
}

.hero-proof {
  max-inline-size: 70ch;
  padding-block-start: var(--wa-space-l);
  color: var(--wa-color-neutral-on-loud);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud);
}

.hero-proof wa-icon {
  color: var(--wa-color-brand-fill-loud);
}

.request-band {
  padding-block: var(--wa-space-3xl);
  padding-inline: var(--wa-space-xl);
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
}

.request-band .section-kicker {
  color: var(--wa-color-brand-on-loud);
}

.request-band__heading {
  max-inline-size: 72ch;
}

.request-grid {
  --min-column-size: 24ch;
}

.request-item {
  padding-block-start: var(--wa-space-m);
  border-block-start: var(--wa-border-width-m) solid var(--wa-color-brand-on-loud);
}

.request-icon,
.icon-badge,
.step-number,
.equipment-icon {
  flex: 0 0 auto;
  inline-size: var(--wa-space-2xl);
  block-size: var(--wa-space-2xl);
  border-radius: var(--wa-border-radius-circle);
}

.request-icon {
  color: var(--wa-color-brand-fill-loud);
  background: var(--wa-color-brand-on-loud);
}

.request-item h3,
.request-item p {
  color: var(--wa-color-brand-on-loud);
}

.request-item p {
  line-height: var(--wa-line-height-expanded);
}

.site-section {
  padding-block: var(--wa-space-4xl);
  padding-inline: var(--wa-space-xl);
  background: var(--wa-color-surface-default);
}

.site-section--lowered {
  background: var(--wa-color-surface-lowered);
  border-block: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.section-heading {
  max-inline-size: 72ch;
}

.section-kicker {
  color: var(--wa-color-text-link);
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-action);
  letter-spacing: var(--wa-letter-spacing-expanded);
  text-transform: uppercase;
}

.section-lead {
  max-inline-size: 66ch;
  color: var(--wa-color-text-quiet);
  line-height: var(--wa-line-height-expanded);
}

.benefit-grid,
.process-grid {
  --min-column-size: 26ch;
}

.benefit-card,
.process-card {
  --spacing: var(--wa-space-xl);
  block-size: 100%;
}

.benefit-card p,
.process-card p {
  color: var(--wa-color-text-quiet);
  line-height: var(--wa-line-height-expanded);
}

.icon-badge {
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
  font-size: var(--wa-font-size-l);
}

.step-number {
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-s);
}

.equipment-band {
  padding-block: var(--wa-space-4xl);
  padding-inline: var(--wa-space-xl);
  color: var(--wa-color-neutral-on-loud);
  background: var(--wa-color-neutral-fill-loud);
  border-block-start: var(--wa-border-width-l) solid var(--wa-color-warning-fill-loud);
}

.equipment-layout,
.faq-layout {
  --min-column-size: 34ch;
}

.equipment-band h2 {
  color: var(--wa-color-neutral-on-loud);
}

.equipment-band .section-kicker {
  color: var(--wa-color-brand-fill-loud);
}

.equipment-band .section-lead {
  color: var(--wa-color-neutral-on-loud);
}

.equipment-list {
  --min-column-size: 22ch;
  padding: 0;
  margin: 0;
  list-style: none;
}

.equipment-item {
  padding: var(--wa-space-m);
  color: var(--wa-color-neutral-on-loud);
  background: color-mix(in oklab, var(--wa-color-neutral-on-loud) 8%, transparent);
  border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud);
  border-radius: var(--wa-border-radius-m);
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-s);
}

.equipment-icon {
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-m);
  font-size: var(--wa-font-size-l);
}

.faq-item {
  --spacing: var(--wa-space-l);
}

.faq-item p {
  color: var(--wa-color-text-quiet);
  line-height: var(--wa-line-height-expanded);
}

.cta-band {
  padding-block: var(--wa-space-4xl);
  padding-inline: var(--wa-space-xl);
  color: var(--wa-color-neutral-on-loud);
  background:
    linear-gradient(
      135deg,
      var(--wa-color-neutral-fill-loud),
      color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-warning-fill-loud) 18%)
    );
  border-block-start: var(--wa-border-width-l) solid var(--wa-color-brand-fill-loud);
}

.cta-copy {
  max-inline-size: 72ch;
}

.cta-band h2 {
  color: var(--wa-color-neutral-on-loud);
}

.cta-band .section-kicker {
  color: var(--wa-color-brand-fill-loud);
}

.cta-band p:not(.section-kicker) {
  color: var(--wa-color-neutral-on-loud);
}

.site-footer {
  padding-block: var(--wa-space-3xl) var(--wa-space-xl);
  padding-inline: var(--wa-space-xl);
  color: var(--wa-color-neutral-on-loud);
  background: var(--wa-color-neutral-fill-loud);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud);
}

.footer-layout {
  --min-column-size: 24ch;
}

.footer-logo {
  inline-size: calc(var(--wa-space-5xl) * 3);
}

.site-footer p {
  max-inline-size: 42ch;
}

.footer-heading {
  color: var(--wa-color-brand-fill-loud);
  font-size: var(--wa-font-size-m);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--wa-color-brand-fill-loud);
}

.footer-bottom {
  margin-block-start: var(--wa-space-3xl);
  padding-block-start: var(--wa-space-l);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud);
}

.not-found-main {
  background: var(--wa-color-surface-lowered);
}

.not-found-section {
  min-block-size: 70dvh;
  padding-block: var(--wa-space-5xl);
  padding-inline: var(--wa-space-xl);
}

.not-found-card {
  --spacing: var(--wa-space-2xl);
  max-inline-size: 68ch;
  margin-inline: auto;
}

wa-page[view="mobile"] .site-header {
  padding-inline: var(--wa-space-m);
}

wa-page[view="mobile"] .site-header__actions {
  gap: var(--wa-space-xs);
}

wa-page[view="mobile"] .brand-logo {
  inline-size: min(calc(var(--wa-space-5xl) * 2.7), 62vw);
}

wa-page[view="mobile"] .hero {
  min-block-size: auto;
  padding-block: var(--wa-space-4xl);
  padding-inline: var(--wa-space-m);
  background-image:
    linear-gradient(
      90deg,
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 94%, transparent),
      color-mix(in oklab, var(--wa-color-neutral-fill-loud) 68%, transparent)
    ),
    url("/assets/index-background.webp");
  background-position: 56% center;
}

wa-page[view="mobile"] .hero-content {
  min-block-size: auto;
}

wa-page[view="mobile"] .hero h1 {
  font-size: var(--wa-font-size-3xl);
}

wa-page[view="mobile"] .hero-lead {
  font-size: var(--wa-font-size-m);
}

wa-page[view="mobile"] .hero-proof {
  font-size: var(--wa-font-size-s);
}

wa-page[view="mobile"] .request-band,
wa-page[view="mobile"] .site-section,
wa-page[view="mobile"] .equipment-band,
wa-page[view="mobile"] .cta-band,
wa-page[view="mobile"] .site-footer,
wa-page[view="mobile"] .not-found-section {
  padding-inline: var(--wa-space-m);
}