/* Design tokens — copied verbatim from the Knead app (static/app.css) so the
   waitlist reads as the same product. */
:root{
  --cream:#F6F1E7; --panel:#FDFBF5; --ink:#21302A; --ink-soft:#5C6B62;
  --euca:#2F6B4F; --euca-deep:#1E4A36; --terra:#C4703F; --terra-soft:#EAD9C9;
  --line:#E3DBCB; --rose:#B05A7A; --slate:#54749E; --grey:#9A9486;
  --card-sh:0 1px 2px rgba(33,48,42,.06),0 6px 18px -8px rgba(33,48,42,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}

/* Grain + soft radial wash — same treatment as the app's body background. */
body{
  font-family:'Karla',sans-serif;color:var(--ink);background:var(--cream);
  background-image:radial-gradient(ellipse 80% 60% at 70% -10%,rgba(47,107,79,.07),transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;
}

/* ---------------- hero ---------------- */
.hero{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center}
.brand{margin-bottom:18px}
.wordmark{font-family:'Fraunces',serif;font-weight:700;font-size:52px;letter-spacing:-.5px;color:var(--euca-deep);line-height:1}
.wordmark em{font-style:italic;color:var(--terra)}
.tagline{font-size:14px;color:var(--ink-soft);margin-top:6px}

.pitch{font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:400px;margin-bottom:26px}

/* ---------------- signup card ---------------- */
.card{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 20px;box-shadow:var(--card-sh);text-align:left}
.f-label{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.card-sub{font-size:13px;color:var(--grey);margin:5px 0 16px}

.field{display:block;margin-bottom:12px}
.field-label{display:block;font-size:12.5px;font-weight:700;color:var(--euca-deep);margin-bottom:5px}.field input{width:100%;font-family:'Karla',sans-serif;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:var(--grey)}
.field input:focus{outline:none;border-color:var(--euca);box-shadow:0 0 0 3px rgba(47,107,79,.12)}
.field input:disabled{opacity:.6;cursor:not-allowed}

/* CTA — same terracotta pill as the app's .book button. */
.book{margin-top:6px;display:block;width:100%;font-family:'Karla',sans-serif;font-size:15px;font-weight:700;
  color:#FBF8F1;background:var(--terra);border:none;padding:12px 15px;border-radius:9px;cursor:pointer;
  transition:background .15s}
.book:hover{background:#A75A30}
.book:disabled{background:var(--grey);cursor:not-allowed}

/* status line — mirrors the app's .loc-status / .hint feel. */
.status{font-size:13px;line-height:1.45;margin-top:12px;min-height:16px;text-align:center;color:var(--ink-soft)}
.status.ok{color:var(--euca-deep);font-weight:700}
.status.err{color:#8A2E2E}

.foot{font-size:12px;color:var(--grey);margin-top:16px}

/* ---------------- QR page (/qr) ----------------
   QR sits directly on the cream body so its cream quiet-zone blends in. */
.qr-img{width:min(340px,82vw);height:auto;display:block;margin:6px auto 0}
.qr-caption{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--euca-deep);margin-top:16px}
.qr-url{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--terra);text-decoration:none}
.qr-url:hover{text-decoration:underline}

/* ---------------- socials page (/socials) ---------------- */
.hero.wide{max-width:720px}
.socials-head{font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--euca-deep);margin-bottom:4px}
.socials-sub{font-size:14px;color:var(--ink-soft);margin-bottom:22px}
.socials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%}
.social{display:flex;flex-direction:column;align-items:center;text-decoration:none}
.social-plat{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);margin-bottom:8px}
.social .qr-img{width:min(200px,44vw);margin:0}
.social-handle{font-size:12.5px;font-weight:700;color:var(--euca-deep);margin-top:8px}
.social:hover .social-handle{text-decoration:underline}

@media (max-width:560px){
  .socials-grid{grid-template-columns:1fr;gap:26px;max-width:300px;margin:0 auto}
  .social .qr-img{width:min(240px,68vw)}
}

@media (max-width:480px){
  .wordmark{font-size:44px}
  .card{padding:18px}
}

