:root {
  --czm-bg-desktop: #f7f7f5;
  --czm-bg-mobile: #f8f5ec;
  --czm-navy: #172754;
  --czm-burgundy: #66001c;
  --czm-green: #c6c89d;
  --czm-black: #151515;
  --czm-success: #4b7d43;
  --czm-error: #a52626;
}

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

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--czm-bg-desktop);
}

.czm-body {
  color: var(--czm-navy);
  font-family: "Century Gothic", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.czm-page,
.czm-layout {
  width: 100%;
}

.czm-page {
  min-height: 100vh;
  overflow: hidden;
}

.czm-layout--desktop {
  --czm-form-bg: var(--czm-bg-desktop);
  display: block;
  min-height: 100vh;
  padding: 14px 24px 54px;
  text-align: center;
  background: var(--czm-bg-desktop);
}

.czm-layout--mobile {
  display: none;
}

.czm-desktop-header {
  position: relative;
  width: min(100%, 1220px);
  height: 121px;
  margin: 0 auto;
}

.czm-desktop-logo {
  display: block;
  width: 234px;
  height: auto;
  margin: 0 auto;
}

.czm-desktop-blog {
  position: absolute;
  top: 37px;
  right: 1.6%;
  color: var(--czm-navy);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.czm-desktop-blog:hover,
.czm-desktop-blog:focus-visible {
  color: var(--czm-burgundy);
  text-decoration: none;
}

.czm-desktop-hero {
  display: block;
  width: min(710px, 65vw);
  height: auto;
  margin: 0 auto 7px;
}

.czm-desktop-intro h1 {
  margin: 0 0 10px;
  color: var(--czm-burgundy);
  font-size: clamp(22px, 1.95vw, 28px);
  font-weight: 500;
  line-height: 1.15;
}

.czm-desktop-intro p {
  max-width: 1040px;
  margin: 0 auto;
  color: var(--czm-navy);
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.12;
}

.czm-desktop-newsletter {
  margin-top: 25px;
}

.czm-desktop-newsletter > p:first-child {
  margin: 0;
  color: var(--czm-burgundy);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.18;
}

.czm-desktop-newsletter > p:first-child strong,
.czm-mobile-newsletter > p:first-child strong {
  font-weight: 700;
}

.czm-desktop-footer {
  margin-top: 22px;
}

.czm-desktop-slogan,
.czm-desktop-hashtag,
.czm-mobile-slogan,
.czm-mobile-hashtag {
  margin: 0;
}

.czm-desktop-slogan {
  color: var(--czm-green);
  font-size: clamp(21px, 1.9vw, 28px);
  font-weight: 700;
  line-height: 1.1;
}

.czm-desktop-hashtag {
  margin-top: 7px;
  color: var(--czm-burgundy);
  font-size: 15px;
  line-height: 1.1;
}

.czm-newsletter-form {
  position: relative;
  overflow: hidden;
  height: 73px;
  border: 2px solid var(--czm-black);
  border-radius: 999px;
  background: var(--czm-form-bg, var(--czm-bg-desktop));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.czm-newsletter-form--desktop {
  width: min(316px, calc(100vw - 48px));
  margin: 61px auto 0;
}

.czm-newsletter-form:focus-within {
  border-color: var(--czm-burgundy);
  box-shadow: 0 0 0 3px rgba(102, 0, 28, 0.08);
}

.czm-newsletter-form.is-success {
  border-color: var(--czm-success);
}

.czm-newsletter-form.is-error {
  border-color: var(--czm-error);
}

.czm-newsletter-input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 58px;
  border: 0;
  outline: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--czm-burgundy);
  font: inherit;
  font-size: 16px;
  text-align: center;
}

.czm-newsletter-input:-webkit-autofill,
.czm-newsletter-input:-webkit-autofill:hover,
.czm-newsletter-input:-webkit-autofill:focus,
.czm-newsletter-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--czm-burgundy);
  caret-color: var(--czm-burgundy);
  -webkit-box-shadow: 0 0 0 1000px var(--czm-form-bg, var(--czm-bg-desktop)) inset;
  box-shadow: 0 0 0 1000px var(--czm-form-bg, var(--czm-bg-desktop)) inset;
  transition: background-color 9999s ease-out 0s;
}

