:root {
  --wa-font-family-body: "Inter", sans-serif;
  --wa-font-family-heading: "Rajdhani", sans-serif;
  --wa-border-radius-scale: 1.2;
}

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

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

html {
  background: var(--wa-color-surface-default);
}

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

a {
  color: inherit;
  text-underline-offset: var(--wa-space-2xs);
}

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

main {
  padding: 0;
}

section[id] {
  scroll-margin-block-start: var(--wa-space-5xl);
}

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

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

wa-page::part(header) {
  background: var(--wa-color-surface-raised);
  border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

wa-page::part(footer) {
  background: var(--wa-color-surface-lowered);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

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

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

.shell {
  inline-size: 100%;
  max-inline-size: calc(var(--wa-space-5xl) * 15);
  margin-inline: auto;
}

.site-header,
.site-footer {
  padding: var(--wa-space-s) var(--wa-space-xl);
  background: transparent;
}

.brand,
.site-top-nav__link,
.site-nav-link,
.site-footer a {
  text-decoration: none;
}

.brand img {
  inline-size: var(--wa-space-2xl);
  block-size: var(--wa-space-2xl);
}

.site-top-nav__link,
.site-footer a {
  color: var(--wa-color-text-quiet);
}

.site-top-nav__link {
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-action);
}

.site-top-nav__link:hover,
.site-top-nav__link:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--wa-color-text-normal);
}

.site-drawer-section,
.site-navigation {
  padding: var(--wa-space-l);
}

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

.site-nav-link {
  padding-block: var(--wa-space-xs);
  color: var(--wa-color-text-normal);
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-l);
  font-weight: var(--wa-font-weight-heading);
}

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

.site-section {
  padding: var(--wa-space-5xl) var(--wa-space-xl);
}

.hero {
  min-block-size: 78dvh;
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--wa-color-surface-default) 96%, transparent),
      color-mix(in srgb, var(--wa-color-surface-default) 72%, transparent)
    ),
    url("/assets/images/index-background.jpeg");
  background-position: center;
  background-size: cover;
}

.hero-copy {
  max-inline-size: 68ch;
  min-block-size: calc(78dvh - var(--wa-space-5xl) * 2);
}

.hero-lede,
.section-heading {
  max-inline-size: 68ch;
}

.hero-proof {
  padding-block-start: var(--wa-space-l);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.kicker {
  font-weight: var(--wa-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.feature-grid {
  --min-column-size: 22ch;
}

.product-layout {
  --min-column-size: 32ch;
}

.product-layout figure {
  margin: 0;
}

.product-photo {
  overflow: hidden;
  background: var(--wa-color-surface-raised);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  box-shadow: var(--wa-shadow-m);
}

.product-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.steps {
  max-inline-size: 64ch;
  padding: 0;
  margin: 0;
  list-style: none;
}

.steps li + li {
  padding-block-start: var(--wa-space-xl);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.legal-main,
.not-found-main {
  padding: var(--wa-space-4xl) var(--wa-space-xl);
}

.legal-card,
.not-found-content {
  inline-size: 100%;
  margin-inline: auto;
}

.legal-card {
  --spacing: var(--wa-space-xl);
  max-inline-size: 72ch;
}

.not-found-main {
  min-block-size: 70dvh;
}

.not-found-content {
  max-inline-size: 64ch;
}
