/* TOVELU — Material 3 theme for the two application forms (3 August 2026).
 *
 * The member app moved wholesale to Material 3 on 2 August, and these two
 * forms were the last surfaces still wearing the old marketing styling. An
 * applicant who is about to represent TOVELU should be looking at TOVELU, not
 * at a form that looks like it belongs to a different company.
 *
 * This is a standalone copy of the app's tokens rather than an import: the
 * marketing site is static HTML on its own Vercel project and cannot reach
 * into the Next.js bundle. The values below are copied verbatim from
 * webapp/app/app/m3.css — if those ever change, change these too.
 *
 * Scoped under `.m3a` so it cannot leak into the shared nav/footer, which stay
 * on the marketing site's own stylesheet.
 */

.m3a {
  --primary: #1F6F4A; --on-primary: #FFFFFF;
  --primary-container: #9BF3BE; --on-primary-container: #00210F;
  --secondary-container: #CFE9D7; --on-secondary-container: #0A1F13;
  --tertiary-container: #BEEAF8; --on-tertiary-container: #001F27;
  --error: #BA1A1A; --error-container: #FFDAD6; --on-error-container: #410002;
  --surface: #F5FAF5; --s-lowest: #FFFFFF; --s-low: #EFF5EF;
  --s-cont: #E9EFE9; --s-high: #E3E9E3;
  --on-surface: #171D18; --on-surface-variant: #3F4A42;
  --outline: #6F7A72; --outline-variant: #BFC9C0;
  --vibrant: #CDEEDA; --on-vibrant: #00210F;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --r-xxl: 28px; --r-3xl: 36px; --r-full: 999px;
  --e1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.07);
  --e3: 0 4px 8px 3px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);

  --font: "Roboto Flex", Roboto, -apple-system, "Segoe UI", sans-serif;
  --spring: cubic-bezier(.2,.8,.2,1);
}

/* The app follows the device theme, so these forms do too — an applicant on a
   dark phone should not be flashbanged by a form the app would have dimmed. */
@media (prefers-color-scheme: dark) {
  .m3a {
    --primary: #7FD6A4; --on-primary: #00391F;
    --primary-container: #005230; --on-primary-container: #9BF3BE;
    --secondary-container: #2A4636; --on-secondary-container: #CFE9D7;
    --tertiary-container: #00404F; --on-tertiary-container: #BEEAF8;
    --error: #FFB4AB; --error-container: #93000A; --on-error-container: #FFDAD6;
    --surface: #0E140F; --s-lowest: #090E0A; --s-low: #161D18;
    --s-cont: #1A211C; --s-high: #252C27;
    --on-surface: #DEE4DD; --on-surface-variant: #BFC9C0;
    --outline: #8A948B; --outline-variant: #3F4A42;
    --vibrant: #053E24; --on-vibrant: #9BF3BE;
  }
}

/* ------------------------------------------------------------ page shell */

/* The vibrant backdrop with the white sheet floating on it — the same shape
   as every funnel screen in the app (survey, plan setup, checkout). */
.m3a {
  background: var(--vibrant);
  color: var(--on-surface);
  font-family: var(--font);
  padding: 1.25rem 1rem 3rem;
  min-height: 100vh;
}

.m3a-col { max-width: 34rem; margin: 0 auto; }

.m3a-brandbar {
  display: flex; align-items: center; gap: .5rem;
  color: var(--on-vibrant);
  padding: .25rem .25rem 1.125rem;
}
.m3a-brandbar .wordmark { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }

.m3a-sheet {
  background: var(--s-lowest);
  border-radius: var(--r-3xl);
  padding: 1.75rem 1.375rem 2rem;
  box-shadow: var(--e3);
}

/* ------------------------------------------------------------- typography */

.m3a .kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary); margin: 0 0 .5rem;
}
.m3a h1 {
  font-size: 1.5rem; line-height: 1.25; font-weight: 700;
  letter-spacing: -.015em; margin: 0 0 .625rem; color: var(--on-surface);
}
.m3a .lede {
  font-size: .9375rem; line-height: 1.6;
  color: var(--on-surface-variant); margin: 0;
}

/* A section heading, matching the app's `.sec` rhythm. */
.m3a .sec {
  margin: 2rem 0 .25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--outline-variant);
}
.m3a .sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.75rem; }
.m3a .sec h2 {
  font-size: 1.0625rem; font-weight: 600; margin: 0 0 .25rem;
  color: var(--on-surface);
}
.m3a .sec p { font-size: .8125rem; line-height: 1.5; color: var(--on-surface-variant); margin: 0; }

/* ----------------------------------------------------------------- fields */

.m3a .f { margin-top: 1.125rem; }
.m3a .f > label {
  display: block; font-size: .875rem; font-weight: 600;
  margin-bottom: .4375rem; color: var(--on-surface);
}
.m3a .req { color: var(--error); font-weight: 700; }
.m3a .opt {
  font-size: .75rem; font-weight: 500; color: var(--on-surface-variant);
  margin-left: .25rem;
}

