/* ============================================================
   LIQUID GLASS — applied
   Maps the material onto the components that already exist, so no
   markup changes. Two grades, as agreed:
     controls  full strength  (pills, chips, the nav edge)
     content   readable       (anything carrying paragraphs)
   The light lives in --lg-x / --lg-y and is moved by liquid-glass.js.
   ============================================================ */

:root{ --lg-x:78%; --lg-y:30%; --lg-ang:210; }

/* ------------------------------------------------------------------
   1. THE TOP BAR — readable grade, with a travelling edge
   ------------------------------------------------------------------ */
.nav{
  background:
    radial-gradient(90% 240% at var(--lg-x) 0%,
      rgba(255,255,255,.55), rgba(255,255,255,.2) 42%, transparent 78%),
    rgba(250,246,232,.58);
  -webkit-backdrop-filter:blur(26px) saturate(210%) brightness(1.08);
  backdrop-filter:blur(26px) saturate(210%) brightness(1.08);
  border-bottom:0;
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255,255,255,.95),
    inset 0 -26px 30px -32px rgba(10,43,56,.35),
    0 14px 40px -26px rgba(10,43,56,.4)
}
.nav::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,
    rgba(255,255,255,.08), rgba(255,255,255,.95) calc(var(--lg-x) - 10%),
    rgba(255,255,255,.3) calc(var(--lg-x) + 18%), rgba(255,255,255,.08))
}

/* ------------------------------------------------------------------
   2. CARDS — readable grade. Bright rim, moving lens, solid enough
      that body copy stays body copy.
   ------------------------------------------------------------------ */
.fig.glass,.panel.glass,.way.glass,.read.glass,.ccard.glass,
.headline-read.glass,.res.glass,.bit.glass,.mapcard.glass{
  position:relative;isolation:isolate;
  -webkit-backdrop-filter:blur(26px) saturate(195%) brightness(1.05);
  backdrop-filter:blur(26px) saturate(195%) brightness(1.05);
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255,255,255,.9),
    inset 0 -1.5px 1px -0.5px rgba(255,255,255,.35),
    inset 0 0 34px -10px rgba(255,255,255,.3),
    0 28px 60px -26px rgba(15,59,76,.5)
}
/* the hot edge, brightest nearest the light */
.fig.glass::before,.panel.glass::before,.way.glass::before,.read.glass::before,
.ccard.glass::before,.headline-read.glass::before,.res.glass::before,.bit.glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  padding:1.5px;height:auto;
  background:conic-gradient(from calc(var(--lg-ang) * 1deg) at var(--lg-x) var(--lg-y),
    rgba(255,255,255,1), rgba(214,236,255,.85) 16deg, rgba(255,255,255,.2) 80deg,
    rgba(255,255,255,.06) 160deg, rgba(255,242,214,.5) 255deg, rgba(255,255,255,.98) 335deg,
    rgba(255,255,255,1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude
}
/* the lens, soft enough never to eat a word */
.fig.glass::after,.panel.glass::after,.way.glass::after,.read.glass::after,
.ccard.glass::after,.headline-read.glass::after,.res.glass::after,.bit.glass::after{
  content:'';position:absolute;inset:-35%;pointer-events:none;z-index:1;
  background:radial-gradient(240px 190px at var(--lg-x) var(--lg-y),
    rgba(255,255,255,.22), rgba(255,255,255,.05) 55%, transparent 80%);
  mix-blend-mode:screen;filter:blur(14px);
  transform:none;transition:none;left:-35%;top:-35%;right:-35%;bottom:-35%;width:auto
}
.fig.glass > *,.panel.glass > *,.way.glass > *,.read.glass > *,.ccard.glass > *,
.headline-read.glass > *,.res.glass > *,.bit.glass > *{position:relative;z-index:3}

/* ------------------------------------------------------------------
   3. INSIDE THE BUILDING — the six facility tiles go glassy
   ------------------------------------------------------------------ */
.part .bit.glass{
  background:
    linear-gradient(165deg, rgba(255,255,255,.2), rgba(255,255,255,.08) 45%, rgba(10,43,56,.26));
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255,255,255,.6),
    inset 0 -1.5px 1px -0.5px rgba(255,255,255,.16),
    0 22px 48px -26px rgba(0,0,0,.55)
}
/* A tile this small cannot carry a bloom without losing its words. It keeps
   the edge light, which is what makes it read as glass, and drops the lens. */
