:root{
  --sun:#FFB81C; --orange:#FF6A13; --pink:#FF2E7E; --aqua:#12C4D0; --red:#F2332A; --sky:#3F8CFF; --violet:#7A3FF2;
  --cream:#FFF8E7; --ink:#15131C; --night:#0B1030;
  --display:'Bodoni Moda', 'Didot', serif; --script:'Kaushan Script', cursive; --body:'Outfit', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;margin:0;letter-spacing:-.01em;text-transform:uppercase}
h2{font-size:clamp(2.3rem,7vw,5rem)}
h2 i,h1 em{font-family:var(--script);font-style:normal;text-transform:none;color:var(--sun);font-weight:400;letter-spacing:0}
.kicker{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin:0 0 1rem;color:#fff;opacity:.9}
.kicker.dark{color:var(--orange);opacity:1}
.lede{font-size:1.15rem;max-width:36rem;margin:1.2rem 0 0}
section{padding:5.5rem 1.25rem;position:relative}
@media(min-width:900px){section{padding:8rem 6vw}}

/* buttons */
.cta{display:inline-block;background:var(--sun);color:var(--ink);font-weight:700;text-decoration:none;padding:1rem 1.7rem;border-radius:999px;font-size:1.05rem;box-shadow:0 6px 0 rgba(0,0,0,.18);transition:transform .15s, box-shadow .15s}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(0,0,0,.18)}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.cta.dark{background:var(--ink);color:#fff}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1rem;transition:background .3s, box-shadow .3s}
.top.solid{background:rgba(255,248,231,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.brand{display:block;line-height:0;text-decoration:none;background:rgba(255,248,231,.94);border-radius:16px;padding:.3rem .55rem;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.top.solid .brand{box-shadow:none}
.brand img{height:58px;width:auto;display:block}
@media(min-width:900px){.top{padding:.7rem 6vw}.brand img{height:76px}}
/* Log in as small spaced capitals, not a button (the owner, 26 October 2026): members look for it here and find it; it does not
   compete with the gold button. A member's first name takes its place (ww.js). */
.top-login{display:block;padding:.7rem .4rem;color:var(--cream);font:500 .7rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  text-shadow:0 1px 8px rgba(11,16,48,.6)}
.top-login:hover,.top-login:focus-visible{color:#E6C27A}
.top.solid .top-login{color:var(--ink);text-shadow:none}
/* the shared header (24 October 2026), the same on both sites and in the app: The Water Bar's drop on the left, Log in in
   the middle, The Morning Party on the right. The registered logo has black lettering on a clear ground, so it sits on a
   frosted cream tile (never recoloured); the drop needs nothing behind it. */
.top{display:grid;grid-template-columns:1fr auto 1fr}
.top-wb{justify-self:start;display:block;line-height:0}
.top-wb img{height:44px;width:auto;filter:drop-shadow(0 2px 10px rgba(11,16,48,.35))}
.top-mid{display:flex;align-items:center;gap:1.6rem}
/* the Morning Party logo stands on its own, no tile: a thin cream edge that hugs its shapes, like a sticker, so the black
   lettering reads on the film, and a soft glow that slowly breathes (still with less motion). The logo itself is untouched. */
.top .brand{justify-self:end;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.top .brand img{height:56px;filter:drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 1.4px #FFF8E7) drop-shadow(0 0 8px rgba(255,248,231,.35))}
@media (prefers-reduced-motion: no-preference){.top .brand img{animation:mpHalo 7s ease-in-out infinite}}
@keyframes mpHalo{
  0%,100%{filter:drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 1.4px #FFF8E7) drop-shadow(0 0 8px rgba(255,248,231,.35))}
  50%{filter:drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 1.4px #FFF8E7) drop-shadow(0 0 18px rgba(255,248,231,.75))}}
@media(min-width:900px){.top-wb img{height:56px}.top .brand img{height:70px}}

/* ============ hero ============ */
#hero{min-height:100svh;background:var(--night);color:#fff;padding:4.5rem 1.25rem 3.5rem;display:grid;gap:1.6rem;align-content:start;justify-items:center;overflow:hidden}
.hero-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));grid-auto-rows:72px;gap:3px;opacity:.55}
.hero-tiles span{background:#141B4A;border-radius:3px;animation:glow 7s infinite both}
@keyframes glow{0%,62%{background:#141B4A}70%{background:var(--c)}86%{background:var(--c)}100%{background:#141B4A}}
.film{position:relative;z-index:2;width:min(100%, calc(72svh * 9 / 16));aspect-ratio:9/16;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.08)}
.film video{width:100%;height:100%;object-fit:cover;background:var(--night)}
#sound{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);border:0;background:rgba(21,19,28,.82);color:#fff;font:600 .85rem var(--body);padding:.6rem 1rem;border-radius:999px;cursor:pointer;white-space:nowrap}
#sound:hover{background:var(--pink)}
.hero-copy{position:relative;z-index:2;text-align:center;max-width:34rem}
#hero h1{font-size:clamp(2rem,7.5vw,4.2rem)}
.with{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .7rem;margin:1.3rem 0 1.6rem;font-size:.95rem;opacity:.95}
.sister{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);padding:.45rem .8rem;border-radius:999px}
.sister img{height:26px;width:auto}
.scrollhint{position:relative;z-index:2;color:#fff;text-decoration:none;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.scrollhint span{display:inline-block;animation:bob 1.4s infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@media(min-width:900px){
  #hero{grid-template-columns:auto minmax(0,34rem);align-content:center;align-items:center;justify-content:center;gap:5vw;padding-top:5rem}
  .film{width:calc(84svh * 9 / 16)}
  .hero-copy{text-align:left}
  .with{justify-content:flex-start}
  .scrollhint{grid-column:1 / -1}
}

/* ============ wall ============ */
#wall{height:340vh;padding:0;background:var(--night)}
.wall-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding:4.2rem .5rem .5rem;overflow:hidden}
.wall-title{color:#fff;text-align:center;font-size:clamp(1.5rem,5.2vw,3.4rem);margin:0 0 .7rem}
.wall-title span{display:inline-block}
.wall-title span:last-child{font-family:var(--script);text-transform:none;color:var(--sun);font-weight:400}
.grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);gap:5px;perspective:1400px;min-height:0}
@media(min-width:760px){.grid{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:8px}.wall-sticky{padding:4.6rem 1.2rem 1.2rem}}
.tile{position:relative;transform-style:preserve-3d;will-change:transform;min-height:0}
.tile .f{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.tile .front{background:var(--c);display:grid;place-items:center;color:rgba(255,255,255,.95);font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(.8rem,2.4vw,1.5rem);letter-spacing:.04em;box-shadow:inset 0 -6px 0 rgba(0,0,0,.14), inset 0 3px 0 rgba(255,255,255,.25)}
.tile .back{transform:rotateX(180deg);background:#222 center/cover}
.tile .back video{width:100%;height:100%;object-fit:cover}

/* ============ the morning / domino run ============ */
#morning{background:var(--cream)}
.run{display:grid;gap:14px;margin-top:3rem;perspective:1600px}
.domino{position:relative;background:var(--c);color:#fff;border-radius:18px;padding:1.4rem 1.3rem 1.3rem;min-height:11rem;overflow:hidden;transform-origin:top center;transform:rotateX(-92deg);opacity:0;transition:transform .7s cubic-bezier(.2,1.5,.4,1), opacity .2s;box-shadow:0 10px 0 rgba(0,0,0,.12)}
.domino.photo::before{content:"";position:absolute;inset:0;background:var(--img) center/cover;opacity:.38;mix-blend-mode:luminosity}
.domino > *{position:relative}
.run.go .domino{transform:none;opacity:1}
.run.go .domino:nth-child(2){transition-delay:.28s}
.run.go .domino:nth-child(3){transition-delay:.56s}
.run.go .domino:nth-child(4){transition-delay:.84s}
.pips{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:#fff;color:var(--ink);font-weight:700;margin-bottom:.8rem}
.domino h3{font-size:1.9rem}
.domino p{margin:.5rem 0 1rem;font-size:1rem}
.host{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border-top:1px dashed rgba(255,255,255,.6);padding-top:.7rem}
.host b{background:rgba(255,255,255,.22);padding:.15rem .5rem;border-radius:6px;display:inline-block;margin-top:.2rem}
.again{margin-top:1.6rem;background:none;border:2px solid var(--ink);border-radius:999px;padding:.6rem 1.1rem;font:600 .9rem var(--body);cursor:pointer}
@media(min-width:900px){
  .run{grid-template-columns:repeat(4,1fr);gap:16px}
  .domino{min-height:22rem;transform-origin:left center;transform:rotateY(92deg)}
}

/* ============ membership ============ */
#join{background:linear-gradient(180deg,var(--cream),#FFE9B8)}
.plans{display:grid;gap:1.4rem;margin-top:3rem;max-width:60rem}
@media(min-width:760px){.plans{grid-template-columns:1fr 1fr}}
.plan{position:relative;border-radius:26px;padding:2rem 1.6rem;box-shadow:0 14px 0 rgba(0,0,0,.1)}
.plan h3{font-size:1.7rem}
.plan.sunny{background:var(--sun)}
.plan.night{background:var(--night);color:#fff}
.plan-sun{position:absolute;right:-6px;top:-38px;width:120px;transform:rotate(8deg)}
.price{margin:.6rem 0 1.2rem;font-size:1.1rem}
.price b{font-family:var(--display);font-size:4.4rem;line-height:1;font-weight:900}
.plan ul{list-style:none;padding:0;margin:0 0 1.6rem}
.plan li{padding:.5rem 0 .5rem 1.6rem;border-top:1px solid rgba(0,0,0,.12);position:relative}
.plan.night li{border-color:rgba(255,255,255,.16)}
.plan li::before{content:"";position:absolute;left:0;top:.95rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--pink)}
.plan.night li::before{background:var(--aqua)}
.fine{font-size:.85rem;opacity:.8;margin:-.6rem 0 1.2rem}
.when{margin-top:2.2rem;font-size:1.05rem}


/* ============ brands ============ */
/* the workout and the DJ (25 October 2026): a photo and their real public lines, in the colours of their dominoes */
.person{display:grid;gap:1.8rem;align-items:center}
#workout{background:#E3F6F8}
#dj{background:#FFEFE4}
.person-photo img{width:100%;height:auto;max-width:24rem;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;border-radius:22px;box-shadow:0 14px 30px rgba(11,16,48,.18)}
#dj .person-photo img{object-position:center 25%}
.person-lines{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.8rem;max-width:36rem}
.person-lines li{padding-left:1rem;border-left:3px solid var(--orange);font-size:1.02rem}
#workout .person-lines li{border-left-color:var(--aqua)}
.person-lines span{display:block;margin-top:.2rem;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.person-more{margin:1.3rem 0 0;font-weight:600}
@media(min-width:900px){.person{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:5vw}#dj .person-photo{order:2}}
#brands{background:var(--cream)}
.moments{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2.8rem;perspective:1400px}
@media(min-width:900px){.moments{grid-template-columns:repeat(4,1fr);gap:12px}}
.moment{position:relative;aspect-ratio:3/4;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1);cursor:pointer}
.moment.flip{transform:rotateY(180deg)}
.moment .face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.moment .front{background:var(--c);color:#fff;box-shadow:inset 0 -8px 0 rgba(0,0,0,.14)}
.moment .front h3{font-size:clamp(1.3rem,3vw,1.7rem)}
/* Previously with: past partners as small white badges in the moment's empty space (a logo, or the name until there is one) */
.prev{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;margin:.6rem 0 auto}
.prev-k{width:100%;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.badge{display:inline-flex;align-items:center;height:42px;padding:0 8px;border-radius:8px;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.badge img{display:block;max-height:32px;max-width:100px;width:auto;height:auto;object-fit:contain}
.badge.dark{background:#0B1030}
.badge.t{color:var(--ink);font-weight:700;font-size:.68rem;letter-spacing:.02em;line-height:1.1}
.slot{display:grid;gap:.35rem;justify-items:start}
.placard{align-self:flex-start;background:#fff;color:var(--ink);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .6rem;border-radius:6px;border:2px dashed var(--ink)}
.moment .back{transform:rotateY(180deg);background:#222 center/cover;color:#fff;justify-content:flex-end}
.moment .back.solid{background:var(--ink)}
.moment .back::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.75))}
.moment .back p{position:relative;margin:0;font-weight:600}
.hint{font-size:.85rem;opacity:.65;margin:.8rem 0 0}
.press{vertical-align:middle}
.press{height:20px;width:auto;filter:brightness(0) invert(1)}
.bricks{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;width:min(320px,80vw);margin:3.5rem auto 1rem}
.bricks span{aspect-ratio:1/1;border-radius:4px;background:transparent}
.bricks span.b{background:var(--sun);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.bricks.go span.b{transform:none}
.bricks span.p{background:var(--c);animation:pulse 2.4s infinite}
@keyframes pulse{50%{filter:brightness(1.25)}}
.bricks-cap{text-align:center;max-width:24rem;margin:0 auto 2rem;font-weight:500}
#brands .cta{display:table;margin:0 auto}
#brands .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:0}
#brands .cta-row .cta{display:inline-block;margin:0;max-width:100%;text-align:center}

/* ============ app preview ============ */
#app{background:#FFE9B8;text-align:center}
#app h2{margin-bottom:2.5rem}
.phones{display:flex;gap:1.2rem;overflow-x:auto;padding:1rem .2rem 1.6rem;scroll-snap-type:x mandatory;justify-content:flex-start}
@media(min-width:900px){.phones{justify-content:center}}
.phone{flex:0 0 210px;scroll-snap-align:center}
.phone > span{display:block;margin-top:.7rem;font-weight:600}
.screen{height:380px;border-radius:30px;background:#fff;border:7px solid var(--ink);padding:1.2rem .9rem;text-align:left;box-shadow:0 14px 0 rgba(0,0,0,.1);overflow:hidden}
.screen > b{font-family:var(--display);font-size:1.5rem;text-transform:uppercase}
.s-today ol{list-style:none;padding:0;margin:1rem 0 0}
.s-today li{padding:.65rem .7rem;border-radius:12px;margin-bottom:.5rem;background:var(--cream);font-size:.86rem;font-weight:500}
.s-today li i{font-style:normal;font-weight:700;margin-right:.4rem;color:var(--orange)}
.s-today li.on{background:var(--pink);color:#fff}.s-today li.on i{color:#fff}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:1rem}
.cal span{aspect-ratio:1/1;display:grid;place-items:center;border-radius:50%;font-size:.7rem}
.cal span.go{background:var(--sun);font-weight:700}.cal span.aw{background:var(--night);color:#fff;font-weight:700}
.s-wallet{background:var(--night);display:grid;place-items:center}
.pass{background:var(--sun);border-radius:18px;padding:1rem;text-align:center;width:100%}
.pass img{width:104px;height:auto;margin:0 auto .5rem;padding:.35rem;background:var(--cream);border-radius:14px}
.pass b{display:block;font-family:var(--display);text-transform:uppercase;font-size:1.2rem}
.pass small{opacity:.75}
.code{height:64px;margin-top:.8rem;border-radius:8px;background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 5px,var(--ink) 5px 6px,transparent 6px 10px)}

footer{background:var(--ink);color:#fff;text-align:center;padding:4rem 1.25rem 5rem}
footer img{width:110px;margin:0 auto .5rem}
footer .f-logo{width:min(190px,62vw);height:auto;margin:0 auto 1.4rem;display:block;box-sizing:content-box;background:rgba(255,248,231,.96);border-radius:20px;padding:.7rem .9rem}
footer a{color:var(--sun)}
.small{opacity:.6;font-size:.85rem}
.f-legal{max-width:22rem;margin:2rem auto 0;padding-top:.9rem;border-top:1px dashed rgba(255,248,231,.28)}
.f-legal .small{opacity:1;margin:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,248,231,.55)}
.f-legal a,.f-legal button{display:inline-block;padding:.8rem .55rem;color:var(--cream);text-decoration:none;font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;cursor:pointer}
.f-legal a:hover,.f-legal button:hover{color:var(--sun);text-decoration:underline;text-underline-offset:4px}
.f-legal a:focus-visible,.f-legal button:focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-radius:6px}
.f-settings[hidden]{display:none}
@media(max-width:480px){.f-settings{display:block}.f-dot{display:none}}

/* membership: the one line under the join buttons */
.agree{margin:1.6rem 0 0;font-size:.88rem;opacity:.8}
.agree a{font-weight:600;text-underline-offset:3px}

/* ============ cookie note: one small tile that flips up from the corner ============ */
.cookie-dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:40;perspective:900px;pointer-events:none}
@media(min-width:600px){.cookie-dock{left:auto;right:1.25rem;bottom:calc(1.25rem + env(safe-area-inset-bottom, 0px));width:19.5rem}}
.cookie{pointer-events:auto;background:var(--sun);color:var(--ink);border-radius:14px;padding:.95rem 1rem .85rem 1.1rem;box-shadow:inset 0 -6px 0 rgba(0,0,0,.14), inset 0 3px 0 rgba(255,255,255,.3), 0 10px 0 rgba(0,0,0,.16);transform-origin:50% 100%;transform:rotateX(-96deg);opacity:0;transition:transform .7s cubic-bezier(.2,1.5,.4,1), opacity .2s}
.cookie[hidden]{display:none}
.cookie.up{transform:none;opacity:1}
.cookie.away{transform:rotateX(-96deg);opacity:0;transition:transform .45s cubic-bezier(.5,0,.75,0), opacity .2s .25s}
.cookie p{margin:0;font-size:.92rem;line-height:1.35;font-weight:500}
.cookie i{font-family:var(--script);font-style:normal;font-size:1.12em;white-space:nowrap}
.cookie .cookie-do{display:flex;align-items:center;gap:.9rem;margin-top:.65rem}
.cookie-ok{border:0;background:var(--ink);color:#fff;font:700 .9rem var(--body);min-height:44px;padding:.55rem 1.25rem;border-radius:999px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.22);transition:transform .15s, box-shadow .15s}
.cookie-ok:hover{transform:translateY(-1px);box-shadow:0 5px 0 rgba(0,0,0,.22)}
.cookie-ok:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.22)}
.cookie-do a{display:inline-block;padding:.75rem .35rem;font-weight:600;font-size:.88rem;text-underline-offset:3px}
.cookie-ok:focus-visible,.cookie-do a:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:999px}

@media (prefers-reduced-motion: reduce){
  .hero-tiles span,.scrollhint span,.bricks span.p{animation:none}
  .domino{transition:none}
  .cookie,.cookie.up,.cookie.away{transform:none;transition:none}
}

/* ============ membership band: full width, points to The Water Bar ============ */
#member-band{background:var(--night);color:#fff;text-align:center;padding:3.2rem 1.25rem;display:grid;gap:1.4rem;justify-items:center}
#member-band h2{font-size:clamp(1.5rem,4.4vw,2.6rem);max-width:30ch;text-transform:none}
#member-band .cta{max-width:100%;text-align:center}
.hero-copy .cta{max-width:min(100%,26rem);text-align:center;line-height:1.25}

/* ============ talk to us ============ */
.talk{max-width:34rem;margin:2.4rem auto 0;text-align:left;display:grid;gap:1rem}
.talk-h{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;margin:0;text-align:center}
.talk-intro{margin:0;text-align:center}
.talk label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.talk-opt{font-weight:400;opacity:.7}
.talk input,.talk textarea{width:100%;font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:14px;padding:.7rem .85rem}
.talk textarea{resize:vertical;min-height:7rem}
.talk input:focus,.talk textarea:focus{outline:3px solid var(--pink);outline-offset:1px}
.talk-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.talk button.cta{border:0;font:700 1.05rem var(--body);cursor:pointer;justify-self:center}
.talk button.cta[disabled]{opacity:.6;cursor:default}
.talk-status{margin:0;text-align:center;font-weight:600;min-height:1.5em}
.talk-status a{color:inherit}
.talk.sent label,.talk.sent button,.talk.sent .talk-intro{display:none!important}
.talk-alt{text-align:center;margin:1.2rem 0 0;font-size:.95rem}
.talk-alt a{color:inherit}

/* ============ the join button: a gentle pulse, balloons drifting up, a sunshine burst on tap ============ */
.cta-join{position:relative;z-index:2;animation:joinPulse 2.6s ease-in-out infinite}
@keyframes joinPulse{0%,62%,100%{transform:scale(1);box-shadow:0 6px 0 rgba(0,0,0,.18),0 0 0 0 rgba(255,184,28,.55)}
  31%{transform:scale(1.045);box-shadow:0 6px 0 rgba(0,0,0,.18),0 0 0 16px rgba(255,184,28,0)}}
.cta-join:hover{animation-play-state:paused}
.cta-join.go{animation:none;transform:scale(.97)}
.balloon{position:absolute;z-index:1;width:15px;height:19px;border-radius:50% 50% 47% 47%;background:var(--c);opacity:0;pointer-events:none;
  box-shadow:inset -3px -4px 0 rgba(0,0,0,.14);animation:balloonRise var(--t,4.6s) ease-out forwards}
.balloon::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;background:rgba(255,255,255,.55);transform:translateX(-50%)}
@keyframes balloonRise{0%{transform:translate(0,0) scale(.6);opacity:0}12%{opacity:.95}
  55%{transform:translate(calc(var(--dx) * .5),-80px) scale(1)}100%{transform:translate(var(--dx),-170px) scale(1);opacity:0}}
.burst-bit{position:fixed;z-index:70;left:0;top:0;pointer-events:none;will-change:transform,opacity;
  animation:burstFly var(--t,.9s) cubic-bezier(.15,.75,.3,1) forwards}
.burst-bit.tile{width:13px;height:13px;border-radius:3px;background:var(--c)}
.burst-bit.sun{width:30px;height:auto}
@keyframes burstFly{0%{transform:translate(var(--x0),var(--y0)) scale(.4) rotate(0deg);opacity:1}
  80%{opacity:1}100%{transform:translate(var(--x1),var(--y1)) scale(1) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion: reduce){.cta-join{animation:none}.balloon,.burst-bit{display:none}}

/* ============ "It's so easy": Book, Pass to board, Drinks in app, drawn as The Water Bar app ============ */
.phone > span.step{display:flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--display);font-size:1.15rem;text-transform:uppercase;margin-top:.9rem}
.phone > span.step em{font-style:normal;font-family:var(--body);font-weight:700;font-size:.85rem;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:var(--ink)}
.phone .step-sub{display:block;margin-top:.25rem;font-size:.85rem;opacity:.7}
.screen.wb{height:410px;--wb-deep:#03163A;--wb-water:#0A62B8;--wb-aqua:#35B9F0;--wb-mist:#EAF7FF;--wb-foam:#F7FCFF;
  background:var(--wb-foam);color:var(--wb-deep);position:relative;padding:.9rem .85rem 3.4rem;
  background-image:linear-gradient(90deg,var(--wb-deep),var(--wb-water) 55%,var(--wb-aqua));background-size:100% 6px;background-repeat:no-repeat}
.screen.wb > b{display:block;margin-top:.55rem;color:var(--wb-deep)}
.wb .dk-when{display:block;margin-top:.1rem;font-size:.66rem;font-weight:600;color:var(--wb-water)}
.wb-top{display:flex;align-items:center;gap:.4rem;margin-top:.35rem;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wb-water)}
.wb-top img{width:22px;height:22px;object-fit:contain}
.wb .bk-day{margin:.7rem 0 .55rem;font-weight:700;font-size:.88rem}
.wb .bk-card{background:var(--wb-water);color:#fff;border-radius:14px;padding:.7rem .8rem;display:grid;gap:.12rem;margin-bottom:.55rem}
.wb .bk-card i{font-style:normal;font-weight:700;font-size:.78rem;opacity:.85}
.wb .bk-card span{font-weight:700;font-size:.93rem}
.wb .bk-card em{font-style:normal;justify-self:start;margin-top:.35rem;background:#fff;color:var(--wb-water);font-weight:700;font-size:.76rem;padding:.3rem .7rem;border-radius:999px}
.wb .bk-slot{padding:.55rem .7rem;border-radius:12px;margin-bottom:.4rem;background:var(--wb-mist);font-size:.83rem;font-weight:500}
.wb .bk-slot i{font-style:normal;font-weight:700;margin-right:.4rem;color:var(--wb-water)}
.wb-pass{margin-top:.8rem;border-radius:18px;overflow:hidden;background:var(--wb-aqua);box-shadow:0 8px 18px rgba(3,22,58,.18)}
.wb-pass-top{background:linear-gradient(160deg,var(--wb-water),#1E88D6);color:#fff;padding:.85rem .8rem .9rem;display:grid;gap:.2rem;text-align:center}
.wb-pass-top strong{font-family:var(--display);font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em}
.wb-pass-top small{font-size:.68rem;opacity:.85}
.wb-pass .code{margin:.75rem;height:78px;border-radius:10px;background:#fff repeating-linear-gradient(90deg,var(--wb-deep) 0 2px,transparent 2px 5px,var(--wb-deep) 5px 6px,transparent 6px 9px);background-clip:content-box;padding:8px;border:0}
.wb .dk{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.45rem;padding:.55rem .6rem;border-radius:12px;background:var(--wb-mist);margin-top:.45rem;font-size:.8rem;font-weight:600}
.wb .dk:first-of-type{margin-top:.75rem}
.wb .dk span small{display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;opacity:.9}
.wb .dk span b{font-weight:inherit}
.wb .dk i{font-style:normal;font-weight:500;opacity:.75;font-size:.74rem;white-space:nowrap}
.wb .dk em{font-style:normal;background:var(--wb-water);color:#fff;border-radius:999px;padding:.22rem .55rem;font-size:.7rem}
.wb .dk.pick{background:var(--wb-water);color:#fff}
.wb .dk.pick i{opacity:.9}
.wb .dk.pick em{background:#fff;color:var(--wb-water)}
.wb-tabs{position:absolute;left:.6rem;right:.6rem;bottom:.6rem;display:flex;justify-content:space-around;gap:.2rem;background:var(--wb-deep);border-radius:999px;padding:.3rem}
.wb-tabs span{flex:1;text-align:center;font-size:.66rem;font-weight:700;color:#fff;padding:.32rem 0;border-radius:999px;opacity:.75}
.wb-tabs span.on{background:var(--wb-water);opacity:1}
#app h2 i{font-size:1.35em;line-height:1;display:inline-block;transform:rotate(-3deg);margin-left:.1em}

/* ============ The Way of Water hero (24 October 2026): the one landing page ============
   The lettering of the Way of Water film: small spaced capitals, gold for the series, "The Morning" in italic and PARTY in
   spaced capitals, both in Bodoni. The film fills the screen; the words sit over its lower part; the top is left clear. */
#hero.ww{--ww-gold:#E6C27A;--ww-ink:#0B1030;display:block;position:relative;min-height:var(--ww-screen,100svh);padding:0;background:var(--ww-ink);color:var(--cream);overflow:hidden}
#hero.ww .hero-tiles{display:none}
.ww-media{position:absolute;inset:0}
.ww-media video{width:100%;height:100%;max-width:none;object-fit:cover}
#hero.ww::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,16,48,.5) 0%,rgba(11,16,48,.12) 14%,rgba(11,16,48,0) 26%,rgba(11,16,48,.55) 42%,rgba(11,16,48,.86) 60%,rgba(11,16,48,.97) 100%)}
#hero.ww #sound{left:auto;right:1rem;top:5.6rem;bottom:auto;transform:none;z-index:3;background:rgba(11,16,48,.45);border:1px solid rgba(255,248,231,.4);
  font:500 .66rem var(--body);letter-spacing:.18em;text-transform:uppercase;padding:.45rem .8rem}
#hero.ww #sound:hover{background:rgba(11,16,48,.75)}
/* the shared loop has no sound: the button stays in the page for site.js, unseen; show it again for a film with sound */
#hero.ww #sound{display:none}
.ww-copy{position:relative;z-index:2;min-height:var(--ww-screen,100svh);display:flex;flex-direction:column;justify-content:flex-end;
  max-width:30rem;margin:0 auto;padding:6rem 1.5rem 2rem;text-align:center}
.ww-presents,.ww-series,.ww-date,.ww-incl,.ww-renews{margin:0;font:500 .66rem/1.6 var(--body);letter-spacing:.24em;text-transform:uppercase}
/* "The Water Bar presents" sits centred just above "Way of Water", which is a touch larger and bolder */
.ww-presents{opacity:.9}
.ww-series{margin-top:.3rem;color:var(--ww-gold);font-size:.76rem;font-weight:600;letter-spacing:.26em}
.ww-title,.ww-incl{text-shadow:0 1px 12px rgba(11,16,48,.55)}
#hero.ww .ww-title{margin:.3rem 0 0;font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:0;text-transform:none}
#hero.ww .ww-title em{display:block;font-family:var(--display);font-style:italic;font-weight:400;font-size:2.4rem;color:var(--cream);letter-spacing:0;text-transform:none}
#hero.ww .ww-title span{display:block;margin-top:.1rem;font-size:2.7rem;letter-spacing:.16em;text-transform:uppercase}
/* what the membership includes, plainly, under a thin line (the owner, 26 October 2026: clearer than a question here; the four
   questions, with their answers, are under the hero) */
.ww-inc-k{margin:.8rem auto 0;padding-top:.75rem;max-width:22rem;border-top:1px solid rgba(255,248,231,.32);font:500 .62rem/1.6 var(--body);letter-spacing:.28em;text-transform:uppercase;opacity:.85}
/* "The original" before "As featured in Khaleej Times" at the top, with a small gold dot between */
.ww-press{flex-wrap:wrap;row-gap:.3rem}
.ww-orig{color:var(--ww-gold)}
.ww-orig::after{content:"\00b7";margin-left:.6rem;color:rgba(255,248,231,.6)}
.ww-feat{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.ww-date{margin-top:.7rem}
.ww-join{margin:.25rem 0 0;font-family:var(--display);font-size:1.3rem}
.ww-incl{margin-top:.35rem;color:var(--ww-gold);font-size:.72rem;font-weight:600;letter-spacing:.12em}
.ww-incl i{margin:0 .3em;font-style:normal;font-weight:400;color:rgba(255,248,231,.5)}
/* the button a little brighter than the gold of the words, with a soft glow (the owner, 26 October 2026) */
.ww-btn{display:block;width:100%;max-width:22rem;margin:.9rem auto 0;padding:1rem 1rem;border-radius:2px;background:#F4D58E;color:var(--ww-ink);
  box-shadow:0 0 0 1px rgba(255,240,200,.55),0 10px 30px rgba(244,213,142,.35);
  font:600 .78rem var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.ww-btn:hover,.ww-btn:focus-visible{background:var(--cream)}
.ww-tick{display:flex;align-items:flex-start;justify-content:center;gap:.55rem;max-width:22rem;margin:.6rem auto 0;font-size:.78rem;line-height:1.35;text-align:left;cursor:pointer}
.ww-tick[hidden]{display:none}
.ww-tick input{flex:none;width:1.05rem;height:1.05rem;margin:.1rem 0 0;accent-color:var(--ww-gold)}
.ww-renews{margin-top:.55rem;font-size:.58rem;letter-spacing:.14em;opacity:.85}
#hero.ww .hint{display:flex;align-items:center;justify-content:center;gap:.2rem;margin:.6rem 0 0;font-size:.66rem;opacity:.65}
#hero.ww .press{height:15px}
/* the dawn: the words arrive with the film, all on screen within about two and a half seconds; with less motion they are simply there */
@media (prefers-reduced-motion: no-preference){
  #hero.ww :is(.ww-press,.ww-presents,.ww-series,.ww-inc-k,.ww-incl,.ww-date,.ww-join,.ww-btn,.ww-tick,.ww-renews,.hint){animation:wwDawn .9s cubic-bezier(.2,.7,.2,1) both}
  #hero.ww .ww-title{animation:wwRise 1.1s cubic-bezier(.2,.7,.2,1) .6s both}
  #hero.ww :is(.ww-press,.ww-presents,.ww-series){animation-delay:.3s}
  #hero.ww :is(.ww-inc-k,.ww-incl){animation-delay:1s}
  #hero.ww :is(.ww-date,.ww-join){animation-delay:1.3s}
  #hero.ww :is(.ww-btn,.ww-tick,.ww-renews,.hint){animation-delay:1.6s}
}
@keyframes wwDawn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wwRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* on a computer: the words on the left, the film as a tall panel on the right */
@media(min-width:900px){
  #hero.ww{display:grid;grid-template-columns:minmax(0,36rem) auto;justify-content:center;align-items:center;gap:6vw;padding:8rem 6vw 4rem}
  #hero.ww::after{display:none}
  .ww-media{position:relative;inset:auto;grid-column:2;grid-row:1;width:calc(76svh * 9 / 16);aspect-ratio:9/16;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(230,194,122,.25)}
  .ww-copy{grid-column:1;grid-row:1;min-height:0;margin:0;padding:0;text-align:left}
  .ww-inc-k,.ww-btn,.ww-tick{margin-left:0}
  .ww-tick{justify-content:flex-start}
  #hero.ww .hint{justify-content:flex-start}
  #hero.ww .ww-title em{font-size:3.6rem}
  #hero.ww .ww-title span{font-size:4.2rem}
}
/* the words as tall as the film beside them (Jenna, 24 October 2026), on a screen tall enough to hold them */
@media(min-width:900px) and (min-height:880px){
  #hero.ww{grid-template-columns:minmax(0,40rem) auto}
  #hero.ww .ww-copy{zoom:1.12}
}

/* frosted glass under the words, as a tide: the lower part of the film is lightly blurred and its colour lifted, with a thin
   night tint, so the film glows through behind the words. Its top edge is two gentle waves of different lengths drifting
   against each other, and the whole layer rises and falls unevenly, so the edge never moves the same way twice. Plain CSS,
   no blend mode. Phones only; on a computer the film has its own panel. With less motion the tide stands still. */
#hero.ww{--ww-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 48' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.1'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 24C32.5 16 65 12 97.5 12S162.5 16 195 24 260 36 292.5 36 357.5 32 390 24V48H0Z'/%3E%3C/svg%3E")}
#hero.ww::before{content:"";position:absolute;left:0;right:0;bottom:-8svh;height:calc(68% + 8svh);z-index:1;pointer-events:none;
  background:rgba(11,16,48,.2);
  -webkit-backdrop-filter:blur(4px) saturate(1.5);backdrop-filter:blur(4px) saturate(1.5);
  -webkit-mask-image:var(--ww-wave),var(--ww-wave),linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 22%);mask-image:var(--ww-wave),var(--ww-wave),linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 22%);
  -webkit-mask-size:390px 48px,250px 34px,100% calc(100% - 44px);mask-size:390px 48px,250px 34px,100% calc(100% - 44px);
  -webkit-mask-position:0 0,0 10px,0 44px;mask-position:0 0,0 10px,0 44px;
  -webkit-mask-repeat:repeat-x,repeat-x,no-repeat;mask-repeat:repeat-x,repeat-x,no-repeat}
#hero.ww::after{background:linear-gradient(180deg,rgba(11,16,48,.5) 0%,rgba(11,16,48,.1) 14%,rgba(11,16,48,0) 26%,rgba(11,16,48,.26) 42%,rgba(11,16,48,.5) 60%,rgba(11,16,48,.72) 100%)}
@media (prefers-reduced-motion: no-preference){
  #hero.ww::before{animation:wwTide 14s ease-in-out infinite,wwWaves 12s linear infinite}
}
@keyframes wwTide{0%,100%{transform:none}28%{transform:translateY(-3.5svh)}50%{transform:translateY(-1.2svh)}76%{transform:translateY(-5.5svh)}}
@keyframes wwWaves{to{-webkit-mask-position:390px 0,-250px 10px,0 44px;mask-position:390px 0,-250px 10px,0 44px}}
@media(min-width:900px){#hero.ww::before{display:none}}

/* "The original · As featured in Khaleej Times", still, in the clear space between the top of the page and the words, just
   under the Morning Party logo (on a computer, above the words) */
.ww-above{flex:1 1 0;min-height:3rem;display:grid;align-content:center;justify-items:center;margin-bottom:.5rem}
.ww-press{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0;font:500 .56rem/1.6 var(--body);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,248,231,.82)}
#hero.ww .ww-press .press{height:17px;filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(11,16,48,.6))}
/* on a phone the two halves stand one over the other, with no dot; and the words sit higher (the owner, 26 October 2026): the
   room left on the screen is shared between the space above them and a space below the renewal line, so the button is well up
   from the bottom and clear of the sun (on a short screen both spaces close up first) */
@media(max-width:899px){.ww-press{flex-direction:column;gap:.35rem}.ww-orig::after{display:none}.ww-copy::after{content:"";flex:1 1 0}}
@media(min-width:900px){
  .ww-above{flex:none;justify-items:start;margin-bottom:1.4rem}
  .ww-press{justify-content:flex-start}
}
/* a phone with its browser bars leaves about 660px: the words close up a little so the button and the renewal line stay on
   the first screen */
@media (max-width: 899px) and (max-height: 760px){
  .ww-copy{padding-top:4.4rem;padding-bottom:1.2rem}
  .ww-above{min-height:2.4rem;margin-bottom:.3rem}
  #hero.ww .ww-title em{font-size:2.1rem}
  #hero.ww .ww-title span{font-size:2.35rem}
  .ww-inc-k{margin-top:.45rem;padding-top:.45rem}
  .ww-date{margin-top:.5rem}
  .ww-btn{margin-top:.65rem;padding:.78rem 1rem}
  .ww-tick{margin-top:.45rem}
}

/* ============ under the hero: the partners who have been part of the morning before (the owner, 26 October 2026) ============
   In the Way of Water's night and gold: one strip of marks to swipe sideways, each settling in the middle as it stops (scroll snap);
   nothing moves by itself. The marks are shape only, painted in cream on a faint tile. On a wide screen all six fit, centred.
   The Khaleej Times feature is linked under the strip. */
.ww-after{--ww-gold:#E6C27A;background:#0B1030;color:var(--cream);text-align:center;padding:2.6rem 0 2.4rem}
.ww-prev{margin:0 0 .9rem;font:500 .6rem/1.6 var(--body);letter-spacing:.3em;text-transform:uppercase;opacity:.75}
.ww-logos{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 1.5rem;padding:.2rem 1.5rem .6rem;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
.ww-logos::-webkit-scrollbar{display:none}
.ww-logos:focus-visible{outline:2px solid var(--ww-gold);outline-offset:2px}
/* (centred when they all fit; auto margins give way to nothing when the strip scrolls) */
.ww-logo:first-child{margin-left:auto}
.ww-logo:last-child{margin-right:auto}
.ww-logo{flex:0 0 auto;scroll-snap-align:center;display:grid;place-items:center;width:8.6rem;height:4.8rem;border:1px solid rgba(255,248,231,.16);border-radius:14px;background:rgba(255,248,231,.04)}
.ww-logo i{display:block;width:6rem;height:2.2rem;background:var(--cream);opacity:.92;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.ww-logo.tall i{height:3.2rem}
.ww-after-press{margin:1.6rem 1.5rem 0;font:500 .66rem/1.7 var(--body);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,248,231,.8)}
.ww-after-press a{color:var(--ww-gold);text-underline-offset:3px}

/* the cookie note in the Way of Water night and gold (24 October 2026): same words and buttons, a quiet card that rises in */
.cookie{background:rgba(11,16,48,.92);color:#FFF8E7;border:1px solid rgba(230,194,122,.35);border-radius:4px;padding:.9rem 1rem .8rem;
  box-shadow:0 18px 40px rgba(11,16,48,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform:translateY(14px);transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s}
.cookie.up{transform:none;opacity:1}
.cookie.away{transform:translateY(14px);opacity:0;transition:transform .4s ease-in, opacity .3s}
.cookie p{font-size:.85rem;font-weight:400;letter-spacing:.01em}
.cookie i{font-family:var(--display);font-style:italic;color:#E6C27A;font-size:1.05em}
.cookie-ok{background:#E6C27A;color:#0B1030;border-radius:2px;box-shadow:none;font:600 .72rem var(--body);letter-spacing:.18em;text-transform:uppercase;min-height:40px;padding:.5rem 1.1rem}
.cookie-ok:hover{transform:none;box-shadow:none;background:#FFF8E7}
.cookie-ok:active{transform:none;box-shadow:none}
.cookie-do a{color:rgba(255,248,231,.8);font-weight:500;font-size:.8rem;letter-spacing:.04em}
.cookie-ok:focus-visible,.cookie-do a:focus-visible{outline:2px solid #E6C27A;outline-offset:3px;border-radius:2px}

/* the tick and the renewal line on one row under the button (24 October 2026): the tick on the left, the renewal line on the
   right over two short lines; with no tick, the renewal line alone, centred, on one line as before */
.ww-fine{display:flex;align-items:center;justify-content:center;gap:.8rem;max-width:22rem;margin:.45rem auto 0}
.ww-fine[hidden]{display:none}
/* a member's phone: the lines that change for them wait, unseen, until ww.js knows who it is (at most a few seconds) */
.you-wait :is(#top-login,#ww-date,#ww-join,#ww-book,#ww-fine,#ww-band-book,#ww-app-book){visibility:hidden}
.ww-fine .ww-tick{flex:0 1 auto;align-items:center;margin:0;font-size:.76rem}
.ww-fine .ww-tick input{margin:0}
.ww-fine .ww-renews{flex:none;margin:0;padding-left:.8rem;border-left:1px solid rgba(255,248,231,.28);text-align:left;line-height:1.55}
.ww-fine .ww-dot{display:none}
.ww-fine .ww-any{display:block}
.ww-fine:has(.ww-tick[hidden]) .ww-renews{padding-left:0;border-left:0;text-align:center}
.ww-fine:has(.ww-tick[hidden]) .ww-dot,.ww-fine:has(.ww-tick[hidden]) .ww-any{display:inline}
@media (max-width: 899px) and (max-height: 760px){.ww-fine{margin-top:.45rem}}
@media(min-width:900px){.ww-fine{margin-left:0;justify-content:flex-start}}

/* the app's bar along the bottom (24 October 2026), for a member: the member app's five tabs in frosted night glass with a
   thin cream edge; Book lit in gold because this page is Book, the other four as quiet line icons. On a phone it runs edge
   to edge on the very bottom, like an app's; from 600px wide it floats as a rounded bar. The words, the cookie note and the
   helper's button make room for it (and for the sun, who sits in the same place for a visitor). */
.ww-bar{position:fixed;z-index:45;left:0;right:0;bottom:0;display:grid;grid-template-columns:1.35fr repeat(4,1fr);align-items:center;gap:2px;
  padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(255,248,231,.14),rgba(255,248,231,.04)),rgba(11,16,48,.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  border-top:1px solid rgba(255,248,231,.24);box-shadow:0 -10px 30px rgba(4,7,24,.25),inset 0 1px 0 rgba(255,255,255,.12)}
.ww-tab{display:grid;place-items:center;height:48px;margin:0;padding:0;border:0;border-radius:14px;background:none;box-shadow:none;
  color:rgba(255,248,231,.66);font:500 .9rem/1 var(--body);letter-spacing:.08em;text-decoration:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s}
.ww-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.ww-tab:hover,.ww-tab[aria-expanded=true]{color:#FFF8E7;background:rgba(255,248,231,.13)}
.ww-tab:active{transform:none}
.ww-tab:focus-visible{outline:2px solid #E6C27A;outline-offset:-2px}
.ww-tab-book,.ww-tab-book:hover,.ww-tab-book[aria-expanded=true]{color:#F1D79B;background:linear-gradient(180deg,rgba(230,194,122,.22),rgba(230,194,122,.07));box-shadow:inset 0 0 0 1px rgba(230,194,122,.42),0 0 20px rgba(230,194,122,.16)}
.ww-tab-book::after{content:"";position:absolute;left:30%;right:30%;bottom:6px;height:2px;border-radius:2px;background:#E6C27A;box-shadow:0 0 8px rgba(230,194,122,.9)}
@keyframes wwSheet{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ww-bar{background:rgba(11,16,48,.94)}}
/* the assistant at the bottom right of the bar: the sun, a little bigger than the tabs and raised over the bar's edge,
   floating gently (still with less motion). A tap on him closes his chat and mutes him; another opens it again. */
.ww-bar:has(.ww-guide:not([hidden])){grid-template-columns:1.25fr repeat(4,1fr) 1.15fr}
.ww-guide[hidden]{display:none}
/* a visitor: no tabs before someone is in (the owner, 26 October 2026), only the sun, in the same place at the bottom right,
   with nothing behind him and the page tappable around him; a member's phone (data-you="member", ww.js) shows the tabs */
:root:not([data-you=member]) .ww-bar{grid-template-columns:1fr 4.6rem;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
:root:not([data-you=member]) .ww-bar .ww-tab:not(.ww-guide){display:none}
:root:not([data-you=member]) .ww-guide{grid-column:2}
.ww-guide{pointer-events:auto}
.ww-guide,.ww-guide:hover,.ww-guide[aria-expanded=true]{background:none;overflow:visible}
.ww-guide img{display:block;height:60px;width:auto;transform:translateY(-14px);filter:drop-shadow(0 3px 10px rgba(4,7,24,.55))}
@media (prefers-reduced-motion: no-preference){.ww-guide img{animation:wwFloat 4.8s ease-in-out infinite}}
@keyframes wwFloat{0%,100%{transform:translateY(-14px)}50%{transform:translateY(-19px)}}
/* his voice on (the mic button in his chat): a soft gold glow, breathing quicker while he speaks, softly while he connects or thinks */
.ww-guide[data-voice=on] img{filter:drop-shadow(0 3px 10px rgba(4,7,24,.55)) drop-shadow(0 0 14px rgba(230,194,122,.55))}
@media (prefers-reduced-motion: no-preference){
  .ww-guide[data-voice=on][data-phase=speaking] img{animation:wwFloat 4.8s ease-in-out infinite,wwSpeak 1.3s ease-in-out infinite}
  .ww-guide[data-voice=on][data-phase=connecting] img,.ww-guide[data-voice=on][data-phase=thinking] img{animation:wwFloat 4.8s ease-in-out infinite,wwThink 2.2s ease-in-out infinite}
}
@keyframes wwSpeak{0%,100%{filter:drop-shadow(0 3px 10px rgba(4,7,24,.55)) drop-shadow(0 0 10px rgba(230,194,122,.45))}50%{filter:drop-shadow(0 3px 10px rgba(4,7,24,.55)) drop-shadow(0 0 22px rgba(230,194,122,.9))}}
@keyframes wwThink{0%,100%{opacity:1}50%{opacity:.78}}
/* his hello on arrival: a small speech bubble just above him, its tail pointing down at him; "…" (three dots) while he writes it */
.ww-peek{position:fixed;z-index:46;right:12px;bottom:calc(82px + env(safe-area-inset-bottom,0px));max-width:min(13.5rem,calc(100% - 24px));margin:0;padding:.6rem .9rem;
  border-radius:18px;border-bottom-right-radius:6px;font:400 .86rem/1.4 var(--body);text-align:left;white-space:pre-line;color:#FFF8E7;cursor:pointer;
  background:linear-gradient(180deg,rgba(22,29,74,.88),rgba(11,16,48,.95));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(230,194,122,.35);box-shadow:0 10px 26px rgba(4,7,24,.45);-webkit-tap-highlight-color:transparent;animation:wwSheet .35s cubic-bezier(.2,.7,.2,1)}
.ww-peek[hidden]{display:none}
.ww-peek::after{content:"";position:absolute;right:20px;bottom:-6px;width:10px;height:10px;transform:rotate(45deg);background:rgb(12,17,50);
  border-right:1px solid rgba(230,194,122,.35);border-bottom:1px solid rgba(230,194,122,.35)}
.ww-peek:focus-visible{outline:2px solid #E6C27A;outline-offset:2px}
.ww-dots{display:inline-flex;gap:5px;padding:.3rem .1rem}
.ww-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4}
@media (prefers-reduced-motion: no-preference){.ww-dots i{animation:wwDot 1.2s ease-in-out infinite}.ww-dots i:nth-child(2){animation-delay:.18s}.ww-dots i:nth-child(3){animation-delay:.36s}}
@keyframes wwDot{0%,60%,100%{opacity:.4;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){.ww-peek{animation:none}}
/* his chat, opened from him or his bubble: his words as speech bubbles just above him, yours on the other side, one line to type
   into and the mic button. Compact, on the right, low, just above the bar (over the Book button is fine: the owner, 25 October). */
.ww-chat{position:fixed;z-index:46;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:min(16rem,calc(100% - 24px));display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem}
/* (one column no wider than the chat: the line to type into would otherwise widen it past the screen's edge on a narrow phone) */
.ww-chat-say input{width:100%}
.ww-chat[hidden]{display:none}
.ww-chat-lines{display:grid;gap:.4rem;max-height:30svh;overflow:auto}
.ww-line{margin:0;max-width:92%;padding:.65rem .85rem;border-radius:18px;font-size:.86rem;line-height:1.45;white-space:pre-line;animation:wwSheet .35s cubic-bezier(.2,.7,.2,1)}
.ww-line.her{justify-self:end;color:#FFF8E7;border-bottom-right-radius:5px;background:linear-gradient(180deg,rgba(22,29,74,.74),rgba(11,16,48,.86));
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(230,194,122,.35);box-shadow:0 10px 26px rgba(4,7,24,.4)}
.ww-line.you{justify-self:start;color:#0B1030;border-bottom-left-radius:5px;background:rgba(255,248,231,.9);box-shadow:0 8px 20px rgba(4,7,24,.25)}
.ww-chat-say{margin:0;display:flex;gap:.4rem}
.ww-chat-say input{flex:1;min-width:0;box-sizing:border-box;padding:.7rem 1rem;border-radius:999px;border:1px solid rgba(255,248,231,.3);background:rgba(11,16,48,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#FFF8E7;font:400 16px var(--body)}
.ww-chat-say input::placeholder{color:rgba(255,248,231,.5)}
.ww-chat-say input:focus{outline:none;border-color:rgba(230,194,122,.7)}
.ww-mic{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border-radius:50%;border:1px solid rgba(255,248,231,.3);background:rgba(11,16,48,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#FFF8E7;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ww-mic[hidden]{display:none}
.ww-mic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ww-mic:focus-visible{outline:2px solid #E6C27A;outline-offset:2px}
.ww-mic[aria-pressed=true]{background:#E6C27A;border-color:#E6C27A;color:#0B1030;box-shadow:0 0 16px rgba(230,194,122,.6)}
@media (prefers-reduced-motion: reduce){.ww-line{animation:none}}
@media(min-width:600px){.ww-chat{right:max(12px,calc(50% - 13rem));bottom:96px}.ww-peek{right:max(12px,calc(50% - 13rem));bottom:94px}}
@media(min-width:600px){
  .ww-bar{left:50%;right:auto;bottom:16px;width:26rem;transform:translateX(-50%);padding:6px;border:1px solid rgba(255,248,231,.26);border-radius:22px;
    box-shadow:0 14px 34px rgba(4,7,24,.45),inset 0 1px 0 rgba(255,255,255,.22)}
}
/* room for the bar: the hero's words, the footer, the cookie note and the helper's button sit above it */
@media(max-width:599px){#hero.ww .ww-copy{padding-bottom:calc(1.6rem + 62px + env(safe-area-inset-bottom,0px))}}
@media(max-width:599px) and (max-height:760px){#hero.ww .ww-copy{padding-bottom:calc(1.1rem + 62px + env(safe-area-inset-bottom,0px))}}
@media(min-width:600px) and (max-width:899px){#hero.ww .ww-copy{padding-bottom:calc(1.2rem + 76px)}}
@media(min-width:900px){#hero.ww{padding-top:7rem;padding-bottom:calc(1rem + 84px)}}
footer{padding-bottom:calc(3rem + 76px + env(safe-area-inset-bottom,0px))}
.cookie-dock{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
@media(min-width:600px){.cookie-dock{bottom:calc(1.25rem + 76px + env(safe-area-inset-bottom,0px))}}
body .hb-btn.hb-corner{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
@media(min-width:600px){body .hb-btn.hb-corner{bottom:92px}}