/* Zenovia · member app. Same tokens, fonts and icons as the site and the approved phone mockup. */
:root{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5'/%3E%3C/svg%3E");--espresso:#2B211A;--mocha:#4A3728;--brun:#755942;--taupe:#9D836F;--sand:#D3BFA6;--beige:#C7AF94;--creme:#F1E8DB;--lin:#FAF5EC;--flamme:#C6A15B;--flamme-hover:#A98546;--hair:rgba(74,55,40,.14);--hair-gold:rgba(198,161,91,.55);--warn:#8a3b2f;
  --serif:"Cormorant Infant","Cormorant Garamond",Georgia,serif;--sans:"Manrope","Segoe UI",system-ui,sans-serif;--tabs:72px;--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--gold-ink:#7F602C;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--lin)}
body{background:var(--lin);color:var(--mocha);font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100dvh}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input{font:inherit;color:inherit}
img{display:block}
::selection{background:rgba(198,161,91,.32);color:var(--espresso)}
input,textarea{caret-color:var(--flamme-hover)}
:focus-visible{outline:2px solid var(--flamme);outline-offset:3px}
input:focus-visible{outline:none}

/* frame: full screen on a phone, a centred phone-width column on a computer */
.app{position:relative;max-width:480px;margin:0 auto;min-height:100dvh;background:var(--creme);padding-bottom:calc(var(--tabs) + var(--safe-b))}
.app.no-tabs{padding-bottom:var(--safe-b)}
@media (min-width:520px){.app{box-shadow:0 0 0 1px var(--hair),0 30px 80px -40px rgba(43,33,26,.35)}}
.boot{min-height:100dvh;display:grid;place-items:center}.boot img{width:150px;opacity:.85;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}
.view{min-height:calc(100dvh - var(--tabs));transition:opacity .25s var(--ease)}
.view.loading{opacity:.55;pointer-events:none;transition-delay:.15s}
.pad{padding:calc(18px + var(--safe-t)) 22px 28px;display:flex;flex-direction:column}

/* tab bar */
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:calc(var(--tabs) + var(--safe-b));padding:9px 8px calc(10px + var(--safe-b));border-top:1px solid var(--hair);background:rgba(241,232,219,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;grid-template-columns:repeat(var(--n,4),1fr);text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--taupe);z-index:20}
.no-tabs .tabs{display:none}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:color .3s var(--ease)}
.tabs a svg{transition:transform .35s var(--ease),stroke .3s}
.tabs a:active svg{transform:scale(.88)}
.tabs .on svg{transform:translateY(-1px)}
.tab-ind{position:absolute;top:-1px;left:8px;width:calc((100% - 16px) / var(--n,4));height:2px;display:flex;justify-content:center;transform:translateX(calc(var(--t,0) * 100%));transition:transform .5s var(--ease);pointer-events:none}
.tab-ind::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--flamme)}
.tabs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tabs .on{color:var(--espresso)}.tabs .on svg{stroke:var(--flamme-hover)}

/* type */
.eyebrow{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--flamme-hover)}
h2{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.05;color:var(--espresso);margin:6px 0 4px}
h2 em,h3 em{font-style:italic;font-weight:300}
h3{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--espresso);line-height:1.15}
.muted{color:var(--taupe);font-size:13.5px}
.small{font-size:12px}
.empty{font-family:var(--serif);font-size:19px;color:var(--taupe);text-align:center;padding:34px 0 18px;font-style:italic}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 24px;border-radius:999px;background:var(--flamme);color:var(--espresso);font-weight:600;font-size:13.5px;letter-spacing:.06em;box-shadow:0 10px 26px rgba(198,161,91,.28);transition:transform .15s,background .2s;text-align:center}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:active{transform:scale(.97)}
.btn.busy:disabled{opacity:1}
.btn.busy::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(250,245,236,.45) 50%,transparent 70%);background-size:220% 100%;animation:sheen 1.3s var(--ease-io) infinite}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.bloom{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(250,245,236,.7),rgba(250,245,236,.25) 55%,transparent);animation:bloom 1.1s var(--ease) forwards}
@keyframes bloom{from{transform:scale(1);opacity:1}to{transform:scale(60);opacity:0}}
.btn:disabled{opacity:.5;box-shadow:none;cursor:default}
.btn.dark{background:var(--mocha);color:var(--creme);box-shadow:none}
.btn.line{background:transparent;color:var(--mocha);box-shadow:none;border:1px solid var(--hair);transition:transform .15s,background .2s,border-color .2s}
.btn.line:active{background:var(--lin);border-color:var(--hair-gold)}
.btn.w{width:100%}
.btn.sm{padding:10px 16px;font-size:12px}
.tlink{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--mocha);display:inline-flex;align-items:center;gap:8px;align-self:center;margin-top:16px}
.tlink::after{content:"";width:22px;height:1px;background:var(--flamme)}
.tlink.small{font-size:11.5px;margin-top:18px}
.back{width:38px;height:38px;border-radius:50%;background:rgba(241,232,219,.9);border:1px solid var(--hair);display:grid;place-items:center;color:var(--espresso);margin-bottom:10px;align-self:flex-start;transition:transform .2s var(--ease),background .2s}
.back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.back:active{transform:scale(.92);background:var(--lin)}
.pill{display:inline-block;padding:5px 10px;border-radius:999px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;background:var(--flamme);color:var(--espresso);white-space:nowrap}
.pill.soft{background:var(--lin);color:var(--brun);border:1px solid var(--hair)}
.pill.wait{background:var(--sand);color:var(--espresso)}
.pill.dark{background:var(--mocha);color:var(--creme)}
.pill.big{padding:8px 14px;font-size:11.5px;align-self:center}
.card{background:var(--lin);border:1px solid var(--hair);border-radius:12px;padding:18px}
.row2{display:flex;justify-content:space-between;align-items:center;gap:12px}
.note{margin-top:16px;font-size:12.5px;color:var(--taupe);line-height:1.5;padding:12px 14px;background:var(--lin);border-radius:10px}
.note.warn{color:var(--warn);background:#f6e9e2}
.sico{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair-gold);background:var(--lin);display:grid;place-items:center;flex:none}
.sico img{width:30px;height:30px}

/* forms */
.form{width:100%;display:flex;flex-direction:column;text-align:left;margin-top:8px}
.form .btn{margin-top:22px}
.fld{display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--hair);padding:14px 0 8px}
.fld span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.fld input{border:0;background:transparent;font-family:var(--serif);font-size:20px;color:var(--espresso);padding:2px 0;outline:none;width:100%;border-radius:0}
.fld input::placeholder{color:var(--sand)}
.fld input:disabled{color:var(--taupe)}
.fld:focus-within{border-bottom-color:var(--flamme)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--brun);margin-top:16px;line-height:1.45}
.chk input{width:18px;height:18px;accent-color:var(--flamme-hover);flex:none;margin-top:1px}

/* auth */
.auth{min-height:100dvh;padding:calc(30px + var(--safe-t)) 26px calc(26px + var(--safe-b));display:flex;flex-direction:column;align-items:center;text-align:center}
.auth .back{align-self:flex-start}
.auth .logo{width:160px;margin:10px 0 14px}
.auth h2{margin-top:4px}
.auth .foot{margin-top:auto;padding-top:28px;font-size:13.5px;color:var(--brun)}
.auth .foot b{font-weight:600;color:var(--espresso);border-bottom:1px solid var(--flamme)}
.auth .check{margin-top:30px}

