@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
/* ==========================================================================
   KeeWanders — native waitlist form (modal + /join.html inline)
   Design source: "KeeWanders Waitlist States.dc.html" (Claude Design import).
   Fixed header + scrolling body + fixed footer so the CTA is never below the
   fold. Fraunces headings, Space Grotesk body. Namespaced .kw-wl* — no clashes.
   Tokens: body #fbf7f4 · cards/inputs #fffdfc · ink #3a3040 / #665b6e / #6d6459
   · CTA #e6cda1 (ink #33293c) · selected #b8935a/#faf3e6 · control #8f6a2c
   · error #c2573a border / #a3452c text.
   ========================================================================== */

/* ---- overlay (modal only) ---- */
.kw-wl-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(24,17,30,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:24px 16px;
  animation:kw-wl-fade .28s ease both;
}
.kw-wl-overlay.kw-open{display:flex}
@keyframes kw-wl-fade{from{opacity:0}to{opacity:1}}

/* ---- shell / sheet ---- */
.kw-wl-sheet{
  position:relative; width:100%; max-width:468px;
  display:flex; flex-direction:column;
  background:#fbf7f4; border-radius:22px; overflow:hidden;
}
.kw-wl-overlay .kw-wl-sheet{
  max-height:min(90vh,780px);
  box-shadow:0 30px 80px rgba(16,11,22,.55), 0 2px 6px rgba(16,11,22,.3);
  animation:kw-wl-in .38s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes kw-wl-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* inline (join.html): same shell, in page flow, softer shadow, no height cap */
.kw-wl-inline{max-width:468px; margin:24px auto 64px; padding:0 16px}
.kw-wl-inline .kw-wl-sheet{ box-shadow:0 18px 44px rgba(16,11,22,.10), 0 1px 3px rgba(16,11,22,.08); }

/* ---- type container ---- */
.kw-wl{ font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; color:#3a3040; }
.kw-wl *{ box-sizing:border-box; }

/* ---- header (fixed) ---- */
.kw-wl-head{ flex:0 0 auto; padding:26px 26px 18px; border-bottom:1px solid rgba(58,48,64,.08); background:#fffdfc; }
.kw-wl-headrow{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.kw-wl-title{ margin:0; font-family:'Fraunces',Georgia,serif; font-size:27px; line-height:1.15; letter-spacing:-.015em; color:#3a3040; font-weight:600; }
.kw-wl-title:focus{ outline:none; }
.kw-wl-sub{ margin:8px 0 0; font-size:14.5px; line-height:1.55; color:#665b6e; max-width:36ch; }
.kw-wl-x{
  flex:0 0 auto; width:44px; height:44px; margin:-10px -10px 0 0; display:grid; place-items:center;
  border:0; border-radius:999px; background:transparent; color:#665b6e; cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.kw-wl-x:hover{ background:#f3ece7; color:#3a3040; }

/* ---- form / body / footer ---- */
.kw-wl-form{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.kw-wl-form[hidden]{ display:none; }
.kw-wl-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:20px 26px 8px; display:flex; flex-direction:column; gap:22px; }
.kw-wl-body::-webkit-scrollbar{ width:10px; }
.kw-wl-body::-webkit-scrollbar-thumb{ background:rgba(58,48,64,.18); border-radius:99px; border:3px solid #fbf7f4; }
.kw-wl-foot{ flex:0 0 auto; padding:16px 26px 20px; border-top:1px solid rgba(58,48,64,.08); background:#fffdfc; }

/* ---- fields ---- */
.kw-wl-field{ display:block; }
.kw-wl-label{ display:block; font-size:14px; font-weight:600; color:#3a3040; margin:0 0 7px; }
.kw-wl-labelrow{ display:flex; align-items:center; gap:8px; }
.kw-wl-pill{ font-size:11.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:#6d6459; background:#f3ece7; padding:3px 8px; border-radius:999px; }
.kw-wl-help{ margin:7px 0 0; font-size:13px; line-height:1.5; color:#6d6459; }

.kw-wl-input{
  width:100%; min-height:52px; padding:14px 16px;
  border:1.5px solid rgba(58,48,64,.16); border-radius:14px; background:#fffdfc;
  font-family:'Space Grotesk',sans-serif; font-size:16px; color:#3a3040;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.kw-wl-input::placeholder{ color:#a89ab0; opacity:1; }
.kw-wl-input:focus{ outline:none; border-color:#8f6a2c; box-shadow:0 0 0 3px rgba(143,106,44,.15); }
.kw-wl-input.kw-invalid{ border-color:#c2573a; box-shadow:0 0 0 3px rgba(194,87,58,.12); }

/* ---- fieldset (role) ---- */
.kw-wl-fs{ margin:0; padding:0; border:0; }
.kw-wl-fs legend{ padding:0; font-size:14px; font-weight:600; color:#3a3040; margin:0 0 4px; }
.kw-wl-fs .kw-wl-help{ margin:0 0 11px; font-size:13.5px; color:#665b6e; }
.kw-wl-cards{ display:flex; flex-direction:column; gap:10px; }

/* ---- choice / offer cards ---- */
.kw-wl-card{
  display:flex; align-items:flex-start; gap:13px; padding:15px 16px; min-height:44px;
  border:1.5px solid rgba(58,48,64,.14); border-radius:16px; background:#fffdfc; cursor:pointer;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.kw-wl-card:hover{ border-color:rgba(58,48,64,.28); }
.kw-wl-card:has(input:checked){ border-color:#b8935a; background:#faf3e6; box-shadow:0 0 0 3px rgba(230,205,161,.35); }
.kw-wl-card.kw-invalid{ border-color:#c2573a; }
.kw-wl-cardtxt{ display:block; }
.kw-wl-cardt{ display:block; font-size:15px; font-weight:600; color:#3a3040; line-height:1.35; }
.kw-wl-cardd{ display:block; margin-top:3px; font-size:13.5px; line-height:1.5; color:#665b6e; }

/* ---- native radios/checks, restyled ---- */
.kw-wl-radio, .kw-wl-check{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; width:22px; height:22px; margin:1px 0 0;
  border:1.5px solid rgba(58,48,64,.32); background:#fffdfc; cursor:pointer;
  transition:box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.kw-wl-radio{ border-radius:999px; }
.kw-wl-radio:checked{ border-color:#8f6a2c; box-shadow:inset 0 0 0 5px #8f6a2c; }
.kw-wl-check{ border-radius:7px; display:grid; place-items:center; }
.kw-wl-check:checked{
  border-color:#8f6a2c; background:#8f6a2c;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'><path d='M1 5.6L5 9.5 13 1.5' fill='none' stroke='%23fffdfc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size:13px 10px; background-position:center; background-repeat:no-repeat;
}
.kw-wl-check.kw-invalid{ border-color:#c2573a; }

/* ---- consent ---- */
.kw-wl-consent{ display:flex; align-items:flex-start; gap:12px; padding:4px 2px; min-height:44px; cursor:pointer; }
.kw-wl-consenttxt{ font-size:13.5px; line-height:1.6; color:#524858; }
.kw-wl-consenttxt a{ color:#7d5b23; text-decoration:underline; text-underline-offset:2px; }
.kw-wl-consenttxt a:hover{ color:#5c421a; }

/* ---- branches ---- */
.kw-wl-branch{ display:flex; flex-direction:column; gap:22px; padding-top:2px; }
.kw-wl-branch[hidden]{ display:none; }
.kw-wl-branch.kw-reveal{ animation:kw-wl-reveal .3s ease both; }
@keyframes kw-wl-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- error text + summary ---- */
.kw-wl-err{ margin:7px 0 0; font-size:13.5px; line-height:1.45; color:#a3452c; display:flex; gap:6px; align-items:flex-start; }
.kw-wl-err[hidden]{ display:none; }
.kw-wl-err .kw-bang{ font-weight:700; }
.kw-wl-alert{
  padding:14px 16px; border-radius:14px; background:#fdefec; border:1.5px solid #d9836f;
  color:#8a3a26; font-size:14px; line-height:1.5; animation:kw-wl-reveal .24s ease both;
}
.kw-wl-alert[hidden]{ display:none; }
.kw-wl-alert:focus{ outline:none; }

/* ---- CTA + footnote ---- */
.kw-wl-cta{
  width:100%; min-height:56px; border:0; border-radius:999px; background:#e6cda1; color:#33293c;
  font-family:'Space Grotesk',sans-serif; font-size:16.5px; font-weight:600; letter-spacing:.005em;
  cursor:pointer; transition:filter .16s ease, transform .1s ease;
}
.kw-wl-cta:hover:not(:disabled){ filter:brightness(.96); }
.kw-wl-cta:active:not(:disabled){ transform:translateY(1px); }
.kw-wl-cta:disabled{ opacity:.72; cursor:progress; }
.kw-wl-footnote{ margin:11px 0 0; text-align:center; font-size:12.5px; line-height:1.5; color:#6d6459; }

.kw-wl-fail{ margin:0 0 14px; padding:12px 14px; border-radius:12px; background:#fdefec; border:1px solid #e6b7ab; color:#8a3a26; font-size:13px; line-height:1.5; }
.kw-wl-fail[hidden]{ display:none; }
.kw-wl-fail a{ color:#7d5b23; }

/* honeypot */
.kw-wl-hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0; }
.kw-wl-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* ---- ?test button ---- */
.kw-wl-test{
  display:block; width:100%; margin:10px 0 0; border:1px dashed #b8935a; background:transparent;
  color:#8a6d2f; border-radius:12px; padding:10px 14px; font:inherit; font-weight:600; font-size:13px; cursor:pointer;
}
.kw-wl-test[hidden]{ display:none; }

/* ---- success ---- */
.kw-wl-success{ flex:1 1 auto; overflow-y:auto; padding:34px 26px 30px; text-align:center; }
.kw-wl-success[hidden]{ display:none; }
.kw-wl-scircle{ width:64px; height:64px; margin:0 auto 20px; border-radius:999px; background:#f7efdd; display:grid; place-items:center; }
.kw-wl-stitle{ margin:0 0 10px; font-family:'Fraunces',Georgia,serif; font-size:23px; color:#3a3040; font-weight:600; }
.kw-wl-sp{ margin:0 auto; max-width:34ch; font-size:15px; line-height:1.6; color:#665b6e; }
.kw-wl-sp strong{ color:#3a3040; font-weight:600; }
.kw-wl-snote{ margin:22px auto 0; max-width:34ch; font-size:13.5px; line-height:1.6; color:#6d6459; }
.kw-wl-sbtn{
  margin-top:26px; min-height:48px; padding:0 26px; border:1.5px solid rgba(58,48,64,.18); border-radius:999px;
  background:transparent; color:#3a3040; font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; cursor:pointer;
}
.kw-wl-sbtn:hover{ background:#f3ece7; }

/* ---- focus-visible (never removed) ---- */
.kw-wl :is(input,button,a,select,textarea):focus-visible{ outline:3px solid #8f6a2c; outline-offset:2px; border-radius:12px; }
.kw-wl :is(input,button,a):focus:not(:focus-visible){ outline:none; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .kw-wl-overlay, .kw-wl-overlay .kw-wl-sheet, .kw-wl-branch.kw-reveal, .kw-wl-alert{ animation-duration:.001ms !important; }
  .kw-wl-cta, .kw-wl-input, .kw-wl-card, .kw-wl-radio, .kw-wl-check, .kw-wl-x{ transition-duration:.001ms !important; }
}