@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/karla-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/karla-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lora-latin-500-normal.woff2') format('woff2');}
/* Colors from WSS Color Palette v4 (Yang, 2026-11-06). The page is transparent so it sits on the confirmation card; the box is the same Off White rounded callout as "To make the most of our time". */
:root{ --ink:#131B1E; --dim:#41626E; --frost:#EBF2F4; --off:#F9F9F9; --emerald:#11806A; --emerald-ink:#0E6A58; --ok:#0E6A58; --okbg:#E3F1EE; --okline:#9ACFC2; --errbg:#F2E4E6; --err:#6B2E3A; }
*{ box-sizing:border-box; }
body{ margin:0; background:transparent; color:var(--ink); font-family:Karla,Arial,Helvetica,sans-serif; line-height:1.5; }
main{ background:var(--off); border-radius:12px; padding:20px 22px; }
h1{ font-family:Lora,Georgia,serif; font-size:19px; font-weight:500; margin:0 0 4px; color:var(--ink); }
h1 span{ font-family:Karla,Arial,sans-serif; font-size:14px; font-weight:400; color:var(--dim); }
.lead{ font-size:14px; color:var(--dim); margin:0 0 12px; }
.zone{ border:1.5px dashed var(--dim); border-radius:8px; background:var(--frost); padding:22px 12px; text-align:center; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.zone b{ font-weight:400; font-size:15px; color:var(--ink); } .zone span{ font-size:13px; color:var(--dim); } .zone u{ color:var(--emerald-ink); }
.zone.over,.zone:focus-visible{ border-color:var(--emerald); outline:none; }
.status{ margin:10px 0 0; font-size:13px; }
.status:empty{ margin:0; }   /* no blank line held open while there is no message */
.status.ok{ background:var(--okbg); border:1px solid var(--okline); color:var(--ok); border-radius:8px; padding:8px 12px; }
.status.err{ background:var(--errbg); color:var(--err); border-radius:8px; padding:8px 12px; }
.ts{ margin:10px 0 0; }
.row{ display:flex; align-items:center; gap:16px; margin-top:12px; }
button{ font:inherit; font-size:14px; cursor:pointer; }
#send{ background:var(--emerald); color:#fff; border:0; border-radius:6px; padding:9px 18px; }
#send[aria-disabled="true"]{ background:#9FD0C5; cursor:default; }
button.link{ background:none; border:0; padding:0; color:var(--emerald); text-decoration:underline; }
.fine{ font-size:12px; color:var(--dim); margin:12px 0 0; }
[hidden]{ display:none !important; }   /* the drop box and buttons are hidden after sending; their own display rules would otherwise win */