.form-error { grid-column: 1 / -1; margin: 0; }
.form-error:empty { display: none; }
.modal-button:disabled { opacity: 0.6; cursor: wait; }

html { scroll-behavior: smooth; }

body { padding-left: 132px; }

#overview, #faq, #release, #meet-scout, #waitlist {
  scroll-margin-top: 32px;
}

.section-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 132px;
  padding: 24px 12px;
  border-right: 1px solid var(--green);
  background: var(--cream);
}

.section-nav-title {
  padding: 0 10px 12px;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-nav a {
  padding: 12px 10px;
  border-radius: 8px;
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 180ms ease;
}

.section-nav a:hover,
.section-nav a:focus-visible {
  background: var(--orange);
}

@media (max-width: 760px) {
  body { padding-left: 0; padding-top: 64px; }
  .section-nav {
    inset: 0 0 auto;
    width: 100%;
    height: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    padding: 8px;
    border-right: none;
    border-bottom: 1px solid var(--green);
  }
  .section-nav-title { display: none; }
  .section-nav a { flex-shrink: 0; white-space: nowrap; }
  #overview, #faq, #release, #meet-scout, #waitlist {
    scroll-margin-top: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.faq {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 40px;
  color: var(--green);
}

.faq h2 {
  margin: 0 0 24px;
  text-align: center;
  font-size: clamp(24px, 4vw, 36px);
}

.faq-item {
  margin-top: 16px;
  overflow: hidden;
  border: 2px solid var(--green);
  border-radius: 12px;
  background: var(--cream);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--green);
}

.faq-item:active { transform: translateY(0); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px clamp(18px, 3vw, 32px);
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 26px; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { background: var(--orange); }
.faq-item summary:hover { background: var(--orange); }
.faq-item summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -5px;
}

.faq-item p {
  margin: 0;
  padding: 20px 24px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
}

.faq-item summary::after,
.faq-item[open] summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  transition: transform 220ms ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] p { animation: faq-reveal 250ms ease-out; }

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item summary,
  .faq-item summary::after { transition: none; }
  .faq-item:hover { transform: none; }
  .faq-item[open] p { animation: none; }
}

.release-countdown {
  color: var(--green);
  width: 100%;
  max-width: 640px;
  margin: 0 auto 24px;
  text-align: center;
}

.release-countdown h2 {
  margin: 0 0 20px;
  font-size: clamp(22px, 4vw, 32px);
}

.countdown-units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 20px);
}

.countdown-units > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 6px;
  border-radius: 12px;
  background: var(--orange);
}

.countdown-units span:first-child {
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.countdown-units span:last-child {
  font-size: clamp(11px, 2vw, 14px);
}

.success-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 18px 64px;
  background: var(--green);
  color: var(--orange);
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms ease, visibility 400ms;
}

