/* ============================================================
   PREMIUM PASS — shared polish layer, loaded after page styles.
   One source of truth for button physics, header behavior, depth,
   focus states, and mobile refinements. Tune here, never per-page.
   ============================================================ */

/* ---------- 1. BUTTON PHYSICS (primary .btn everywhere) ---------- */
.btn{
  background:linear-gradient(180deg,#119190,#0A5F5E);
  border:1px solid #094F4E;
  box-shadow:0 1px 2px rgba(9,79,78,.28), 0 10px 24px -10px rgba(9,79,78,.45);
  transition:transform .15s ease-out, box-shadow .15s ease-out, filter .15s ease-out;
  will-change:transform;
}
.btn:hover{
  background:linear-gradient(180deg,#14A3A1,#0B6B6A);
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(9,79,78,.28), 0 16px 34px -12px rgba(9,79,78,.5);
}
.btn:active{
  transform:translateY(0) scale(.99);
  box-shadow:0 1px 2px rgba(9,79,78,.35);
  filter:brightness(.97);
}
/* header pill (secondary) */
.top a.book{
  background:rgba(255,255,255,.6);
  transition:transform .15s ease-out, box-shadow .15s ease-out, border-color .15s, color .15s;
}
.top a.book:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px -10px rgba(20,34,38,.3);
}
.top a.book:active{transform:translateY(0)}

/* chat chips: lift + comfortable tap targets */
.chip{transition:transform .15s ease-out, background .15s, border-color .15s, color .15s}
.chip:hover{transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.98)}
@media(max-width:720px){
  .chip{min-height:44px;display:inline-flex;align-items:center}
}

/* universal focus ring (keyboard users see a premium site too) */
:focus-visible{outline:3px solid rgba(17,145,144,.45);outline-offset:2px;border-radius:6px}

/* ---------- 2. STICKY BLURRED HEADER ---------- */
.top{
  position:sticky;top:0;z-index:60;
  max-width:none;margin:0;
  padding:14px clamp(16px,4vw,36px);
  background:rgba(251,250,247,.85);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.top.scrolled{
  border-bottom-color:var(--line,#E7E2D8);
  box-shadow:0 6px 24px -14px rgba(20,34,38,.18);
}

/* ---------- 3. DEPTH LANGUAGE ---------- */
/* readable cards: quiet resting depth, no hover theatrics (they're not buttons) */
.acard{box-shadow:0 1px 2px rgba(20,34,38,.04), 0 8px 24px -18px rgba(20,34,38,.12)}
/* the chat panel: cyan under-glow ties the brain motif through every page */
.stage{position:relative}
.stage::before{
  content:"";position:absolute;inset:-30px 0 -10px;
  background:radial-gradient(560px 280px at 50% 45%, rgba(64,205,203,.10), transparent 70%);
  pointer-events:none;
}
.chat{position:relative;border:1px solid rgba(64,205,203,.14)}

/* ---------- 4. CHAT DEAD-ZONE FIX ---------- */
.chat{min-height:300px}

/* ---------- 5. FOOTER GRAVITAS (CSS-only pass) ---------- */
footer{padding:46px 0;margin-top:72px}
footer .mantra{color:var(--ink,#1A2226);font-weight:600}

/* ---------- 6. MOBILE STICKY CTA (bar injected by premium.js) ---------- */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(251,250,247,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line,#E7E2D8);
  transform:translateY(110%);
  transition:transform .28s ease-out;
}
.mcta.on{transform:none}
.mcta .btn{display:block;text-align:center;width:100%;padding:14px 20px;font-size:15.5px}
@media(min-width:721px){.mcta{display:none}}
/* keep page bottom content clear of the bar on mobile */
@media(max-width:720px){footer{padding-bottom:96px}}

/* ---------- 7. RESPECT REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .brainband video{display:none}
  .brainband{background:#000 url('brain-poster.jpg') center 38%/cover no-repeat;min-height:120px}
}