/* The referral page look (Jarvis handoff section 7, D-173): every member's page (/r/{slug}) and every client link
   ({code}/from/{name}). Calm, personal, phone first: one 480px column, warm off-white, one accent, light only on purpose.
   The first block is the handoff's stylesheet as written; below it, the same tokens for the pieces Afterclose adds (the
   tap-Next line, the pick-a-time step, the client's share view). Fonts are served from this site (the page's security
   policy allows no other font host): Bricolage Grotesque 800 and Source Sans 3, both SIL Open Font License. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/source-sans-3-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); }

/* Two shades moved from the handoff so text passes 4.5 to 1, as the handoff asks: --teal #0E8C86 to #0D827C (white on it 4.11 to 4.67),
   --mute #6F8886 to #5F7473 (on the background 3.51 to 4.6). Everything else is as written. */
:root{--g:#F4F7F5;--s:#fff;--ink:#0F2A2A;--ink2:#3D5654;--mute:#5F7473;--line:#D6E2DE;--teal:#0D827C;--deep:#0A6B67;--green:#3FA34D;--gold:#E8B317;color-scheme:light}
*{box-sizing:border-box}
html{background:var(--g)}
body{margin:0;background:var(--g);color:var(--ink);font:17px/1.55 "Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
.band{height:5px;background:linear-gradient(90deg,var(--teal),var(--green))}
.wrap{max-width:480px;margin:0 auto;padding:22px 22px 56px}
.brand{display:flex;align-items:center;gap:9px;margin-bottom:30px}
.brand b{font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em}
.top{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
.face{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 3px var(--s),0 0 0 6px var(--teal)}
h1{font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;font-weight:800;font-size:clamp(34px,9.5vw,42px);line-height:1.02;letter-spacing:-.025em;margin:0;text-wrap:balance}
.q{margin:0 0 20px;padding:14px 18px;border-left:3px solid var(--gold);background:var(--s);border-radius:0 10px 10px 0;font-size:17px;line-height:1.45;color:var(--ink2);font-style:italic}
.q footer{font-style:normal;font-size:13px;color:var(--mute);margin-top:6px;font-weight:600}
.prose p{margin:0 0 14px;color:var(--ink);font-size:17px}   /* D-176: Anthony: the description was too light */
.prose b{color:var(--ink)}
.ask{margin-top:26px;background:var(--s);border-radius:16px;padding:22px 20px 20px;box-shadow:0 1px 2px rgba(15,42,42,.05),0 10px 30px rgba(15,42,42,.08);display:flex;flex-direction:column;gap:15px}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-size:13px;font-weight:700;color:var(--ink2);letter-spacing:.01em}
.f label span{font-weight:400;color:var(--mute)}
.f input,.f textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--s);border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;width:100%;transition:border-color .15s,box-shadow .15s}
.f textarea{resize:none;line-height:1.4}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,140,134,.15)}
.f ::placeholder{color:#9BB0AD}
.consent{display:flex;gap:11px;align-items:flex-start;background:var(--g);border-radius:10px;padding:12px 13px;cursor:pointer}
.consent input{margin:3px 0 0;width:18px;height:18px;flex:none;accent-color:var(--teal)}
.consent span{font-size:12.5px;line-height:1.45;color:var(--ink2)}
.cta{font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;font-weight:800;font-size:18px;background:var(--teal);color:#fff;border:none;border-radius:12px;padding:16px;width:100%;cursor:pointer;text-align:center;text-decoration:none;display:block;transition:background .15s,transform .08s}
.cta:hover{background:var(--deep)}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cta.ghost{background:var(--s);color:var(--deep);border:1.5px solid var(--teal)}
.cta.ghost:hover{background:#E6F3F2}
.fine{font-size:12.5px;color:var(--mute);line-height:1.5;margin:0}
.fine b{color:var(--ink2)}
.err{background:#FDECEC;color:#8A1F1F;border-radius:9px;padding:10px 12px;font-size:14px;font-weight:600}
.done{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding-top:22px}
.done .tick{width:52px;height:52px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.done p{margin:0;font-size:17px;color:var(--ink)}
.done .cta{width:auto;padding:14px 26px}
.foot{margin-top:34px;font-size:13px;color:var(--mute);line-height:1.8;text-align:center}
.foot a{color:var(--deep);text-decoration:none;font-weight:600}
@media(prefers-reduced-motion:no-preference){.top,.q,.prose,.ask,.done{animation:up .5s ease both}.q{animation-delay:.06s}.prose{animation-delay:.1s}.ask{animation-delay:.16s}}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- Afterclose's additions, same tokens */
[hidden]{display:none !important}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mark{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 2.5px var(--teal);
  font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;font-weight:800;font-size:10px;letter-spacing:-.02em;color:var(--deep)}
.face.initials{display:grid;place-items:center;background:#CFE3DF;color:var(--deep);font-weight:700;font-size:34px;line-height:1}
h1:focus,h1:focus-visible{outline:none}
.prose p{white-space:pre-line}
.steps{margin:0;font-size:13px;font-weight:700;color:var(--deep);letter-spacing:.01em}
.cta:disabled{opacity:.6;cursor:default;transform:none}
.loading{color:var(--mute);margin:40px 0}
.missing{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.missing p{margin:0;color:var(--ink2)}
.bk-clickwrap a,.fine a{color:var(--deep);text-decoration:underline;text-underline-offset:2px}
/* D-203: Version B of the client's own page (config.SHARE_B_AGENTS only for now). Two tiles, then the chosen one: the text with a picture of it in Messages, or the friend's
   info. The picture is drawn plainly in Apple's own light colors, shorter than the real screen so it reads as "this is what they'll get". */
.share-preview{background:var(--s);border-radius:16px;padding:16px 18px;color:var(--ink2);white-space:pre-line;box-shadow:0 1px 2px rgba(15,42,42,.05),0 10px 30px rgba(15,42,42,.08)}
.share .cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.share{display:flex;flex-direction:column;gap:14px}
.share p{margin:0}
.share-b{display:flex;flex-direction:column;gap:14px}
.share-b p{margin:0}
.share-b h1{font-size:clamp(30px,8.4vw,38px)}
.share-b .cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%}
.share-b .cta svg{flex:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{font:inherit;text-align:left;background:var(--s);border:1.5px solid var(--line);border-radius:14px;padding:13px 12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.tile b{font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;font-weight:800;font-size:16px;line-height:1.15}
.tile span{font-size:13.5px;color:var(--ink2);line-height:1.35}
.tile .ic{width:34px;height:34px;border-radius:10px;background:#E6F3F2;display:grid;place-items:center}
.tile[aria-pressed="true"]{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,140,134,.15)}
.tile:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.card{background:var(--s);border-radius:16px;padding:18px;box-shadow:0 1px 2px rgba(15,42,42,.05),0 10px 30px rgba(15,42,42,.08);display:flex;flex-direction:column;gap:13px}
.card > p{color:var(--ink2);font-size:16px}
.pic{width:100%;max-width:380px;align-self:center;background:#fff;border-radius:18px;border:1px solid #E5E5EA;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 14px rgba(15,42,42,.08);font-family:-apple-system,system-ui,"Segoe UI",sans-serif}
.pic-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:11px 14px 9px;border-bottom:1px solid #E5E5EA;font-size:15px;font-weight:600;color:#000}
.pic-top i{font-style:normal;font-weight:400;color:#0A7AFF;font-size:15px}
.pic-to{padding:8px 14px;border-bottom:1px solid #E5E5EA;color:#8E8E93;font-size:15px}
.pic-body{height:36px}   /* Anthony, 2026-10-28: half the empty middle (it was 72px on a 390px phone) */
.pic-bar{display:flex;gap:7px;align-items:flex-end;padding:0 10px 12px}
.pic-in{flex:1;min-width:0;border:1px solid #D1D1D6;border-radius:18px;padding:8px 12px;font-size:15px;line-height:1.35;color:#000;overflow-wrap:anywhere}
.pic-send{width:28px;height:28px;border-radius:50%;background:#0A7AFF;display:grid;place-items:center;flex:none}
.bl{color:#0070E0;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-all}
.trust{font-size:14px;line-height:1.45;color:var(--ink2)}
.trust b{color:var(--ink)}
.alt{font-size:14px;color:var(--mute);text-align:center}
.linkish{font:inherit;font-size:14px;font-weight:600;background:none;border:0;padding:2px;color:var(--deep);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkish:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ok{display:flex;gap:10px;align-items:flex-start;background:var(--g);border-radius:10px;padding:11px 12px;cursor:pointer}
.ok input{margin:3px 0 0;width:18px;height:18px;flex:none;accent-color:var(--teal)}
.ok span{font-size:14px;line-height:1.4;color:var(--ink2)}
.sent{align-items:flex-start}
.sent .tick{width:46px;height:46px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.sent h2{font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;font-weight:800;font-size:24px;letter-spacing:-.015em;line-height:1.1;margin:0}
.sent h2:focus{outline:none}
.sent p{color:var(--ink);font-size:16px}
.sent .cta{width:auto;padding:12px 22px;font-size:16px}
.who{display:flex;gap:12px;align-items:center;background:var(--s);border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 1.5px var(--line)}
.who b{display:block;font-size:15px;line-height:1.3}
.who span{display:block;font-size:13px;color:var(--mute);line-height:1.45}
.who a{color:var(--deep);font-weight:600;text-decoration:none}
.face.sm{width:48px;height:48px;flex:none;box-shadow:0 0 0 2px var(--s),0 0 0 4px var(--teal)}
.face.sm.initials{font-size:17px}
@media(prefers-reduced-motion:no-preference){.share-b{animation:up .5s ease both}}

/* The classes the pick-a-time step (book.js) uses, in this look */
.lead{margin:0;color:var(--ink);font-size:17px}
.cap{margin:0;font-size:13px;color:var(--mute)}
.btn{font:inherit;cursor:pointer;text-align:center;text-decoration:none;display:block;width:100%;border-radius:12px;padding:15px;
  font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;font-weight:800;font-size:17px;transition:background .15s,transform .08s}
.btn.primary{background:var(--teal);color:#fff;border:none}
.btn.primary:hover{background:var(--deep)}
.btn.primary:disabled{opacity:.55;cursor:default}
.btn.quiet{background:var(--s);color:var(--deep);border:1.5px solid var(--teal)}
.btn.quiet:hover{background:#E6F3F2}
.btn:focus-visible,.bk-slot:focus-visible,.bk-c:focus-visible,.bk-nav:focus-visible,.bk-skip:focus-visible,.bk-more:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.notice.bad{background:#FDECEC;color:#8A1F1F;border-radius:9px;padding:10px 12px;font-size:14px;font-weight:600;margin:0}
.bk{display:flex;flex-direction:column;gap:14px}
.bk-steps{margin:0;font-size:13px;font-weight:700;color:var(--deep)}
.bk-card{display:grid;grid-template-columns:196px minmax(0,1fr);gap:14px;align-items:start;background:var(--s);border-radius:16px;padding:16px;
  box-shadow:0 1px 2px rgba(15,42,42,.05),0 10px 30px rgba(15,42,42,.08)}
.bk-mhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
.bk-mhead b{font-size:15px;color:var(--ink)}
.bk-nav{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:var(--s);color:var(--deep);font:inherit;font-size:16px;font-weight:700;cursor:pointer;padding:0;line-height:1}
.bk-nav:disabled{opacity:.35;cursor:default}
.bk-grid{display:grid;grid-template-columns:repeat(7,25px);gap:3px;text-align:center}
.bk-wd{font-size:11px;font-weight:700;color:var(--mute);padding:2px 0}
.bk-c{font:inherit;font-size:13px;width:25px;height:27px;border-radius:7px;border:0;background:transparent;color:#9BB0AD;display:grid;place-items:center;padding:0}
.bk-c.open{color:var(--deep);font-weight:700;background:#E6F3F2;cursor:pointer}
.bk-c.today{box-shadow:inset 0 0 0 1.5px var(--gold)}
.bk-c.on{background:var(--teal);color:#fff}
.bk-c.blank{visibility:hidden}
.bk-legend{display:flex;gap:12px;margin-top:8px;font-size:11px;color:var(--mute);align-items:center}
.bk-key{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.bk-key.open{background:#E6F3F2}
.bk-key.today{box-shadow:inset 0 0 0 1.5px var(--gold)}
.bk-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.bk-side h2{font-size:15px;margin:4px 0 2px;color:var(--ink)}
.bk-it{display:flex;flex-direction:column;gap:4px}
.bk-grp{font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;margin:4px 0 0}
.bk-slot{font:inherit;font-size:15px;font-weight:700;border:1.5px solid var(--line);background:var(--s);color:var(--ink);border-radius:10px;height:42px;cursor:pointer}
.bk-slot:hover{border-color:var(--teal)}
.bk-slot.on{border-color:var(--teal);background:var(--teal);color:#fff}
.bk-none{font-size:13px;color:var(--mute);margin:2px 0}
.bk-tz{margin:0}
.bk-zone{font:inherit;font-size:13px;padding:2px 6px;border-radius:8px;border:1px solid var(--line);background:var(--s);color:var(--ink)}
.bk-skip{display:block;margin:0 auto;font:inherit;font-size:15px;font-weight:600;background:none;border:0;padding:4px;color:var(--deep);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.bk-more{font:inherit;font-size:13.5px;font-weight:600;background:none;border:0;padding:6px 0 0;color:var(--deep);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left}
.bk-mark{width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:800;line-height:1}
.bk-booked{padding:14px 16px;border-radius:14px;background:var(--s);box-shadow:inset 0 0 0 1.5px var(--line)}
.bk-booked p{margin:0}
.bk-when{font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;font-size:21px;font-weight:800;margin:4px 0 !important;color:var(--ink)}
@media (max-width:380px){.bk-card{grid-template-columns:1fr}}