.success-ribbon .scout-emoji {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

.success-ribbon.is-visible {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.ribbon-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 30px;
  cursor: pointer;
}

.ribbon-close:hover { background: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .success-ribbon { transition: none; }
}

:root {
  --cream: #ffffee;
  --orange: #ffd16e;
  --green: #00683e;
  --mint: #eeffee;
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
  color: var(--orange);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

input {
  background-color: var(--orange);
  color: var(--green);
  border: 2px solid var(--black);
  border-radius: 4px;
  padding: 10px;
  font: inherit;
}



input::placeholder {
  color: var(--green);
  opacity: 1;
}

input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}


body {
  min-height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: #eef2e5;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221000%22%20height%3D%221000%22%20viewBox%3D%220%200%201000%201000%22%3E%0A%3Cdefs%3E%0A%3Cg%20id%3D%22pine%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M0%200V-145%22%20stroke%3D%22%23a6af94%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0-220L-30-167H-19L-46-118H-29L-63-60Q0-42%2063-60L29-118H46L19-167H30Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M0-188V-65M0-142L-17-129M0-104L24-86%22%20fill%3D%22none%22%20stroke%3D%22%237c9980%22%20stroke-opacity%3D%22.25%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%0A%3Cg%20id%3D%22fern%22%20fill%3D%22none%22%20stroke%3D%22%23a9b99a%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%200Q-10-40%208-75M-3-15Q-30-14-30-34Q-9-34-3-15M-3-31Q20-27%2024-46Q5-48-3-31M0-45Q-20-44-20-61Q-3-62%200-45M4-60Q22-55%2026-71Q11-76%204-60%22%2F%3E%3C%2Fg%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20d%3D%22M0%20215Q140%20140%20300%20230T650%20200T1000%20220V310Q780%20260%20610%20300T250%20290T0%20310Z%22%20fill%3D%22%23e2e9d9%22%20opacity%3D%22.65%22%2F%3E%0A%3Cpath%20d%3D%22M0%20720Q180%20640%20360%20725T740%20710T1000%20700V820Q790%20760%20610%20800T260%20790T0%20810Z%22%20fill%3D%22%23e2e9d9%22%20opacity%3D%22.65%22%2F%3E%0A%3Cg%20color%3D%22%23d0ddc8%22%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(70%20260)%20scale(.9)%22%2F%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(910%20360)%20scale(1.2)%22%2F%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(395%20170)%20scale(.55)%22%2F%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(690%20690)%20scale(.65)%22%2F%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(170%20815)%20scale(.8)%22%2F%3E%3C%2Fg%3E%0A%3Cg%20color%3D%22%23b9ceb0%22%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(20%20340)%20scale(1.05)%22%2F%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(970%20420)%20scale(.85)%22%2F%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(75%20910)%20scale(1.25)%22%2F%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(875%20960)%20scale(1.1)%22%2F%3E%3C%2Fg%3E%0A%3Cg%20color%3D%22%23c5d5ba%22%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(780%20140)%20scale(.6)%22%2F%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(485%20510)%20scale(.55)%22%2F%3E%3Cuse%20href%3D%22%23pine%22%20transform%3D%22translate(515%20980)%20scale(.65)%22%2F%3E%3C%2Fg%3E%0A%3Cg%20opacity%3D%22.7%22%3E%3Cuse%20href%3D%22%23fern%22%20transform%3D%22translate(155%20500)%20rotate(-18)%22%2F%3E%3Cuse%20href%3D%22%23fern%22%20transform%3D%22translate(825%20615)%20rotate(20)%22%2F%3E%3Cuse%20href%3D%22%23fern%22%20transform%3D%22translate(340%20935)%20scale(.7)%22%2F%3E%3C%2Fg%3E%0A%3Cg%20fill%3D%22%23c8d4bb%22%3E%3Cellipse%20cx%3D%22230%22%20cy%3D%22325%22%20rx%3D%2213%22%20ry%3D%225%22%2F%3E%3Cellipse%20cx%3D%22760%22%20cy%3D%22465%22%20rx%3D%2210%22%20ry%3D%224%22%2F%3E%3Cellipse%20cx%3D%22350%22%20cy%3D%22670%22%20rx%3D%2215%22%20ry%3D%225%22%2F%3E%3Cellipse%20cx%3D%22760%22%20cy%3D%22875%22%20rx%3D%2212%22%20ry%3D%224%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 1000px 1000px;
}

.site-header,
.beta-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 1em;
}

.header-note {
  font-size: 14px;
}

.site-header img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 30px clamp(16px, 4vw, 64px) 48px;
}

.hero,
.hero2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 1400px;
  padding: clamp(32px, 6vw, 88px);
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: 36px;
  background: var(--cream);
}

.hero2-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero2-heading h2 {
  min-width: 0;
  margin: 0;
}

.whatsapp-symbol {
  flex-shrink: 0;
  width: clamp(40px, 6vw, 64px);
  height: auto;
  color: var(--green);
}

.hero {
  padding-right: max(340px, 38%);
  min-height: 340px;
}

.scout-greeting {
  position: absolute;
  top: 50%;
  right: clamp(24px, 4vw, 64px);
  transform: translateY(-50%);
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.scout-speech {
  position: relative;
  margin: 0;
  padding: 12px 16px;
  border: 2px solid var(--green);
  border-radius: 20px;
  background: var(--cream);
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.scout-speech::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: calc(50% - 7px);
  width: 12px;
  height: 12px;
  background: var(--cream);
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
}

.scout-greeting-mascot {
  width: 180px;
  height: 180px;
  object-fit: contain;
  transform: scaleX(-1);
  animation: scout-bounce 2.4s ease-in-out infinite;
}

@keyframes scout-bounce {
  0%, 100% { transform: translateY(0) rotate(-3deg) scaleX(-1); }
  50% { transform: translateY(-10px) rotate(3deg) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
  .scout-greeting-mascot { animation: none; }
}

@media (max-width: 900px) {
  .hero { padding-right: clamp(32px, 6vw, 88px); }
  .scout-greeting {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 32px auto 0;
    max-width: 100%;
  }
  .hero.hero::before {
    top: auto;
    bottom: -80px;
    right: calc(50% - 240px);
    width: 480px;
  }
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -110px;
  right: -100px;
  width: clamp(260px, 44vw, 650px);
  aspect-ratio: 1;
  background: var(--orange);
  border-radius: 50%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 32px;
  padding: 10px 16px;
  border: 1px solid var(--green);
  border-radius: 100px;
  background: var(--cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

h1 {
  margin: 0 0 40px -0.06em;
  font-size: clamp(80px, 21vw, 200px);
  font-weight: 900;
  letter-spacing: -0.085em;
  line-height: 0.9;
}

.title-dot {
  color: var(--orange);
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.hero-bottom p {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.5px;
}

.hello-badge {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-shrink: 0;
  padding: 18px 26px;
  border: 2px solid var(--orange);
  border-radius: 100px;
  background: var(--green);
  font-size: 20px;
  font-weight: 700;
  transform: rotate(-5deg);
}

.hello-badge span {
  font-size: 28px;
  line-height: 1;
}

.beta-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: 1000px;
}

.beta-image {
  justify-self: center;
  display: block;
  width: 20em;
  max-width: 100%;
  height: auto;
}

.features-list {
  display: grid;
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.features-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.5;
}

.features-list li span {
  flex-shrink: 0;
  font-size: 1.2em;
}

.beta-facts {
  padding: 2em;
  color:var(--green);
  border: 2px solid var(--orange);
  border-radius: 10px;
  background: var(--orange);
}

.beta-facts h2 {
  margin: 0 0 24px;
  font-size: clamp(26px, 3vw, 40px);
}

.beta-facts ul {
  margin: 0;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.6;
}

.beta-facts li + li {
  margin-top: 16px;
}

.overview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}

.beta-button.whatsapp-button {
  width: min(100%, 560px);
  min-height: 80px;
  padding: 22px 28px;
  border: 2px solid var(--green);
  border-radius: 16px;
  background: var(--green);
  color: var(--cream);
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 6px 0 var(--orange);
}

.beta-button.whatsapp-button:hover {
  background: var(--cream);
  color: var(--green);
}

.beta-button.whatsapp-button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 5px;
}

.whatsapp-button svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.messaging-coming-soon {
  margin-top: 20px;
  text-align: center;
  color: var(--green);
  font-weight: 700;
}

.beta-button {
  cursor: pointer;
  padding: 1em;
  border-radius: 10px;
  border: none;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 16px;
  font-weight: 1000;
  background-color: var(--orange);
  color: var(--green);
}

.modal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 280px);
  min-height: 52px;
  padding: 14px 32px;
  border: 2px solid var(--green);
  border-radius: 12px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  background-color: var(--green);
  color: #fff;
  cursor: pointer;
}