/* home */
.hero-card{position:relative;border-radius:14px;overflow:hidden;min-height:236px;margin-top:16px;color:var(--creme);display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.12);z-index:0;transition:transform .6s var(--ease)}
.hero-card:active img{transform:scale(1.03)}
.hero-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(43,33,26,.1) 0%,rgba(43,33,26,.62) 42%,rgba(43,33,26,.92) 100%)}
.hero-card>*{position:relative;z-index:2}
.hero-card .eyebrow{color:var(--sand)}
.hero-card h3{color:var(--creme);font-size:27px;margin:4px 0 2px}
.hero-card p{font-size:13.5px;color:var(--sand)}
.hero-card .btn{align-self:flex-start;margin-top:12px}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.stat .card{padding:14px 16px}
.stat .card:only-child{grid-column:1/-1}
.stat .card b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;color:var(--espresso);line-height:1}
.stat .card small{display:block;font-size:12px;color:var(--taupe);margin-top:6px;line-height:1.35}
.stat .eyebrow{margin-bottom:8px}
.ann{display:block;position:relative;width:100%;margin-top:14px;padding:14px 16px 14px 32px;border:1px solid var(--hair-gold);background:var(--lin);border-radius:12px;text-align:left}
.ann::before{content:"";position:absolute;left:15px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--flamme);box-shadow:0 0 0 4px var(--flamme-muted,rgba(198,161,91,.22))}
.ann b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;color:var(--espresso)}
.ann span{font-size:13px;color:var(--brun)}
.ann.act{border-color:rgba(74,55,40,.22);background:var(--sand);transition:transform .2s var(--ease)}.ann.act:active{transform:scale(.985)}.ann.act::before{background:var(--mocha);box-shadow:0 0 0 4px rgba(74,55,40,.12);animation:ember 2.6s ease-in-out infinite}
.ann.warn{border-color:rgba(138,59,47,.28);background:#f6e9e2}.ann.warn::before{background:var(--warn);box-shadow:0 0 0 4px rgba(138,59,47,.12)}
@keyframes ember{50%{box-shadow:0 0 0 7px rgba(74,55,40,.04)}}
.install{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border:1px dashed var(--hair-gold);border-radius:12px;position:relative}
.install img{width:42px;height:42px;border-radius:10px}
.install b{display:block;font-weight:600;font-size:14px;color:var(--espresso)}
.install small{display:block;font-size:12.5px;color:var(--taupe);line-height:1.35}
.install>div{flex:1}
.install .x{color:var(--taupe);padding:6px;margin-right:-6px;display:grid;place-items:center}.install .x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.addr{text-align:center;margin-top:22px;font-size:12px}

/* schedule */
.days{display:flex;gap:4px;margin:14px -22px 4px;padding:0 18px 6px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:18px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.days button{flex:0 0 calc((100% - 24px) / 7);min-width:44px;padding:8px 0 9px;border-radius:12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--taupe);text-align:center;scroll-snap-align:start;position:relative;transition:color .3s var(--ease)}
.days button b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;color:var(--mocha);letter-spacing:0;margin-top:2px}
.days button i{position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--flamme)}
.days .on{color:var(--sand)}.days .on b{color:var(--creme)}
.days .on::before,.seg .on::before,.chips .on::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--mocha)}
.days button b{transition:color .3s var(--ease)}
.days .on i{background:var(--flamme)}
.days,.chips,.seg{isolation:isolate}
/* while the pill glides in, the chosen label inks in with it */
.on.arrive{animation:.42s var(--ease) both on-ink}.days .on.arrive b{animation:.42s var(--ease) both on-ink-b}
@keyframes on-ink{from{color:var(--taupe)}}@keyframes on-ink-b{from{color:var(--mocha)}}
.chips{display:flex;gap:6px;overflow-x:auto;margin:6px -22px 2px;padding:0 22px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;padding:7px 13px;border-radius:999px;border:1px solid var(--hair);font-size:12px;color:var(--brun);white-space:nowrap;position:relative;transition:color .3s var(--ease),border-color .3s}
.chips .on{border-color:var(--espresso);color:var(--creme)}.chips .on::before{background:var(--espresso);inset:-1px}
.slot{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair)}
.slot .t{font-family:var(--serif);font-size:19px;color:var(--mocha);font-weight:300;width:58px;line-height:1;white-space:nowrap}
.slot .c{display:flex;align-items:center;gap:10px;min-width:0}
.slot .c>div{min-width:0}
.slot .c span{display:block;font-family:var(--serif);font-size:18px;color:var(--espresso);line-height:1.1}
.slot .c small{display:block;font-size:12px;color:var(--taupe);margin-top:3px;line-height:1.35}
.slot .r{font-size:12px;color:var(--brun);text-align:right;white-space:nowrap}
.slot.mine{background:var(--lin);margin:0 -12px;padding:14px 12px;border-radius:10px;border-bottom-color:transparent}
.slot.mine .sico{background:var(--flamme);border-color:var(--flamme)}
.slot.past{opacity:.5}
.slot{transition:background .25s var(--ease)}
.slot:active{background:rgba(250,245,236,.8)}
.slot .sico{transition:transform .35s var(--ease)}
.slot:active .sico{transform:scale(.92)}

/* class sheet */
.fiche{display:flex;flex-direction:column;min-height:100dvh}
.fiche .img{position:relative;height:280px;flex:none}
.fiche .img img{width:100%;height:100%;object-fit:cover;filter:sepia(.12)}
.fiche .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,33,26,.35),rgba(43,33,26,0) 40%,rgba(241,232,219,0) 70%,var(--creme) 100%)}
.fiche .back{position:absolute;left:18px;top:calc(14px + var(--safe-t));z-index:1;margin:0}
.fiche .txt{padding:0 24px calc(24px + var(--safe-b));flex:1;display:flex;flex-direction:column}
.fiche .subt{font-family:var(--serif);font-size:19px;color:var(--brun);font-style:italic}
.fiche .meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:16px 0}
.fiche .meta div{border-top:1px solid var(--hair);padding-top:10px}
.fiche .meta small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--taupe);margin-bottom:3px}
.fiche .meta span{font-family:var(--serif);font-size:17px;color:var(--espresso)}
.fiche .desc{font-size:14px;color:var(--brun);line-height:1.6;margin-bottom:14px}
.pay{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--lin);border-radius:10px;font-size:13px;color:var(--brun)}
.pay i{width:8px;height:8px;border-radius:50%;background:var(--flamme);flex:none}
.pay i.off{background:var(--sand)}
.fiche .cta{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:center}
.fiche .cta small{font-size:12px;color:var(--taupe)}

/* bottom sheet */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.overlay .scrim{position:absolute;inset:0;background:rgba(43,33,26,.38);opacity:0;transition:opacity .26s var(--ease-io)}
.overlay.open .scrim{transition-duration:.45s}
.overlay.drag .scrim{opacity:calc(1 - var(--pull,0));transition:none}
.overlay .sheet{position:relative;width:100%;max-width:480px;max-height:92dvh;overflow:auto;background:var(--creme);border-radius:30px 30px 0 0;padding:16px 26px calc(30px + var(--safe-b));text-align:center;box-shadow:0 -30px 60px rgba(43,33,26,.28);transform:translateY(100%);transition:transform .26s var(--ease-io);display:flex;flex-direction:column}
.overlay.open .sheet{transition:transform .5s var(--ease)}
.overlay.drag .sheet{transition:none}
.overlay.open .scrim{opacity:1}.overlay.open .sheet{transform:none}
.sheet .grip{width:100%;height:26px;margin:-16px 0 12px;flex:none;display:grid;place-items:center;cursor:grab;touch-action:none}
.sheet .grip::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--sand);transition:background .2s,transform .3s var(--ease)}
.overlay.drag .grip::before{background:var(--taupe);transform:scaleX(1.2)}
.sheet .btn{margin-top:10px}
.sheet .fld,.sheet .chk{text-align:left}
.check{width:66px;height:66px;border-radius:50%;background:var(--flamme);margin:0 auto 16px;display:grid;place-items:center;flex:none}
.check svg{width:30px;height:30px;stroke:var(--espresso);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st{font-size:32px}
.sp{color:var(--brun);font-size:14px;margin:8px 0 14px;line-height:1.6}
.waiver{text-align:left;font-size:14px;line-height:1.6;color:var(--brun);background:var(--lin);border-radius:10px;padding:14px 16px;margin:14px 0 4px;max-height:34dvh;overflow:auto}

/* bookings */
.seg{display:flex;gap:6px;background:var(--lin);border-radius:999px;padding:4px;margin:14px 0 8px}
.seg button{flex:1;text-align:center;padding:9px 6px;border-radius:999px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--taupe);position:relative;transition:color .3s var(--ease)}
.seg .on{color:var(--creme)}
.res{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--hair)}
.res .d{text-align:center;border-right:1px solid var(--hair-gold);padding-right:10px}
.res .d small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.res .d b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;color:var(--espresso);line-height:1;margin-top:2px}
.res h3{font-size:19px}
.res .muted{margin-top:2px}
.res .act{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.res .cancel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--taupe);border-bottom:1px solid var(--hair);padding:4px 0}
.res.past h3{color:var(--brun)}
.pad>.btn.dark{margin-top:4px}

