/* ============================================================================
   waitlist.css — the beta waitlist form and its success state (added 2026-10-01).
   Used by the homepage, the beta page and the server's no-JavaScript reply page.
   Every size and colour is copied from the inline styles of
   design_reference/site_home_v2_reference.html (the approved design); the colours are the
   site's brand colours (site.css / design_reference/site_tokens.css). Two additions the
   reference does not have: the red error messages, and the off-screen robot trap.
   ============================================================================ */

/* The form card */
.wl-form {
  margin-top: 28px; width: 100%; max-width: 560px; box-sizing: border-box;
  padding: clamp(18px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 16px;
  background: #FFFFFF; border: 1px solid #E7E4F3; border-radius: 20px; text-align: left;
}
.wl-form a { color: #3D2B7A; }
.wl-form a:hover { color: #6A55E8; }

/* Two boxes side by side where there is room, one under the other on a phone */
.wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.wl-grid-more { margin-top: 6px; }
/* A label + box. Pushed to the bottom of its cell, so boxes in one row line up even when
   one label runs to two lines. */
.wl-field { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.wl-label { font-size: 13px; line-height: 1.4; font-weight: 500; color: #5D5672; }
.fi {
  width: 100%; height: 48px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid #CFC8E6; border-radius: 12px; background: #FFFFFF; color: #2A2440;
  font-family: inherit; font-size: 16px;
}
.fi:focus { outline: 2px solid #6A55E8; outline-offset: 1px; }
.fi::placeholder { color: #5D5672; opacity: .8; }

/* "Add firm details (optional)" */
.wl-summary {
  cursor: pointer; list-style: none;
  min-height: 44px; display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: #3D2B7A;
}
.wl-summary::-webkit-details-marker { display: none; }

/* The consent tick */
.wl-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #2A2440; }
.wl-consent input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #6A55E8; }

/* The button */
.wl-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; box-sizing: border-box; padding: 0 28px;
  border: 0; border-radius: 14px; background: #6A55E8; color: #FFFFFF;
  font-family: inherit; font-size: 18px; font-weight: 600; cursor: pointer;
  transition: background-color .2s;
}
.wl-btn:hover { background: #5745D1; }
.wl-btn .arr { transition: transform .2s; }
.wl-btn:hover .arr { transform: translateX(4px); }
.wl-btn[disabled] { cursor: progress; opacity: .8; }

/* The line under the button */
.wl-small { margin: 0; font-size: 13px; line-height: 1.5; color: #5D5672; }

/* ---------- what to fix (not in the reference: shown only when something is wrong) ----------
   A dark red that reads clearly on white (contrast 6.6 : 1). */
.wl-err { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: #B42318; }
.wl-err[hidden] { display: none; }
.wl-form-err { font-size: 14px; }
.fi[aria-invalid="true"] { border-color: #B42318; }
.wl-consent-wrap { display: flex; flex-direction: column; gap: 6px; }

/* The robot trap: a real box in the page's code, but never displayed (since 2026-10-01, second
   round: the "hidden" attribute, so autofill and password managers never fill it). */
.wl-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.wl-trap[hidden] { display: none; }

/* ---------- the success state ---------- */
.wl-done {
  margin-top: 28px; width: 100%; max-width: 560px; box-sizing: border-box; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #FFFFFF; border: 1px solid #E7E4F3; border-radius: 20px; text-align: center;
}
.wl-done[hidden] { display: none !important; }
.wl-done:focus { outline: none; }
/* Sakhi: the 39-frame strip; frame 0 is her resting smile, the last frame the thumbs-up. */
.sakhi2 {
  width: 150px; aspect-ratio: 320 / 312;
  background: url(/static/site/sakhi-smile-strip.webp) 0% 0 / 3900% 100% no-repeat;
}
.wl-done-h { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; color: #3D2B7A; }
.wl-done-p { margin: 0; font-size: 16px; line-height: 1.5; color: #5D5672; }

/* Motion (reference timings): Sakhi raises her thumb once, then the two lines rise. */
@keyframes wlSakOnce { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes wlRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.yes .sakhi2 { animation: wlSakOnce 3.2s steps(38, end) .2s both; }
.yes .y { animation: wlRise .6s cubic-bezier(.2, .7, .2, 1) .3s both; }
@media (prefers-reduced-motion: reduce) {
  .yes .sakhi2, .yes .y, .wl-btn, .wl-btn .arr { animation: none !important; transition: none !important; }
}

/* ---------- the server's no-JavaScript reply page (templates/site_join.html) ---------- */
.join-page { max-width: 600px; margin: 0 auto; padding: 26px 20px 8px; box-sizing: border-box; }
.join-page h1 { margin: 0 0 8px; font-size: 26px; font-weight: 600; line-height: 1.18; letter-spacing: -.02em; color: #3D2B7A; }
.join-intro { margin: 0; font-size: 15px; line-height: 1.6; color: #2A2440; }
.join-page .wl-form, .join-page .wl-done { margin-top: 18px; }
.join-back { margin: 18px 0 0; font-size: 14px; }

/* ============================================================================
   THE REFERRAL PROGRAMME (3 Nov 2026)
   ============================================================================
   Sizes, colours and words from design_reference/refer-design-2026-11-03/Success.dc.html
   (the card) and Main.dc.html (the heading inside the /refer form). The card replaces the form
   after a FIRST sign-up; #wl-done then drops its own card look (.wl-done-card) so the success
   card is the only box. */

/* The heading and line inside the /refer form */
.wl-head { display: flex; flex-direction: column; gap: 6px; }
.wl-head-h { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: #3D2B7A; }
.wl-head-p { margin: 0; font-size: 16px; line-height: 1.55; color: #2A2440; }

/* A number already on the list: the extra line under the thank-you */
.wl-done-p[hidden], .wl-plain[hidden] { display: none; }

/* #wl-done holding the card: no box of its own */
.wl-done.wl-done-card {
  max-width: 640px; padding: 0; background: none; border: 0; border-radius: 0;
  align-items: stretch; text-align: left;
}

/* Sakhi, small and still: her resting smile (frame 0 of the strip) in a round lavender disc.
   --sz is the disc's width; Sakhi's frame is 1/0.76 of it, placed so her disc fills the circle
   (the disc sits at 12% / 5% of her frame, as in rf.css). */
.sk-mini {
  --sz: 56px; position: relative; flex: none; width: var(--sz); height: var(--sz);
  border-radius: 50%; overflow: hidden; background: #E3DCFA;
}
.sk-mini-disc { display: none; }
.sk-mini-face {
  position: absolute; width: calc(var(--sz) / .76); aspect-ratio: 320 / 312;
  left: calc(var(--sz) / .76 * -.12); top: calc(var(--sz) / .76 * 312 / 320 * -.05);
  background: url(/static/site/sakhi-smile-strip.webp) 0% 0 / 3900% 100% no-repeat;
}

/* The card */
.sc {
  width: 100%; box-sizing: border-box; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
  background: #FFFFFF; border: 1px solid #E7E4F3; border-radius: 18px; text-align: left;
}
.sc[hidden] { display: none; }
.sc-head { display: flex; align-items: center; gap: 14px; }
.sc-h { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: #3D2B7A; }
.sc-p { margin: 0; font-size: 16px; line-height: 1.55; color: #2A2440; }
.sc-box { border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.sc-private { background: #3D2B7A; }
.sc-share { background: #F1EEFD; border: 1px solid #E7E4F3; }
.sc-label { font-size: 13px; font-weight: 500; color: #5D5672; }
.sc-private .sc-label { color: #C9BFFF; }
.sc-link { font-size: 15px; color: #2A2440; word-break: break-all; }
.sc-private .sc-link { color: #FFFFFF; }
.sc-warn { font-size: 15px; line-height: 1.5; font-weight: 600; color: #FFFFFF; }
.sc-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 48px; padding: 0 22px; border-radius: 12px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; text-decoration: none;
}
.sc-btn[hidden] { display: none; }
.sc .sc-btn-white { background: #FFFFFF; color: #3D2B7A; font-weight: 600; }
.sc .sc-btn-ghost { background: transparent; color: #FFFFFF; border: 1.5px solid #C9BFFF; }
.sc .sc-btn-line { background: #FFFFFF; color: #6A55E8; border: 1.5px solid #6A55E8; }
.sc .sc-btn-fill { background: #6A55E8; color: #FFFFFF; }
.sc .sc-btn-ghost:hover, .sc .sc-btn-white:hover { color: #3D2B7A; background: #F1EEFD; }
.sc .sc-btn-fill:hover { background: #5745D1; color: #FFFFFF; }
.sc .sc-btn-line:hover { color: #5745D1; border-color: #5745D1; }
.sc-btn:focus-visible { outline: 2px solid #6A55E8; outline-offset: 2px; }
.sc-private .sc-btn:focus-visible { outline-color: #FFFFFF; }
.sc-small { margin: 0; font-size: 14px; line-height: 1.5; color: #5D5672; }
@media (max-width: 480px) {
  .sc { padding: 24px 18px; }
  .sc-h { font-size: 24px; }
  .sc-box { padding: 18px; }
}