/* ================================================================
   HOMEPAGE (body.home) — brand-forward landing.
   Scoped so /qr and /socials keep the centered one-screen layout.
   ================================================================ */
body.home{display:block;min-height:100vh;padding:0;overflow-x:hidden}

/* ---------------- nav ---------------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:1120px;margin:0 auto;padding:22px 28px 0}
.nav-mark{font-family:'Fraunces',serif;font-weight:700;font-size:26px;letter-spacing:-.5px;
  color:var(--euca-deep);text-decoration:none}
.nav-mark em{font-style:italic;color:var(--terra)}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-size:13.5px;font-weight:700;color:var(--ink-soft);text-decoration:none}
.nav-links a:hover{color:var(--euca-deep)}
.nav-cta{color:#FBF8F1!important;background:var(--terra);padding:8px 16px;border-radius:99px;
  transition:background .15s}
.nav-cta:hover{background:#A75A30;color:#FBF8F1!important}

/* ---------------- hero ---------------- */
/* The waitlist card sits in the hero so the form is on screen at landing.
   "See how it works" is its own grid item so it can drop below the card on mobile. */
.hp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  grid-template-areas:"copy card" "actions card";column-gap:56px;
  max-width:1120px;margin:0 auto;padding:52px 28px 76px}
.hp-hero-copy{grid-area:copy;align-self:end}
.hero-card{grid-area:card;align-self:center}
.hp-hero .hero-actions{grid-area:actions;align-self:start}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--euca-deep);background:#EAF2EC;
  padding:5px 13px;border-radius:99px;margin-bottom:20px}
.display{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(40px,5.6vw,68px);
  line-height:1.04;letter-spacing:-1.5px;color:var(--euca-deep)}
.display em{font-style:italic;color:var(--terra)}
.lede{font-size:16.5px;line-height:1.65;color:var(--ink-soft);max-width:480px;margin:22px 0 30px}
.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-actions .book{margin-top:0;width:auto;display:inline-block;font-size:15px;
  padding:13px 26px;border-radius:99px;text-align:center}
.ghost{font-size:14px;font-weight:700;color:var(--euca-deep);text-decoration:none;
  border-bottom:2px solid var(--terra-soft);padding-bottom:2px;transition:border-color .15s}
.ghost:hover{border-color:var(--terra)}

/* staggered load reveal */
.r1,.r2,.r3,.r4{animation:rise .55s both}
.r2{animation-delay:.08s}.r3{animation-delay:.16s}.r4{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------- hero art: floating slot cards ---------------- */
.hp-hero-art{position:relative;height:430px;animation:rise .6s .2s both}
.slot-card{position:absolute;width:min(320px,86%);background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:14px 16px;box-shadow:var(--card-sh)}
.sc1{top:26px;right:8%;transform:rotate(-2.2deg);z-index:3;animation:bob 7s ease-in-out infinite}
.sc2{top:186px;right:22%;transform:rotate(1.6deg);z-index:2;animation:bob 8.5s .6s ease-in-out infinite}
.sc3{top:322px;right:2%;transform:rotate(-1deg);z-index:1;animation:bob 9.5s 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.slot-card .top{display:flex;align-items:baseline;gap:9px}
.t-when{font-family:'Fraunces',serif;font-weight:700;font-size:22px;color:var(--euca-deep);letter-spacing:-.3px}
.t-day{font-size:11px;font-weight:700;color:var(--terra);text-transform:uppercase;letter-spacing:.08em}
.t-km{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-soft);background:var(--cream);
  padding:2px 9px;border-radius:99px}
.t-clinic{font-size:13.5px;font-weight:700;margin-top:6px;color:var(--ink)}
.t-disc{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--euca-deep);
  background:#EAF2EC;padding:1px 7px;border-radius:99px;white-space:nowrap;vertical-align:middle}
.opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.opt{font-size:11.5px;font-weight:700;color:var(--euca-deep);background:#EAF2EC;
  padding:3px 9px;border-radius:7px}
.opt small{font-weight:600;color:var(--ink-soft)}
.t-fresh{margin-top:9px;font-size:11px;font-weight:700;color:var(--euca)}
.pin-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--terra);
  border:2.5px solid #FBF8F1;box-shadow:0 1px 6px rgba(33,48,42,.3)}
