/* Styles for the live site's scripts on the redesigned pages (10/13/2026).
   assets/site.js builds the waitlist pop-up and assets/directory.js the practice
   cards with Tailwind class names. The new pages do not load Tailwind, so the
   few classes those scripts use are defined here, scoped to their own boxes. */

.hidden{display:none!important}

/* Top bar is a button now: it opens the waitlist pop-up, as on the live site */
button.dev{display:block;width:100%;border:0;cursor:pointer;font-family:var(--sans)}
button.dev:hover{opacity:.9}

/* Phone menu (assets/site.js toggles [hidden] on #mobile-menu) */
.menubtn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:10px;border:0;background:none;cursor:pointer}
.menubtn span{display:block;height:2px;background:var(--ink);border-radius:2px}
.mmenu{display:none}
@media (max-width:860px){
  .menubtn{display:flex}
  header .wrap>.btn{display:none}
  .mmenu:not([hidden]){display:flex;flex-direction:column;border-top:1px solid var(--line);padding:8px max(var(--gut),6vw) 16px;background:var(--paper)}
  .mmenu a{padding:12px 0;color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--t-small)}
  .mmenu a.on{color:var(--teal-ink)}
}

/* ---------- Waitlist pop-up ---------- */
#waitlist-modal{position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:16px;background:rgba(22,24,26,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#waitlist-modal.flex{display:flex}
#waitlist-modal>div{position:relative;width:100%;max-width:28rem;max-height:92vh;overflow-y:auto;background:var(--paper);border-radius:18px;padding:32px;box-shadow:0 24px 60px rgba(22,24,26,.25);font-family:var(--sans);font-size:1rem;line-height:1.5;color:var(--ink)}
#waitlist-modal form{margin:0}
#waitlist-modal .absolute{position:absolute}
#waitlist-modal .top-4{top:16px}
#waitlist-modal .right-4{right:16px}
#waitlist-modal [data-wl-close].absolute{border:0;background:none;cursor:pointer;color:var(--hint);padding:4px;line-height:1}
#waitlist-modal [data-wl-close].absolute:hover{color:var(--ink)}
#waitlist-modal .font-headline-sm{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.25;margin:0}
#waitlist-modal .font-label-caps{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
#waitlist-modal .normal-case{text-transform:none;letter-spacing:normal;font-weight:400}
#waitlist-modal .block{display:block}
#waitlist-modal .flex{display:flex}
#waitlist-modal .grid{display:grid}
#waitlist-modal .grid-cols-2{grid-template-columns:1fr 1fr}
#waitlist-modal .gap-3{gap:12px}
#waitlist-modal .items-start{align-items:flex-start}
#waitlist-modal .mb-2{margin-bottom:8px}
#waitlist-modal .mb-4{margin-bottom:16px}
#waitlist-modal .mb-5{margin-bottom:20px}
#waitlist-modal .mb-6{margin-bottom:24px}
#waitlist-modal .mt-2{margin-top:8px}
#waitlist-modal .mt-4{margin-top:16px}
#waitlist-modal .mt-8{margin-top:32px}
#waitlist-modal .py-6{padding-block:24px}
#waitlist-modal .text-center{text-align:center}
#waitlist-modal .w-full{width:100%}
#waitlist-modal .cursor-pointer{cursor:pointer}
#waitlist-modal .underline{text-decoration:underline}
#waitlist-modal .text-primary{color:var(--ink)}
#waitlist-modal .text-on-surface-variant{color:var(--hint)}
#waitlist-modal p{margin:0}
#waitlist-modal label.flex{font-size:.875rem;line-height:1.4;color:var(--hint)}
#waitlist-modal input[type=checkbox]{margin:3px 0 0;width:18px;height:18px;flex:none;accent-color:var(--teal)}
#waitlist-modal .text-\[0\.72rem\]{font-size:.8125rem;color:var(--hint)}
#waitlist-modal .text-\[0\.75rem\]{font-size:.8125rem}
#waitlist-modal .text-\[\#93000a\],#waitlist-modal .wl-error{color:#93000a;font-size:.875rem}
#waitlist-modal .text-\[64px\]{font-size:64px;display:block;color:var(--teal)}
#waitlist-modal .wl-input{display:block;width:100%;margin-top:4px;border:0;border-bottom:1.5px solid var(--stone);background:transparent;padding:8px 0;font:400 1rem/1.4 var(--sans);color:var(--ink);border-radius:0}
#waitlist-modal .wl-input:focus{outline:none;border-bottom-color:var(--teal)}
#waitlist-modal .btn-primary,#waitlist-modal .btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font:600 1rem/1 var(--sans);text-decoration:none;cursor:pointer}
#waitlist-modal .btn-primary{border:0;background:var(--grad);color:#fff}
#waitlist-modal .btn-primary:disabled{opacity:.6;cursor:wait}
#waitlist-modal .btn-primary.w-full{display:flex;width:100%}
#waitlist-modal .btn-secondary{background:var(--paper);color:var(--ink);border:1.5px solid var(--stone)}
#waitlist-modal .wl-choice[aria-pressed="true"]{background:var(--sel);border-color:var(--teal);color:var(--teal-ink)}
#waitlist-modal .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'}

/* ---------- Directory results (assets/directory.js) ---------- */
.dirmeta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px;font-size:var(--t-small);color:var(--hint)}
.dirmeta span:empty{display:none}
.dirres{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:20px;margin-top:24px;text-align:left}
.dirres article{display:flex;flex-direction:column;gap:12px;background:var(--paper);border-radius:18px;padding:24px}
.dirres .flex{display:flex}
.dirres .items-start{align-items:flex-start}
.dirres .justify-between{justify-content:space-between}
.dirres .gap-4{gap:16px}
.dirres .pt-2{padding-top:8px}
.dirres .mt-auto{margin-top:auto}
.dirres .mt-1{margin-top:4px}
.dirres .self-center{align-self:center}
.dirres h3{font-size:1.25rem}
.dirres .font-label-caps{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
.dirres p{font-size:var(--t-small);color:var(--hint)}
.dirres .italic{font-style:italic}
.dirres .brand-gradient-text{font-family:var(--serif);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none}
.dirres .btn-primary{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;background:var(--grad);color:#fff;font-weight:600;text-decoration:none}
.dirres a{font-weight:600}

/* The About call-to-action email stays white on the dark band */
.band-dark a.mail{color:#fff}
/* White text on gradient buttons inside dark bands (the band's link color was turning it pale teal) */
.band-dark a.btn-main{color:#fff}