.wl-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.25rem;
      background:rgba(28,26,24,.55);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;perspective:1200px}
    .wl-overlay.is-open{opacity:1;visibility:visible}
    .wl-modal{position:relative;width:100%;max-width:440px;background:var(--color-surface-white,#FEFCFA);
      border:1px solid var(--color-border,#E0D5CB);border-radius:22px;padding:2.4rem 2rem 2rem;text-align:center;
      box-shadow:0 24px 70px rgba(60,40,25,.28);transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
    .wl-overlay.is-open .wl-modal{transform:translateY(0) scale(1)}
    .wl-close{position:absolute;top:.9rem;right:1.1rem;background:none;border:none;font-size:1.9rem;line-height:1;
      color:var(--color-text-secondary,#6B6059);cursor:pointer;transition:color .2s}
    .wl-close:hover{color:var(--color-primary,#5C3A28)}
    .wl-eyebrow{font-family:var(--font-body,'DM Sans',sans-serif);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
      font-weight:500;color:var(--color-secondary-dark,#A07844)}
    .wl-title{font-family:var(--font-display,'Cormorant Garamond',serif);font-weight:600;font-size:2rem;line-height:1.1;
      color:var(--color-primary,#5C3A28);margin:.5rem 0 .6rem}
    .wl-title--hero{font-size:2.6rem;letter-spacing:-.01em;margin:.35rem 0 .7rem}
    .wl-text{font-family:var(--font-body,'DM Sans',sans-serif);font-size:.95rem;color:var(--color-text-secondary,#6B6059);
      line-height:1.55;margin:0 auto 1.4rem;max-width:32ch}
    .wl-text b{color:var(--color-text-primary,#1C1A18);font-weight:600}
    .wl-form{display:flex;flex-direction:column;gap:.7rem}
    .wl-input{font-family:var(--font-body,'DM Sans',sans-serif);font-size:.95rem;padding:.85rem 1rem;border-radius:12px;
      border:1px solid var(--color-border,#E0D5CB);background:var(--color-surface-light,#F7F4F0);color:var(--color-text-primary,#1C1A18);width:100%}
    .wl-input:focus{outline:none;border-color:var(--color-secondary,#C49A6C);box-shadow:0 0 0 3px rgba(196,154,108,.18)}
    .wl-question{resize:none;line-height:1.45;min-height:3.6rem}
    .wl-submit{font-family:var(--font-body,'DM Sans',sans-serif);font-size:.95rem;font-weight:500;letter-spacing:.01em;
      color:var(--color-text-inverse,#FEFCFA);background:var(--color-primary,#5C3A28);border:none;border-radius:99px;
      padding:.9rem 1.5rem;cursor:pointer;transition:background .2s;margin-top:.2rem}
    .wl-submit:hover{background:var(--color-primary-dark,#3E2518)}
    .wl-fine{font-family:var(--font-body,'DM Sans',sans-serif);font-size:.72rem;color:var(--color-text-secondary,#6B6059);margin-top:.5rem}
    .wl-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
    .wl-err{font-size:.8rem;color:var(--color-error,#9C3B2A);margin-top:.4rem;min-height:1em}
    .wl-check{width:60px;height:60px;margin:0 auto 1rem;border-radius:50%;background:var(--color-success,#5A7A5C);color:#fff;
      display:flex;align-items:center;justify-content:center;font-size:1.9rem}
    /* Always-available reopen tab */
    body.booking-open .wl-tab{display:none}
    .wl-tab{position:fixed;left:1.1rem;bottom:1.1rem;z-index:9998;font-family:var(--font-body,'DM Sans',sans-serif);
      font-size:.82rem;font-weight:500;color:var(--color-text-inverse,#FEFCFA);background:var(--color-primary,#5C3A28);
      border:none;border-radius:99px;padding:.7rem 1.2rem;cursor:pointer;box-shadow:0 8px 24px rgba(60,40,25,.22);
      transition:background .2s,transform .2s}
    .wl-tab:hover{background:var(--color-primary-dark,#3E2518);transform:translateY(-2px)}
    @media (max-width:520px){.wl-title{font-size:1.7rem}.wl-title--hero{font-size:2.05rem}.wl-modal{padding:2.2rem 1.4rem 1.6rem}}
  
/* Keep the existing card design usable on short screens and with a keyboard. */
.wl-overlay{height:100dvh;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom))}
.wl-modal{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.wl-close{width:36px;height:36px;top:8px;right:10px}
.wl-label{text-align:left;font-size:.75rem;color:var(--color-text-secondary,#6B6059);margin-bottom:-.4rem}
.wl-form details{text-align:left;font-size:.8rem;color:var(--color-text-secondary,#6B6059)}
.wl-form summary{cursor:pointer;padding:.3rem 0}
.wl-question{margin-top:.5rem;resize:vertical}
.wl-submit:disabled{opacity:.65;cursor:wait}
.wl-close:focus-visible,.wl-tab:focus-visible,.wl-submit:focus-visible,.wl-form summary:focus-visible{outline:2px solid #A07844;outline-offset:3px}
@media(max-width:520px){.wl-input{font-size:16px}.wl-modal{padding:2.6rem 1.4rem 1.4rem}.wl-text{font-size:.88rem;margin-bottom:1rem}.wl-tab{font-size:.75rem;padding:.65rem 1rem}}
@media(prefers-reduced-motion:reduce){.wl-overlay,.wl-modal,.wl-tab{transition:none}}

/* ── Ribbon release cover ─────────────────────────────────────────────────
   Ported from previews/founders-popup/preview.css, ribbon variant only.
   Selector map: .cover -> .wl-cover, .ribbon.vertical -> .wl-ribbon--vertical,
   .cover-content -> .wl-cover-content, .seal -> .wl-seal, .fold -> .wl-fold,
   .founders-card.is-revealed -> .wl-modal.wl-revealed.

   The cover is absolute with inset:0, which resolves against .wl-modal's
   PADDING box (.wl-stage is static, so it is not the containing block), so the
   sleeve covers the card edge to edge without moving the modal's padding.

   overflow-x is pinned hidden because the modal is overflow-y:auto; leaving x
   to compute to auto would flash a horizontal scrollbar as the cover slides
   out. The preview's pointer-tracked highlight is deliberately not ported: the
   live JS does not drive --light-x, and a pointer-driven gradient is the kind
   of per-frame repaint this project has had FPS trouble with. */
.wl-modal{overflow-x:hidden}

.wl-cover{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:linear-gradient(120deg,#e4d3b6,#f8ecd7 50%,#d8c2a0);
  transition:transform 1.35s cubic-bezier(.65,0,.2,1),opacity 1s ease;transform-origin:top left}
.wl-cover[hidden]{display:none}
.wl-cover::before{content:'';position:absolute;inset:0;opacity:.6;
  background:radial-gradient(circle at 50% 30%,#fffbeac9,transparent 55%)}

.wl-ribbon{display:block;position:absolute;background:linear-gradient(90deg,#6c432d,#a77c53 45%,#61422d);
  box-shadow:3px 2px 12px #79583130;transition:transform 1.15s ease}
.wl-ribbon--vertical{width:24px;top:0;bottom:0;left:24px}
.wl-ribbon--horizontal{height:24px;top:22px;left:0;right:0}

.wl-cover-content{position:relative;width:100%;padding:54px 24px 36px;padding-left:48px;text-align:center}
.wl-cover .wl-eyebrow{color:#6b4b27;font-size:9px}
.wl-seal{border:1px solid #8d683b66;border-radius:50%;width:72px;height:72px;display:grid;place-items:center;
  margin:36px auto;font:italic 40px var(--font-display,Georgia);color:#5c3a28;
  box-shadow:0 0 0 7px #e6c99444,0 0 0 8px #9d784d33}
.wl-cover h2{font:400 44px/1.03 var(--font-display,Georgia);letter-spacing:-.025em;margin:28px 0 16px;color:#5c3a28}
.wl-cover h2 em{color:#76532e;font-weight:400}
.wl-cover-content>p:not(.wl-eyebrow){font-size:12px;line-height:1.7;color:#705330;margin:0}
.wl-cover button{margin:30px 0 16px;padding:15px 23px;font-size:12px;border:1px solid #6e4d2c80;border-radius:30px;
  background:#fff1ce80;color:#533717;cursor:pointer;box-shadow:0 4px 18px #76522818}
.wl-cover button span{margin-left:16px}
.wl-cover-fine{display:block;font-size:10px;color:#755835}
.wl-fold{position:absolute;bottom:0;right:0;width:42px;height:42px;border-radius:12px 0 0 0;
  background:linear-gradient(135deg,#b79460 50%,#f7e8c5 52%);box-shadow:-5px -5px 16px #65431922}

/* The form waits behind the sleeve and fades up as it leaves. */
#wl-body{opacity:0;transform:translateY(18px);transition:opacity .7s .3s,transform .9s .2s}
.wl-revealed #wl-body{opacity:1;transform:translateY(0)}
/* Ribbons part first, then the sleeve slides off. Ends at ~1.7s, which is what
   the 1750ms timeout in waitlist.js waits for before hiding the cover. */
.wl-revealed .wl-ribbon--vertical{transform:translateY(-105%)}
.wl-revealed .wl-ribbon--horizontal{transform:translateX(105%)}
.wl-revealed .wl-cover{transform:translateX(105%);transition-delay:.35s;pointer-events:none}

@media(max-width:520px){
  .wl-cover h2{font-size:39px}
  .wl-cover-content{padding:40px 24px 25px;padding-left:44px}
  .wl-seal{margin:25px auto}
  .wl-cover button{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){
  .wl-cover,.wl-ribbon,#wl-body{transition:none}
  .wl-revealed .wl-cover{visibility:hidden}
  #wl-body{opacity:1;transform:none}
}

/* The cover is z-index 3 and .wl-close had no z-index, so while the popup was
   still sealed the X sat UNDER the horizontal ribbon and could not be clicked
   at all: a visitor who did not want to sign up could only leave via Escape or
   the backdrop. Lift it above the cover, and while sealed give it a light chip
   so it stays legible where it crosses the dark ribbon. */
.wl-close{z-index:5}
.wl-modal:not(.wl-revealed) .wl-close{width:36px;height:36px;display:grid;place-items:center;
  font-size:1.5rem;line-height:1;border-radius:50%;color:#62472e;
  background:#fbf4e6d9;border:1px solid #b9997055}
.wl-modal:not(.wl-revealed) .wl-close:hover{background:#fff6e8;color:#3f2a17}