:root {
  color-scheme: light;
  --ink: #171717;
  --muted: #686868;
  --line: #e8e7e2;
  --yellow: #ffd60a;
  --soft-yellow: #fff9dd;
  --green: #167a51;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Manrope", var(--font-body);
}

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

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  /* No pinch-zoom and no rubber-band overscroll at the page level: the two
     gestures that give away a page from a stream. Interactive elements below
     stay pannable because the allowed action is intersected, not overridden. */
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button,
input { font: inherit; }

.landing {
  width: min(100% - 40px, 704px);
  margin: 0 auto;
  padding: clamp(32px, 6vh, 64px) 0 40px;
}

.hero { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: #57534a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}

.eyebrow__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px var(--soft-yellow);
}

h1,
h2,
p { margin-top: 0; }

h1 {
  max-width: 660px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 36px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.08;
}

h1 span {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: .16em;
  text-underline-offset: .09em;
}

.hero__intro {
  max-width: 560px;
  margin: 16px auto 23px;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.benefit {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  padding: 10px 13px;
  border: 1px solid #efede5;
  background: #fffefa;
  color: #33312b;
  line-height: 1.3;
}

.benefit__icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  background: var(--soft-yellow);
  color: #29261d;
}

.benefit__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit__copy { display: grid; gap: 3px; min-width: 0; }
.benefit__copy strong { color: #292720; font-size: 12px; font-weight: 800; }
.benefit__copy small { color: #6d6a61; font-size: 11px; line-height: 1.35; }

.signup {
  margin-top: 22px;
  padding: 22px 24px 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 34px rgba(24, 24, 20, .055);
  text-align: left;
}

.signup__heading { margin-bottom: 16px; }

.signup__step {
  margin: 0 0 5px;
  color: #8b7417;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.signup__eyebrow {
  margin: 0 0 6px;
  color: #8b7417;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.signup__heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.25;
}

.signup__heading p:last-child {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field { display: grid; gap: 6px; }

.field__label {
  color: #292929;
  font-size: 12px;
  font-weight: 700;
}

.field input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #d9d9d5;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field input::placeholder { color: #999995; }
.field input:focus { border-color: #8e7511; box-shadow: 0 0 0 3px rgba(255, 214, 10, .2); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
  cursor: pointer;
}

.consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.consent__box {
  display: grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #b9b8b1;
  background: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}

.consent__box svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #171717;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.consent input:checked + .consent__box { border-color: var(--yellow); background: var(--yellow); }
.consent input:checked + .consent__box svg { opacity: 1; }
.consent input:focus-visible + .consent__box { outline: 3px solid #2878db; outline-offset: 3px; }

.consent__text {
  color: #55544f;
  font-size: 12px;
  line-height: 1.45;
}

.website-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
}

.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  padding: 13px 18px;
  border: 1px solid #171717;
  border-radius: 0;
  background: var(--yellow);
  color: #151515;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  transition: background-color .15s ease, transform .15s ease;
}

.submit-button:hover { background: #ffe04d; }
.submit-button:active { transform: translateY(1px); }
.submit-button:disabled { cursor: wait; opacity: .72; }
.submit-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.form-message {
  min-height: 0;
  margin: 10px 0 0;
  color: #a13324;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.form-message:empty { display: none; }
.form-message.is-success { color: var(--green); }
.form-message a { color: inherit; font-weight: 800; }

.signup.is-complete {
  padding-block: 26px;
  background: #fffefa;
}

.signup.is-complete .signup__heading h2 { color: var(--green); }

.skip-link {
  position: absolute;
  top: 8px;
  left: -10000px;
  z-index: 10;
  padding: 10px 14px;
  background: #171717;
  color: #fff;
}

.skip-link:focus { left: 8px; }

.access-message {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
}

.access-message__card {
  width: min(100%, 520px);
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 34px rgba(24, 24, 20, .055);
}

.access-message__card h1 { font-size: clamp(24px, 5vw, 32px); }
.access-message__card p { margin: 12px 0 22px; color: var(--muted); }
.access-message__card .submit-button { text-decoration: none; }

:focus-visible { outline: 3px solid #2878db; outline-offset: 3px; }

@media (max-width: 620px) {
  .landing { width: min(100% - 28px, 480px); padding-top: 24px; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .benefit { min-height: 68px; padding: 9px; }
  .signup { margin-top: 17px; padding: 19px 16px 16px; }
  .field input { font-size: 16px; }
}

@media (max-width: 420px) {
  .landing { width: min(100% - 24px, 380px); }
  h1 { font-size: clamp(27px, 8vw, 34px); }
  .field-row { grid-template-columns: 1fr; gap: 11px; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .benefit { min-height: 84px; align-items: flex-start; flex-direction: column; gap: 6px; padding: 9px; }
  .benefit__icon { flex-basis: 26px; width: 26px; height: 26px; }
  .benefit__icon svg { width: 16px; height: 16px; }
  .benefit__copy strong { font-size: 11px; }
  .benefit__copy small { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* iOS zooms the whole page in when a field it focuses is set below 16px, and
   the page then stays zoomed. Touch devices get 16px on every text field, chat
   composer included, so focusing one never changes the scale. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select { font-size: 16px; }
}