/* ===========================================================================
   VouchCare waitlist — shared styles
   ===========================================================================
   Colour values here have all been checked against the WCAG 2.1 AA contrast
   requirement (4.5:1 for normal text, 3:1 for borders and focus rings).
   If you change one, re-check it before shipping — several of the originals
   were only a hair under and looked fine to the eye.
   ======================================================================== */

:root {
  /* Surfaces */
  --bg:            #faf8f3;
  --bg-hero:       #fbfaf6;
  --surface:       #ffffff;
  --surface-tint:  #f0f4f2;
  --surface-num:   #f1f6f2;
  --surface-ok:    #eef5f0;

  /* Lines */
  --line:          #ebe7dd;
  --line-soft:     #efece3;
  --line-tint:     #e2ece5;
  --line-grid:     #e6e2d8;
  --line-input:    #85918a;   /* was #d6e0d8 — 1.28:1, invisible. now 3.1:1 */

  /* Text — every value below passes 4.5:1 on its intended background */
  --ink:           #1e2a24;   /* 14.9:1 on white */
  --ink-hero:      #22392c;   /* 11.9:1 on hero  */
  --ink-quote:     #2a3d32;
  --ink-chip:      #3a4d43;   /*  8.7:1 on hero  */
  --text:          #52605a;   /*  6.3:1          */
  --text-body:     #5a6862;   /*  5.9:1          */
  --text-sm:       #65766c;   /*  4.5:1 — replaces #6b7e73 / #9aab9e / #7a8f82 */

  /* Brand */
  --accent:        #3f6f4e;   /*  5.8:1 as text; white on it also 5.8:1 */
  --accent-hover:  #345c41;
  --accent-num:    #557861;   /*  4.5:1 — replaces #7aab8a */
  --accent-bar-a:  #4a7c59;
  --accent-bar-b:  #7aab8a;
  --dot-idle:      #cfd8d1;

  /* Feedback */
  --ok-ink:        #2f5740;   /*  7.4:1 on --surface-ok */
  --ok-line:       #c6dccb;
  --error:         #c0392b;   /*  5.4:1 on white        */
  --focus:         #1e5233;   /*  8.6:1 — focus ring    */
}

/* --- reset ------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

img { max-width: 100%; }

/* --- accessibility helpers --------------------------------------------- */

/* Visible to screen readers, invisible on screen. Used for form labels
   where the surrounding heading already gives sighted users the context. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Spam trap. Unlike .sr-only, this must be hidden from EVERYONE — screen
   readers included. Only automated bots, which read raw HTML, will find and
   fill it. Kept off-screen rather than display:none because some bots skip
   fields that are display:none. */
.wl-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* A clearly visible focus ring. The originals set `outline: none` and relied
   on a 1.28:1 border colour change, which keyboard users cannot see. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect the OS "reduce motion" setting. Without this, the roadmap dot
   pulses indefinitely, which can trigger nausea or migraine. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- animation ---------------------------------------------------------- */
@keyframes wl-up   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wl-pulse{ 0%,100% { box-shadow: 0 0 0 0 rgba(74,124,89,.45); } 50% { box-shadow: 0 0 0 6px rgba(74,124,89,0); } }
@keyframes wl-bar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- layout ------------------------------------------------------------- */
.wl-shell { max-width: 860px; margin: 0 auto; padding: 0 1.75rem; }

.wl-hero {
  background: var(--bg-hero);
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 0 7.5rem;
  position: relative;
}
.wl-hero__bar {
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent-bar-a), var(--accent-bar-b));
  transform-origin: left;
  animation: wl-bar .8s cubic-bezier(.2,.7,.3,1) both;
}
.wl-hero__logo { margin-bottom: 3rem; animation: wl-fade .6s ease both; }
.wl-hero__logo img { height: 42px; width: auto; }

.wl-eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
  animation: wl-up .6s ease both .05s;
}

h1.wl-title {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(2.4rem, 6.2vw, 4.1rem);
  line-height: 1.06; letter-spacing: -.025em;
  color: var(--ink-hero);
  margin: 0 0 1.4rem;
  animation: wl-up .7s ease both .12s;
}

.wl-lede {
  font-size: clamp(1.02rem, 2.3vw, 1.2rem);
  line-height: 1.62; color: var(--text);
  margin: 0 0 2rem;
  animation: wl-up .7s ease both .2s;
}

.wl-chips {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2rem;
  border-top: 1px solid var(--line); padding: 1.4rem 0 0; margin: 0;
  list-style: none;
  animation: wl-up .7s ease both .28s;
}
.wl-chips li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .86rem; font-weight: 600; color: var(--ink-chip);
}
.wl-chips li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-bar-a); flex-shrink: 0;
}

.wl-main { max-width: 860px; margin: 0 auto; padding: 0 1.75rem 5rem; }

/* --- form card ---------------------------------------------------------- */
.wl-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 1.1rem;
  box-shadow: 0 18px 50px rgba(38,74,52,.16), 0 2px 8px rgba(0,0,0,.05);
  padding: 2.25rem;
  margin: -5rem 0 4.5rem;
  position: relative; z-index: 10;
  animation: wl-up .6s ease both .1s;
}

h2.wl-card__title {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.4rem; font-weight: 500; color: var(--ink);
  margin: 0 0 .3rem;
}
.wl-card__sub { font-size: .92rem; color: var(--text-sm); margin: 0 0 1.2rem; }

.wl-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.wl-row input { flex: 1; min-width: 220px; }