.pin-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(196,112,63,.35);animation:ping 2.6s ease-out infinite}
.pd1{top:8px;left:12%}.pd2{top:150px;left:2%}.pd3{top:392px;left:30%}
.art-note{position:absolute;bottom:-26px;right:4%;font-size:10.5px;color:var(--grey);font-style:italic}
.pd2::after{animation-delay:.9s}.pd3::after{animation-delay:1.7s}
@keyframes ping{0%{transform:scale(.5);opacity:1}80%,100%{transform:scale(1.8);opacity:0}}

/* ---------------- discipline strip ---------------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel);overflow:hidden;padding:13px 0}
.strip-track{display:flex;align-items:center;gap:26px;width:max-content;
  animation:slide 36s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.strip-chip{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap}
.strip-dot{color:var(--terra);font-weight:700}

/* ---------------- how it works (deep band) ---------------- */
.how{background:var(--euca-deep);color:#FBF8F1;
  background-image:radial-gradient(ellipse 70% 90% at 85% 10%,rgba(47,107,79,.55),transparent)}
.how-inner{max-width:1120px;margin:0 auto;padding:84px 28px 72px}
.how-head{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,3.8vw,46px);
  line-height:1.1;letter-spacing:-1px;max-width:620px}
.how-head em{font-style:italic;color:var(--terra-soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:52px}
.step-num{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:44px;
  color:var(--terra-soft);line-height:1}
.step h3{font-family:'Karla',sans-serif;font-size:16.5px;font-weight:700;margin:12px 0 8px}
.step p{font-size:14px;line-height:1.65;color:#CBD9CB}
.how-foot{margin-top:52px;font-size:13.5px;font-weight:700;color:var(--terra-soft);
  border-top:1px dashed rgba(251,248,241,.25);padding-top:22px}

/* ---------------- join section ---------------- */
.join{background:var(--cream)}
.join-inner{max-width:1120px;margin:0 auto;padding:84px 28px 92px;
  display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center}
.join-head{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(34px,4.4vw,54px);
  letter-spacing:-1px;line-height:1.05;color:var(--euca-deep)}
.join-head em{font-style:italic;color:var(--terra)}
.join-sub{font-size:15.5px;line-height:1.65;color:var(--ink-soft);max-width:420px;margin-top:18px}
.join-count{margin-top:22px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terra)}
.join-copy .book{margin-top:26px;width:auto;display:inline-block;padding:13px 26px;
  border-radius:99px;text-decoration:none}

/* ---------------- footer ---------------- */
.foot-bar{border-top:1px solid var(--line);background:var(--panel)}
.foot-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:1120px;margin:0 auto;padding:26px 28px}
.foot-mark{font-family:'Fraunces',serif;font-weight:700;font-size:20px;color:var(--euca-deep)}
.foot-mark em{font-style:italic;color:var(--terra)}
.foot-tag{font-size:12px;color:var(--grey)}
.foot-links{margin-left:auto;display:flex;gap:18px}
.foot-links a{font-size:12.5px;font-weight:700;color:var(--ink-soft);text-decoration:none}
.foot-links a:hover{color:var(--euca-deep)}
.foot-fine{font-size:12px;color:var(--grey)}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  .r1,.r2,.r3,.r4,.hp-hero-art,.slot-card,.pin-dot::after,.strip-track{animation:none}
}

