/* ============================================================================
   waitlist.css — apex culturily.com landing (design direction B · "The Split").
   One job: join the email waitlist. Cream/editorial; Fraunces + DM Sans +
   Cabinet Grotesk; lime/olive. Brand tokens + Cabinet Grotesk @font-face from
   global.css. Responsive (desktop split → mobile stack).
   ============================================================================ */

html { scroll-behavior: smooth; }
.wl {
  max-width: 1000px;
  margin: 32px auto;
  background: #FBF7EE;
  border: 1px solid #E4DAC6;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(74, 57, 20, 0.12);
  font-family: var(--font-body);
  color: #1f1b12;
}
.wl-topedge { height: 8px; background: linear-gradient(90deg, #4A6300, #99CC00 60%, #CCFF00); }

/* ── Header ── */
.wl-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 44px; }
.wl-brand { display: inline-flex; align-items: center; gap: 10px; }
.wl-wordmark { font-family: 'Fraunces', Georgia, serif; font-size: 1.38rem; font-weight: 600; color: #1f1b12; }
.wl-brand-dot { width: 4px; height: 4px; border-radius: 50%; background: #c9bda3; }
.wl-kicker { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #4A6300; }
.wl-headbtn {
  background: transparent; border: 1.5px solid #CFC4AC; border-radius: 11px;
  padding: 9px 18px; font-family: var(--font-body); font-weight: 700; font-size: 0.84rem;
  color: #4A4031; text-decoration: none; cursor: pointer; transition: background 140ms ease, border-color 140ms ease;
}
.wl-headbtn:hover { background: #F3EEDF; border-color: #b9ad92; }
.wl-nav { display: inline-flex; align-items: center; gap: 18px; }
.wl-navlink { font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: #6f6048; text-decoration: none; transition: color 140ms ease; }
.wl-navlink:hover { color: #4A6300; }

/* ── Hero (split) ── */
.wl-hero { display: flex; gap: 40px; padding: 30px 44px 56px; align-items: center; }
.wl-hero-copy { flex: 1; min-width: 0; }
.wl-h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: 2.85rem; line-height: 1.1; letter-spacing: -0.015em;
  color: #1f1b12; margin: 0; text-wrap: balance;
}
.wl-h1 em { font-style: normal; color: #4A6300; }
.wl-sub { font-size: 1.03rem; line-height: 1.6; color: #6f6048; margin: 20px 0 0; max-width: 400px; }

/* Capture (shared by hero + closing) */
.wl-form { margin-top: 30px; max-width: 440px; }
.wl-capture { display: flex; gap: 9px; }
.wl-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid #E4DAC6; border-radius: 13px; padding: 0 16px;
}
.wl-field:focus-within { border-color: #99CC00; }   /* ONE box: only the wrapper border changes color — no ring/glow */
.wl-field-ico { flex: 0 0 auto; }
/* The inner input carries NO border/outline/box-shadow of its own — the wrapper
   is the only box. (A second border/outline here is what caused the double ring.) */
.wl-email {
  flex: 1; min-width: 0; background: none;
  border: none; outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  font-family: var(--font-body); font-size: 0.95rem; color: #1f1b12; padding: 15px 0;
}
/* Kill the GLOBAL ring at its source: global.css has `input:focus-visible {
   outline: 2px solid var(--accent); outline-offset: 2px }` (specificity 0,1,1)
   which beat the plain `.wl-email{outline:none}`. !important guarantees the
   email field shows NO outline/offset ring — the only focus cue is the wrapper
   border (.wl-field:focus-within). */
.wl-email:focus,
.wl-email:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; }
.wl-email::placeholder { color: #b3a88e; }
.wl-submit {
  border: none; border-radius: 13px; padding: 0 24px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-weight: 800; font-size: 0.95rem;
  transition: transform 120ms ease, filter 140ms ease;
}
.wl-submit:active { transform: scale(0.98); }
.wl-submit:disabled { opacity: 0.65; cursor: default; }
.wl-btn-lime { background: #CCFF00; color: #1f1b12; box-shadow: 0 4px 0 0 #9bcc00; }
.wl-btn-lime:hover { filter: brightness(1.03); }
.wl-btn-olive { background: #4A6300; color: #FBF7EE; }
.wl-btn-olive:hover { background: #56730a; }

.wl-note { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: #a89a7e; margin: 11px 0 0; }
.wl-cultures { font-size: 0.78rem; color: #a89a7e; margin: 6px 0 0; }
/* iOS teaser — greyed, minimal "coming soon" badge (NOT Apple's official asset,
   which can't be greyed/used pre-launch per their brand guidelines). */
.wl-store { display: inline-flex; margin: 16px 0 0; }
.wl-store-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border: 1px solid #ded6c6; border-radius: 11px; color: #a89a7e; }
.wl-store-badge svg { fill: #a89a7e; flex: none; }
.wl-store-txt { display: inline-flex; flex-direction: column; line-height: 1.08; text-align: left; }
.wl-store-txt small { font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; }
.wl-store-txt strong { font-size: 0.95rem; font-weight: 600; }
/* GDPR: submitting the form IS informed consent — this frames the emails they'll
   get as a perk of joining (not a pre-checked box). Small, muted, on-brand. */
.wl-consent { font-size: 0.72rem; line-height: 1.45; color: #a89a7e; margin: 10px 0 0; max-width: 440px; }
.wl-consent a { color: inherit; text-decoration: underline; }
.wl-closing .wl-consent { margin-left: auto; margin-right: auto; }
.wl-error { font-size: 0.8rem; color: #b3261e; margin: 9px 0 0; }
.wl-error:empty { margin: 0; }
/* LOUD post-signup callout — must be impossible to miss (double opt-in: they
   are NOT on the list until they confirm via email). Replaces the old quiet line. */
.wl-callout {
  margin-top: 30px; max-width: 460px;
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(153, 204, 0, 0.14);
  border: 2px solid #99CC00;
  border-radius: 16px;
  padding: 18px 20px;
  text-align: left;
}
.wl-callout-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: #CCFF00;
}
.wl-callout-txt { min-width: 0; }
.wl-callout-h {
  display: block;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: 1.28rem; line-height: 1.22; color: #1f1b12; margin: 0 0 5px;
}
.wl-callout-p { display: block; font-size: 0.95rem; line-height: 1.5; color: #4a4030; margin: 0; }
.wl-callout-p strong { color: #1f1b12; font-weight: 700; }

/* ── Floating Daily card (the real card look) ── */
.wl-cardwrap { flex: 0 0 320px; }
.wl-card {
  background: #FCF8F0; border: 1px solid #E7DECB; border-radius: 20px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(74, 57, 20, 0.18); transform: rotate(1.5deg);
}
.wl-card-mast { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; background: #1f1b12; }
.wl-card-mast-left { display: inline-flex; align-items: baseline; gap: 7px; }
.wl-card-title { font-family: 'Fraunces', Georgia, serif; font-size: 0.88rem; font-weight: 600; color: #FBF7EE; }
.wl-card-brand { font-family: var(--font-body); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #CCFF00; }
.wl-card-body { padding: 24px 22px; }
.wl-card-flagrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.wl-flag { width: 18px; height: 12px; border-radius: 2px; overflow: hidden; display: inline-flex; box-shadow: 0 0 0 1px rgba(14, 14, 14, 0.1); }
.wl-card-culture { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4A6300; }
.wl-card-frame { display: block; font-size: 0.7rem; color: #a89a7e; }
.wl-card-hook { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.5rem; line-height: 1.3; color: #1f1b12; margin-top: 12px; }
.wl-card-react { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.wl-love { display: inline-flex; align-items: center; justify-content: center; background: #4A6300; border-radius: 9999px; padding: 8px 12px; }

/* ── Value row (promise strip) ── */
.wl-promise { background: #F3EEDF; border-top: 1px solid #ECE3D2; padding: 36px 44px; display: flex; gap: 18px; }
.wl-promise-item { flex: 1; display: flex; align-items: flex-start; gap: 12px; }
.wl-promise-ico {
  display: flex; align-items: center; justify-content: center; flex: 0 0 36px;
  width: 36px; height: 36px; border-radius: 10px; background: #FCF8F0; border: 1px solid #E7DECB;
}
.wl-promise-txt { display: flex; flex-direction: column; gap: 3px; }
.wl-promise-t { font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: #1f1b12; }
.wl-promise-d { font-size: 0.8rem; line-height: 1.45; color: #6f6048; }

/* ── Why it hits home (culture taste → personal → app tease) ── */
.wl-why { padding: 50px 44px; border-top: 1px solid #ECE3D2; text-align: center; }
.wl-why-eyebrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #4A6300; }
.wl-why-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.95rem; line-height: 1.18; color: #1f1b12; margin: 10px 0 0; text-wrap: balance; }
.wl-why-title em { font-style: normal; color: #4A6300; }
.wl-why-sub { font-size: 1rem; line-height: 1.6; color: #6f6048; margin: 16px auto 0; max-width: 560px; }
.wl-why-stats { display: flex; gap: 22px; margin: 36px 0 0; text-align: left; align-items: stretch; }
/* The three fact tiles reuse the hero's floating Daily-card look (.wl-card) —
   no tilt, equal height, source pinned to the bottom. */
.wl-why-stats .wl-card { flex: 1; min-width: 0; transform: none; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(74, 57, 20, 0.13); }
.wl-why-stats .wl-card-body { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 18px; }
.wl-why-stats .wl-card-hook { font-size: 1.05rem; line-height: 1.32; margin-top: 12px; }
.wl-why-stats .wl-card-frame { margin-top: auto; padding-top: 14px; }
.wl-why-tease { font-size: 1rem; line-height: 1.6; color: #4a4030; margin: 34px auto 0; max-width: 600px; }
.wl-why-tease strong { color: #1f1b12; font-weight: 700; }

/* ── Closing capture ── */
.wl-closing { padding: 50px 44px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.wl-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 2rem; line-height: 1.2; color: #1f1b12; margin: 0; text-wrap: balance; }
.wl-closing .wl-form { margin-top: 24px; width: 100%; max-width: 440px; }
.wl-closing .wl-error { text-align: center; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .wl { margin: 16px; }
  .wl-header { padding: 18px 24px; }
  .wl-headbtn, .wl-navlink { display: none; }    /* mobile B header has no button/nav */
  .wl-why { padding: 38px 26px; }
  .wl-why-stats { flex-direction: column; gap: 14px; }
  .wl-hero { flex-direction: column; align-items: stretch; gap: 30px; padding: 24px 26px 40px; }
  .wl-h1 { font-size: 2.1rem; }
  .wl-sub { max-width: none; }
  .wl-form { max-width: none; }
  .wl-cardwrap { flex: none; align-self: center; max-width: 340px; width: 100%; }
  .wl-card { transform: rotate(1deg); }
  .wl-promise { flex-direction: column; gap: 16px; padding: 30px 26px; }
  .wl-closing { padding: 40px 26px; }
}
@media (max-width: 460px) {
  .wl-h1 { font-size: 1.85rem; }
  .wl-capture { flex-direction: column; }        /* stack input + button, full-width taps */
  .wl-submit { padding: 14px 24px; }
  .wl-card-hook { font-size: 1.3rem; }
}

/* Respect reduced motion — drop the card tilt + press transforms. */
@media (prefers-reduced-motion: reduce) {
  .wl-card { transform: none; }
  .wl-submit { transition: filter 140ms ease; }
  .wl-submit:active { transform: none; }
}