.wl-input {
  padding: .85rem 1rem;
  font-size: .95rem; font-family: inherit;
  border: 1.5px solid var(--line-input);
  border-radius: .7rem;
  background: var(--bg); color: var(--ink);
  min-height: 48px;
}
.wl-input:focus { border-color: var(--accent); background: var(--surface); }

.wl-submit {
  border: none; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 700;
  padding: .85rem 1.6rem; border-radius: .7rem;
  min-height: 48px; white-space: nowrap;
  background: var(--accent); color: #fff;
  box-shadow: 0 3px 10px rgba(63,111,78,.30);
  transition: background .15s ease, box-shadow .15s ease;
}
.wl-submit:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 5px 16px rgba(63,111,78,.40);
}
.wl-submit[aria-busy="true"] { opacity: .7; cursor: default; }

.wl-error { font-size: .875rem; color: var(--error); margin: .75rem 0 0; }

.wl-success {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.1rem 1.3rem;
  background: var(--surface-ok);
  border: 1px solid var(--ok-line);
  border-radius: .75rem;
}
.wl-success__mark {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-bar-a); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.wl-success__text { font-size: 1rem; color: var(--ok-ink); font-weight: 500; }

.wl-bullets { list-style: none; padding: 0; margin: 1.3rem 0 0;
  display: flex; flex-direction: column; gap: .55rem; }
.wl-bullets li { display: flex; align-items: flex-start; gap: .55rem; }
.wl-bullets li::before {
  content: "\2713"; margin-top: .15rem; flex-shrink: 0;
  color: var(--accent); font-weight: 700; font-size: .8rem;
}
.wl-bullets span { font-size: .85rem; color: var(--text-sm); line-height: 1.5; }

.wl-crosslink {
  font-size: .84rem; color: var(--text-sm);
  margin: 1.1rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}

a { color: var(--accent); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- value props -------------------------------------------------------- */
.wl-section { margin-bottom: 4.75rem; }

h2.wl-section__label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; text-align: center; margin: 0 0 2rem;
  color: var(--accent);
}
h2.wl-section__label--muted { color: var(--text-sm); margin-bottom: 1.75rem; }

.wl-props {
  background: var(--surface); border: 1px solid #e8e3d8;
  border-radius: .9rem; overflow: hidden;
  list-style: none; padding: 0; margin: 0;
}
.wl-props > li {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.6rem 1.8rem; transition: background .18s ease;
}
.wl-props > li + li { border-top: 1px solid var(--line-soft); }
.wl-props > li:hover { background: var(--bg-hero); }

.wl-props__num {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: .6rem;
  background: var(--surface-num); border: 1px solid #e3ede5;
  display: flex; align-items: center; justify-content: center;
  font-family: "Newsreader", Georgia, serif; font-style: italic;
  font-size: 1.35rem; color: var(--accent-num); line-height: 1;
}
h3.wl-props__head { font-weight: 600; font-size: 1.02rem; color: var(--ink); margin: 0 0 .35rem; }
.wl-props__body { font-size: .9rem; line-height: 1.6; color: var(--text-body); margin: 0; }

/* --- roadmap ------------------------------------------------------------ */
.wl-roadmap {
  display: grid; gap: 1px;
  background: var(--line-grid); border: 1px solid var(--line-grid);
  border-radius: .9rem; overflow: hidden;
  list-style: none; padding: 0; margin: 0;
}
.wl-roadmap > li { background: var(--surface); padding: 1.5rem 1.2rem; text-align: center; }
.wl-roadmap > li.is-active { background: var(--surface-ok); }

.wl-roadmap__dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dot-idle); margin-bottom: .7rem;
}
.is-active .wl-roadmap__dot {
  background: var(--accent-bar-a);
  animation: wl-pulse 2.2s ease-in-out infinite;
}
.wl-roadmap__period {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-sm); margin: 0 0 .4rem;
}
.is-active .wl-roadmap__period { color: var(--accent); }
h3.wl-roadmap__title { font-weight: 600; font-size: .92rem; color: var(--ink); margin: 0 0 .4rem; }
.wl-roadmap__detail { font-size: .83rem; color: var(--text-sm); line-height: 1.5; margin: 0; }

/* --- founder note ------------------------------------------------------- */
.wl-note {
  background: var(--surface-tint); border: 1px solid var(--line-tint);
  border-radius: 1.1rem; padding: 3rem 2.5rem;
  margin: 0 auto 4.75rem; max-width: 700px; text-align: center;
}
.wl-note__body {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.1rem, 2.4vw, 1.28rem);
  line-height: 1.75; color: var(--ink-quote); margin: 0 0 1.4rem;
}
.wl-note__body strong { font-weight: 600; }
.wl-note__sig {
  font-family: "Newsreader", Georgia, serif; font-style: italic;
  font-size: 1.02rem; color: var(--accent); margin: 0;
}

/* --- footer ------------------------------------------------------------- */
.wl-contact { text-align: center; margin-bottom: 2.75rem; }
.wl-contact p { font-size: .95rem; color: #4a5550; margin: 0; }
.wl-footer { border-top: 1px solid var(--line-tint); padding-top: 1.5rem; text-align: center; }
.wl-footer p { font-size: .8rem; color: var(--text-sm); margin: 0; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 640px) {
  .wl-props > li { padding: 1.4rem 1.3rem; gap: 1rem; }
  .wl-roadmap { grid-template-columns: 1fr !important; }
  .wl-row input, .wl-row button { width: 100%; }
  .wl-card { padding: 1.5rem; }
}