.modal-button:hover {
  
}

.beta-modal {
  position: fixed;
  width: min(560px, calc(100% - 32px));
  height: min(500px, 85svh);
  max-height: 85svh;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 30px;
  color: var(--green);
  background: var(--cream);
}

.beta-modal::backdrop {
  background: rgb(0 0 0 / 40%);
}

body:has(.beta-modal[open]) {
  overflow: hidden;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 40em;
  background: var(--orange);
  color: var(--green);
  font-size: 30px;
  cursor: pointer;
}

.modal-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-y: auto;
  padding: 64px clamp(24px, 5vw, 50px) 40px;
  justify-content: safe center;
}

.waitlist-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 460px;
  margin: 24px auto 0;
}

.waitlist-form input {
  width: 100%;
  min-width: 0;
  background-color: var(--green);
  color: #fff;
  border-color: var(--green);
}

.waitlist-form input::placeholder {
  color: #fff;
}

.waitlist-checkbox {
  grid-column: 1 / -1;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.waitlist-checkbox input {
  appearance: none;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--green);
  border-radius: 4px;
  background: var(--green);
  cursor: pointer;
}

.waitlist-checkbox input:checked::before {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.waitlist-form button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: center;
}

@media (max-width: 480px) {
  .waitlist-form { grid-template-columns: minmax(0, 1fr); }
}

.modal-content h2 {
  margin: 0;
  font-size: clamp(24px, 5vw, 32px);
}

.site-footer {
  flex-wrap: wrap;
  background-color: var(--orange);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px clamp(24px, 5vw, 80px);
  font-size: 13px;
}

.footer-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.policy-modal {
  height: min(680px, 85svh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.policy-modal .modal-close {
  position: sticky;
  top: 15px;
  margin: 15px 15px -55px auto;
  z-index: 1;
}

.policy-content {
  justify-content: flex-start;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.policy-content h2 { padding-right: 24px; }
.policy-content h3 { margin: 24px 0 8px; font-size: 18px; }
.policy-content p { margin: 0 0 12px; }
.policy-content .policy-updated { margin-top: 12px; font-size: 13px; }
.policy-modal .modal-close:focus-visible { outline-color: var(--green); }

.footer-beta-button {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.footer-beta-button:hover {
  text-decoration: underline;
}

.footer-beta-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--green);
  border-radius: 14px;
  font-size: 34px;
  line-height: 1;
  transform: rotate(-10deg);
}

a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 6px;
}

button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

@media (min-width: 1600px) {
  h1 {
    font-size: 300px;
  }
}

@media (max-width: 700px) {
  .beta-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .site-header {
    padding: 24px;
  }

  .header-note {
    display: none;
  }

  main {
    padding-top: 12px;
    padding-bottom: 32px;
  }

  .hero,
  .hero2 {
    padding: 40px 24px;
    border-radius: 24px;
  }

  .hero::before {
    top: auto;
    right: calc(50% - 240px);
  }

  .eyebrow {
    margin-bottom: 48px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  h1 {
    margin-bottom: 36px;
  }

  .hero-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 32px;
  }

  .hello-badge {
    padding: 14px 22px;
    font-size: 18px;
  }

  .site-footer {
    padding-right: 24px;
    padding-left: 24px;
    font-size: 11px;
  }
}