/* v2.112 1 Nov: Where to start cards and the booking calendar as frosted glass, after Melissa's reference
   (a clear panel over soft colour, bright rim, large radius, translucent buttons). Linked on home and Services. */
:root{--lq-fill:rgba(255,255,255,.07);--lq-rim:rgba(255,255,255,.16);--lq-hi:rgba(255,255,255,.28);--lq-drop:rgba(0,0,0,.55);--lq-btn:rgba(255,255,255,.12);--lq-btn-rim:rgba(255,255,255,.26);--lq-btn-ink:#F4F3EC}
:root[data-theme="light"]{--lq-fill:rgba(255,255,255,.42);--lq-rim:rgba(255,255,255,.85);--lq-hi:rgba(255,255,255,.95);--lq-drop:rgba(30,58,43,.28);--lq-btn:rgba(30,58,43,.10);--lq-btn-rim:rgba(30,58,43,.22);--lq-btn-ink:#1E3A2B}
@media (prefers-color-scheme:light){:root:not([data-theme]){--lq-fill:rgba(255,255,255,.42);--lq-rim:rgba(255,255,255,.85);--lq-hi:rgba(255,255,255,.95);--lq-drop:rgba(30,58,43,.28);--lq-btn:rgba(30,58,43,.10);--lq-btn-rim:rgba(30,58,43,.22);--lq-btn-ink:#1E3A2B}}

/* soft teal and brass light behind the two sections, so the glass has something to hold */
section#start,section:has(> .sh #start),.bk2{position:relative;isolation:isolate}
section#start::before,section:has(> .sh #start)::before,.bk2::before{content:"";position:absolute;inset:-40px -8vw;z-index:-1;pointer-events:none;
  background:radial-gradient(34% 42% at 22% 45%,color-mix(in srgb,var(--accent,#2A5F62) 30%,transparent),transparent 70%),
             radial-gradient(30% 40% at 80% 60%,color-mix(in srgb,var(--brass-line,var(--urgent,#B08D57)) 26%,transparent),transparent 70%)}

/* the panels */
.fx-pair,.pt-card,.cal,.bk-mail{
  background:var(--lq-fill)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid var(--lq-rim)!important;
  box-shadow:inset 0 1px 0 var(--lq-hi),inset 0 0 28px rgba(255,255,255,.05),0 24px 50px -28px var(--lq-drop)}
.fx-pair{border-radius:28px 0 0 28px}
.fx:not(:has(.fx-hi)) .fx-pair{border-radius:28px}
.pt-card,.bk-right .cal,.cal,.bk-mail{border-radius:28px}
.fx-plan+.fx-plan{border-left-color:var(--lq-rim)}
.cal .ev,.bk-right .cal .ev{border-color:var(--lq-rim)}

/* the standout card: frosted parchment in the dark themes, frosted forest green in light */
.fx-hi{border-radius:28px;-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  background:color-mix(in srgb,var(--ink) 86%,transparent)!important;border-color:rgba(255,255,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 30px 50px -30px rgba(0,0,0,.6),0 0 0 4px color-mix(in srgb,var(--brass-line,#B08D57) 22%,transparent)}

/* buttons become translucent glass, like the reference's New Event */
.fx-plan .fx-btn,.pt-btn:not(.pt-primary){background:var(--lq-btn)!important;color:var(--lq-btn-ink)!important;border:1px solid var(--lq-btn-rim)!important;border-radius:14px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 var(--lq-hi),0 8px 18px -12px var(--lq-drop)!important}
.fx-plan .fx-btn:hover,.pt-btn:not(.pt-primary):hover{background:color-mix(in srgb,var(--lq-btn) 100%,rgba(255,255,255,.08))!important;transform:translateY(-1px)}

/* calendar days: available days as small glass discs, the hover keeps the house gradient */
.days .d.av{background:color-mix(in srgb,var(--lq-btn) 60%,transparent);color:var(--lq-btn-ink);border:1px solid color-mix(in srgb,var(--lq-btn-rim) 70%,transparent)}

/* home announcement pills (New, Article) as clear glass; the spinning brass edge stays */
.la-pill{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.10) 100%);color:#F4F3EC;
  -webkit-backdrop-filter:blur(14px) saturate(1.7) brightness(1.1);backdrop-filter:blur(14px) saturate(1.7) brightness(1.1);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.28),inset 0 0 16px rgba(255,255,255,.14),0 10px 24px -14px rgba(0,0,0,.6);
  text-shadow:0 1px 2px rgba(0,0,0,.3)}
.la-pill:hover,.la-pill:focus-visible{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.34),inset 0 0 20px rgba(255,255,255,.2),0 14px 28px -14px rgba(0,0,0,.6)}
.la-sep{background:rgba(255,255,255,.35)}
:root[data-theme="light"] .la-pill{background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.55) 100%);color:#1E3A2B;text-shadow:none;
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(30,58,43,.12),0 10px 24px -14px rgba(30,58,43,.4)}
:root[data-theme="light"] .la-sep{background:rgba(30,58,43,.3)}

/* v2.117 2 Nov: the same glass carried to every other price list:
   the launch article's Where to start table, and the Fees tables on Schools, Workshops and Services */
.la-tw:has(> .la-t:not(.rf-t)),table.fees{
  background:var(--lq-fill);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid var(--lq-rim);border-radius:24px;
  box-shadow:inset 0 1px 0 var(--lq-hi),inset 0 0 28px rgba(255,255,255,.05),0 24px 50px -28px var(--lq-drop)}
.la-tw:has(> .la-t:not(.rf-t)){padding:6px 10px}
.la-tw:has(> .la-t:not(.rf-t)) tr:last-child td{border-bottom:0}
table.fees{border-collapse:separate;border-spacing:0;overflow:hidden;padding:4px 20px 8px}

/* v2.121 2 Nov: the Montezuma County card as glass too: its own colours stay (parchment in the dark themes,
   forest green in light), now see-through enough for the light behind to show, with a bright rim and a top sheen */
.fx-hi{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 80%,transparent) 0%,color-mix(in srgb,var(--ink) 70%,transparent) 55%,color-mix(in srgb,var(--ink) 76%,transparent) 100%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid rgba(255,255,255,.6)!important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 30px rgba(255,255,255,.10),0 30px 50px -30px rgba(0,0,0,.6),0 0 0 4px color-mix(in srgb,var(--brass-line,#B08D57) 22%,transparent)!important}