/* account */
.who{display:flex;align-items:center;gap:14px;margin-top:2px}
.who .av{width:54px;height:54px;border-radius:50%;background:var(--mocha);color:var(--creme);display:grid;place-items:center;font-family:var(--serif);font-size:22px;letter-spacing:.04em;flex:none}
.who h3{font-size:23px}
.who .muted{word-break:break-word}
.mcard{margin-top:16px;border-radius:14px;padding:16px 20px;background:linear-gradient(135deg,var(--mocha),var(--espresso));color:var(--creme);position:relative;overflow:hidden}
.mcard::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;border:1px solid rgba(198,161,91,.35)}
.mcard .eyebrow{color:var(--flamme)}
.mcard h3{color:var(--creme);font-size:24px;margin:4px 0 2px}
.mcard p{font-size:13px;color:var(--sand)}
.mcard .row2{margin-top:12px;font-size:12.5px;color:var(--sand)}
.mcard .row2 b{font-weight:600;color:var(--creme)}
.pack{margin-top:10px;padding:14px 18px;display:block}
.pack .row2 b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--espresso)}
.pack .bar{height:4px;border-radius:2px;background:var(--sand);margin:10px 0 6px;overflow:hidden}
.pack .bar i{display:block;height:100%;background:var(--flamme);transform-origin:left;animation:fill 1.1s .2s var(--ease) both}
@keyframes fill{from{transform:scaleX(0)}}
.pack.none b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso)}
.menu{margin-top:12px;display:flex;flex-direction:column}
.menu>a,.menu>button{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--hair);font-size:15px;color:var(--espresso);width:100%}
.menu small{font-size:12.5px;color:var(--taupe);margin-left:auto}
.menu>a::after,.menu>button::after{content:"";width:16px;height:16px;flex:none;background:var(--taupe);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:transform .3s var(--ease)}
.menu>a,.menu>button{transition:background .2s}
.menu>a:active,.menu>button:active{background:linear-gradient(90deg,transparent,rgba(250,245,236,.9) 20%,rgba(250,245,236,.9) 80%,transparent)}
.menu>a:active::after,.menu>button:active::after{transform:translateX(3px)}
.menu .out{color:var(--taupe);border:0}
.menu .out::after{content:""}

/* plans */
.plan{width:100%;border:1px solid var(--hair);background:var(--lin);border-radius:12px;padding:16px 18px;margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.plan h3{font-size:20px}
.plan .muted{grid-column:1}
.plan .price{grid-row:1/3;grid-column:2;font-family:var(--serif);font-size:28px;font-weight:300;color:var(--espresso);line-height:1;text-align:right;white-space:nowrap}
.plan .price small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);margin-top:4px}
.plan{transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .2s var(--ease)}
.plan:not(.used):active{transform:scale(.985)}
.plan.on{border-color:var(--flamme);box-shadow:0 0 0 1px var(--flamme) inset,0 12px 28px -18px rgba(169,133,70,.6)}
.sq{padding:14px 0 6px;text-align:center;font-size:12px;color:var(--taupe)}

/* receipts, studio, notifications */
.rcpt{margin-top:10px}.rcpt .row2 b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--espresso)}.rcpt .muted{margin-top:4px}
.info{margin-top:10px}.info small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--taupe);margin-bottom:4px}
.info p{font-family:var(--serif);font-size:18px;color:var(--espresso);line-height:1.35}.info .tlink{margin-top:10px;align-self:flex-start}
.info a{border-bottom:1px solid var(--hair-gold)}.info .tlink{border:0}
.toggle{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--hair);margin-top:10px;cursor:pointer}
.toggle>div{flex:1}.toggle b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso)}.toggle small{display:block;font-size:13px;color:var(--taupe);margin-top:2px}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle i{width:46px;height:28px;border-radius:999px;background:var(--sand);position:relative;flex:none;transition:background .2s}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--lin);transition:transform .2s;box-shadow:0 1px 3px rgba(43,33,26,.25)}
.toggle input:checked+i{background:var(--flamme)}.toggle input:checked+i::after{transform:translateX(18px)}

/* toasts */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabs) + var(--safe-b) + 14px);z-index:60;display:flex;flex-direction:column;gap:8px;width:calc(100% - 40px);max-width:440px;pointer-events:none}
.toast{background:var(--espresso);color:var(--creme);padding:13px 18px;border-radius:14px;font-size:14px;box-shadow:0 14px 30px rgba(43,33,26,.3);animation:tin .5s var(--ease);transition:opacity .3s var(--ease-io),transform .3s var(--ease-io)}
.toast.bad{background:var(--warn)}
.toast.out{opacity:0;transform:translateY(8px)}
@keyframes tin{from{opacity:0;transform:translateY(14px) scale(.96);filter:blur(4px)}}

/* documents and signature */
.doc{white-space:pre-line;text-align:left;font-size:13.5px;line-height:1.6;color:var(--brun);background:var(--lin);border-radius:10px;padding:14px 16px;margin:12px 0 4px;max-height:40dvh;overflow:auto;-webkit-overflow-scrolling:touch}
.sigslot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:110px;margin-top:14px;border:1px dashed var(--hair-gold);border-radius:12px;background:var(--lin);color:var(--taupe);font-size:13px;text-align:center;padding:10px}
.sigslot.on{border-style:solid;border-color:var(--hair)}
.sigslot img{max-height:120px;max-width:100%;object-fit:contain}
.sigslot small{font-size:12px;color:var(--taupe)}
.sigslot em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--flamme-hover);margin-top:2px}
.padwrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(43,33,26,.55);opacity:0;transition:opacity .22s}
.padwrap.open{opacity:1}
.padbox{width:min(100%,400px);background:var(--creme);border-radius:22px;padding:20px 20px 16px;display:flex;flex-direction:column;text-align:center;box-shadow:0 30px 60px rgba(43,33,26,.35);transform:scale(.96);transition:transform .22s}
.padwrap.open .padbox{transform:none}
.padbox h3{margin:4px 0 12px;font-size:24px}
.sigpad{position:relative;width:100%;aspect-ratio:1/1;background:#fffdf9;border:1px solid var(--hair);border-radius:14px;overflow:hidden}
.sigpad canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:2}
.sigpad .hint{position:absolute;left:0;right:0;top:44%;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--sand);pointer-events:none;transition:opacity .2s}
.padwrap.inked .sigpad .hint{opacity:0}
.sigpad .base{position:absolute;left:12%;right:12%;bottom:24%;border-bottom:1px solid var(--sand);pointer-events:none}
.sigpad .base::before{content:"×";position:absolute;left:-16px;bottom:-2px;font-size:16px;color:var(--sand);font-style:normal}
.padacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.padacts .btn{padding:13px 10px}
.docv{text-align:left;border-bottom:1px solid var(--hair);padding:12px 0}
.docv summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:10px;cursor:pointer}
.docv summary::-webkit-details-marker{display:none}
.docv summary b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso)}
.docv summary small{font-size:12.5px;color:var(--taupe)}
.docv summary::after{content:"";width:16px;height:16px;flex:none;align-self:center;background:var(--taupe);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:transform .3s var(--ease)}
.docv[open] summary::after{transform:rotate(90deg)}

.sigslot{overflow:hidden;height:auto;min-height:120px}
.sigslot img{display:block;height:84px;width:auto;max-width:100%;max-height:none;object-fit:contain;flex:none}
.sigslot small{flex:none}

