@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

:root {
  --ink: #1e230e;
  --ink-soft: #3f4931;
  --muted: #66705a;
  --paper: #f6f8f1;
  --surface: #ffffff;
  --border: #dfe4d9;
  --border-strong: #c6d0b9;
  --bordeaux: #5e9212;
  --bordeaux-dark: #416a0c;
  --rose: #90d132;
  --green: #5e9212;
  --green-hover: #6ca916;
  --green-dark: #315408;
  --bad: #b33a2b;
  --shadow: 0 28px 80px rgb(30 35 14 / 10%), 0 8px 24px rgb(30 35 14 / 5%);
  --font-body: "Hind", Arial, sans-serif;
  --font-display: "Vollkorn", Georgia, serif;
  --font-label: "Hind", Arial, sans-serif;
}

html,
body {
  font-family: var(--font-body);
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(
      circle at 100% 0%,
      rgb(144 209 50 / 13%),
      transparent 34rem
    ),
    linear-gradient(135deg, rgb(255 255 255 / 80%), rgb(241 244 235 / 92%));
  background-attachment: fixed;
}

.workshop-nav {
  background-image: linear-gradient(
    95deg,
    #cf5134 0%,
    #df755a 48%,
    #cf5134 100%
  );
}

.workshop-nav__logo {
  width: 164px;
  height: 30px;
  flex-basis: 164px;
}

.workshop-nav__logo img,
.site-footer__brand img {
  object-fit: contain;
  object-position: left center;
}

.workshop-nav__title {
  color: #ffffff;
}

.funnel-steps {
  background: linear-gradient(
    112deg,
    #416a0c 0%,
    #5e9212 38%,
    #90d132 62%,
    #5e9212 100%
  );
  box-shadow:
    0 14px 34px rgb(65 106 12 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 32%);
}

.accent {
  color: #5e9212;
  background: linear-gradient(
    201deg,
    #416a0c 12%,
    #5e9212 37%,
    #90d132 53%,
    #5e9212 74%,
    #416a0c
  );
  background-clip: text;
  font-family: var(--font-display);
  -webkit-background-clip: text;
}

.form-card::after {
  border-color: rgb(94 146 18 / 9%);
  box-shadow:
    0 0 0 34px rgb(144 209 50 / 4%),
    0 0 0 68px rgb(94 146 18 / 2%);
}

.progress {
  background: linear-gradient(90deg, #eef3e7, #f5f8f0);
  box-shadow: inset 0 -1px 0 rgb(94 146 18 / 8%);
}

.progress__fill {
  background: linear-gradient(90deg, #416a0c, #90d132);
  box-shadow: 5px 0 14px rgb(144 209 50 / 28%);
}

.option:hover,
.option.is-selected {
  border-color: rgb(94 146 18 / 42%);
  background: #ffffff;
  box-shadow: 0 12px 30px rgb(65 106 12 / 8%);
}

.option:has(input:focus-visible) {
  outline: 3px solid rgb(94 146 18 / 18%);
  outline-offset: 2px;
}

.option.is-selected {
  box-shadow:
    0 12px 30px rgb(65 106 12 / 8%),
    0 0 0 3px rgb(144 209 50 / 12%);
}

.option__mark,
.option.is-selected .option__key {
  color: #fff;
  background: #5e9212;
}

textarea:focus,
.text-input:focus {
  border-color: rgb(94 146 18 / 55%);
  box-shadow:
    0 12px 30px rgb(65 106 12 / 10%),
    0 0 0 4px rgb(144 209 50 / 10%);
}

.phone-field {
  border-bottom-color: #7aa842;
}

.phone-field:focus-within {
  border-bottom-color: #5e9212;
  box-shadow: 0 4px 0 -3px rgb(94 146 18 / 24%);
}

.phone-country {
  border-right-color: #d7e2ca;
}

.phone-country__chevron {
  border-right-color: #8bac64;
  border-bottom-color: #8bac64;
}

.phone-input::placeholder {
  color: #91a67a;
}

.next {
  background: #5e9212;
  box-shadow:
    0 15px 16px -8px rgb(94 146 18 / 26%),
    inset 0 0 20px rgb(210 239 170 / 55%);
}

.next:hover,
.next:focus-visible {
  background: #6ca916;
  box-shadow:
    0 15px 16px -5px rgb(94 146 18 / 26%),
    inset 0 0 20px rgb(220 244 185 / 65%);
}

.calendar-panel.is-active {
  border-color: rgb(94 146 18 / 16%);
}

.snd-compact-event__label {
  color: #5e9212 !important;
}

.snd-compact-event .afs-calendar-add {
  min-height: 50px;
  margin: 0;
  padding: 13px 22px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #5e9212;
  box-shadow:
    0 12px 20px -10px rgb(65 106 12 / 44%),
    inset 0 0 18px rgb(218 244 180 / 36%);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.snd-compact-event .afs-calendar-add:hover,
.snd-compact-event .afs-calendar-add:focus-visible {
  background: #6ca916;
  outline: 3px solid rgb(144 209 50 / 30%);
  outline-offset: 3px;
}

.calendar-links__providers:not([hidden]) {
  margin-top: 18px;
}

.site-footer__brand {
  width: 176px;
}

@media (max-width: 700px) {
  body {
    background-image: linear-gradient(145deg, #ffffff, #f0f4e9);
  }

  .workshop-nav__logo {
    width: 138px;
    flex-basis: 138px;
  }

  .snd-compact-event .afs-calendar-add {
    width: 100%;
  }
}