.part .bit.glass::after{display:none}
.part .bit.glass::before{padding:1.2px;opacity:.85}
.part .bit.glass .n,.part .bit.glass h4{color:#fff}
.part .bit.glass p{color:rgba(255,255,255,.94)}

/* ------------------------------------------------------------------
   4. PILLS AND CHIPS — full strength
   ------------------------------------------------------------------ */
/* These sit on photography, which can be bright anywhere, so the glass
   carries a tinted body. White text then holds wherever the pill lands. */
.countdown,.btn-alt{
  position:relative;isolation:isolate;border-radius:999px;border:0;
  background:
    radial-gradient(70% 170% at var(--lg-x) 12%,
      rgba(255,255,255,.3), rgba(255,255,255,.1) 50%, rgba(255,255,255,.03) 100%),
    linear-gradient(170deg, rgba(23,86,110,.78), rgba(10,43,56,.84));
  -webkit-backdrop-filter:blur(13px) saturate(215%) brightness(1.14);
  backdrop-filter:blur(13px) saturate(215%) brightness(1.14);
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255,255,255,1),
    inset 0 -1.5px 1px -0.5px rgba(255,255,255,.4),
    inset 0 0 22px -6px rgba(255,255,255,.35),
    0 14px 32px -14px rgba(10,43,56,.6)
}
.countdown::after,.btn-alt::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.4px;
  background:conic-gradient(from calc(var(--lg-ang) * 1deg) at var(--lg-x) 30%,
    #fff, rgba(214,236,255,.85) 18deg, rgba(255,255,255,.18) 90deg,
    rgba(255,242,214,.55) 260deg, #fff 340deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude
}
.countdown > *,.btn-alt > *{position:relative;z-index:2}

/* ------------------------------------------------------------------
   5. THE PRIMARY BUTTON — glass, but dark enough to read
   ------------------------------------------------------------------ */
.btn-primary{
  position:relative;isolation:isolate;border:0;
  background:
    radial-gradient(90% 200% at var(--lg-x) 10%,
      rgba(90,160,186,.95), rgba(23,86,110,.95) 48%, rgba(15,59,76,.97) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(190%);
  backdrop-filter:blur(14px) saturate(190%);
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255,255,255,.55),
    inset 0 -1.5px 1px -0.5px rgba(255,255,255,.14),
    0 16px 34px -16px rgba(10,43,56,.75)
}
.btn-primary:hover{
  background:radial-gradient(90% 200% at var(--lg-x) 10%,
    rgba(110,180,205,.97), rgba(31,122,153,.97) 48%, rgba(23,86,110,.98) 100%)
}
.btn-primary > *{position:relative;z-index:2}

/* ------------------------------------------------------------------
   6. THE HERO EMAIL — two pills inside one pill
   ------------------------------------------------------------------ */