/* plans: used once-per-client offers, promo code */
.plan.used{opacity:.5;cursor:default;background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(74,55,40,.045) 9px 10px)}
.plan.used h3,.plan.used .price{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(74,55,40,.55)}
.plan .price s{display:block;font-size:16px;color:var(--taupe);text-decoration-thickness:1px}
.promo-in{display:flex;gap:10px;align-items:center;margin-top:16px;padding:12px 14px;border:1px dashed var(--hair-gold);border-radius:12px}
.promo-in input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--espresso);outline:none;padding:4px 0}
.promo-in input::placeholder{letter-spacing:.04em;text-transform:none;color:var(--taupe)}
.promo-in .tlink{margin:0}
.promo-on{flex:1;font-size:14px;color:var(--brun)}.promo-on b{letter-spacing:.1em;color:var(--espresso);margin-right:4px}
.promo-err{font-size:13.5px;color:var(--warn);margin-top:8px}

/* cards on file */
.paycard{margin-top:12px;position:relative}
.paycard b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso);letter-spacing:.02em}
.paycard.def{border-color:var(--hair-gold)}
.paycard .tlink{margin:0}
.paycard .rm{margin-top:10px;color:var(--taupe)}
.sq-card{min-height:96px;margin:16px 0 4px;text-align:left}
.mcard .renew{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(198,161,91,.3);cursor:pointer;position:relative;z-index:1}
.mcard .renew span{flex:1;font-size:13.5px;color:var(--creme)}
.mcard .renew small{display:block;font-size:12px;color:var(--sand);margin-top:2px}
.mcard .renew input{position:absolute;opacity:0;pointer-events:none}
.mcard .renew i{width:42px;height:24px;border-radius:999px;background:rgba(241,232,219,.25);position:relative;flex:none;transition:background .2s}
.mcard .renew i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--creme);transition:transform .2s}
.mcard .renew input:checked+i{background:var(--flamme)}.mcard .renew input:checked+i::after{transform:translateX(18px)}

/* lieux */
.slot .c em.loc{display:inline-block;margin-top:4px;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-ink, #7F602C)}
.where{display:flex;flex-direction:column;gap:3px;padding:12px 14px;margin:0 0 14px;border:1px solid var(--hair-gold);border-radius:10px;background:var(--lin);font-size:13.5px;color:var(--brun)}
.where b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--espresso)}
.where a{color:var(--mocha);text-decoration:underline;text-decoration-color:var(--hair-gold);text-underline-offset:3px}

/* prof photo */
.profphoto{display:flex;gap:16px;align-items:center;margin:14px 0 6px;padding:16px;border:1px solid var(--hair-gold);border-radius:14px;background:var(--lin)}
.profphoto .ph{width:84px;height:84px;border-radius:50%;overflow:hidden;flex:none;background:var(--mocha);display:grid;place-items:center;color:var(--creme);font-family:var(--serif);font-size:30px;box-shadow:0 0 0 3px var(--creme),0 0 0 4px var(--hair-gold)}
.profphoto .ph img{width:100%;height:100%;object-fit:cover}
.profphoto b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso)}
.profphoto .muted{font-size:13px;margin:2px 0 10px}
.profphoto .acts{display:flex;gap:14px;align-items:center}
.profphoto .acts .tlink{margin:0}
.profphoto label.btn{cursor:pointer}
.profphoto.busy{opacity:.6;pointer-events:none}
.fiche .meta .prof{display:inline-flex;align-items:center;gap:10px}
.fiche .meta .prof .pav{width:42px;height:42px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--mocha);color:#E9CF98;font-family:var(--serif);font-style:normal;font-size:19px;box-shadow:0 0 0 2px var(--creme),0 0 0 3px var(--hair-gold)}
.fiche .meta .prof .pav img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.profphoto label.btn{white-space:nowrap;padding:11px 16px}
.profphoto .acts{flex-wrap:wrap;row-gap:8px}

/* ================================================================== motion
   Thesis: la chaleur. Navigation moves through space (deeper screens push in from the right, back slides them away),
   the class you tap grows into its sheet, selectors glide, and booking a place is the one authored moment:
   warmth spreads from the finger, then a gold seal draws its check. Everything eases out; nothing bounces. */

/* page transitions (View Transitions API) */
.tabs{view-transition-name:tabs}
.toasts{view-transition-name:toasts}
::view-transition-group(*){animation-duration:.46s;animation-timing-function:var(--ease)}
::view-transition-old(root),::view-transition-new(root){animation-timing-function:var(--ease)}
html[data-nav=fwd]::view-transition-old(root){animation:.46s var(--ease) both vt-recede}
html[data-nav=fwd]::view-transition-new(root){animation:.46s var(--ease) both vt-push;box-shadow:-20px 0 50px rgba(43,33,26,.16)}
html[data-nav=back]::view-transition-old(root){animation:.4s var(--ease) both vt-pop;z-index:2;box-shadow:-20px 0 50px rgba(43,33,26,.16)}
html[data-nav=back]::view-transition-new(root){animation:.4s var(--ease) both vt-return}
html[data-nav=fade]::view-transition-old(root){animation:.16s var(--ease-io) both vt-fade-out}
html[data-nav=fade]::view-transition-new(root){animation:.34s var(--ease) both vt-fade-in}
@keyframes vt-push{from{transform:translateX(100%)}}
@keyframes vt-recede{to{transform:translateX(-24%);filter:brightness(.94)}}
@keyframes vt-pop{to{transform:translateX(100%)}}
@keyframes vt-return{from{transform:translateX(-24%);filter:brightness(.94)}}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0;transform:translateY(8px)}}
::view-transition-old(k-img),::view-transition-new(k-img){height:100%;object-fit:cover;overflow:hidden}
::view-transition-group(k-img){overflow:hidden;border-radius:14px}
/* without View Transitions: the new screen still arrives from the right direction */
.view.enter-fwd{animation:.42s var(--ease) both in-fwd}
.view.enter-back{animation:.38s var(--ease) both in-back}
.view.enter-fade{animation:.32s var(--ease) both vt-fade-in}
@keyframes in-fwd{from{opacity:0;transform:translateX(32px)}}
@keyframes in-back{from{opacity:0;transform:translateX(-24px)}}

/* a selector changed: the list underneath arrives again, one row after another */
.view.swap .slots>*,.view.swap .res,.view.swap .plan,.view.swap .pad>.empty{animation:.5s var(--ease) both row-in}
.view.swap .slots>:nth-child(2),.view.swap .res:nth-of-type(2),.view.swap .plan:nth-of-type(2){animation-delay:.04s}
.view.swap .slots>:nth-child(3),.view.swap .res:nth-of-type(3),.view.swap .plan:nth-of-type(3){animation-delay:.08s}
.view.swap .slots>:nth-child(4),.view.swap .res:nth-of-type(4),.view.swap .plan:nth-of-type(4){animation-delay:.12s}
.view.swap .slots>:nth-child(5),.view.swap .res:nth-of-type(5),.view.swap .plan:nth-of-type(5){animation-delay:.16s}
.view.swap .slots>:nth-child(n+6),.view.swap .res:nth-of-type(n+6),.view.swap .plan:nth-of-type(n+6){animation-delay:.2s}
@keyframes row-in{from{opacity:0;transform:translateY(10px)}}