/* ---------------- homepage responsive ---------------- */
@media (max-width:920px){
  .hp-hero{grid-template-columns:1fr;grid-template-areas:"copy" "card" "actions";
    padding:36px 24px 56px;row-gap:26px}
  .lede{max-width:none}
  .hp-hero .lede{margin-bottom:0}
  .hero-card{max-width:440px}
  .hp-hero-art{height:400px;max-width:440px;margin:0 auto;width:100%}
  .steps{grid-template-columns:1fr;gap:30px}
  .join-inner{grid-template-columns:1fr;gap:40px;padding:60px 24px 68px}
  .how-inner{padding:60px 24px 52px}
}
@media (max-width:520px){
  .nav{padding:18px 20px 0}
  .nav-links a:not(.nav-cta){display:none}
  /* Phone: compress the hero so the whole form clears the fold. */
  .nav{padding-top:14px}
  .hp-hero{padding:16px 20px 48px;row-gap:16px}
  .hp-hero .eyebrow{margin-bottom:10px}
  .hp-hero .display{font-size:clamp(29px,8.6vw,34px);letter-spacing:-1px}
  .hp-hero .lede{font-size:15px;line-height:1.5;margin-top:10px}
  .lede-more{display:none}
  .hero-card{padding:14px 16px 14px}
  /* The button already says "Join the waitlist" — keep the heading for screen readers only. */
  .hero-card .f-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hero-card .card-sub{display:none}
  .hero-card .field{margin-bottom:8px}
  .hero-card .field-label{margin-bottom:3px}
  /* 16px stops iOS Safari zooming the page on focus; 44px is the minimum comfortable tap target. */
  .hero-card .field input{font-size:16px;padding:0 12px;height:44px}
  .hero-card .book{height:46px;padding:0 15px;margin-top:4px}
  .hero-card .status{margin-top:8px;min-height:0}
  .hero-card .status:empty{display:none}
  .hp-hero-art{height:360px}
  .slot-card{padding:12px 13px}
  .sc2{right:auto;left:0}
  .foot-bar{padding:22px 20px}
}

/* ================= discipline hub pages ================= */
.hub-hero{max-width:1120px;margin:0 auto;padding:34px 28px 56px}
.crumb{font-size:12.5px;font-weight:700;color:var(--grey);margin-bottom:22px}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--euca-deep)}
.crumb span[aria-hidden]{color:var(--terra);margin:0 4px}
.hub-hero .display{font-size:clamp(34px,4.6vw,56px);max-width:16ch}
.hub-hero .lede{max-width:620px}

.hub-body{max-width:1120px;margin:0 auto;padding:0 28px 76px;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.hub-main h2{font-family:'Fraunces',serif;font-weight:600;font-size:26px;letter-spacing:-.5px;
  color:var(--euca-deep);margin:38px 0 14px}
.hub-main h2:first-child{margin-top:0}
.hub-main p{font-size:16px;line-height:1.72;color:var(--ink-soft);margin-bottom:15px;max-width:64ch}
.len-pill{display:inline-block;font-size:12px!important;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--euca-deep)!important;background:#EAF2EC;
  padding:6px 14px;border-radius:99px;margin-bottom:16px!important}
.reasons{list-style:none;display:grid;gap:9px;margin-top:4px}
.reasons li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.reasons li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--terra)}

.hub-aside{display:grid;gap:16px;position:sticky;top:24px}
.hub-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;box-shadow:var(--card-sh)}
.hub-card h3{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terra);margin-bottom:10px}
.hub-card p{font-size:14px;line-height:1.65;color:var(--ink-soft);margin-bottom:10px}
.hub-card p:last-of-type{margin-bottom:0}
.hub-card .hub-fine{font-size:12px;color:var(--grey);font-style:italic;margin-top:12px}
.hub-card.accent{background:#EAF2EC;border-color:#CFE2D5}
.hub-card.accent h3{color:var(--euca-deep)}
.hub-card.accent .ghost{display:inline-block;margin-top:14px}

.hub-other{border-top:1px solid var(--line);background:var(--panel)}
.hub-other-inner{max-width:1120px;margin:0 auto;padding:44px 28px}
.hub-other h2{font-family:'Fraunces',serif;font-weight:600;font-size:20px;
  color:var(--euca-deep);margin-bottom:18px}
.other-grid{display:flex;flex-wrap:wrap;gap:10px}
.other-chip{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink-soft);
  text-decoration:none;background:var(--cream);border:1px solid var(--line);
  padding:8px 15px;border-radius:99px;transition:border-color .15s,color .15s}