/* M3 filled text field: tonal surface, no box border, a weight change on the
   underline for focus. Matches `.field-input` in the app's funnel CSS. */
.m3a input[type="text"],
.m3a input[type="email"],
.m3a input[type="tel"],
.m3a input[type="url"],
.m3a select,
.m3a textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  color: var(--on-surface);
  background: var(--s-cont);
  border: 0;
  border-bottom: 1px solid var(--outline);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: .875rem .875rem;
  transition: background .15s var(--spring), border-color .15s var(--spring);
  -webkit-appearance: none; appearance: none;
}
.m3a textarea { min-height: 5.5rem; resize: vertical; line-height: 1.55; }
.m3a textarea.tall { min-height: 8.5rem; }

.m3a select {
  /* Native arrow removed above; draw our own so it renders identically in
     both themes. currentColor keeps it correct when the theme flips. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - .8rem) 1.35rem;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.m3a input:focus, .m3a select:focus, .m3a textarea:focus {
  outline: none;
  background: var(--s-high);
  border-bottom: 2px solid var(--primary);
  padding-bottom: calc(.875rem - 1px);
}
.m3a input::placeholder, .m3a textarea::placeholder {
  color: var(--on-surface-variant); opacity: .65;
}
/* Only after the browser has judged it — :invalid alone paints every empty
   required field red before the applicant has typed a character. */
.m3a input:user-invalid, .m3a select:user-invalid, .m3a textarea:user-invalid {
  border-bottom-color: var(--error);
}

.m3a .hint {
  font-size: .8125rem; line-height: 1.5;
  color: var(--on-surface-variant); margin: .4375rem 0 0;
}

/* ------------------------------------------------------------- checkboxes */

/* Terms render as tappable cards, not bare checkboxes — these are the four
   commitments the whole role turns on, and they deserve more than 13px of
   hit area on a phone. */
.m3a .check {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--s-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: .875rem;
  margin-top: .625rem;
  cursor: pointer;
  transition: background .15s var(--spring), border-color .15s var(--spring);
}
.m3a .check:hover { background: var(--s-cont); }

/* Checked state is driven by a class that apply-form.js toggles, NOT by
   `:has(input:checked)`.
 *
 * `:has()` looked like the obvious tool and it is not reliable enough here:
 * testing this page found a browser that reports `CSS.supports("selector(:has(…))")`
 * as true and matches the selector via `Element.matches()`, yet never applies
 * the rule during style resolution — even with `!important`. A partner filling
 * in this form on that browser would tick four boxes and watch nothing happen,
 * which reads as a broken form on the page where we ask people to commit.
 * A class toggle behaves identically everywhere.
 */
.m3a .check.is-checked {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-color: transparent;
}
.m3a .check input {
  flex: none; width: 1.25rem; height: 1.25rem; margin: .0625rem 0 0;
  accent-color: var(--primary); cursor: pointer;
}
.m3a .check span { font-size: .875rem; line-height: 1.5; }
.m3a .check a { color: inherit; text-decoration: underline; font-weight: 600; }

/* The optional marketing opt-in. Dashed border so it reads as "not one of the
   terms" at a glance — it must never look like something you have to tick. */
.m3a .check-optional { border-style: dashed; background: transparent; }
.m3a .check-optional:hover { background: var(--s-low); }

/* --------------------------------------------------------------- actions */

.m3a .foot { margin-top: 2rem; }
.m3a .btn-fill {
  width: 100%;
  font: inherit; font-size: 1rem; font-weight: 600;
  background: var(--primary); color: var(--on-primary);
  border: 0; border-radius: var(--r-full);
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: transform .12s var(--spring), opacity .15s var(--spring);
}
.m3a .btn-fill:active:not(:disabled) { transform: scale(.985); }
.m3a .btn-fill:disabled { opacity: .38; cursor: default; }
.m3a .small {
  font-size: .75rem; line-height: 1.55;
  color: var(--on-surface-variant); margin: .875rem 0 0; text-align: center;
}
.m3a .small a { color: var(--primary); }

/* ------------------------------------------------------- error + success */

.m3a .submit-error {
  display: none;
  background: var(--error-container); color: var(--on-error-container);
  border-radius: var(--r-lg); padding: .875rem 1rem;
  font-size: .875rem; line-height: 1.5; margin-bottom: 1.25rem;
}
.m3a .submit-error.show { display: block; }

.m3a .success { display: none; text-align: center; padding: 1rem .5rem; }
.m3a .success.show { display: block; }
.m3a .success svg {
  width: 3.5rem; height: 3.5rem; color: var(--primary); margin-bottom: 1rem;
}
.m3a .success h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .625rem; }
.m3a .success p {
  font-size: .9375rem; line-height: 1.6;
  color: var(--on-surface-variant); margin: 0 auto; max-width: 26rem;
}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   inputs, and the whole point is that they fill it in. */
.m3a .hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .m3a *, .m3a *::before, .m3a *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}