.czm-newsletter-input::placeholder {
  color: var(--czm-burgundy);
  opacity: 1;
}

.czm-newsletter-submit {
  position: absolute;
  top: 50%;
  right: 15px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  transform: translateY(-50%);
  background: transparent;
  color: var(--czm-burgundy);
  cursor: pointer;
  font: inherit;
  font-size: 25px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.czm-newsletter-form:focus-within .czm-newsletter-submit,
.czm-newsletter-form.has-value .czm-newsletter-submit {
  opacity: 1;
}

.czm-newsletter-submit:hover,
.czm-newsletter-submit:focus-visible {
  background: rgba(102, 0, 28, 0.08);
  outline: none;
}

.czm-newsletter-submit:disabled {
  cursor: wait;
  opacity: 0.45;
}

.czm-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.czm-newsletter-message {
  min-height: 22px;
  margin: 9px auto 0;
  color: var(--czm-burgundy);
  font-size: 14px;
  line-height: 1.25;
}

.czm-newsletter-message.is-success {
  color: var(--czm-success);
}

.czm-newsletter-message.is-error {
  color: var(--czm-error);
}

.czm-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 767px) {
  html,
  body {
    background: var(--czm-bg-mobile);
  }

  .czm-layout--desktop {
    display: none;
  }

  .czm-layout--mobile {
    --czm-form-bg: var(--czm-bg-mobile);
    display: block;
    min-height: 100svh;
    padding: 24px 0 52px;
    text-align: center;
    background: var(--czm-bg-mobile);
  }

  .czm-mobile-header {
    width: 100%;
    margin: 0 0 18px;
  }

  .czm-mobile-logo {
    display: block;
    width: min(205px, 47vw);
    height: auto;
    margin: 0 auto;
  }

  .czm-mobile-hero {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 21px;
  }

  .czm-mobile-intro,
  .czm-mobile-newsletter,
  .czm-mobile-footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .czm-mobile-intro h1 {
    margin: 0 0 13px;
    color: var(--czm-burgundy);
    font-size: clamp(20px, 5.35vw, 25px);
    font-weight: 500;
    line-height: 1.18;
  }

  .czm-mobile-intro p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--czm-navy);
    font-size: clamp(15px, 4.15vw, 18px);
    font-weight: 500;
    line-height: 1.28;
  }

  .czm-mobile-newsletter {
    margin-top: 51px;
  }

  .czm-mobile-newsletter > p:first-child {
    margin: 0;
    color: var(--czm-burgundy);
    font-size: clamp(16px, 4.45vw, 20px);
    font-weight: 500;
    line-height: 1.28;
  }

  .czm-newsletter-form--mobile {
    width: min(342px, calc(100vw - 62px));
    height: 78px;
    margin: 39px auto 0;
  }

  .czm-mobile-footer {
    margin-top: 46px;
  }

  .czm-mobile-slogan {
    color: var(--czm-green);
    font-size: clamp(22px, 6.2vw, 30px);
    font-weight: 700;
    line-height: 1.1;
  }

  .czm-mobile-hashtag {
    margin-top: 10px;
    color: var(--czm-burgundy);
    font-size: 15px;
    line-height: 1.1;
  }

  .czm-mobile-wave {
    display: block;
    width: 32px;
    height: 7px;
    margin: 7px auto 0;
    background:
      radial-gradient(circle at 4px 0, transparent 4px, var(--czm-green) 4.5px, var(--czm-green) 6px, transparent 6.5px) 0 0 / 12px 7px repeat-x;
  }
}

@media (max-width: 380px) {
  .czm-layout--mobile {
    padding-top: 18px;
  }

  .czm-mobile-header {
    margin-bottom: 13px;
  }

  .czm-mobile-newsletter {
    margin-top: 39px;
  }

  .czm-newsletter-form--mobile {
    height: 70px;
    margin-top: 31px;
  }

  .czm-mobile-footer {
    margin-top: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .czm-newsletter-form,
  .czm-newsletter-submit {
    transition: none;
  }
}