:root {
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

  --font-size-base: 1rem;
  --font-size-biggish: var(--s2);
  --font-size-big: clamp(var(--s3), 6vw, var(--s4));

  box-sizing: border-box;
  line-height: 1.5;
}

p {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Hind Madurai";
  line-height: 1;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
hr,
dd {
  margin-block-end: 0;
  margin-block-start: 0;
}

p {
  font-size: var(--s0);
}

h1 {
  font-size: var(--font-size-big);
}

h2 {
  font-size: var(--font-size-biggish);
}

a {
  text-decoration: none;
  color: inherit;
  font-family: "Montserrat";
}

a:hover {
  text-decoration: underline;
}

.header {
  background: #f3f3f3;
  padding-block: var(--s3);
  padding-inline: clamp(var(--s0), 4vw, var(--s2));
  margin-block: 0;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--s1);
}
nav li {
  font-weight: 700;
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--space, var(--s4));
}

.stack-sm > * + * {
  margin-block-start: var(--space, var(--s1));
}

.center-md {
  /* --measure: 50%; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-lg {
  --measure: 85vw;
}

.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
}

.nav-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
  justify-content: flex-end;
  align-items: center;
  list-style-type: none;
}

@media (max-width: 40rem) {
  .nav-cluster {
    display: none;
  }

  .hero-switcher {
    flex-direction: column-reverse;
    gap: var(--s1);
  }
}

.hero-banner {
  width: 100%;
}

.hero-banner-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--s-2);
}

.hero h1 {
  margin-block-start: clamp(
    calc(1 * var(--s0)),
    calc(1 * 4vh),
    calc(1 * var(--s3))
  );
}

.hero p {
  width: clamp(500px, 65%, 800px);
  max-width: 100%;
}

.switcher {
  margin-block: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
}

.switcher-sm {
  --breakpoint: 100rem;
}

.switcher > * {
  --breakpoint: 30rem;
  flex-grow: 1;
  flex-basis: calc((var(--breakpoint) - 100%) * 999);
}

.mobile-img {
  display: block;
  height: 70vh;
  aspect-ratio: 414 / 896;
  object-fit: cover;
}

.signup-form > :nth-child(2) {
  flex-grow: 3;
}

.signup-form > :nth-child(1) {
  flex-grow: 2;
}

.footer-socials {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.footer-socials i {
  font-size: 1.5em;
  color: black;
}

.email-signup {
  display: flex;

  /* justify-content: center;
  align-items: center; */
  /* --measure: 100%;
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
  text-align: center; */
}

/* Form Styles */

.form-group {
  margin-bottom: 24px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
}

input,
textarea,
select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: var(--s0);
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #666;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.button {
  background: #000;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-block: var(--s-1);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--s0);
  transition: opacity 0.2s;
}

.button:hover {
  opacity: 0.9;
}

.button:active {
  opacity: 0.8;
}

button.secondary {
  background: #eee;
  color: #333;
}

.box {
  padding: 1rem;
}