.hero .slimform .row{
  display:flex;gap:6px;align-items:center;padding:6px;border-radius:999px;
  background:
    radial-gradient(70% 190% at var(--lg-x) 6%,
      rgba(255,255,255,.34), rgba(255,255,255,.12) 52%, rgba(255,255,255,.06) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(200%) brightness(1.1);
  backdrop-filter:blur(16px) saturate(200%) brightness(1.1);
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255,255,255,.95),
    inset 0 -1.5px 1px -0.5px rgba(255,255,255,.35),
    0 20px 44px -20px rgba(10,43,56,.7);
  border:0
}
.hero .slimform input{
  flex:1;min-width:0;min-height:52px;padding:0 20px;border:0;border-radius:999px;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:16px;text-align:left;
  box-shadow:inset 0 1px 2px rgba(10,43,56,.1)
}
.hero .slimform input::placeholder{color:#7D8E99}
.hero .slimform input:focus{
  outline:0;background:#fff;box-shadow:inset 0 1px 2px rgba(10,43,56,.1), 0 0 0 3px rgba(179,134,66,.45)
}
.hero .slimform button{
  flex:none;min-height:52px;padding:0 24px;border:0;border-radius:999px;
  background:linear-gradient(170deg,#C79A52,#B38642 60%,#9C7334);
  color:#241C16;font-weight:600;font-size:15.5px;white-space:nowrap;
  box-shadow:inset 0 1.5px 1px -0.5px rgba(255,255,255,.65), 0 10px 22px -12px rgba(179,134,66,.9)
}
.hero .slimform button:hover{background:linear-gradient(170deg,#D4A85F,#C09049 60%,#A87C39)}
@media(max-width:760px){
  .hero .slimform .row{flex-direction:column;gap:6px;padding:6px;border-radius:30px}
  .hero .slimform input{width:100%;text-align:center}
  .hero .slimform button{width:100%}
}

/* ------------------------------------------------------------------
   7. THE STICKY BAR
   ------------------------------------------------------------------ */
.dock{
  background:
    radial-gradient(80% 220% at var(--lg-x) 0%,
      rgba(90,160,186,.5), rgba(15,59,76,.82) 50%, rgba(10,43,56,.88) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(200%) brightness(1.1);
  backdrop-filter:blur(22px) saturate(200%) brightness(1.1);
  border:0;
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255,255,255,.5),
    0 20px 48px -20px rgba(10,43,56,.8)
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(250,246,232,.97)}
  .countdown,.btn-alt{background:rgba(255,255,255,.22)}
  .hero .slimform .row{background:rgba(255,255,255,.2)}
  .dock{background:rgba(10,43,56,.95)}
  .btn-primary{background:var(--deep)}
}

/* ============================================================
   v2 — one countdown pill, a two pill dock, lighter facilities
   ============================================================ */

/* ---- the countdown was wearing the old .glass shine on top of the new
        treatment, which drew a second pill inside the first ---- */
.countdown::before{display:none!important}
.countdown{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--sans);text-align:left;
  padding:11px 20px;color:#fff;overflow:visible
}
.countdown:hover{filter:brightness(1.1)}
.countdown:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.countdown .ct{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff}
@media(max-width:760px){.countdown{padding:11px 18px}.countdown .ct{font-size:12.5px}}

/* ---- the sticky bar: two glass pills inside one glass pill ---- */
.dock{
  display:flex;gap:8px;align-items:center;padding:8px;border-radius:999px;
  left:50%;right:auto;bottom:20px;transform:translate(-50%,170%);
  max-width:calc(100vw - 24px)
}
.dock.show{transform:translate(-50%,0)}
.dpill{
  position:relative;isolation:isolate;flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:999px;text-decoration:none;
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:transform .25s var(--ease),filter .25s var(--ease)
}
.dpill:hover{transform:translateY(-1px);filter:brightness(1.08)}
.dpill:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.dpill::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.4px;
  background:conic-gradient(from calc(var(--lg-ang) * 1deg) at var(--lg-x) 30%,
    rgba(255,255,255,.95), rgba(255,255,255,.3) 90deg,
    rgba(255,255,255,.12) 180deg, rgba(255,255,255,.8) 340deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude
}
.dpill .t{position:relative;z-index:2}
.dpill.quiz{
  color:#fff;
  background:
    radial-gradient(80% 180% at var(--lg-x) 10%, rgba(255,255,255,.26), transparent 70%),
    linear-gradient(170deg, rgba(42,143,176,.9), rgba(23,86,110,.94));
  -webkit-backdrop-filter:blur(12px) saturate(200%);backdrop-filter:blur(12px) saturate(200%);
  box-shadow:inset 0 1.5px 1px -0.5px rgba(255,255,255,.7)
}
.dpill.manual{
  color:#241C16;
  background:
    radial-gradient(80% 180% at var(--lg-x) 10%, rgba(255,255,255,.45), transparent 70%),
    linear-gradient(170deg, #D2A85E, #B38642 70%);
  -webkit-backdrop-filter:blur(12px) saturate(190%);backdrop-filter:blur(12px) saturate(190%);
  box-shadow:inset 0 1.5px 1px -0.5px rgba(255,255,255,.8)
}
@media(max-width:720px){
  .dock{left:12px;right:12px;bottom:12px;transform:translateY(170%);max-width:none;
    padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .dock.show{transform:none}
  .dpill{flex:1 1 0;min-width:0;padding:0 10px;font-size:14.5px}
}
@media(max-width:360px){.dpill{font-size:13.5px}}

/* ---- inside the building: smaller tiles, reef and coral, a little gold ---- */
.part{
  background:linear-gradient(165deg, #1F7A99 0%, #2A8FB0 42%, #3FA3B8 100%)
}
.part::after{
  background:radial-gradient(60% 50% at 78% 14%, rgba(255,214,150,.22), transparent 70%)
}
.kit{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(26px,4vw,40px)}
.part .bit.glass{
  padding:16px 16px 18px;border-radius:20px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.26), rgba(255,255,255,.1) 55%, rgba(31,122,153,.18));
  -webkit-backdrop-filter:blur(14px) saturate(165%);
  backdrop-filter:blur(14px) saturate(165%);
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255,255,255,.7),
    inset 0 -1.5px 1px -0.5px rgba(255,255,255,.2),
    0 16px 34px -20px rgba(10,43,56,.5)
}
.part .bit.glass .n{
  font-size:23px;margin-bottom:7px;color:#FFE4B0
}
.part .bit.glass h4{font-size:14.5px;margin-bottom:4px;color:#fff;letter-spacing:.01em}
.part .bit.glass p{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.92)}
.part .lbl{color:#FFE4B0}
.part .deck{color:rgba(255,255,255,.94)}
@media(max-width:860px){.kit{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:760px){
  .part .bit.glass{padding:14px 14px 16px;border-radius:18px}
  .part .bit.glass .n{font-size:21px;margin-bottom:5px}
  .part .bit.glass h4{font-size:14px}
  .part .bit.glass p{font-size:13px;line-height:1.4}
}
@media(max-width:400px){.kit{grid-template-columns:1fr 1fr;gap:9px}}

/* ============================================================
   v3 — the sticky bar, built to match the hero email pill
   Light glass shell, a pale pill and a gold pill inside it.
   ============================================================ */
.dock{
  display:flex;gap:6px;align-items:center;padding:6px;border-radius:999px;
  left:50%;right:auto;bottom:22px;transform:translate(-50%,180%);
  max-width:calc(100vw - 24px);border:0;
  background:
    radial-gradient(70% 190% at var(--lg-x) 6%,
      rgba(255,255,255,.38), rgba(255,255,255,.14) 52%, rgba(255,255,255,.07) 100%),
    rgba(15,59,76,.34);
  -webkit-backdrop-filter:blur(20px) saturate(200%) brightness(1.08);
  backdrop-filter:blur(20px) saturate(200%) brightness(1.08);
  box-shadow:
    inset 0 1.5px 1px -0.5px rgba(255,255,255,.95),
    inset 0 -1.5px 1px -0.5px rgba(255,255,255,.3),
    0 22px 48px -20px rgba(10,43,56,.72)
}
.dock.show{transform:translate(-50%,0)}

.dpill{
  position:relative;flex:0 1 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 26px;border-radius:999px;text-decoration:none;
  font-family:var(--sans);font-size:15.5px;font-weight:600;white-space:nowrap;
  border:0;isolation:auto;
  transition:filter .25s var(--ease),transform .25s var(--ease)
}
.dpill::after{display:none}          /* the shell carries the rim, not each pill */
.dpill:hover{filter:brightness(1.05);transform:translateY(-1px)}
.dpill:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* pale pill, the same material as the hero's email field */
.dpill.quiz{
  color:var(--deep);
  background:rgba(255,255,255,.92);
  box-shadow:inset 0 1px 2px rgba(10,43,56,.1)
}
.dpill.quiz:hover{background:#fff}

/* gold pill, the same as the hero's submit */
.dpill.manual{
  color:#241C16;
  background:linear-gradient(170deg,#C79A52,#B38642 60%,#9C7334);
  box-shadow:inset 0 1.5px 1px -0.5px rgba(255,255,255,.65), 0 8px 18px -10px rgba(179,134,66,.9)
}
.dpill.manual:hover{background:linear-gradient(170deg,#D4A85F,#C09049 60%,#A87C39)}

@media(max-width:720px){
  .dock{left:12px;right:12px;bottom:12px;transform:translateY(180%);max-width:none;
    padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .dock.show{transform:none}
  .dpill{flex:1 1 0;min-width:0;padding:0 12px;font-size:15px}
}
@media(max-width:360px){.dpill{font-size:14px;padding:0 8px}}

/* ============================================================
   v4 — the sticky bar, thin and clean
   Same material and proportions as the hero's email pill: a slim
   glass shell, a pale pill and a gold pill, nothing else.
   ============================================================ */
.dock,
.dock.show{
  display:flex;gap:5px;align-items:center;
  padding:5px;border-radius:999px;border:0;
  left:50%;right:auto;bottom:22px;max-width:min(420px,calc(100vw - 28px));
  background:rgba(15,59,76,.46);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  backdrop-filter:blur(22px) saturate(190%);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.55),
    0 14px 34px -16px rgba(10,43,56,.6)
}
.dock{transform:translate(-50%,190%)}
.dock.show{transform:translate(-50%,0)}
.dock::before,.dock::after{display:none}

.dpill{
  position:relative;flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 18px;border-radius:999px;border:0;
  text-decoration:none;font-family:var(--sans);
  font-size:14.5px;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  box-shadow:none;isolation:auto;
  transition:background .22s var(--ease),color .22s var(--ease)
}
.dpill::before,.dpill::after{display:none}
.dpill:hover{transform:none}
.dpill:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.dpill.quiz{background:rgba(255,255,255,.94);color:var(--deep);box-shadow:none}
.dpill.quiz:hover{background:#fff}
.dpill.manual{background:#B38642;color:#241C16;box-shadow:none}
.dpill.manual:hover{background:#C79A52}

@media(max-width:720px){
  .dock,.dock.show{left:12px;right:12px;bottom:12px;max-width:none;
    padding:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}
  .dock{transform:translateY(190%)}
  .dock.show{transform:none}
  .dpill{font-size:14.5px;padding:0 12px;min-height:44px}
}
@media(max-width:360px){.dpill{font-size:13.5px;padding:0 8px}}