.other-chip:hover{color:var(--euca-deep);border-color:var(--terra)}

.cta-band{background:var(--euca-deep);color:#FBF8F1;
  background-image:radial-gradient(ellipse 70% 90% at 85% 10%,rgba(47,107,79,.55),transparent)}
.cta-inner{max-width:1120px;margin:0 auto;padding:64px 28px 70px}
.cta-inner .join-head{color:#FBF8F1}
.cta-inner .join-head em{color:var(--terra-soft)}
.cta-inner .join-sub{color:#CBD9CB;max-width:520px}
.cta-inner .book{margin-top:26px;width:auto;display:inline-block;font-size:15px;
  padding:13px 26px;border-radius:99px}

/* the homepage strip becomes real internal links once hubs exist */
a.strip-chip{text-decoration:none;transition:color .15s}
a.strip-chip:hover{color:var(--euca-deep)}
/* The marquee's translateX(-50%) loop assumes the track is two identical halves,
   so the aria-hidden wrapper around the duplicate must not generate a box of its
   own — display:contents keeps its children as direct flex items of the track. */
.strip-half{display:contents}

@media (max-width:900px){
  .hub-body{grid-template-columns:1fr;gap:34px;padding-bottom:56px}
  .hub-aside{position:static}
}

/* ---------------- sticky join bar (phones/tablets) ----------------
   Appears once the hero form has scrolled away, so the form is always one tap off. */
.join-bar{display:none}
@media (max-width:920px){
  .join-bar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:20;
    background:rgba(253,251,245,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    transform:translateY(110%);transition:transform .25s ease}
  .join-bar.show{transform:none}
  .join-bar-text{font-size:13px;font-weight:700;color:var(--euca-deep);line-height:1.25}
  .join-bar .book{margin:0 0 0 auto;width:auto;flex:none;padding:11px 20px;border-radius:99px;
    text-decoration:none;white-space:nowrap}
  /* the sticky bar already carries this CTA */
  .join-copy .book{display:none}
  .join-bar + .foot-bar{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){.join-bar{transition:none}}

/* ---- availability landing pages (/<care>/<area>, landing.py) ---- */
.area-body .hub-main{max-width:760px}
.area-count{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 14px}
.area-days{list-style:none;padding:0;margin:0 0 28px;display:flex;gap:10px;flex-wrap:wrap}
.area-days li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 14px;
  display:flex;gap:10px;align-items:baseline;font-size:13.5px;color:var(--ink-soft)}
.area-days b{font-size:16px;color:var(--euca-deep)}
.area-table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 28px}
.area-table th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.area-table td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
.area-table td:first-child{white-space:nowrap;font-weight:700}
.area-table a{color:var(--terra);font-weight:700;text-decoration:none}
.area-clinics{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.area-clinics li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.area-clinics span{font-size:13.5px;color:var(--ink-soft)}
@media (max-width:640px){
  .area-table thead{display:none}
  .area-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .area-table td{border:0;padding:0}
  .area-table td:nth-child(2),.area-table td:nth-child(3){grid-column:1}
  .area-table td:nth-child(4){grid-column:2;grid-row:1}
}

/* ---- live availability block on the live guides (landing.render_hub_block) ---- */
.hub-live{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hub-live-inner{max-width:1120px;margin:0 auto;padding:34px 28px 38px}
.hub-live-inner h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,3vw,32px);
  color:var(--euca-deep);margin:0 0 12px}
.hub-live-inner h3{font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--euca-deep);margin:6px 0 10px}
.hub-live-inner .area-table{max-width:860px}
.hub-live-inner .book{display:inline-block;width:auto;padding:12px 22px;text-decoration:none;text-align:center}
.area-where{display:block;font-size:12.5px;color:var(--grey);font-weight:400}
.hub-live-areas{list-style:none;padding:0;margin:0 0 20px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-width:860px}
.hub-live-areas li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--cream)}
.hub-live-areas a,.hub-live-areas .area-name{font-weight:700;color:var(--euca-deep);text-decoration:none}
.hub-live-areas span:not(.area-name){font-size:13px;color:var(--ink-soft)}