/* the authored moment: a place is booked */
.done{position:relative;width:66px;height:66px;margin:4px auto 18px;flex:none}
.done .check{position:relative;z-index:1;margin:0;animation:seal .7s var(--ease) both}
.done::before,.done::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(198,161,91,.55),rgba(198,161,91,.18) 60%,transparent);animation:heat 1.8s .12s var(--ease) both}
.done::after{animation-delay:.42s;animation-duration:2.1s}
.check svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .55s .3s var(--ease-io) forwards}
@keyframes seal{from{transform:scale(.4);opacity:0;box-shadow:0 0 0 0 rgba(198,161,91,.5)}60%{opacity:1}to{box-shadow:0 14px 34px -12px rgba(169,133,70,.75)}}
@keyframes heat{from{transform:scale(.6);opacity:0}25%{opacity:1}to{transform:scale(3.4);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
.sheet .done~.st{animation:.6s .22s var(--ease) both rise}
.sheet .done~.sp{animation:.6s .3s var(--ease) both rise}
.sheet .done~.btn,.sheet .done~.tlink{animation:.6s .38s var(--ease) both rise}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

/* sign-in: warm light breathes behind the lotus, like the candle on the ledge */
.auth{position:relative;isolation:isolate}
.auth:has(.logo)::before{content:"";position:absolute;z-index:-1;left:50%;top:calc(var(--safe-t) - 40px);width:380px;height:330px;margin-left:-190px;border-radius:50%;background:radial-gradient(closest-side,rgba(198,161,91,.26),rgba(211,191,166,.18) 55%,transparent);animation:glow 7s ease-in-out infinite;pointer-events:none}
@keyframes glow{50%{transform:scale(1.07);opacity:.7}}
.auth .logo{animation:.9s var(--ease) both lotus}
@keyframes lotus{from{opacity:0;transform:translateY(10px) scale(.96)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.01s!important}
  .view.enter-fwd,.view.enter-back{animation:.2s ease both vt-fade-out reverse}
  .view.swap .slots>*,.view.swap .res,.view.swap .plan{animation:.2s ease both fade-only}
  .auth:has(.logo)::before,.ann.act::before,.boot img{animation:none}
  .done::before,.done::after{animation:none;opacity:0}
  .done .check{animation:.25s ease both fade-only}
  .check svg path{animation:none;stroke-dashoffset:0}
  .sheet .done~*{animation:.25s ease both fade-only}
  .pack .bar i{animation:none}
  .bloom,.btn.busy::after{display:none}
  .tab-ind,.overlay .sheet,.toast{transition-duration:.15s}
  @keyframes fade-only{from{opacity:0}}
}
.tlink.del{color:var(--taupe);margin:22px auto 4px}.tlink.del::after{background:var(--sand)}
.legal{margin-top:14px;font-size:12.5px;color:var(--taupe);text-align:center;line-height:1.5}.legal a{color:var(--mocha);text-decoration:underline;text-decoration-color:var(--hair-gold);text-underline-offset:3px}

/* checkout */
.bill-what{margin:2px 0 12px}
.bill{display:flex;flex-direction:column;gap:0;text-align:left;margin:4px 0 16px;border-top:1px solid var(--hair)}
.bill>div{display:flex;justify-content:space-between;align-items:baseline;padding:9px 2px;border-bottom:1px solid var(--hair);font-size:14px;color:var(--brun)}
.bill dd{font-variant-numeric:normal;color:var(--espresso)}
.bill .disc dd,.bill .disc dt{color:var(--gold-ink)}
.bill .tot{border-bottom:0;padding-top:12px}
.bill .tot dt{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.bill .tot dd{font-family:var(--serif);font-size:30px;line-height:1;color:var(--espresso)}
.paywith{display:flex;flex-direction:column;gap:8px;text-align:left}
.pw{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--hair);border-radius:12px;background:var(--lin);cursor:pointer;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.pw input{width:18px;height:18px;accent-color:var(--flamme-hover);flex:none}
.pw b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;color:var(--espresso);line-height:1.15}
.pw small{display:block;font-size:12.5px;color:var(--taupe)}
.pw:has(input:checked){border-color:var(--flamme);box-shadow:0 0 0 1px var(--flamme) inset}
.newcard{text-align:left;margin-top:8px;animation:.4s var(--ease) both rise}
.newcard .sq-card{margin-top:12px}
.keepnote{font-size:12.5px;color:var(--taupe);margin-top:2px}
.renewtg{text-align:left;margin-top:6px}
@media (prefers-reduced-motion:reduce){.newcard{animation:none}}

/* Travail (team) */
.tabs a[hidden]{display:none}
.work .seg{margin-bottom:6px}
.wnav{display:flex;align-items:center;gap:12px;margin:14px 0 2px}
.wnav>div{flex:1;text-align:center}
.wnav b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--espresso);line-height:1.2}
.back.sm{width:34px;height:34px;margin:0}
.back.sm svg{width:18px;height:18px}
.wh{font-size:20px;margin:22px 0 8px}
.wweek{display:flex;flex-direction:column}
.wday{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.wday>b{width:92px;flex:none;font-family:var(--serif);font-weight:400;font-size:17px;color:var(--espresso)}
.wday>div{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.slotchip{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 11px;border-radius:999px;background:var(--lin);border:1px solid var(--hair);font-size:13.5px;color:var(--brun)}
.slotchip button{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--taupe)}
.slotchip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.work .btn.line.w{margin-top:12px}
.offrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.offrow b{display:block;font-family:var(--serif);font-weight:400;font-size:17px;color:var(--espresso)}
.offrow small{display:block;font-size:13px;color:var(--taupe)}
.offrow .cancel,.work .res .cancel{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--taupe);border-bottom:1px solid var(--hair);padding:4px 0}
.wrapchips{flex-wrap:wrap;overflow:visible;margin:4px 0 0;padding:0}
.mycls{margin-top:12px}
.mycls.todo{border-color:var(--hair-gold)}
.mycls b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso)}
.mycls small{display:block;font-size:13px;color:var(--taupe);margin-top:2px}
.mycls textarea{width:100%;margin:12px 0 4px;font:inherit;font-size:15px;line-height:1.55;color:var(--mocha);background:var(--creme);border:1px solid var(--hair);border-radius:10px;padding:10px 12px;resize:vertical;outline:none}
.mycls textarea:focus{border-color:var(--flamme)}
.fld select{border:0;background:transparent;font-family:var(--serif);font-size:20px;color:var(--espresso);padding:2px 0;outline:none;width:100%;appearance:none;-webkit-appearance:none}

