/* ==========================================================================
   Ayan Business — landing
   Values follow design-guideline.yaml (1280 px design).
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------- */

@font-face {
  font-family: 'ABC Repro';
  src: url('assets/fonts/abc-repro/ABCRepro-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Repro';
  src: url('assets/fonts/abc-repro/ABCRepro-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Repro';
  src: url('assets/fonts/abc-repro/ABCRepro-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Repro';
  src: url('assets/fonts/abc-repro/ABCRepro-Black.woff') format('woff');
  font-weight: 900;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* colour */
  --green-900: #14471e;
  --lime: #c8f135;
  --green-500: #11a850;
  --ink: #0b0b0b;
  --ink-muted: #3f4342;
  --ink-subtle: #5b5f5e;
  --placeholder: #9ca2a0;
  --surface: #f4f6f5;
  --border: #e2e4e3;
  --white: #fff;

  --on-dark: rgba(255, 255, 255, 0.82);
  --on-dark-subtle: rgba(255, 255, 255, 0.55);
  --on-dark-hairline: rgba(255, 255, 255, 0.15);
  --on-dark-outline: rgba(255, 255, 255, 0.4);
  --on-black-label: rgba(255, 255, 255, 0.72);

  /* metrics */
  --container: 1152px;
  --gutter: 64px;
  --section-py: 80px;
  --gap: 20px;

  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-input: 13px;
  --radius-pill: 999px;

  /* typography */
  --font: 'ABC Repro', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.57;
  color: var(--ink-muted);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Without this the browser falls back to the OS accent colour, which on the
   black example card reads as a rendering fault rather than a highlight. */
::selection {
  background: var(--lime);
  color: var(--ink);
}

/* --- Shared blocks ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-py);
}

.section--surface {
  background: var(--surface);
}

.section--dark {
  background: var(--green-900);
  color: var(--on-dark);
}

/* Headings */

.h1 {
  font-size: 52px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
}

.h2 {
  font-size: 42px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.h2--lg {
  font-size: 44px;
  line-height: 1.04;
  color: var(--white);
}

.h2--sm {
  font-size: 40px;
  line-height: 1.07;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-500);
}

.eyebrow--lime {
  color: var(--lime);
}

/* Supporting text */

.lead {
  font-size: 19px;
  line-height: 1.47;
}

.small {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-subtle);
}

.small--on-dark {
  color: var(--on-dark-subtle);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 57px;
  padding-inline: 28px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--lime);
  color: var(--ink);
}

.btn--primary:hover {
  background: #d3f556;
}

.btn--ghost-on-dark {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--on-dark-outline);
}

.btn--ghost-on-dark:hover {
  border-color: var(--white);
}

.btn--block {
  display: flex;
  width: 100%;
  height: 52px;
}

/* Chip */

.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: 18px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  background: var(--green-900);
  color: var(--on-dark);
  overflow: hidden;
}

/* The photo always fills the hero height; its width follows the frame
   ratio (1510x1802). The left edge is faded by a CSS mask rather than by
   the fade baked into the JPEG, so the blend into green survives any crop.
   The right edge is pinned to the right edge of the 1280 container, so on
   wider screens it does not drift out to the window edge. Below 1280 see
   the media queries: there the frame is cropped horizontally instead. */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__media img {
  position: absolute;
  top: 0;
  right: max(0px, calc(50% - 640px));
  height: 100%;
  width: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 50px;
}

.hero__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 64px;
}

.logo {
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}

.logo__badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding-inline: 16px;
  border: 1.5px solid var(--white);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
}

.hero__copy {
  max-width: 660px;
}

.hero__lead {
  max-width: 600px;
  margin-top: 36px;
  color: var(--on-dark);
}

.hero__actions {
  display: flex;
  gap: 16px;
  margin-top: 37px;
}

.hero__disclaimer {
  margin-top: 23px;
  color: var(--on-dark-subtle);
}

.hero__trust {
  position: relative;
  z-index: 1;
  margin-top: auto;
  border-top: 1px solid var(--on-dark-hairline);
}

.hero__trust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}

.trust-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stars {
  display: inline-flex;
  gap: 2px;
}

.stars svg {
  width: 15px;
  height: 15px;
  fill: var(--white);
}

/* ==========================================================================
   2. Categories
   ========================================================================== */

.categories__head {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 44px;
  align-items: start;
}

.categories__intro {
  padding-top: 6px;
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap);
  row-gap: 21px;
  margin-top: 49px;
}

.card {
  padding: 24px 27px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.card__title {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink);
}

.card__text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ==========================================================================
   3. How it works
   ========================================================================== */

.how__intro {
  margin-top: 22px;
  max-width: 900px;
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: 46px;
}

.step {
  padding: 25px 27px 27px;
  border-radius: var(--radius-card);
  background: var(--white);
}

.step__number {
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: var(--green-500);
}

.step__title {
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
}