/* ================================================================== home v2: immersive hero, member card, practice, rail */
.home{padding-top:0}
.hx{position:relative;margin:0 -22px;min-height:min(56vh,470px);padding:calc(16px + var(--safe-t)) 22px 22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-radius:0 0 30px 30px;color:var(--creme);isolation:isolate;background:var(--espresso)}
.hx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2;transform-origin:55% 30%;animation:kenburns 22s ease-in-out infinite alternate}
.hx::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(43,33,26,.45) 0%,rgba(43,33,26,0) 22%,rgba(43,33,26,.1) 48%,rgba(43,33,26,.9) 100%)}
.hx::after{content:"";position:absolute;inset:auto -30% -40% -30%;height:70%;z-index:-1;background:radial-gradient(closest-side,rgba(198,161,91,.22),transparent);animation:glow 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes kenburns{from{transform:scale(1.1) translate3d(-1%,1%,0)}to{transform:scale(1.01)}}
@keyframes glow{from{opacity:.55;transform:translateY(6%)}to{opacity:1;transform:none}}
.hx-top{display:flex;align-items:center;justify-content:space-between}
.hx-date{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--sand)}
.hx-bell{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(241,232,219,.14);border:1px solid rgba(241,232,219,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hx-bell svg{width:19px;height:19px;fill:none;stroke:var(--creme);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hx-hello{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.02;color:var(--creme);letter-spacing:-.01em;margin:22px 0 16px}
.hx-hello em{font-style:italic;color:#E9CF98}
.hx-hello .w{display:inline-block;opacity:0;transform:translateY(60%);filter:blur(6px);animation:wordin .9s var(--ease) forwards;animation-delay:calc(.12s + var(--i) * .09s)}
.hx-hello em .w{animation-delay:calc(.32s + var(--i) * .09s)}
@keyframes wordin{to{opacity:1;transform:none;filter:none}}
.hx-next{display:block;padding:16px 18px;border-radius:20px;background:rgba(43,33,26,.38);border:1px solid rgba(241,232,219,.2);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);opacity:0;transform:translateY(18px);animation:upin .9s var(--ease) .55s forwards;transition:transform .25s var(--ease)}
.hx-next:active{transform:scale(.985)}
@keyframes upin{to{opacity:1;transform:none}}
.hx-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hx-next .eyebrow{color:var(--sand)}
.hx-when{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:var(--flamme);color:var(--espresso);font-size:12px;font-weight:700;letter-spacing:.02em}
.hx-when::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--espresso);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.hx-next h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;color:var(--creme);margin:10px 0 4px}
.hx-next p{font-size:13.5px;color:var(--sand);line-height:1.45}
.hx-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:600;color:#E9CF98}
.hx-go svg,.rail-hd a svg,.mc-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hx-next.idle .btn{margin-top:14px;align-self:flex-start}
.hx.calm .hx-bg,.hx.calm::after{animation:none}
.hx.calm .hx-hello .w,.hx.calm .hx-next{animation:none;opacity:1;transform:none;filter:none}

/* sections rise in one after the other */
.rise{opacity:0;transform:translateY(14px);animation:upin .8s var(--ease) forwards;animation-delay:calc(.55s + var(--d,0) * .12s)}

/* member card: a wallet card, gold foil on espresso */
.wcard{position:relative;display:flex;flex-direction:column;gap:18px;margin-top:20px;padding:20px 20px 18px;min-height:206px;border-radius:22px;overflow:hidden;color:var(--creme);isolation:isolate;background:radial-gradient(120% 90% at 100% 0%,rgba(198,161,91,.35),transparent 55%),linear-gradient(150deg,#3a2c21 0%,#2B211A 55%,#1f1712 100%);box-shadow:0 24px 40px -22px rgba(43,33,26,.65),inset 0 0 0 1px rgba(233,207,152,.28);transition:transform .3s var(--ease)}
.wcard:active{transform:scale(.985)}
.mc-mark{position:absolute;right:-34px;bottom:-40px;width:210px;height:210px;z-index:-1;opacity:.22;background:linear-gradient(160deg,#F3DDA8,#B98C45);-webkit-mask:url(../assets/mark.png) center/contain no-repeat;mask:url(../assets/mark.png) center/contain no-repeat}
.mc-shine{position:absolute;inset:-40% -60%;z-index:-1;background:linear-gradient(105deg,transparent 40%,rgba(255,240,205,.16) 48%,rgba(255,240,205,.03) 54%,transparent 60%);animation:shine 6.5s ease-in-out 1.2s infinite}
@keyframes shine{0%{transform:translateX(-45%)}45%,100%{transform:translateX(45%)}}
.mc-top{display:flex;align-items:center;justify-content:space-between}
.mc-brand{font-family:var(--serif);font-size:19px;letter-spacing:.36em;text-transform:uppercase;background:linear-gradient(90deg,#F3DDA8,#C6A15B 60%,#F3DDA8);-webkit-background-clip:text;background-clip:text;color:transparent}
.mc-tag{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;padding:5px 9px;border-radius:99px;border:1px solid rgba(233,207,152,.45);color:#E9CF98}
.mc-plan small,.mc-foot small{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:rgba(241,232,219,.55)}
.mc-plan b{display:block;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.05;color:var(--creme);margin:4px 0 2px}
.wcard.empty .mc-plan b{font-size:30px}
.mc-plan span{font-size:13.5px;color:var(--sand)}
.mc-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid rgba(233,207,152,.18)}
.mc-foot b{display:block;font-weight:600;font-size:14px;color:var(--creme);margin-top:3px}
.mc-foot>div:last-child:not(:first-child){text-align:right}
.mc-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#E9CF98}

/* credits: a ring per kind */
.creds{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.creds.solo{margin-top:20px}
.cred{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:var(--lin);border:1px solid var(--hair);transition:transform .25s var(--ease)}
.cred:active{transform:scale(.98)}
.cred .eyebrow{margin-bottom:3px}
.rwrap{position:relative;width:54px;height:54px;flex:none;display:grid;place-items:center}
.rwrap b{position:relative;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1;color:var(--espresso)}
.rwrap .ring{position:absolute;inset:0;width:100%;height:100%}
.cred strong{display:block;font-weight:600;font-size:13.5px;color:var(--espresso);line-height:1.25}
.cred .eyebrow{white-space:nowrap}
.cred small{display:block;font-size:11.5px;color:var(--taupe);margin-top:2px;line-height:1.3}
.ring{width:46px;height:46px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:rgba(74,55,40,.12);stroke-width:3.5}
.ring .on{stroke:var(--flamme);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:calc(119.4 * (1 - var(--f)));animation:ringin 1.4s var(--ease) .7s backwards}
@keyframes ringin{from{stroke-dashoffset:119.4}}

/* practice */
.practice{margin-top:22px;padding:18px 18px 16px;border-radius:20px;background:linear-gradient(180deg,var(--lin),rgba(250,245,236,.4));border:1px solid var(--hair-gold)}
.pr-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px}
.pr-row>div{text-align:center;padding:0 6px}
.pr-row>div+div{border-left:1px solid var(--hair)}
.pr-row b{display:block;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;color:var(--espresso)}
.pr-row small{display:block;margin-top:6px;font-size:11.5px;line-height:1.3;color:var(--taupe)}

/* rail: the next classes, swipe sideways */
.rail-hd{display:flex;align-items:baseline;justify-content:space-between;margin-top:28px}
.rail-hd h3{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--espresso)}
.rail-hd a{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--gold-ink)}
.rail{display:flex;gap:12px;overflow-x:auto;margin:12px -22px 0;padding:2px 22px 8px;scroll-snap-type:x mandatory;scroll-padding:0 22px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-card{position:relative;flex:0 0 68%;max-width:260px;height:250px;border-radius:20px;overflow:hidden;scroll-snap-align:start;color:var(--creme);display:flex;flex-direction:column;justify-content:space-between;padding:12px;isolation:isolate;transition:transform .25s var(--ease)}
.rail-card:active{transform:scale(.98)}
.rail-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:sepia(.12)}
.rail-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(43,33,26,.05) 30%,rgba(43,33,26,.9) 100%)}
.rc-time{align-self:flex-start;padding:5px 10px;border-radius:99px;background:rgba(250,245,236,.9);color:var(--espresso);font-size:12.5px;font-weight:700}
.rc-txt h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.05;color:var(--creme)}
.rc-txt small{display:block;font-size:12.5px;color:var(--sand);margin-top:3px}
.rc-left{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#E9CF98}
.rc-left.low{color:#F2B39E}
@media (prefers-reduced-motion:reduce){.mc-shine,.hx-bg,.hx::after,.hx-when::before{animation:none}.rise,.hx-next,.hx-hello .w{animation:none;opacity:1;transform:none;filter:none}.ring .on{animation:none}}
.rwrap b.inf{font-size:30px;font-weight:400;margin-top:-3px}

/* Compte: auto-renewal shown, not switched (stopping it goes through the studio) */
.mcard .renew{cursor:default}
.mcard .renew em{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--espresso);background:var(--flamme);padding:5px 10px;border-radius:99px}
.mcard .renew-note{margin-top:8px;font-size:12px;color:var(--sand)}
.renewinfo{margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:var(--lin);border:1px solid var(--hair);font-size:13px;line-height:1.45;color:var(--brun)}
.renewinfo b{display:block;font-weight:600;color:var(--espresso);margin-bottom:2px}

/* home: the next classes as a timeline */
.agenda{margin-top:24px;padding:18px 16px 8px;border-radius:22px;background:var(--lin);border:1px solid var(--hair)}
.ag-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 4px 4px}
.ag-hd h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.05;color:var(--espresso);margin-top:3px}
.ag-hd a{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--gold-ink);white-space:nowrap}
.ag-hd a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ag-day{margin:14px 4px 4px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--taupe)}
.ag-row{position:relative;display:grid;grid-template-columns:54px 14px 1fr auto;align-items:center;gap:8px;padding:12px 4px;border-radius:14px;opacity:0;transform:translateY(8px);animation:upin .7s var(--ease) forwards;animation-delay:calc(.75s + var(--k) * .07s);transition:background .2s}
.ag-row:active{background:rgba(198,161,91,.12)}
.ag-t b{display:block;font-family:var(--serif);font-weight:500;font-size:19px;line-height:1;color:var(--espresso);white-space:nowrap}
.ag-t small{display:block;margin-top:4px;font-size:11.5px;color:var(--taupe)}
/* the timeline: a gold thread through every class of the day */
.ag-dot{position:relative;align-self:stretch;display:grid;place-items:center}
.ag-dot::before{content:"";position:absolute;top:-12px;bottom:-12px;left:50%;width:1px;transform:translateX(-50%);background:linear-gradient(var(--hair-gold),var(--hair-gold))}
.ag-day+.ag-row .ag-dot::before{top:50%}
.ag-row:last-child .ag-dot::before,.ag-row:has(+ .ag-day) .ag-dot::before{bottom:50%}
.ag-day+.ag-row:last-child .ag-dot::before,.ag-day+.ag-row:has(+ .ag-day) .ag-dot::before{display:none}
.ag-dot::after{content:"";position:relative;width:9px;height:9px;border-radius:50%;background:var(--lin);border:1.5px solid var(--flamme)}
.ag-c{display:flex;align-items:center;gap:10px;min-width:0}
.ag-c .sico{width:40px;height:40px}.ag-c .sico img{width:27px;height:27px}
.ag-c>div{min-width:0}
.ag-c h3{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.1;color:var(--espresso);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-c small{display:block;margin-top:2px;font-size:12px;color:var(--taupe);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-p{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:11.5px;font-weight:700;color:var(--brun);white-space:nowrap}
.ag-p i{width:44px;height:4px;border-radius:4px;background:rgba(74,55,40,.12);overflow:hidden;position:relative}
.ag-p i::after{content:"";position:absolute;inset:0;width:calc(var(--f) * 100%);border-radius:4px;background:var(--flamme)}
.ag-p.low{color:#A0482F}.ag-p.low i::after{background:#C9714F}
.ag-p.full{padding:4px 8px;border-radius:99px;background:rgba(74,55,40,.08);color:var(--taupe)}
@media (prefers-reduced-motion:reduce){.ag-row{animation:none;opacity:1;transform:none}}

/* schedule: jump to a date (next 4 weeks) */
.sch-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.dateacts{display:flex;gap:6px}
.datebox{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;padding:9px 14px 9px 12px;border-radius:99px;background:var(--lin);border:1px solid var(--hair-gold);color:var(--espresso);font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.datebox:active{transform:scale(.96);background:var(--sand)}
.datebox svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--flamme-hover);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.datebox.today{background:var(--mocha);border-color:var(--mocha);color:var(--creme)}.datebox.today svg{stroke:#E9CF98}
.datebox.ico{padding:9px 11px}
/* the calendar sheet */
.cal{margin-top:16px;text-align:left}
.cal-mt{font-family:var(--serif);font-size:22px;color:var(--espresso);text-align:center;margin-bottom:12px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 2px}
.cal-h{text-align:center;font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--taupe);padding-bottom:6px}
.cal-d{position:relative;height:48px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--espresso);transition:background .2s,transform .2s var(--ease),color .2s;animation:upin .45s var(--ease) both;animation-delay:calc(var(--i) * 12ms)}
.cal-d b{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1}
.cal-d small{position:absolute;top:3px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--flamme-hover)}
.cal-d i{position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--sand)}
.cal-d i.me,.cal-key i.me{background:var(--flamme)}
.cal-d:not(.off):active{transform:scale(.92)}
.cal-d.now{box-shadow:inset 0 0 0 1.5px var(--flamme)}
.cal-d.on{background:var(--mocha);color:var(--creme);box-shadow:none}.cal-d.on small{color:#E9CF98}.cal-d.on i{background:#E9CF98}
.cal-d.off{color:rgba(74,55,40,.25);cursor:default}.cal-d.off small{color:rgba(169,133,70,.4)}
.cal-key{display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:12px;color:var(--taupe)}
.cal-key span{display:inline-flex;align-items:center;gap:6px}.cal-key i{width:6px;height:6px;border-radius:50%;background:var(--sand)}
.cal-note{margin-top:10px;text-align:center;font-size:12.5px;color:var(--taupe)}
@media (prefers-reduced-motion:reduce){.cal-d{animation:none}}

/* schedule: class type filter (a button, then a sheet of tiles) */
.fbar{display:flex;align-items:center;gap:8px;margin:8px 0 4px}
.fbtn{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:18px;background:var(--lin);border:1px solid var(--hair);transition:transform .2s var(--ease),background .25s,border-color .25s}
.fbtn:active{transform:scale(.98)}
.fbtn .sico,.fbtn .fic{width:40px;height:40px}
.fbtn .sico img{width:27px;height:27px}
.fic{display:grid;place-items:center;border-radius:50%;background:var(--creme);border:1px solid var(--hair-gold);flex:none}
.fic svg,.ftg .all svg{width:19px;height:19px;fill:none;stroke:var(--flamme-hover);stroke-width:1.7;stroke-linecap:round}
.fbtn span{flex:1;min-width:0;text-align:left;font-family:var(--serif);font-size:19px;line-height:1.1;color:var(--espresso);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbtn span small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--taupe);margin-bottom:2px}
.fbtn .chev{width:18px;height:18px;flex:none;fill:none;stroke:var(--taupe);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fbtn.on{background:var(--mocha);border-color:var(--mocha)}
.fbtn.on span{color:var(--creme)}.fbtn.on span small{color:#E9CF98}.fbtn.on .chev{stroke:#E9CF98}
.fbtn.on .sico{background:var(--creme);border-color:transparent}
.fclear{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--lin);border:1px solid var(--hair);animation:upin .35s var(--ease) both}
.fclear svg{width:16px;height:16px;fill:none;stroke:var(--mocha);stroke-width:1.8;stroke-linecap:round}
.fclear:active{transform:scale(.92)}
.ftg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;text-align:left}
.ft{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:20px;background:var(--lin);border:1px solid var(--hair);transition:transform .25s var(--ease),background .3s,border-color .3s;animation:upin .5s var(--ease) both;animation-delay:calc(.06s + var(--i) * 45ms)}
.ft:active{transform:scale(.96)}
.ft .sico{width:48px;height:48px;margin-bottom:6px;transition:background .3s,border-color .3s}
.ft .sico img{width:32px;height:32px}
.ft b{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.1;color:var(--espresso);transition:color .3s}
.ft small{font-size:12px;color:var(--taupe);transition:color .3s}
.ft-ok{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--flamme);opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s var(--ease)}
.ft-ok svg{width:14px;height:14px;fill:none;stroke:var(--espresso);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ft.on{background:var(--mocha);border-color:var(--mocha)}
.ft.on b{color:var(--creme)}.ft.on small{color:var(--sand)}
.ft.on .sico{background:var(--creme);border-color:transparent}
.ft.on .ft-ok{opacity:1;transform:none}
.ft.pick{animation:ftpick .45s var(--ease)}
@keyframes ftpick{40%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.ft,.fclear{animation:none}}

/* ================================================================== login: immersive like the home */
.lg{min-height:100dvh;display:flex;flex-direction:column;background:var(--creme)}
.lg-hero{position:relative;min-height:min(44vh,380px);padding:calc(26px + var(--safe-t)) 26px 60px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;color:var(--creme);background:var(--espresso)}
.lg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;z-index:-2;transform-origin:50% 0%;animation:kenburns 22s ease-in-out infinite alternate}
.lg-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(43,33,26,.6) 0%,rgba(43,33,26,.1) 30%,rgba(43,33,26,.25) 55%,rgba(43,33,26,.92) 100%)}
.lg-brand{display:flex;flex-direction:column;align-items:center;gap:5px;margin:4px 0 6px}
.lg-mark{width:50px;height:50px;background:linear-gradient(160deg,#D9B56E,#A98546 55%,#7F602C);-webkit-mask:url(../assets/mark.png) center/contain no-repeat;mask:url(../assets/mark.png) center/contain no-repeat;}
.lg-brand span{font-family:var(--serif);font-size:20px;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;background:linear-gradient(90deg,#A98546,#7F602C 50%,#A98546);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-brand small{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--taupe)}
.lg-hello h2{font-size:48px;line-height:1;color:var(--creme);margin:0 0 8px}
.lg-hello h2 em{color:#E9CF98;font-weight:300}
.lg-hello .w{display:inline-block;opacity:0;transform:translateY(60%);filter:blur(6px);animation:wordin .9s var(--ease) forwards;animation-delay:calc(.25s + var(--i) * .09s)}
.lg-hello em .w{animation-delay:.4s}
.lg-hello p{font-size:14px;line-height:1.5;color:var(--sand);max-width:290px;opacity:0;animation:upin .8s var(--ease) .55s forwards}
.lg-card{position:relative;margin-top:-36px;flex:1;padding:12px 26px calc(26px + var(--safe-b));border-radius:30px 30px 0 0;background:var(--creme);display:flex;flex-direction:column;opacity:0;transform:translateY(24px);animation:upin .9s var(--ease) .35s forwards}
.lg-card .form{margin-top:0}
.fld.pwf{position:relative;padding-right:40px}
.fld .eye{position:absolute;right:0;bottom:6px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--taupe)}
.fld .eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fld .eye .slash{display:none}.fld .eye[aria-pressed=true] .slash{display:inline}
.lg-forgot{align-self:flex-end;margin-top:12px;font-size:13px;font-weight:600;color:var(--gold-ink)}
.lg-card .form .btn{margin-top:20px}
.lg-or{display:flex;align-items:center;gap:12px;margin:26px 0 14px;font-size:12.5px;color:var(--taupe)}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--hair)}
.lg-gift{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13px;color:var(--brun);text-align:center}
.lg-gift i{width:7px;height:7px;border-radius:50%;background:var(--flamme);box-shadow:0 0 0 4px rgba(198,161,91,.2);flex:none}
.lg.calm .lg-bg,.lg.calm .lg-card,.lg.calm .lg-hello p,.lg.calm .lg-hello .w{animation:none;opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.lg-bg,.lg-card,.lg-hello p,.lg-hello .w{animation:none;opacity:1;transform:none;filter:none}}

/* ================================================================== tab bar v2: fine line icons that draw in, gold fill, sliding capsule */
.tabs svg{width:24px;height:24px;stroke-width:1.35;overflow:visible}
.tabs svg .f{fill:var(--flamme);stroke:none;opacity:0;transform:scale(.55);transform-box:fill-box;transform-origin:center;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.tabs svg .dots{stroke-width:2.2}
.tabs a{position:relative;z-index:1;font-size:10px;letter-spacing:.08em}
.tabs .on{font-weight:700}
.tabs .on svg{stroke:var(--espresso);transform:none;animation:tabpop .55s var(--ease)}
.tabs .on svg .f{opacity:.45;transform:none}
.tabs .on svg [pathLength]{stroke-dasharray:1;animation:tabdraw .7s var(--ease) both}
.tabs .on svg .dots{stroke:var(--flamme-hover);animation:tabdots .6s var(--ease) .25s both}
@keyframes tabpop{0%{transform:scale(.82)}55%{transform:scale(1.1)}100%{transform:none}}
@keyframes tabdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes tabdots{from{opacity:0}to{opacity:1}}
/* the capsule behind the active icon slides from tab to tab */
.tab-ind{top:7px;height:34px;transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
.tab-ind::before{width:58px;height:34px;border-radius:17px;background:linear-gradient(180deg,rgba(198,161,91,.24),rgba(198,161,91,.12));box-shadow:inset 0 0 0 1px rgba(198,161,91,.35),0 6px 14px -8px rgba(127,96,44,.45)}
.tabs a:active svg{transform:scale(.86)}
@media (prefers-reduced-motion:reduce){.tabs .on svg,.tabs .on svg [pathLength],.tabs .on svg .dots{animation:none}.tab-ind{transition:none}}

/* Compte: late-cancellation fees still to pay */
.feebox{margin-top:14px;padding:14px 16px;border-radius:14px;background:#f6e9e2;border:1px solid rgba(138,59,47,.25)}
.feebox b{display:block;font-family:var(--serif);font-weight:500;font-size:19px;color:var(--warn)}
.feebox span{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--brun)}

/* Travail · Horaire: my shifts and classes of the week */
.work .res.today .d b{color:var(--flamme-hover)}
.work .res.today .d small{color:var(--flamme-hover)}
.work .res.past{opacity:.55}
.wshifts{display:flex;flex-direction:column;gap:10px}
.wshift{position:relative;padding-left:12px}
.wshift::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--mocha)}
.wshift.class::before{background:var(--flamme)}
.wtoday{text-align:left}

.wshift{display:block;width:100%;text-align:left}
button.wshift.class{cursor:pointer}
button.wshift.class:active{opacity:.6}
.wdesc{width:100%;margin-top:14px;padding:12px 14px;border:1px solid var(--hair);border-radius:12px;background:var(--lin);font:inherit;font-size:15px;color:var(--espresso);resize:vertical;text-align:left}

/* Notifications: language of the app and the emails */
.langpick{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-bottom:1px solid var(--hair)}
.langpick b{display:block;font-weight:600;font-size:15px;color:var(--espresso)}
.langpick small{display:block;font-size:12.5px;color:var(--taupe);margin-top:2px}
.langpick .seg{margin:0}

/* login: FR | EN before signing in */
.lg-lang{display:flex;justify-content:center;gap:4px;margin:2px auto 10px;padding:3px;border-radius:99px;background:var(--lin);border:1px solid var(--hair);width:max-content}
.lg-lang button{min-width:44px;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--taupe)}
.lg-lang button.on{background:var(--mocha);color:var(--creme)}

/* Mes informations: account deletion kept apart at the bottom */
.danger-zone{margin-top:36px;padding-top:18px;border-top:1px solid var(--hair);text-align:center}

/* privacy policy inside the app */
.policy h1{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.05;color:var(--espresso);margin-top:6px}
.policy h1 em{font-style:italic;font-weight:300}
.policy .lead{margin-top:8px;font-size:13px;color:var(--taupe)}
.policy h2{font-size:24px;margin:28px 0 8px}
.policy p,.policy li{font-size:14.5px;line-height:1.6;color:var(--brun)}
.policy p+p{margin-top:10px}
.policy b{font-weight:600;color:var(--mocha)}
.policy a{color:var(--gold-ink);text-decoration:underline}
.policy ul{margin:8px 0 0 1.1em}.policy li{margin-top:5px}.policy li::marker{color:var(--flamme)}
.policy table,.policy tbody,.policy tr,.policy td{display:block;width:100%}
.policy thead{display:none}
.policy tr{padding:10px 0;border-bottom:1px solid var(--hair)}
.policy td{font-size:14px;line-height:1.55;color:var(--brun)}
.policy td:first-child{font-weight:600;color:var(--espresso);margin-bottom:2px}

.form + .langpick{margin-top:22px;border-top:1px solid var(--hair)}

/* special events: a small gold tag on the schedule; the guest field on the class sheet */
.evtag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--flamme,#C6A15B);color:#2B211A;font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;vertical-align:middle}
.guestf{margin:14px 0 4px}.guestf small{display:block;margin-top:6px;color:var(--taupe,#9D836F);font-size:12px}
.withguest{display:block;margin:8px 0 2px}

/* presale membership: a small line on the plan */
.plan .presale{display:block;margin-top:6px;font-size:12px;color:var(--flamme-hover,#A98546);font-weight:600}

/* a document updated since the member signed or accepted it */
.docnew{margin:-2px 0 6px;font-size:13.5px;color:var(--gold-ink)}
.doc.docrich{white-space:normal}
.doc.docrich h2{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso);margin:14px 0 4px}
.doc.docrich h2:first-child{margin-top:0}
.doc.docrich p+p{margin-top:8px}
.doc.docrich ul{margin:6px 0 0 1.1em}.doc.docrich li{margin-top:4px}
.doc.docrich b{font-weight:600;color:var(--mocha)}
.doc.docrich a{color:var(--gold-ink)}

/* home « Bientôt au studio »: each class reads as a button (its own light card, a › at the end, it presses in when touched) */
.agenda{padding-left:10px;padding-right:10px}
.ag-row{grid-template-columns:52px 12px 1fr auto 7px;gap:7px;margin-top:6px;padding:12px 10px 12px 8px;background:rgba(255,255,255,.55);border:1px solid rgba(198,161,91,.28);box-shadow:0 6px 16px -14px rgba(43,33,26,.5);transition:background .2s,scale .15s,box-shadow .2s}
.ag-row::after{content:"";justify-self:end;width:7px;height:7px;border-top:1.5px solid var(--taupe);border-right:1.5px solid var(--taupe);transform:rotate(45deg);opacity:.75}
.ag-row:active{scale:.98;background:rgba(198,161,91,.14);box-shadow:none}
.ag-dot::before{top:-19px;bottom:-19px}
/* the class name: room for the letters that go below the line (g, p, y) */
.ag-c h3{line-height:1.3;padding-bottom:1px}