.step__text {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Black example card */

.example {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
  margin-top: 44px;
  padding: 34px 40px 40px;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--on-dark);
}

.example__title {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--white);
}

.example__note {
  margin-top: 10px;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--on-dark);
}

.example__stats {
  display: flex;
  gap: 22px;
  padding-top: 4px;
}

.stat__label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--on-black-label);
}

.stat__value {
  margin-top: 6px;
  font-size: 27px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

.how__footnote {
  margin-top: 22px;
}

/* ==========================================================================
   4. Free business account
   ========================================================================== */

.account__grid {
  display: grid;
  grid-template-columns: 54% 46%;
  align-items: center;
  gap: 0;
}

.account__title {
  margin-top: 6px;
  max-width: 570px;
}

.account__text {
  margin-top: 27px;
  max-width: 580px;
}

.account__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.account__footnote {
  margin-top: 17px;
  max-width: 600px;
}

/* Mockup: card plus statement */

.mockup {
  position: relative;
  height: 399px;
}

.mockup__card {
  position: absolute;
  left: 0;
  top: 182px;
  width: 313px;
  height: 196px;
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2fd05f 0%, #57e35a 45%, #b9f03f 100%);
  box-shadow: 0 22px 44px rgba(11, 11, 11, 0.18);
  transform: rotate(-6deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* diagonal hatching over the gradient */
.mockup__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.14) 0 1px,
    rgba(255, 255, 255, 0) 1px 7px
  );
}

.mockup__card-logo {
  position: relative;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.mockup__card-scheme {
  position: relative;
  align-self: flex-end;
  text-align: right;
  color: var(--ink);
}

.mockup__card-scheme b {
  display: block;
  font-size: 30px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.mockup__card-scheme span {
  font-size: 12px;
  font-weight: 500;
}

.mockup__receipt {
  position: absolute;
  right: 0;
  top: 28px;
  width: 300px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(11, 11, 11, 0.14);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}

.receipt__head,
.receipt__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.receipt__head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.receipt__row {
  padding-top: 10px;
}

.receipt__row--total {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-weight: 700;
}

.receipt__row--accent {
  color: var(--green-500);
  font-weight: 700;
}

.receipt__row--yours {
  font-weight: 700;
}

/* ==========================================================================
   5. Waitlist
   ========================================================================== */

.waitlist__grid {
  display: grid;
  grid-template-columns: 1fr 588px;
  align-items: start;
}

.waitlist__title {
  margin-top: 22px;
}

.waitlist__intro {
  margin-top: 30px;
  color: var(--on-dark);
}

.waitlist__steps {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}

.waitlist__step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  align-items: start;
  color: var(--white);
  font-size: 16px;
  line-height: 1.45;
}

.waitlist__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.waitlist__refer {
  margin-top: 26px;
  font-size: 15px;
  color: var(--on-dark);
}

.waitlist__disclaimer {
  margin-top: 18px;
}

/* Form panel */

.form-panel {
  width: 527px;
  padding: 33px;
  border-radius: var(--radius-panel);
  background: var(--white);
  color: var(--ink-muted);
}

.field {
  margin-bottom: 16px;
}

.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
}

.field__control {
  width: 100%;
  height: 48px;
  padding-inline: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--white);
  font-size: 15px;
  color: var(--ink);
}

.field__control::placeholder {
  color: var(--placeholder);
}

.field__control:focus {
  border-color: var(--green-500);
  outline: none;
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230B0B0B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  margin-block: 4px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--green-500);
}

.consent a {
  color: inherit;
}

.form-panel__footnote {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-subtle);
  text-align: center;
}

/* ==========================================================================
   6. FAQ
   ========================================================================== */

.faq__grid {
  display: grid;
  grid-template-columns: 323px 1fr;
  gap: 41px;
  align-items: start;
}

.faq__item {
  border-bottom: 1px solid var(--border);
}



.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding-block: 17px;
  border: 0;
  background: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq__icon {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s ease;
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__question[aria-expanded='true'] .faq__icon::after {
  transform: rotate(0deg);
}

.faq__answer {
  padding-bottom: 10px;
  max-width: 800px;
  font-size: 15px;
  line-height: 1.53;
  color: var(--ink-muted);
}

.faq__answer[hidden] {
  display: none;
}

/* FAQ answers with no copy in the wireframe. The style is deliberately
   conspicuous so a placeholder cannot slip into production unnoticed. */
.faq__answer--todo {
  color: var(--placeholder);
  font-style: italic;
}

/* ==========================================================================
   Responsive

   The wireframe covers desktop 1280 only. The layouts below are derived from
   the content rather than from the source, so they need sign-off from design.
   The base rules above apply at 1280 and wider; everything here narrows.
   ========================================================================== */

/* --- 1024-1279: the container turns fluid ------------------------------- */

@media (max-width: 1279px) {
  :root {
    --gutter: 48px;
  }

  .container {
    max-width: 100%;
  }

  .h1 {
    font-size: clamp(40px, 3.9vw, 52px);
  }

  /* The whole frame no longer fits beside the copy: the photo takes the
     right 42 %, height stays 100 % and the excess is cropped horizontally.
     The copy is capped at 54 % so it never reaches into the photo. */
  .hero__copy {
    max-width: 54%;
  }

  .hero__lead {
    max-width: none;
  }

  .hero__media {
    inset: 0 0 0 58%;
  }

  .hero__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% center;
  }

  .categories__head {
    grid-template-columns: 1fr 38%;
    gap: 36px;
  }

  .example__stats {
    gap: 32px;
  }

  .waitlist__grid {
    grid-template-columns: 1fr 527px;
    column-gap: 40px;
  }

  .faq__grid {
    grid-template-columns: 260px 1fr;
    gap: 32px;
  }
}

/* --- up to 1099: tablet ------------------------------------------------- */

@media (max-width: 1099px) {
  :root {
    --section-py: 64px;
  }

  .h1 {
    font-size: clamp(36px, 5vw, 44px);
  }

  .h2,
  .h2--lg,
  .h2--sm {
    font-size: clamp(30px, 4vw, 36px);
  }

  /* Hero: narrower photo, wider copy */
  .hero {
    min-height: 0;
  }

  /* The block is very narrow here, so the frame is shifted to push the
     phone fully past the left edge instead of leaving it half transparent
     inside the fade. */
  .hero__media {
    inset: 0 0 0 64%;
  }

  .hero__media img {
    object-position: 62% center;
  }

  .hero__copy {
    max-width: 60%;
  }

  .hero__lead {
    max-width: none;
  }

  .hero__inner {
    padding-bottom: 48px;
  }

  .hero__trust-row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 32px;
  }

  /* Categories */
  .categories__head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 36px;
  }

  .card {
    min-height: 128px;
  }

  /* Steps */
  .how__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .step {
    min-height: 0;
  }

  /* Example */
  .example {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .example__note {
    max-width: none;
  }

  .example__stats {
    flex-wrap: wrap;
    gap: 24px 48px;
  }

  /* Account */
  .account__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .account__text,
  .account__footnote {
    max-width: none;
  }

  .mockup {
    height: 360px;
    max-width: 620px;
  }

  .mockup__card {
    left: 0;
    top: 80px;
  }

  /* Waitlist */
  .waitlist__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .waitlist__steps {
    max-width: none;
  }

  .form-panel {
    width: 100%;
    max-width: 560px;
  }

  /* FAQ */
  .faq__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .faq__grid .h2 br {
    display: none;
  }
}

/* --- up to 767: mobile -------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --gutter: 24px;
    --section-py: 48px;
  }

  body {
    font-size: 16px;
  }

  .h1 {
    font-size: clamp(30px, 8.4vw, 36px);
  }

  .h2,
  .h2--lg,
  .h2--sm {
    font-size: clamp(26px, 7.2vw, 30px);
  }

  /* Hero: the photo moves below the copy as its own block */
  .hero__inner {
    padding-top: 32px;
    padding-bottom: 28px;
  }

  .hero__brand {
    margin-bottom: 36px;
  }

  .hero__copy {
    max-width: none;
  }

  .hero__lead {
    margin-top: 24px;
    font-size: 17px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 28px;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* Hero order: copy, then photo, then trust bar */
  .hero__inner {
    order: 1;
  }

  .hero__media {
    order: 2;
    position: relative;
    inset: auto;
    height: auto;
    margin: 0 var(--gutter) 24px;
    border-radius: var(--radius-card);
  }

  .hero__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: unset;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__trust {
    order: 3;
  }

  .hero__trust-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-block: 20px;
  }

  /* One column throughout */
  .categories__grid,
  .how__steps {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 0;
  }

  .example {
    padding: 28px 24px;
  }

  .example__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }

  /* Card and statement mockup stacks into a column */
  .mockup {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .mockup__card {
    position: static;
    width: 100%;
    max-width: 320px;
    height: 202px;
    transform: none;
  }

  .mockup__receipt {
    position: static;
    width: 100%;
    max-width: 340px;
    font-size: 13px;
  }

  /* Form */
  .form-panel {
    padding: 24px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* FAQ */
  .faq__question {
    font-size: 17px;
    gap: 16px;
  }
}

/* --- up to 419: narrow phones ------------------------------------------- */

@media (max-width: 419px) {
  :root {
    --gutter: 20px;
  }

  .example__stats {
    grid-template-columns: 1fr;
  }

  .stat__value {
    font-size: 24px;
  }
}

/* Honeypot: off-screen for humans, irresistible to bots. Never display: none,
   some bots skip hidden fields. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Result of a waitlist submission. */
.form-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-input);
  font-size: 14px;
  line-height: 1.4;
}

.form-status--ok {
  background: #eaf7ef;
  color: #0d7a3c;
}

.form-status--error {
  background: #fff1f1;
  color: #a4162a;
}

.btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}