/* UPLIFT Book in his UPLIFT iOS 27 design system (2026-10-19, his words "booking.uplifttattoosoho looks horrid too").
   His grill picks: Apple's iOS 27 layout with BLACK buttons and selections, never Apple blue (his Oct 18 rule: "USE ONLY
   WHITE BACKGROUND AND BLACK LOGO AND TEXT"); Apple's text sizes and contrast, with screen titles and buttons in capitals
   with light letter spacing; rows and body in normal case. One stylesheet, no override layers: content is solid (white
   cards on the grouped gray), controls float on Liquid Glass (the bottom bar, the back and language buttons). */
:root{
  --ground:#f2f2f7;--card:#ffffff;--label:#000000;--label2:#6e6e73;--label3:#aeaeb2;--sep:rgba(60,60,67,.29);
  --fill:rgba(120,120,128,.2);--fill3:rgba(118,118,128,.12);--tint:#000000;--on-tint:#ffffff;--red:#d70015;
  --glass:rgba(255,255,255,.72);--glass-blur:24px;--glass-sat:180%;
  --shadow-glass:0 8px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 .5px rgba(0,0,0,.14);
  --shadow-knob:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);
  --r-group:26px;--r-field:14px;--r-pill:999px;
  --jo:"Josefin Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:var(--jo);--display:var(--jo);--brand:var(--jo);
  --satin-black:linear-gradient(115deg,#2a2a2a 0%,#151515 30%,#2c2c2c 50%,#121212 72%,#242424 100%);
  --satin-gold:linear-gradient(115deg,#efe2b8 0%,#d8bf86 18%,#c3a061 38%,#e3cf9c 52%,#c09c5c 70%,#dcc38e 86%,#c8a96a 100%);
  color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--label);font:300 17px/22px var(--sans);text-transform:uppercase;letter-spacing:.03em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
main{max-width:600px;margin:0 auto;padding:0 0 calc(124px + env(safe-area-inset-bottom));overflow-x:clip}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}img{display:block}
button{font-family:inherit;text-transform:uppercase;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}
input,textarea,select,.typed{text-transform:none;letter-spacing:normal}
input::placeholder,textarea::placeholder{text-transform:uppercase;letter-spacing:.03em}
b,strong{font-weight:500}
.center{text-align:center}.pad{padding-left:16px;padding-right:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* type: Apple's Dynamic Type sizes; titles and buttons in capitals, lightly spaced (his pick) */
.hero h1,.display{margin:0;font:500 28px/34px var(--display);letter-spacing:.01em;text-transform:uppercase}
.display.sm{font-size:22px;line-height:28px}
.eyebrow{margin:0;font:300 13px/18px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--label2)}
.lede{margin:8px 0 0;font:300 15px/20px var(--sans);color:var(--label2)}
.note{margin:0;font:300 15px/20px var(--sans);color:var(--label2)}
.quiet{display:inline-flex;align-items:center;min-height:44px;font:500 15px/20px var(--sans);color:var(--label)}
.empty{margin:20px;font:300 15px/20px var(--sans);color:var(--label2)}
.gold{color:var(--label)!important}

/* the top: the logo, or a glass back button; the language as a glass capsule */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:calc(8px + env(safe-area-inset-top)) 16px 0;position:relative;z-index:5}
.nav.over{position:absolute;left:0;right:0;max-width:600px;margin:0 auto}
.mark img{height:56px;width:auto;margin:-6px 0 -6px -8px}
.nomark .nav .mark{visibility:hidden}
.nav .lang,.nav .back{display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:var(--r-pill);background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));box-shadow:var(--shadow-glass);color:var(--label)}
.nav .lang{min-width:60px;padding:0 16px;font:500 15px/1 var(--sans);letter-spacing:.03em}
.nav .back{width:44px;flex:none}
.back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
main>.back{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:8px 16px 0;border-radius:var(--r-pill);background:var(--glass);box-shadow:var(--shadow-glass)}

/* screen titles */
.hero,.head{padding:16px 20px 0;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.hero p{margin:6px 0 0;font:300 15px/20px var(--sans);color:var(--label2)}
.hero p .quiet{margin-top:-4px}
.head{display:flex;flex-direction:column;gap:6px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* opening screens */
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:calc(48px + env(safe-area-inset-top)) 24px 16px;animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.splash.signin{padding-top:calc(10vh + env(safe-area-inset-top));padding-bottom:4px}
.signin-card{width:100%;max-width:420px;text-align:left}
.signin-card .mcard{margin:0}
.biglogo{width:min(46vw,180px);height:auto}
.intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:calc(16px + env(safe-area-inset-top)) 24px 0;animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.midlogo{width:min(34vw,128px);height:auto}

/* section headers, iOS grouped style */
h2,.sh{margin:28px 20px 8px;padding:0;font:500 13px/18px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--label2)}
.sh{display:flex;align-items:baseline;justify-content:space-between}
.sect{margin:0}

/* inset grouped lists: solid white, 26 pt corners, hairlines inside */
.list,.index{margin:0 16px;background:var(--card);border-radius:var(--r-group);overflow:hidden}
.hero+.list,.hero+.index,.head+.list,.head+.index{margin-top:20px}
.row,.index a{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:11px 20px}
.row+.row::before,.index a+a::before{content:"";position:absolute;top:0;left:20px;right:0;height:.5px;background:var(--sep)}
.row>span,.index a>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row b,.index b{font:300 17px/22px var(--sans)}
.row small,.index small{font:300 15px/20px var(--sans);color:var(--label2)}
.index i{font-style:normal;font-size:24px;line-height:1;color:var(--label3)}
.chev{flex:none;width:9px;height:9px;border-right:2px solid var(--label3);border-top:2px solid var(--label3);transform:rotate(45deg);margin-right:4px}
.row:active,.index a:active{background:var(--fill3)}
.index.extra{margin-top:28px}
.more{margin:16px 0 0;text-align:center}.more a{display:inline-flex;align-items:center;min-height:44px;font:500 15px/20px var(--sans)}

/* buttons: black capsules (his pick), white for the second one */
.btn,.cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 20px;border:0;border-radius:var(--r-pill);background:var(--tint);color:var(--on-tint);font:500 16px/20px var(--sans);letter-spacing:.02em;text-transform:uppercase;text-align:center;cursor:pointer;transition:transform .15s,opacity .15s}
.btn:active,.cta:active{transform:scale(.98);opacity:.86}
.btn.ghost,.cta.alt,.btn.white{background:var(--card);color:var(--label);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14)}
p.center{margin:16px 0 0;padding:0 16px}
.sched{display:flex;flex-direction:column;gap:10px;margin:24px 16px 0}
/* right under the card, as wide as the card (2026-10-20, his words "buttons right under the card") */
.sched.under{width:calc(100% - 32px);max-width:360px;margin:18px auto 0}

/* cards */
.card{margin:16px 16px 0;padding:20px;background:var(--card);border-radius:var(--r-group)}
.sum{display:flex;flex-direction:column;gap:3px}
.sum b{font:500 20px/25px var(--display)}
.sum span{font:300 15px/20px var(--sans);color:var(--label2)}
.sum .dep{margin-top:10px;padding-top:12px;border-top:.5px solid var(--sep);font:300 17px/22px var(--sans);color:var(--label)}
.sum .dep b{font:500 17px/22px var(--sans)}
.sum .held{margin-top:6px;font-weight:500;color:var(--label)}
.dl{display:block;font:500 20px/25px var(--display);margin:4px 0 2px}

/* the Circle card: his finishes, kept */
.gcard{position:relative;margin:24px auto 0;width:calc(100% - 32px);max-width:360px;aspect-ratio:1.586;border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;text-transform:uppercase;
  box-shadow:0 2px 6px rgba(0,0,0,.06),0 20px 44px rgba(0,0,0,.14);animation:rise .7s .05s cubic-bezier(.2,.8,.2,1) both}
.gtop img{height:44px;width:auto;margin:-8px 0 0 -8px}
.gpan{font:300 16px/1 var(--sans);letter-spacing:.08em;font-variant-numeric:tabular-nums;opacity:.92}
.gb{display:flex;flex-direction:column;gap:8px}.gn{font:500 min(44px,10.5vw)/1 var(--brand);letter-spacing:.01em}.gt{font:500 12px/1 var(--sans);letter-spacing:.04em}
.gcard.member{background:radial-gradient(120% 90% at 15% 0%,#2a2a2c 0%,#0f0f10 55%,#070707 100%);color:#efe6cf;box-shadow:inset 0 0 0 1px rgba(201,169,107,.55),0 20px 44px rgba(40,30,15,.3)}
.gcard.member .gt{color:#c9a96b}.gcard.member .gtop img{filter:brightness(0) invert(1)}
.gcard.silver{background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.04) 1px 3px),linear-gradient(120deg,#d9dbde 0%,#aeb2b8 30%,#e8eaed 52%,#9ea3aa 75%,#cfd2d6 100%);color:#1b1d20}
.gcard.gold{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.05) 1px 3px),linear-gradient(120deg,#e9d8a6 0%,#c4a265 30%,#f0e1b4 52%,#b8955a 75%,#dcc590 100%);color:#241a06}
.gcard.guest{background:#fff;color:#000;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 20px 44px rgba(0,0,0,.1)}.gcard.guest .gt{color:var(--label2)}
.gcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 62%);background-size:260% 100%;background-position:130% 0;animation:sheen 7s ease-in-out 1.4s infinite}
@keyframes sheen{0%{background-position:130% 0}45%,100%{background-position:-30% 0}}
.notyou{margin:4px 0 0;text-align:center}.notyou .quiet{color:var(--label2);font-weight:300}

/* first-visit deals as tickets */
.tickets{display:flex;flex-direction:column;gap:12px;margin:0 16px}
.ticket{display:flex;flex-direction:column;gap:4px;padding:20px;background:var(--card);border-radius:var(--r-group)}
.ticket .tv{margin-top:6px;font:300 48px/1 var(--display);letter-spacing:0}
.ticket .tl{font:300 17px/22px var(--sans)}
.ticket .note{padding-bottom:16px;border-bottom:1px dashed var(--sep)}
.ticket .btn{margin-top:16px}
.moreoffers{margin:0 16px}
.moreoffers>summary{list-style:none;display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px;font:500 15px/20px var(--sans);cursor:pointer}
.moreoffers>summary::-webkit-details-marker{display:none}
.moreoffers .index{margin:0}

/* the birthday as one row that opens (his pick 2026-10-19) */
details.bday{margin:28px 16px 0;background:var(--card);border-radius:var(--r-group);overflow:hidden}
details.bday>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:60px;padding:11px 20px;cursor:pointer}
details.bday>summary::-webkit-details-marker{display:none}
details.bday>summary>span{flex:1;display:flex;flex-direction:column;gap:2px}
details.bday>summary b{font:300 17px/22px var(--sans)}details.bday>summary small{font:300 15px/20px var(--sans);color:var(--label2)}
details.bday>summary .chev{transform:rotate(135deg);transition:transform .2s}
details.bday[open]>summary .chev{transform:rotate(-45deg)}
details.bday .form{margin:0;padding:4px 0 20px;border-top:.5px solid var(--sep)}
details.bday .form .btn{margin:12px 20px 0;width:calc(100% - 40px)}
.card.bday{margin-top:28px}.perk{margin-top:10px;color:var(--label)}

/* the airy horizontal selector (his Oct 18 pick): codes and words in a sliding row, the chosen one in black */
.airy{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;padding:4px 20px;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
.airy::-webkit-scrollbar{display:none}
.airy>:first-child{margin-left:auto}.airy>:last-child{margin-right:auto}
.airy:not(.times)>a,.airy>label{flex:none;scroll-snap-align:center;display:inline-flex;align-items:center;min-height:44px;font:300 15px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--label2);cursor:pointer;white-space:nowrap;transition:color .2s}
.airy:not(.times):not(.dates)>a+a::before,.airy>label~label::before{content:"/";display:inline-block;margin:0 12px;color:#c7c7cc;font-weight:300;letter-spacing:0}
.airy:not(.times)>a.on{color:var(--label);font-weight:500}
.airy>input{position:absolute;opacity:0;pointer-events:none}
.airy>input:checked+label{color:var(--label);font-weight:500}
.airy>input:focus-visible+label{text-decoration:underline}
.langrow{padding-top:12px;padding-bottom:12px}

/* the day and time: a calendar card, then times grouped by part of the day */
.cal{margin:20px 16px 0;padding:6px 0 10px;background:var(--card);border-radius:var(--r-group)}
.month{display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.month b{font:500 17px/22px var(--sans)}
.mbtn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:300 26px/1 var(--sans);color:var(--label)}
.mbtn.off{opacity:.25;pointer-events:none}
.airy.dates{gap:6px;padding:4px 14px}
.airy.dates>a{flex-direction:column;justify-content:center;gap:6px;min-width:48px;padding:6px 0;letter-spacing:0;color:var(--label)}
.airy.dates small{font:300 12px/16px var(--sans);letter-spacing:.04em;color:var(--label2)}
.airy.dates b{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;font:300 20px/1 var(--display)}
.airy.dates>a.on b{background:var(--tint);color:var(--on-tint);font-weight:500}
.airy.dates>a.on small{color:var(--label)}
.tpart{margin:16px 20px 8px;font:500 15px/20px var(--sans);color:var(--label)}
h2+.tpart{margin-top:4px}
.airy.times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 16px;overflow:visible;-webkit-mask-image:none;mask-image:none}
.airy.times>a{display:flex;align-items:center;justify-content:center;min-height:48px;margin:0;border-radius:var(--r-pill);background:var(--card);font:300 16px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--label);white-space:nowrap}
.airy.times>a:active{background:var(--tint);color:var(--on-tint)}
.nofit{margin:28px 16px 0;text-align:center;font:300 15px/20px var(--sans);color:var(--label2)}
.nofit>span:first-child{display:block}
.nofit a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--label)}
.nofit .dot{margin:0 8px;color:var(--label3)}

/* forms: white fields with the label above, iOS grouped style */
.form{display:flex;flex-direction:column;gap:16px;margin:8px 16px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:flex;flex-direction:column;gap:6px;margin:0}
.f>span{padding:0 4px;font:300 13px/18px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--label2)}
.f input,.f textarea,.f select,.qin{width:100%;font:300 17px/22px var(--sans);color:var(--label);background:var(--card);border:0;border-radius:var(--r-field);padding:15px 16px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1);outline:none;-webkit-appearance:none;appearance:none}
.f input:focus,.f textarea:focus,.qin:focus{box-shadow:inset 0 0 0 1.5px var(--label)}
.f textarea,.qin{resize:vertical}
.f small{padding:0 4px;font:300 13px/18px var(--sans);color:var(--label2)}
.f.bad input,.f.bad textarea{box-shadow:inset 0 0 0 1.5px var(--red)}
.f em{padding:0 4px;font:300 13px/18px var(--sans);font-style:normal;color:var(--red)}
.form .btn,.form .cta{margin-top:4px}
.policy summary{cursor:pointer;font:500 15px/20px var(--sans)}.policy p{white-space:pre-line;color:var(--label2);font-size:13px;line-height:18px;margin:8px 0 0}

/* the booking steps */
.prog{display:flex;gap:6px;margin:12px 20px 0}.prog i{flex:1;height:4px;border-radius:2px;background:rgba(60,60,67,.18)}.prog i.on{background:var(--tint)}
.qform{display:flex;flex-direction:column;gap:16px;margin:20px 16px 0}
.qerr{margin:0;padding:0 4px;font:500 15px/20px var(--sans);color:var(--red)}
.fields{background:var(--card);border-radius:var(--r-group);overflow:hidden}
.fields .two{display:contents}
.fields .f{position:relative;gap:2px;padding:10px 20px 8px}
.fields .f+.f::before,.fields .two+.f::before,.fields .two .f+.f::before{content:"";position:absolute;top:0;left:20px;right:0;height:.5px;background:var(--sep)}
.fields .f>span{padding:0;font:300 13px/18px var(--sans);letter-spacing:.04em}
.fields .f input{padding:2px 0 4px;border-radius:0;background:transparent;box-shadow:none}
.fields .f input:focus{box-shadow:none}
.fields .f:focus-within>span{color:var(--label)}
.qcard{display:flex;flex-direction:column;gap:12px;margin:0;padding:18px 20px 20px;background:var(--card);border-radius:var(--r-group)}
.qcard.bad{box-shadow:inset 0 0 0 1.5px var(--red)}
.qh{margin:0;font:500 17px/22px var(--sans)}
.qsub{margin:-8px 0 0;font:300 15px/20px var(--sans);color:var(--label2)}
.qcard .qin{background:var(--fill3);box-shadow:none}
.qcard .qin:focus{box-shadow:inset 0 0 0 1.5px var(--label)}
.taps{display:flex;flex-direction:column;gap:10px}
.tap{display:flex;align-items:center;min-height:56px;padding:14px 20px;border:0;border-radius:18px;background:var(--card);font:500 17px/22px var(--sans);color:var(--label);text-align:left;cursor:pointer}
.tap:active,.tap.on{background:var(--tint);color:var(--on-tint)}
.skip{align-self:center;min-height:44px;background:none;border:0;padding:0 12px;font:500 15px/20px var(--sans);color:var(--label2);cursor:pointer}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.qform .picks+.picks{margin-top:4px}
.pick{position:relative;cursor:pointer}.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--card);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12);font:300 16px/1 var(--sans);color:var(--label)}
.qcard .pick span{background:var(--fill3);box-shadow:none}
.pick input:checked+span{background:var(--tint);color:var(--on-tint);box-shadow:none}
.pick input:focus-visible+span{outline:2px solid var(--label);outline-offset:2px}
.two.btns{gap:10px;align-items:stretch}.two.btns .btn,.two.btns .cta{margin:0}

/* agree and pay: one tick, the terms a tap away, the button pinned to the bottom (his five steps, 2026-10-19) */
.ag{position:relative;display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:44px;padding:10px 0}
.ag input{position:absolute;opacity:0;pointer-events:none}
.ag i{flex:none;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(60,60,67,.3);margin-top:-2px}
.ag input:checked+i{background:var(--tint);box-shadow:none}
.ag input:checked+i::after{content:"";display:block;width:6px;height:11px;margin:6px 0 0 10px;border:solid var(--on-tint);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ag input:focus-visible+i{outline:2px solid var(--label);outline-offset:2px}
.ag span{flex:1;font:300 15px/20px var(--sans);color:var(--label)}
.ag.accept span{font:500 17px/22px var(--sans)}
.ag small{display:block;margin-top:2px;font:300 13px/18px var(--sans);color:var(--label2)}
.agree{gap:4px}
.agree .ag+.ag,.agree .terms-read+.ag{border-top:.5px solid var(--sep)}
.terms-read{margin:-8px 0 8px 38px}
.terms-read>summary{list-style:none;display:inline-flex;align-items:center;min-height:36px;font:500 15px/20px var(--sans);color:var(--label);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.terms-read>summary::-webkit-details-marker{display:none}
.terms{display:flex;flex-direction:column;gap:12px;margin-top:6px;padding:14px 16px;border-radius:var(--r-field);background:var(--fill3)}
.terms .eyebrow{color:var(--label)}
.stmts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.stmts li{position:relative;padding-left:20px;font:300 13px/18px var(--sans);color:var(--label2)}
.stmts li::before{content:"";position:absolute;left:2px;top:3px;width:5px;height:9px;border:solid var(--label);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tdesc{margin:0;font:300 13px/18px var(--sans);color:var(--label2);white-space:pre-line}
.f.sig{padding-top:6px;border-top:.5px solid var(--sep)}
.f.sig>span{padding:8px 0 0}
.f.sig input{background:var(--fill3);box-shadow:none}
.paybar{position:sticky;bottom:0;z-index:4;margin:0 -16px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(rgba(242,242,247,0),var(--ground) 24px)}
.paybar .cta{box-shadow:0 8px 20px rgba(0,0,0,.18)}

/* booked, sent, gone */
.hero.ok{text-align:center;padding-top:24px}
.tick{width:64px;height:64px;margin:4px auto 16px;border-radius:50%;background:var(--tint);color:var(--on-tint);font:500 30px/64px var(--sans);text-align:center}
.next{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.next b{font:500 20px/25px var(--display);letter-spacing:.01em;text-transform:uppercase}
.next p{margin:0 0 10px;font:300 15px/20px var(--sans);color:var(--label2)}
.next+.list{margin-top:16px}
.friends{display:flex;flex-direction:column;align-items:center;gap:10px;margin:28px 16px 0;text-align:center}
.spin{width:36px;height:36px;margin:10px auto 18px;border-radius:50%;border:2px solid rgba(0,0,0,.1);border-top-color:var(--label);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* the invitation at the end of Home */
.love{margin:28px 16px 0;padding:28px 20px 20px;background:var(--card);border-radius:var(--r-group);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.love .lede{margin:0 0 14px}

/* prices */
.menu{margin:20px 16px 0;padding:0;background:var(--card);border-radius:var(--r-group);overflow:hidden}
.mrow{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 20px}
.mrow+.mrow::before{content:"";position:absolute;top:0;left:20px;right:0;height:.5px;background:var(--sep)}
.mrow span{display:flex;flex-direction:column;gap:2px}
.mrow b{font:300 17px/22px var(--sans)}.mrow small{font:300 15px/20px var(--sans);color:var(--label2)}
.mrow small:empty{display:none}
.mp{font:300 17px/22px var(--sans);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.msub{margin:0;padding:12px 20px 16px;border-top:.5px solid var(--sep);font:300 13px/18px var(--sans);color:var(--label2)}
.menu+p.center{margin-top:24px}
p.lede.center.pad{margin-top:20px}

/* photos, when he turns them on */
.cover{position:relative;height:68vh;min-height:460px;overflow:hidden;border-radius:0 0 32px 32px}
.cover.short{height:56vh;min-height:400px}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%)}
.cap{position:absolute;left:20px;right:20px;bottom:24px;display:flex;flex-direction:column;gap:8px;color:#fff}.cap .eyebrow{color:rgba(255,255,255,.85)}
.rail{display:flex;gap:12px;overflow-x:auto;padding:0 16px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.rail .port{flex:none;width:min(64vw,260px);scroll-snap-align:start}
.port{position:relative;display:block;border-radius:22px;overflow:hidden;background:#e5e5ea}
.port img{width:100%;aspect-ratio:3/4;object-fit:cover}
.port span{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6));color:#fff;display:flex;flex-direction:column;gap:2px}
.port b{font:500 17px/22px var(--sans)}.port small{font-size:13px;color:rgba(255,255,255,.85)}
.ports{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px 16px 0}
.pfw{margin-top:16px}.kr{position:absolute;opacity:0;pointer-events:none}
.tabs{display:flex;margin:0 16px;padding:2px;border-radius:var(--r-pill);background:var(--fill3)}
.tabs label{flex:1;text-align:center;padding:8px 6px;border-radius:var(--r-pill);font:300 13px/18px var(--sans);color:var(--label);cursor:pointer}
.kr-all:checked~.tabs label:nth-child(1),.kr-flash:checked~.tabs label[for$="-flash"],.kr-custom:checked~.tabs label[for$="-custom"],.kr-special:checked~.tabs label[for$="-special"]{background:#fff;font-weight:500;box-shadow:var(--shadow-knob)}
.tabs.airy{-webkit-mask-image:none;mask-image:none;padding:2px}
.tabs.airy label::before{content:none!important}
.hint{padding:12px 20px 0}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:14px 16px 0;border-radius:20px;overflow:hidden}
.ph{display:block;background:#e5e5ea;overflow:hidden}.ph img{width:100%;aspect-ratio:3/4;object-fit:cover}
.kr-flash:checked~.mosaic .ph:not(.k-flash),.kr-custom:checked~.mosaic .ph:not(.k-custom),.kr-special:checked~.mosaic .ph:not(.k-special){display:none}
.lb{display:none;position:fixed;inset:0;z-index:20;background:rgba(242,242,247,.94);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);flex-direction:column;align-items:center;justify-content:center;padding:20px}
.lb:target{display:flex}.lb img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:16px}.lb p{color:var(--label2);font-size:15px;margin:16px 0 0;text-align:center}
.lbx{position:absolute;top:calc(12px + env(safe-area-inset-top));right:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--glass);box-shadow:var(--shadow-glass);font:300 30px/1 var(--sans);color:var(--label)}

/* the bottom bar: one floating Liquid Glass capsule (iOS 27), the open tab in a soft lens */
.homepill{position:fixed;left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));z-index:15;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 6px 20px rgba(0,0,0,.12),0 0 0 .5px var(--line,rgba(0,0,0,.1));color:var(--label,#111)}.homepill svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.dock{position:fixed;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom));z-index:15;width:calc(100% - 32px);max-width:420px;margin:0 auto;display:flex;gap:2px;padding:4px;border-radius:var(--r-pill);
  background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));box-shadow:var(--shadow-glass)}
.dock a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;border-radius:var(--r-pill);color:var(--label2);font:300 10px/12px var(--sans)}
.dock a.on{color:var(--label);background:var(--fill3);font-weight:500}
.dock svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* the footer: the address and one way to reach us */
footer{display:flex;flex-direction:column;align-items:center;gap:2px;margin:40px 16px 0;text-align:center}
footer a{display:inline-flex;align-items:center;min-height:44px;font:500 15px/20px var(--sans)}

/* /studio, his switches */
.form.switches{gap:0;padding:0 20px;background:var(--card);border-radius:var(--r-group)}
.sw{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:10px 0;border-bottom:.5px solid var(--sep);cursor:pointer}
.sw span{font-size:17px}.sw input{position:absolute;opacity:0;pointer-events:none}
.sw i{flex:none;width:51px;height:31px;border-radius:var(--r-pill);background:var(--fill);position:relative;transition:background .2s}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:var(--shadow-knob);transition:transform .2s}
.sw input:checked+i{background:#34c759}.sw input:checked+i::after{transform:translateX(20px)}
.switches .btn{margin:20px 0}
.notebtn{position:fixed;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:16;padding:12px 18px;border-radius:var(--r-pill);background:#000;color:#fff;font:500 14px/1 var(--sans);box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* one question a slide on the sign-in (his Oct 18 ask, kept 2026-10-19): share.js marks the form .slides */
.slides .two{display:block}
.slides label.f{display:none}
.slides label.f.cur{display:flex}
.slides label.f.cur input{font-size:22px;line-height:28px;padding:16px 18px}
.slides label.f.in{animation:slidein .42s cubic-bezier(.2,.8,.2,1) both}
.slides label.f.out{animation:floataway .32s ease-in forwards}
.slides label.f.outback{animation:floatdown .32s ease-in forwards}
.slides label.f.inback{animation:slideinback .42s cubic-bezier(.2,.8,.2,1) both}
/* the number is being looked up (2026-10-20): the box rests a moment */
.slides.asking label.f.cur{opacity:.55;transition:opacity .2s}
.slideback{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 -4px;padding:0;border:0;border-radius:50%;background:var(--glass);box-shadow:var(--shadow-glass);font:300 26px/1 var(--sans);color:var(--label);cursor:pointer}
.slideback[hidden]{display:none}
@keyframes slidein{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes floataway{to{opacity:0;transform:translateX(-48px)}}
@keyframes floatdown{to{opacity:0;transform:translateX(48px)}}
@keyframes slideinback{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
/* a step page arrives sliding in, and floats away when sent */
main:has(form.qform),main:has(form[action="/login"]),main:has(form[action="/start"]){animation:slidein .4s cubic-bezier(.2,.8,.2,1) both}
body.leaving main{animation:floataway .3s ease-in forwards!important}

@media (min-width:700px){.mosaic{grid-template-columns:repeat(4,1fr)}.ports{grid-template-columns:repeat(3,1fr)}.airy.times{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.splash,.intro,.head,.hero,.gcard,.gcard::after,.spin,.slides label.f,main,body.leaving main{animation:none!important}.btn,.cta{transition:none}}
@media (prefers-reduced-transparency:reduce){.dock,.nav .lang,.nav .back,main>.back,.slideback,.lbx{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Tell Arthur (2026-10-19): his mic, only while signed in to /studio, and its sheet */
.notebtn{padding:0;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.78);color:#000;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 4px 16px rgba(0,0,0,.14),inset 0 0 0 .5px rgba(0,0,0,.1)}.notebtn svg{width:22px;height:22px}
.tellsheet{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;max-width:560px;margin:0 auto;padding:16px;border-radius:26px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 12px 40px rgba(0,0,0,.22)}
.tellsheet h3{margin:0 0 10px;font:500 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#6e6e73}.tellsheet textarea{width:100%;box-sizing:border-box;border:0;border-radius:14px;padding:12px;font:17px/1.35 var(--sans);background:rgba(118,118,128,.12);color:#000;resize:none}
.tellst{margin:8px 2px 12px;font-size:13px;color:#6e6e73}.tellrow{display:flex;gap:8px}.tellrow>*{flex:1;min-height:44px;border-radius:999px;border:0;font:500 15px var(--sans);display:grid;place-items:center}
.tellx,.tellatt{background:rgba(118,118,128,.14);color:#000}.tellatt{position:relative;overflow:hidden}.tellatt input{position:absolute;inset:0;opacity:0}.tellgo{background:#000;color:#fff}
/* voice memos (2026-10-21, his pick "Record button"): the mic turns red while it records, the time with Cancel and Type in a pill beside it */
.notebtn.rec{background:#ff3b30;color:#fff;animation:recpulse 1.6s ease-out infinite}
@keyframes recpulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.45)}70%{box-shadow:0 0 0 14px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
.recpill{position:fixed;right:76px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:17;display:flex;align-items:center;gap:8px;min-height:48px;box-sizing:border-box;max-width:calc(100vw - 92px);padding:6px 6px 6px 14px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 4px 16px rgba(0,0,0,.14),inset 0 0 0 .5px rgba(0,0,0,.1);font:500 14px/1 var(--sans);color:#000}
.recdot{flex:none;width:8px;height:8px;border-radius:50%;background:#ff3b30}.rectime{min-width:36px;font:400 15px/1 var(--sans);font-variant-numeric:tabular-nums}
.recpill button{flex:none;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:rgba(118,118,128,.14);color:#000;font:500 14px var(--sans)}.recmsg{padding:0 4px;font-size:13px;line-height:1.3;color:#3a3a3c}
@media (prefers-reduced-motion:reduce){.notebtn.rec{animation:none}}

/* 2026-10-19, his words "All labels must be centered and thin type font": every form label centered and light; the welcome on the sign-in */
.form label.f, .form .f{align-items:center;text-align:center}
.form .eyebrow, .form label.f .eyebrow, .terms .eyebrow{text-align:center;font-weight:300;letter-spacing:.04em;display:block;width:100%}
.form label.f input:not([type=checkbox]):not([type=radio]):not([type=file]){text-align:center}
.splash.signin .welcome{margin:0;text-align:center;font:300 15px/20px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--label2)}
.splash.signin .welcome.tp{margin:6px 0 26px}
/* The pay screen as an Apple Pay sheet (2026-10-19, his screenshot of Apple Pay: "I want my cards and things to look more like
   this"): a dark sheet rising over the page, what it is and the amount big on top, their own card in the middle, the visit and
   their details as grouped rows, the ticks with the accept last, the total and one white button pinned at the bottom */
.paysheet{margin:6px 0 0;padding:28px 14px 6px;border-radius:34px;background:#1c1c1e;color:#fff;box-shadow:0 -6px 40px rgba(0,0,0,.16);animation:sheetup .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes sheetup{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
.pslabel{margin:0;text-align:center;font:300 17px/22px var(--sans);color:rgba(235,235,245,.6)}
.psamt{margin:2px 0 0;text-align:center;font:300 52px/1.1 var(--sans);letter-spacing:0;font-variant-numeric:tabular-nums;color:#fff}
.pscard{margin:20px auto 0;width:min(250px,66%)}
.pscard .gcard{margin:0;width:100%;max-width:none;border-radius:14px;padding:12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.pscard .gtop img{height:28px;margin:-6px 0 0 -6px}.pscard .gpan{font-size:10px;letter-spacing:.06em}.pscard .gb{gap:5px}.pscard .gn{font-size:27px}.pscard .gt{font-size:9px;letter-spacing:.16em}
.pschip{display:table;margin:16px auto 0;padding:7px 14px;border-radius:999px;background:#3a3a3c;color:rgba(235,235,245,.78);font:300 14px/18px var(--sans);text-align:center}
.psgroup{margin:18px 0 0;padding:0 16px;border-radius:22px;background:#2c2c2e}
.psrow{display:flex;gap:14px;align-items:center;padding:14px 0}
.psrow+.psrow{border-top:.5px solid rgba(84,84,88,.65)}
.psic{flex:none;width:40px;height:40px;border-radius:50%;background:#3a3a3c;display:flex;align-items:center;justify-content:center}
.psic svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pst{display:flex;flex-direction:column;min-width:0}
.pst small{font:300 13px/18px var(--sans);color:rgba(235,235,245,.6)}
.pst b{font:300 17px/22px var(--sans);color:#fff;overflow-wrap:anywhere}
.pst em{font:300 15px/20px var(--sans);font-style:normal;color:rgba(235,235,245,.6);overflow-wrap:anywhere}
.paysheet .held{margin:14px 0 0;text-align:center;font:500 15px/20px var(--sans);color:#fff}
/* two times (2026-10-21): the held line under the two, centered */
.taps.pair~.held{margin:14px 16px 0;text-align:center;font:500 15px/20px var(--sans);color:var(--label)}
.paysheet form.final{margin:0;gap:14px}
.paysheet .psgroup.agree{padding:4px 16px;gap:0;display:flex;flex-direction:column}
.paysheet .ag span{color:#fff}.paysheet .ag small{color:rgba(235,235,245,.6)}
.paysheet .ag i{box-shadow:inset 0 0 0 1.5px rgba(235,235,245,.4)}
.paysheet .ag input:checked+i{background:#fff}.paysheet .ag input:checked+i::after{border-color:#000}
.paysheet .ag input:focus-visible+i{outline-color:#fff}
.paysheet .agree .ag+.ag,.paysheet .agree .terms-read+.ag,.paysheet .agree .f.sig+.ag,.paysheet .f.sig{border-top:.5px solid rgba(84,84,88,.65)}
.paysheet .agree>.f.sig:first-child{border-top:0}
.paysheet .f.sig>span{color:rgba(235,235,245,.6)}
.paysheet .f.sig input{background:#3a3a3c;color:#fff;box-shadow:none}
.paysheet .f.sig input:focus{box-shadow:inset 0 0 0 1.5px #fff}
.paysheet .terms-read>summary{color:#fff}
.paysheet .terms{background:#3a3a3c;color:rgba(235,235,245,.8)}.paysheet .terms .eyebrow{color:#fff}
.paysheet .note{text-align:center;color:rgba(235,235,245,.6)}
.paysheet .qerr{color:#ff453a;text-align:center}
.paysheet .paybar{margin:0 -14px;padding:12px 14px calc(14px + env(safe-area-inset-bottom));border-radius:0 0 34px 34px;background:linear-gradient(rgba(28,28,30,0),#1c1c1e 22px)}
.paysheet .paybar .cta{background:#fff;color:#000;box-shadow:none}
.pstotal{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 12px;font:300 17px/22px var(--sans);color:rgba(235,235,245,.6)}
.pstotal b{font:500 17px/22px var(--sans);color:#fff;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.paysheet{animation:none}}
/* What would you like to book: step 1 of the booking form (2026-10-19, his words "schedule tattoo / Schedule piercing
   should go to new booking form"), each kind of visit one big tap like the form's own answers */
.taps.kinds{margin:20px 16px 0}
h2+.taps.kinds{margin-top:8px}
a.tap{text-decoration:none;justify-content:space-between;gap:12px;min-height:64px}
a.tap span{display:flex;flex-direction:column;gap:2px;min-width:0}
a.tap b{font:500 17px/22px var(--sans)}
a.tap small{font:300 13px/18px var(--sans);color:var(--label2)}
a.tap:active small{color:inherit;opacity:.8}
a.tap:active .chev{border-color:currentColor}
/* the old box floats away over the new one, which is already in place (2026-10-19) */
.slides{position:relative}
.slides label.f.out,.slides label.f.outback{position:absolute;left:0;right:0;pointer-events:none}
/* Check in up top (2026-10-19, his words "Check in should be a button up top"): a glass capsule, top right of Home */
.topcheck{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:5;display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.08);font:500 13px/1 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:#000;text-decoration:none}
/* The questions as Apple rows (2026-10-19, his words "This looks cheap af" of the gray pills): each answer a full-width row
   with a hairline above it and a round check on the right, a long answer's brackets as a quiet second line, the medical
   list folded behind "Something to tell us" with None on top */
.qcard{padding:18px 0 0;gap:0;overflow:hidden}
.qcard>.qh,.qcard>.qsub{padding:0 20px}
.qcard>.qsub{margin:2px 0 0}
.qcard>.qin{margin:12px 20px 20px;width:auto}
.qcard .picks{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;margin-top:10px}
.qcard .pick{display:block}
.qcard .pick>span{position:relative;display:flex;align-items:center;min-height:52px;padding:12px 60px 12px 20px;border-radius:0;background:none;box-shadow:none;font:300 17px/22px var(--sans);color:var(--label);text-align:left}
.qcard .pick>span::before,details.more>summary::before{content:"";position:absolute;left:20px;right:0;top:0;border-top:.5px solid var(--sep)}
.qcard .pick>span::after{content:"";position:absolute;right:20px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(60,60,67,.3);transition:background .15s}
.qcard .pick input:checked+span{background:none;color:var(--label);font-weight:500}
.qcard .pick input:checked+span::after{background:var(--tint);box-shadow:none}
.qcard .pick input:checked+span .ol::after{content:"";position:absolute;right:29px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid var(--on-tint);border-width:0 2px 2px 0;transform:rotate(45deg)}
.qcard .pick:active>span{background:var(--fill3)}
.qcard .pick input:focus-visible+span{outline:none;background:var(--fill3)}
.ol{display:flex;flex-direction:column;gap:2px;font-style:normal}
.ol small{font:300 13px/18px var(--sans);color:var(--label2)}
details.more>summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:center;min-height:52px;padding:12px 60px 12px 20px;font:300 17px/22px var(--sans);color:var(--label)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"";position:absolute;right:28px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--label3);border-top:2px solid var(--label3);transform:rotate(135deg);transition:transform .2s}
details.more[open]>summary::after{transform:rotate(-45deg);margin-top:-2px}
details.more .picks{margin-top:0}
details.more .pick>span{padding-left:36px}
details.more .pick>span::before{left:36px}
.qcard .pick .ol,details.more>summary .ol{min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;display:flex;font:inherit;color:inherit}
/* a page sliding in never widens the page sideways (2026-10-19) */
html,body{overflow-x:clip}
details.more{margin:0}
.qcard .pick .ol,details.more>summary .ol{align-items:flex-start;text-align:left}
.qcard .pick input:checked+span .ol::after{z-index:1}
/* step 5 extras (2026-10-20): the aftercare kit row and the code box */
.xtra .psrow{align-items:center}.xbtn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:#fff;font-size:18px;line-height:1;color:#000}.xbtn.on{background:#000;color:#fff;border-color:#000}
.xlink{background:none;border:0;font:inherit;font-size:13px;text-decoration:underline;color:inherit;opacity:.7}
.xcode{margin:10px 0}.xcode summary{cursor:pointer;font-size:14px;text-align:center;opacity:.75;list-style:none}.xcode summary::-webkit-details-marker{display:none}.xcrow{display:flex;gap:8px;margin-top:8px}.xcrow input{flex:1;text-transform:uppercase}

/* ---------- his walkthrough of Book (2026-10-20, handoff/book-amendments-2026-10-20.md) ----------
   Josefin Sans for everything, in capitals: TEXT thin 300, HEADINGS medium 500, NUMBERS regular 400 (thick 700 until 2026-10-21, his words "I hate the numbers font / Thinner version of the fat numbers") (the server wraps every run of
   digits in b.num; the card number and Member since on the card stay thin). Letter spacing stays modest for Josefin's capitals. */
/* the card, bigger, with their name on it and Member since top right */
.gcard{width:calc(100% - 24px);max-width:420px;padding:20px 22px 22px;border-radius:22px}
.gtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.gtop img{height:52px}
.gsince{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding-top:2px;font:300 12px/14px var(--jo);letter-spacing:.04em;text-align:right}
.gsince small{font:300 9px/11px var(--jo);letter-spacing:.06em;opacity:.78}
.gcard.member .gsince{color:#efe6cf}
.pscard .gsince{font-size:8px;line-height:10px;gap:2px}.pscard .gsince small{font-size:6px;line-height:8px}
.gn.long{font-size:min(32px,7.8vw)}.gn.xlong{font-size:min(25px,6.1vw);white-space:nowrap}
.pscard .gn.long{font-size:20px}.pscard .gn.xlong{font-size:15px}
/* satin black pills with a thin gold edge (his pick "Le Havre, satin black"; Josefin Sans since 2026-10-20), like the Circle's */
.btn.satin{min-height:62px;background:var(--satin-black);color:#f6f0e2;font:500 19px/23px var(--jo);letter-spacing:.01em;
  box-shadow:inset 0 0 0 1px rgba(227,207,156,.5),inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.16)}
.btn.satin:active{transform:scale(.985);opacity:1;box-shadow:inset 0 0 0 1px rgba(227,207,156,.65),0 4px 12px rgba(0,0,0,.14)}
.sched.under{width:calc(100% - 24px);max-width:420px;gap:12px;margin-top:20px}
.textm{margin:32px auto 0;padding:0 12px;max-width:444px}
.btn.satin.big{min-height:78px;font-size:27px;line-height:30px}
/* Daily deals: one row that opens, a shimmering gold sticker on its right */
details.deals{margin:28px 16px 0;background:var(--card);border-radius:var(--r-group);overflow:hidden}
details.deals>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 20px;cursor:pointer}
details.deals>summary::-webkit-details-marker{display:none}
details.deals .dt{flex:1;font:500 17px/22px var(--jo);letter-spacing:.02em}
.sticker{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--satin-gold);color:#2a1f0a;font:500 13px/1 var(--jo);font-style:normal;letter-spacing:.02em;box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.6)}
.sticker::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 65%);background-size:250% 100%;background-position:130% 0;animation:sheen 3.2s ease-in-out .6s infinite}
details.deals>summary .chev{transform:rotate(135deg);transition:transform .2s}
details.deals[open]>summary .chev{transform:rotate(-45deg)}
details.deals .dsub{padding:0 20px 10px}
details.deals .tickets{margin:0;padding:0 12px 12px}
details.deals .ticket{background:var(--ground)}
/* check in: Pick for me, then each artist; a whole row books, the Lookbook pill opens their portfolio */
.row.ck{padding-right:16px}
.ckgo{flex:1;min-width:0;display:flex;align-items:center}
.ckgo::after{content:"";position:absolute;inset:0}
.ckgo>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pickme .ckgo b{font-weight:500}
.lookbook{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(168,135,63,.7);color:#6e531c;font:500 12px/1 var(--jo);letter-spacing:.04em}
.row.ck .chev{pointer-events:none}
/* Your details: the email on file as one quiet row with Change, then the birthday */
details.efile{position:relative}
details.efile>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 20px 8px;cursor:pointer}
details.efile>summary::-webkit-details-marker{display:none}
details.efile>summary>span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
details.efile small{font:300 13px/18px var(--jo);letter-spacing:.04em;color:var(--label2)}
details.efile b{font:300 17px/22px var(--jo);overflow-wrap:anywhere}
details.efile i{font:500 13px/18px var(--jo);font-style:normal;letter-spacing:.04em}
details.efile[open]>summary{display:none}
.fields .f+details.efile::before,.fields details.efile+.f::before{content:"";position:absolute;top:0;left:20px;right:0;height:.5px;background:var(--sep)}
.fields details.efile+.f{position:relative}
.f.bad>input{color:var(--red)}
/* the birthday wheel (2026-10-21, his words "Modernize the date wheel using the numbers from my font selected for Text"):
   share.js draws Apple's wheel over the hidden date box, in Josefin Sans. Five rows of 44, each column snapping to the middle
   row on a soft gray band; the middle row full black at 400 (his numbers weight since 2026-10-21, "Thinner version of the fat
   numbers"), the others thin 300 in gray, fading out above and below. A missing birthday puts a red edge on the wheel. */
.wheel{position:relative;display:flex;gap:2px;height:220px;margin:6px -8px 4px;border-radius:var(--r-field);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.wheel::before{content:"";position:absolute;left:0;right:0;top:88px;height:44px;border-radius:12px;background:var(--fill3);pointer-events:none}
.wcol{position:relative;flex:1 1 0;min-width:0;height:100%;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none;border-radius:12px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,#000 37%,#000 63%,rgba(0,0,0,.1) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,#000 37%,#000 63%,rgba(0,0,0,.1) 100%)}
.wcol::-webkit-scrollbar{display:none}
.wcol-m{flex-grow:1.3}.wcol-d{flex-grow:.8}
.wcol:focus-visible{box-shadow:inset 0 0 0 1.5px var(--label)}
.wsp{height:88px}
.wrow{display:flex;align-items:center;justify-content:center;height:44px;padding-top:3px;scroll-snap-align:center;font:300 21px/1 var(--jo);letter-spacing:.02em;font-variant-numeric:tabular-nums lining-nums;text-transform:uppercase;white-space:nowrap;color:var(--label2);cursor:pointer;transition:color .15s}
.wrow.on{font-weight:400;color:var(--label)}
.wrow.off{color:var(--label3)}
.f.bad .wheel{box-shadow:inset 0 0 0 1.5px var(--red)}
.fields .f.haswheel{padding-bottom:12px}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.wrow{animation:wtilt linear both;animation-timeline:view()}}}
@keyframes wtilt{0%{transform:perspective(300px) rotateX(-40deg) scale(.94)}50%{transform:none}100%{transform:perspective(300px) rotateX(40deg) scale(.94)}}
@media (prefers-reduced-motion:reduce){.wrow{transition:none}}
/* the pay step: his logo on top, the visit in capitals, the kit as one centered row with a red dot and an arrow */
.pslogo{display:block;height:84px;width:auto;margin:-6px auto 2px;filter:brightness(0) invert(1)}
.psamt.free{font:300 22px/28px var(--jo)}
.kitrow{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:76px;margin:18px 0 0;padding:14px 48px;border:0;border-radius:22px;background:#2c2c2e;color:#fff;cursor:pointer;text-align:center}
.kitrow .kdot{position:absolute;left:22px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 4px rgba(255,59,48,.2)}
.kitrow .kt{display:flex;flex-direction:column;align-items:center;gap:5px}
.kitrow b{font:500 18px/23px var(--jo);letter-spacing:.02em;color:#fff}
.kitrow small{font:300 15px/20px var(--jo);color:rgba(235,235,245,.72)}
.kitrow .chev{position:absolute;right:24px;top:50%;margin-top:-5px;border-color:rgba(235,235,245,.55)}
.kitrow.on .kdot{background:#30d158;box-shadow:0 0 0 4px rgba(48,209,88,.22)}
.kitrow:active{transform:scale(.99)}
/* the terms in a box, read to the end before the accept tick opens; then the finger signature */
.ag input:disabled+i{opacity:.35}.ag input:disabled~span{opacity:.45}
.sigpad{display:none;margin:12px 0 6px}
.sigpad.on{display:block}
.sighead{margin:0 0 8px;font:300 13px/18px var(--jo);letter-spacing:.04em;color:rgba(235,235,245,.75);text-align:center}
.sigbox{position:relative;height:150px;border-radius:16px;background:#fff;overflow:hidden}
.sigbox::after{content:"";position:absolute;left:18px;right:18px;bottom:36px;border-bottom:1px solid rgba(0,0,0,.18);pointer-events:none}
.sigbox::before{content:"\00d7";position:absolute;left:18px;bottom:40px;font:300 18px/1 var(--jo);color:rgba(0,0,0,.35);pointer-events:none}
.sigcv{position:absolute;inset:0;display:block;touch-action:none;z-index:1}
.sigok{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font:500 15px/1 var(--jo);color:#1c1c1e}
.sigpad.signed .sigok{display:flex}
.sigclear{display:block;margin:8px auto 0;min-height:36px;padding:0 14px;border:0;background:none;color:rgba(235,235,245,.85);font:500 13px/1 var(--jo);letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sigpad:not(.inked):not(.signed) .sigclear{visibility:hidden}
.sigpad.bad .sigbox{box-shadow:0 0 0 2px #ff453a}
.signeed{margin:8px 0 0;text-align:center;color:#ff453a;font:500 14px/18px var(--jo)}
.paysheet .agree>.uterms:first-child{margin-top:14px}
/* after booking: two small upload buttons, what came in said once, nothing shown back */
.ups .upbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0 4px}
.up{margin:0;display:flex;flex-direction:column;align-items:center}
.upbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--satin-black);color:#f6f0e2;box-shadow:inset 0 0 0 1px rgba(227,207,156,.5);font:500 14px/1 var(--jo);letter-spacing:.02em;cursor:pointer;overflow:hidden}
.upbtn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.up.has .upbtn{background:#fff;color:#111;box-shadow:inset 0 0 0 1px #111}
.up.busy .upbtn{opacity:.6;pointer-events:none}
.upsend{margin:8px 0 0;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--fill3);font:500 13px/1 var(--jo);cursor:pointer}
.up.js .upsend{display:none}
.upstat{margin:8px 0 0;font:300 15px/20px var(--jo)}
.upstat:empty{display:none}
.okmark{color:#248a3d;font-weight:500;margin-right:4px}
.upnote{margin:4px 0 0;font:300 14px/18px var(--jo);color:var(--red)}
.upnote:empty{display:none}
.uppaused{margin:6px 0 0}
@media (prefers-reduced-motion:reduce){.sticker::after{animation:none}}
/* numbers regular 400, the same size as the words around them (never bigger, so lines never jump) */
b.num{all:unset!important;font-weight:400!important;letter-spacing:0!important}
/* words and numbers together stay one run of text inside flex buttons and rows (the server's span.t) */
span.t{all:unset!important}

/* no Next to press (2026-10-20): share.js hides it on screens that go on by themselves */
.qform.nobtn .cta{display:none}
/* Request a Touch-up (2026-10-20) */
.tuidx{margin-top:10px}.tuday{margin:16px 16px 0}.tutimes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.tutimes form{margin:0}.tutime{width:100%;min-height:50px;border:0;border-radius:999px;background:#111;color:#fff;font:500 16px/20px var(--display,inherit);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.tutime:active{transform:scale(.98)}
/* See availability (2026-10-20): a glass capsule floating above the dock on every browsing page */
.availbtn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:14;display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 8px 24px rgba(0,0,0,.18);font:500 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap}
.row.avail .ckgo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.availgo{flex:none;font:500 12px/1 var(--sans);font-style:normal;letter-spacing:.04em;text-transform:uppercase;padding:9px 14px;border-radius:999px;background:var(--fill3,#eee);color:#000}
.availgo.now{background:#000;color:#fff}
@media (prefers-reduced-transparency:reduce){.availbtn{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- motion polish (2026-10-21): tokens + a calm Apple layer, CSS only ----------
   Three durations, two easings, used everywhere below. Everything new sits inside the
   no-preference guard, so Reduce Motion shows the same states with no movement. */
:root{--m-fast:.16s;--m-med:.34s;--m-slow:.56s;--ease-out:cubic-bezier(.32,.72,0,1);--ease-settle:cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:no-preference){
  /* gentle press on taps, pills and small buttons (.btn and .cta already press) */
  .tap,.pick span,.airy.times>a,.airy.dates>a b,.mbtn,.upbtn,.lookbook,.availgo,.topcheck,.xbtn{transition:transform var(--m-fast) var(--ease-out),background-color var(--m-fast) var(--ease-out),color var(--m-fast) var(--ease-out)}
  .tap:active,.airy.times>a:active,.mbtn:active,.upbtn:active,.lookbook:active,.availgo:active,.topcheck:active,.xbtn:active{transform:scale(.97)}
  .pick:active span,.airy.dates>a:active b{transform:scale(.96)}
  /* soft rise where content groups appear, a beat after the title */
  .list,.index,.card,.cal,.menu,.tickets,.taps.kinds,.love,details.bday,details.deals{animation:rise var(--m-med) .06s var(--ease-settle) both}
  .sched{animation:rise var(--m-med) .12s var(--ease-settle) both}
  /* a step page already slides in as one, so its children stay still */
  main:has(form.qform) :is(.list,.index,.card,.cal,.menu,.tickets,.taps.kinds,.sched){animation:none}
  /* the member card settles in once: the same rise, with a touch of scale */
  .gcard{animation-name:cardsettle;animation-timing-function:var(--ease-settle)}
  @keyframes cardsettle{from{opacity:0;transform:translateY(14px) scale(.97)}}
  .pscard .gcard{animation:none}
  /* folds open softly instead of jumping */
  details.bday[open] .form,details.deals[open] .dsub,details.deals[open] .tickets,details.more[open] .picks,.moreoffers[open] .index,details.efile[open]>*:not(summary),.terms-read[open] .terms,.xcode[open] .xcrow{animation:fold var(--m-med) var(--ease-settle)}
  @keyframes fold{from{opacity:0;transform:translateY(-4px)}}
  /* state changes that used to jump: ticks, answer rows, the kit dot */
  .ag i{transition:background-color var(--m-fast) var(--ease-out),box-shadow var(--m-fast) var(--ease-out)}
  .ag input:checked+i::after{animation:checkpop var(--m-med) var(--ease-settle)}
  @keyframes checkpop{from{opacity:0;transform:rotate(45deg) scale(.5)}to{transform:rotate(45deg)}}
  .qcard .pick input:checked+span .ol::after{animation:checkpop var(--m-med) var(--ease-settle)}
  .qcard .pick>span,.tabs label{transition:background-color var(--m-fast) var(--ease-out),color var(--m-fast) var(--ease-out)}
  .kitrow .kdot{transition:background-color var(--m-fast) var(--ease-out),box-shadow var(--m-fast) var(--ease-out)}
}

/* Add friend or family + the quiet aftercare switch (2026-10-21) */
.kitrow{justify-content:space-between;min-height:58px;padding:12px 84px 12px 18px;background:#1c1c1e}.kitrow .kdot{display:none}.kitrow .kt{flex-direction:row;align-items:baseline;gap:10px}.kitrow b{font:300 17px/22px var(--jo)}.kitrow small{font:300 15px/20px var(--jo)}.kitrow .chev{display:none}
.kitrow::after{content:"";position:absolute;right:18px;top:50%;width:50px;height:30px;margin-top:-15px;border-radius:15px;background:#48484a;transition:background .2s}.kitrow::before{content:"";position:absolute;right:40px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:#fff;z-index:1;transition:transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.3)}.kitrow.on::after{background:#30d158}.kitrow.on::before{transform:translateX(20px)}
.xfriends{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:14px 18px;border-radius:22px;background:#1c1c1e;color:#fff;text-decoration:none}.xfriends .pst{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left}.xfriends b{font:300 17px/22px var(--jo)}.xfriends em{font:300 14px/18px var(--jo);font-style:normal;color:rgba(235,235,245,.72)}.xfriends.on b{color:#30d158}.xfriends .chev{border-color:rgba(235,235,245,.55)}
.friendsform .frow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 16px 10px}.friendsform .quiet.wide{display:block;width:calc(100% - 32px);margin:10px 16px 0;text-align:center}
/* Five steps to checkout (2026-10-21, his picks): what to book on Home as four buttons with Walk-in and Consultation as
   small links; the size, people, piercing and artist as airy chip rows on the time screen; what is on file as one line;
   Agree and pay in the page under the terms and the signature, never pinned over them */
.sched.under.four{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sched.four .btn.satin{padding:0 10px;font-size:18px;line-height:21px}
.schedmore{margin:12px 0 0;text-align:center}
.schedmore .quiet{font-weight:300}
.schedmore .dot{margin:0 10px;color:var(--label3)}
.opts{margin:14px 0 0}
.opts .airy.chips{padding-top:0;padding-bottom:0}
.chipsub{margin:0 20px 6px;text-align:center;font:300 13px/18px var(--sans);color:var(--label2)}
details.efile em{font:300 15px/20px var(--jo);font-style:normal;color:var(--label2);overflow-wrap:anywhere}
.paybar,.paysheet .paybar{position:static;background:none}
.pschange{flex:none;margin-left:auto;min-height:44px;display:inline-flex;align-items:center;font:500 13px/18px var(--sans);letter-spacing:.04em;color:#fff}
/* the deposit as a breakdown above Total today (2026-10-21, his pick "A. Breakdown") */
.depsplit{margin:4px 4px 14px;padding:10px 14px 12px;border-radius:16px;background:rgba(118,118,128,.12)}
.dsrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:6px 0;font:300 15px/20px var(--sans)}
.dsrow span{display:flex;flex-direction:column;gap:2px}.dsrow small{font-size:12px;line-height:16px;opacity:.7}
.dsrow b{font:500 15px/20px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.dsrow.dstot{margin-top:4px;padding-top:10px;border-top:.5px solid rgba(84,84,88,.35)}
.dsnote{margin:8px 0 0;font:300 13px/18px var(--sans);opacity:.7}
.paysheet .depsplit{background:#2c2c2e;color:#fff}.paysheet .dsrow small,.paysheet .dsnote{color:rgba(235,235,245,.6);opacity:1}
.paysheet .dsrow.dstot{border-top-color:rgba(84,84,88,.65)}
/* The UPLIFT terms, open on every booking (2026-10-21 night, his pick Q2 "A. Everyone, all of it"): the whole text in the page,
   no box to scroll; the English to tap open under another language; a parent or guardian signs too for a 13 to 17 piercing */
.uterms{margin:14px 0 4px;padding:16px;border-radius:16px;background:rgba(118,118,128,.12);display:flex;flex-direction:column;gap:10px}
.uterms .eyebrow{text-align:center}
.uterms .tintro,.uterms .tclose,.uterms .tcounts,.uterms .tfor{margin:0;font:300 14px/20px var(--jo);letter-spacing:.02em;color:var(--label2)}
.uterms .tclose{color:var(--label)}
.tlines{margin:0;padding:0 0 0 24px;display:flex;flex-direction:column;gap:10px;font:300 14px/20px var(--jo);letter-spacing:.02em;color:var(--label2)}
.tlines li::marker{font-weight:500}
.tlines b{font-weight:500;color:var(--label)}
.uterms .stmts li{font:300 14px/20px var(--jo);letter-spacing:.02em}
.ten summary{display:flex;align-items:center;min-height:44px;font:500 13px/18px var(--sans);letter-spacing:.04em;color:var(--label);cursor:pointer;list-style:none}
.ten summary::-webkit-details-marker{display:none}
.ten summary::after{content:"";width:7px;height:7px;margin-left:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px)}
.ten[open] summary::after{transform:rotate(225deg)}
.ten>div{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.guard{margin:10px 0 0;padding-top:12px;border-top:.5px solid var(--sep)}
.guard .gsub{margin:6px 0 4px;font:300 13px/18px var(--jo);color:var(--label2)}
.paysheet .uterms{background:#3a3a3c}
.paysheet .uterms .eyebrow,.paysheet .uterms .tclose,.paysheet .tlines b,.paysheet .ten summary{color:#fff}
.paysheet .uterms .tintro,.paysheet .uterms .tcounts,.paysheet .uterms .tfor,.paysheet .tlines,.paysheet .uterms .stmts li{color:rgba(235,235,245,.88)}
.paysheet .uterms .stmts li::before{border-color:#fff}
.paysheet .guard{border-top-color:rgba(84,84,88,.65)}
.paysheet .guard .eyebrow{color:#fff}
.paysheet .guard .gsub{color:rgba(235,235,245,.6)}
.gjoin .uterms,.gjoin .ag,.gjoin .f,.gjoin .sigpad{text-align:left}
.defgo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- the Circle's look on every screen (2026-10-21 night, the one-app build; his Q2 "Every screen": "Obsidian with the
   gold edge, the client's card on top, everything as cards, from sign-in to paying"). The Circle's own components come from
   /s/look.css (its stylesheet, scoped under .cl); here Book's own screens take the Circle's white ground, hairline cards and
   satin black buttons with the thin gold edge. */
:root{--ground:#ffffff;--hair:rgba(17,17,17,.10)}
html,body{background:#fff}
.list,.index,.card,.ticket,details.bday,.cal,.fields,.qcard,.tap,.love,.menu,.form.switches,details.deals{box-shadow:inset 0 0 0 1px var(--hair),0 1px 2px rgba(0,0,0,.03)}
.airy.times>a,.pick span{box-shadow:inset 0 0 0 1px var(--hair)}
.f input,.f textarea,.f select,.qin{box-shadow:inset 0 0 0 1px rgba(17,17,17,.14)}
.f input:focus,.f textarea:focus,.qin:focus{box-shadow:inset 0 0 0 1.5px #111}
.f.bad input,.f.bad textarea{box-shadow:inset 0 0 0 1.5px var(--red)}
.paybar{background:linear-gradient(rgba(255,255,255,0),#fff 24px)}
details.deals .ticket{background:#f6f6f4}
.btn:not(.ghost):not(.white):not(.satin),.cta:not(.alt){background:var(--satin-black);color:#f6f0e2;box-shadow:inset 0 0 0 1px rgba(227,207,156,.5),inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.14)}
.btn.ghost,.cta.alt,.btn.white{background:#fff;color:#111;box-shadow:inset 0 0 0 1px #111}
/* one button type, the Circle's (the Artist): satin and outline alike, Josefin 600 13px, wide caps, 54px; his big TEXT MAKSIM stays big */
.btn:not(.big),.cta,.btn.satin:not(.big),.sched.four .btn.satin{min-height:54px;font:600 13px/16px var(--jo);letter-spacing:.18em}
.paysheet{box-shadow:inset 0 0 0 1px rgba(201,169,107,.45),0 -6px 40px rgba(0,0,0,.16)}
/* their Circle card on top of every other screen: a slim strip in their card's finish; a tap opens Home, where the whole card is */
.cstrip{display:flex;align-items:center;gap:12px;margin:8px 16px 0;padding:0 18px;min-height:50px;border-radius:16px;background:var(--satin-black);color:#f4efe4;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(201,169,107,.55),0 8px 20px rgba(0,0,0,.12);-webkit-tap-highlight-color:transparent;transition:transform .14s ease}
.cstrip .cs-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 17px/20px var(--jo);letter-spacing:.06em}
.cstrip .cs-t{margin-left:auto;white-space:nowrap;font:300 11px/14px var(--jo);letter-spacing:.16em;opacity:.8}
.cstrip.gold{background:var(--satin-gold);color:#241a06;box-shadow:inset 0 0 0 1px rgba(168,135,63,.45),0 8px 20px rgba(40,30,15,.14)}
.cstrip.silver{background:linear-gradient(115deg,#f2f2f0 0%,#d9d9d6 18%,#b9b9b6 38%,#e6e6e3 52%,#b3b3b0 70%,#dcdcd9 86%,#c4c4c1 100%);color:#1b1d20;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.1)}
.cstrip:active{transform:scale(.985)}
/* the Circle's components inside Book: its own type, and Book's same-named classes (.list, .chev, .ticket) kept out of them */
.cl{font:400 17px/22px var(--sans);text-transform:none;letter-spacing:normal}
.cl :where(.list){margin:0;animation:none}
.cl :where(.chev){border:0;transform:none;margin:0;width:13px;height:13px}
.cl :where(.ticket){display:block;padding:0;gap:0}
.cl .ticket :where(.btn){margin-top:0}
.cl :where(h2){margin:0}
.journey{margin-top:14px}
.journey .firstrw{padding-top:12px}
.paysheet .cl{font:inherit}
.paysheet .cl .pscard .mcard .name{font-size:min(26px,calc(100cqi / (var(--n) * .6)))!important;line-height:1.1!important;overflow:hidden}
/* Book for Yourself (opens the kinds of visit in place) and Book with Friends and Family, as on the Circle card */
.bookme{width:calc(100% - 32px);max-width:420px;margin:24px auto 0;display:flex;flex-direction:column;gap:12px}
details.bfy>summary{list-style:none;cursor:pointer}
details.bfy>summary::-webkit-details-marker{display:none}
/* pressed, Book for Yourself turns into one row of the kinds of visit (the Artist) */
details.bfy[open]>summary{display:none}
.sched.bfyrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin:0}
.sched.bfyrow .btn{min-height:54px;padding:0 8px;hyphens:auto;overflow-wrap:anywhere}
details.bfy .schedmore{margin-bottom:4px}
.bookme>.btn.fam{letter-spacing:.12em}
.famtop{margin:16px 16px 0}
/* the Besties picker: the Circle's grouped list with a round tick on the right; the + opens two boxes that go on by themselves */
.famform{margin:0}
.cl .item.fam{cursor:pointer;padding-left:16px}
.cl .item.fam .txt b{font-weight:400}.cl .item.fam.all .txt b{font-weight:500}
.cl .item.fam+.item.fam::before{left:16px}
.cl .item.fam input{position:absolute;opacity:0;pointer-events:none}
.cl .item.fam .ck{position:relative;flex:none;margin-left:auto;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.28)}
.cl .item.fam input:checked~.ck{background:var(--satin-black);box-shadow:inset 0 0 0 1px rgba(227,207,156,.6)}
.cl .item.fam input:checked~.ck::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid #e3cf9c;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cl .item.fam input:focus-visible~.ck{outline:2px solid #111;outline-offset:2px}
.famgo{width:calc(100% - 32px)!important;margin:18px 16px 0}
.famgo:disabled{opacity:.45}
details.famadd{display:block}
details.famadd>summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer}
details.famadd>summary::-webkit-details-marker{display:none}
.famaddf{display:flex;flex-direction:column;gap:12px;padding:14px 0 6px}
.famaddf .btn{margin-top:2px}
/* See availability steps aside while the Book buttons are on screen (the Artist: it covered Book with Friends and Family) */
.availbtn{transition:opacity .16s ease}
.availbtn.away{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.cstrip,.availbtn{transition:none}.cstrip:active{transform:none}}

/* The one button that glows (2026-10-22, from the buildwithomar reel, his picks: the main Book button only, a slow gold sweep,
   the friends button keeps its outline, the words stay): a gold light runs round its edge every 6 s with a soft bloom outside
   it, over the satin and its inset shine; still for anyone with Reduce Motion on. The angle animates through @property; a
   browser without it shows the gold arc standing still. Same block in Book's book.css and the Circle's circle.css. */
@property --glow-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn.glow{position:relative;isolation:isolate}
.btn.glow::before,.btn.glow::after{content:"";position:absolute;inset:-1.5px;padding:1.5px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--glow-a),transparent 0 54%,rgba(214,174,92,0) 60%,#c8a96a 72%,#f6e8bd 82%,#d6ae5c 89%,rgba(214,174,92,0) 96%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:glowsweep 6s linear infinite}
.btn.glow::after{inset:-6px;padding:6px;filter:blur(6px);opacity:.6}
@keyframes glowsweep{to{--glow-a:360deg}}
@media (prefers-reduced-motion:reduce){.btn.glow::before,.btn.glow::after{animation:none}}

/* October 22 piercing review: shared entry and typed birthday. */
.entry .btn{min-height:44px;width:auto;min-width:110px;font-size:14px;padding:10px 24px}.signin .tp{font-size:12px}.birthday-input{border:0;padding:0;margin:0 0 20px;min-width:0}.birthday-input legend{font-size:12px;letter-spacing:.08em}.birthday-parts{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px}.birthday-parts label{min-width:0}.birthday-parts input{width:100%;box-sizing:border-box;min-height:44px}.birthday-parts span{display:block;font-size:12px}

.birthday-parts input{border:0;border-bottom:1px solid #bbb;border-radius:0;background:transparent;font:inherit;padding:8px 4px}.birthday-input.bad{border-bottom:1px solid #9c3329}.birthday-input em{display:block;font-size:12px;padding-top:8px}.birthday-parts input:focus{outline:2px solid #777;outline-offset:2px}
.group-share{text-align:center;margin:24px 16px}.group-stack{display:flex;justify-content:center;padding:18px 8px;min-height:140px}.group-mini{display:flex;flex-direction:column;justify-content:space-between;width:100px;height:124px;flex-shrink:0;border-radius:14px;background:#fff;border:1px solid #bbb;box-shadow:0 6px 16px #0002;padding:12px;text-align:left;transform:rotate(-5deg)}.group-mini+.group-mini{margin-left:-38px;transform:rotate(3deg)}.group-mini:nth-child(2n){transform:rotate(-2deg)}.group-mini.empty{background:#f2f2ef;color:#777}.group-mini small{font-size:9px}.group-mini b{font-weight:400;font-size:13px;overflow:hidden;text-overflow:ellipsis}.group-share-fallback{display:flex;justify-content:center;gap:22px;margin-top:16px}.group-share-fallback a,.group-share-fallback button{min-height:44px;padding:12px;background:none;border:0;color:inherit;font:inherit}.group-share p{font-size:13px}.group-overflow{align-self:end;font-size:12px}

/* Approved friends control: charcoal, light uppercase, existing gold sweep on the circular plus. */
.group-share .group-share-button{background:#292927;color:#fff;font-weight:400;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:14px;min-height:60px}.group-share .group-plus{display:inline-grid;place-items:center;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;margin:0;border-radius:50%;font-size:26px;font-weight:300;background:#292927;color:#eed8a8}.group-share-button:focus-visible{outline:2px solid #80652f;outline-offset:5px}

.group-mini{width:clamp(68px,24vw,100px);height:clamp(96px,30vw,124px)}

.piercing-prices{margin:18px 16px;font:400 14px/1.5 system-ui,sans-serif}.piercing-prices details{border-bottom:1px solid rgba(128,128,128,.22)}.piercing-prices details details{margin-left:12px}.piercing-prices summary{min-height:44px;display:list-item;align-content:center;padding:10px 4px;box-sizing:border-box;cursor:pointer;font-weight:400}.piercing-prices p{margin:8px 4px 14px}.piercing-prices a{color:inherit;text-underline-offset:3px}

/* Home review: retain the member card, browse existing public artwork horizontally. */
.footer-logo img{width:88px;height:auto}.footer-logo{min-height:44px;display:inline-flex;align-items:center}
.rail,.horizontal-portfolio,.mosaic.horizontal-gallery{display:flex;overflow-x:auto;max-width:100%;scroll-snap-type:x proximity;gap:16px;padding-bottom:12px;overscroll-behavior-x:contain}
.horizontal-portfolio .port{flex:0 0 min(76vw,300px)}
.mosaic.horizontal-gallery .ph{flex:0 0 min(76vw,340px);scroll-snap-align:start}
.mosaic.horizontal-gallery .ph img{width:100%;height:340px;object-fit:cover}
.rail:focus-visible,.horizontal-portfolio:focus-visible,.horizontal-gallery:focus-visible{outline:2px solid #8a6d36;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.rail,.horizontal-portfolio,.horizontal-gallery{scroll-behavior:auto;scroll-snap-type:none}}

/* Client design: readable content and optional friends, no workflow changes. */
h1,h2,h3,.sec-h,.large-title,.eyebrow{font-weight:400;text-transform:uppercase;overflow-wrap:anywhere;line-height:1.25}
.optional-friends{margin:18px 0}.optional-friends>summary{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;text-transform:uppercase;font-weight:400;list-style:none}.optional-friends>summary::-webkit-details-marker{display:none}.friend-plus{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#292927;color:#eed8a8;font-size:26px;font-weight:300}.optional-friends[open]>summary .friend-plus{transform:rotate(45deg)}.optional-friends>summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.group-mini b{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}.group-mini{height:auto;min-height:110px;box-sizing:border-box}.group-share-fallback{flex-wrap:wrap}.group-share-button{white-space:normal}
@media(prefers-reduced-motion:reduce){.friend-plus{transition:none;animation:none}}

/* Isolated one-page composer. Existing form controls remain authoritative. */
.booking-sections{display:grid;gap:12px;padding-bottom:env(safe-area-inset-bottom)}
.booking-section{border:1px solid #ddd;border-radius:18px;background:#fff;min-width:0}
.booking-section>summary{min-height:48px;padding:16px;display:flex;justify-content:space-between;gap:16px;cursor:pointer;text-transform:uppercase;font-weight:400}
.booking-section>summary small{max-width:65%;overflow-wrap:anywhere;text-align:right}
.booking-section-body{padding:0 12px 12px}.booking-section.bad{border-color:#a32020}
.booking-section summary:focus-visible{outline:2px solid #222;outline-offset:3px}
.booking-sections .paybar{position:sticky;bottom:0;z-index:4;background:#fff;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.booking-section select{width:100%;min-height:44px;font:inherit;border:1px solid #bbb;border-radius:12px;background:#fff;padding:10px}
.booking-section [aria-busy=true]{opacity:.65;pointer-events:none}

/* Respect larger text in booking forms; content grows instead of shrinking names. */
.booking-sections{font-size:1rem;line-height:1.5}
.booking-section>summary{flex-wrap:wrap;font-size:1rem;line-height:1.5}
.booking-section>summary small{font-size:.875rem;line-height:1.5}
.booking-section .fields input,.booking-section .birthday-parts input,.booking-section textarea,.booking-section select{font-size:1rem;line-height:1.5;min-height:2.75rem}
.booking-section .f>span,.booking-section .birthday-parts span,.booking-section .birthday-input legend{font-size:.875rem;line-height:1.5}
.booking-section .cta{font-size:1rem;line-height:1.5;white-space:normal;height:auto;min-height:2.75rem;overflow-wrap:anywhere}
.booking-section .birthday-parts{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
@media(max-width:360px){.booking-section>summary small{max-width:100%;text-align:left}.booking-section-body{padding-inline:8px}}


/* Physical-phone correction, 2026-10-23:
   restore the approved restrained light mobile hierarchy. This changes presentation only.
   Booking, agreement, signature and payment validation remain authoritative in server.js. */
body:has(.booking-sections) main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
body:has(.booking-sections) footer{margin-top:20px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.booking-sections{gap:10px;padding:0 12px calc(12px + env(safe-area-inset-bottom))}
.booking-section{border-color:rgba(17,17,17,.12);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.booking-section>summary{min-height:54px;padding:14px 16px;align-items:center;font-size:16px;line-height:1.3;letter-spacing:.02em}
.booking-section>summary small{font-size:14px;line-height:1.35;color:#5b5b60}
.booking-section-body{padding:0 10px 10px}

/* The old dark payment sheet was the rejected presentation visible in the phone photos. */
.booking-section .paysheet{margin:0;padding:4px 0 0;border-radius:0;background:#fff;color:#111;box-shadow:none;animation:none}
.booking-section .psamt{margin:2px 0 14px;font:500 clamp(36px,11vw,48px)/1 var(--jo);color:#111}
.booking-section .psamt.free{font-size:22px;line-height:1.25}
.booking-section .pslogo{height:62px;margin:0 auto 8px;filter:brightness(0)}
.booking-section .pscard{width:min(100%,340px);margin:12px auto 0}
.booking-section .pscard .gcard{border-radius:18px;box-shadow:0 10px 26px rgba(0,0,0,.15)}
.booking-section .pschip{margin:12px auto 0;background:#f2f2f2;color:#111;font-size:14px;line-height:1.35}
.booking-section .psgroup{margin-top:12px;padding:0 14px;border:1px solid rgba(17,17,17,.12);border-radius:16px;background:#fafafa}
.booking-section .psrow{padding:14px 0}
.booking-section .psrow+.psrow{border-top-color:rgba(17,17,17,.12)}
.booking-section .psic{background:#eee}
.booking-section .psic svg{stroke:#111}
.booking-section .pst small,.booking-section .pst em{color:#606066}
.booking-section .pst b{color:#111;font-size:17px;line-height:1.3}
.booking-section .pschange{color:#111}
.booking-section .held{color:#111}
.booking-section .psgroup.agree{padding:4px 14px;background:#fafafa}
.booking-section .paysheet .ag span,
.booking-section .paysheet .terms-read>summary,
.booking-section .paysheet .terms .eyebrow{color:#111}
.booking-section .paysheet .ag small,
.booking-section .paysheet .f.sig>span,
.booking-section .paysheet .note{color:#606066}
.booking-section .paysheet .ag i{box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.35)}
.booking-section .paysheet .ag input:checked+i{background:#111}
.booking-section .paysheet .ag input:checked+i::after{border-color:#fff}
.booking-section .paysheet .agree .ag+.ag,
.booking-section .paysheet .agree .terms-read+.ag,
.booking-section .paysheet .agree .f.sig+.ag,
.booking-section .paysheet .f.sig{border-top-color:rgba(17,17,17,.12)}
.booking-section .paysheet .f.sig input{background:#fff;color:#111;box-shadow:inset 0 0 0 1px rgba(17,17,17,.16)}
.booking-section .paysheet .f.sig input:focus{box-shadow:inset 0 0 0 1.5px #111}
.booking-section .paysheet .terms{background:#fff;color:#333;border:1px solid rgba(17,17,17,.12)}
.booking-section .sighead{color:#606066;font-size:14px;line-height:1.35}
.booking-section .sigbox{height:170px;border:1px solid rgba(17,17,17,.14);box-shadow:none}
.booking-section .sigclear{color:#111}
.booking-section .depsplit{background:#f2f2f2}
.booking-section .pstotal{margin:12px 4px;color:#606066}
.booking-section .pstotal b{color:#111}
.booking-section .paysheet .paybar{position:sticky;bottom:0;z-index:8;margin:0 -10px;padding:18px 10px calc(10px + env(safe-area-inset-bottom));border-radius:0;background:linear-gradient(rgba(255,255,255,0),#fff 28px)}
.booking-section .paysheet .paybar .cta{min-height:56px;background:var(--satin-black);color:#f6f0e2;box-shadow:inset 0 0 0 1px rgba(227,207,156,.5),0 8px 20px rgba(0,0,0,.14);font-size:16px}
.booking-sections+.note{margin:12px 16px 0;font-size:14px;line-height:1.45;text-align:left;color:#606066}
@media(max-width:360px){
  .booking-sections{padding-inline:8px}
  .booking-section>summary{padding-inline:13px}
  .booking-section .psgroup{padding-inline:12px}
  .booking-section .pscard{width:100%}
}

/* Renewed booking surroundings; existing card, required fields and checkout unchanged. */
header .logo{max-height:64px}h1,h2,h3,.eyebrow{font-weight:400;line-height:1.3;overflow-wrap:anywhere}
.booking-sections{gap:12px}.booking-section{border:1px solid #dedede;border-radius:20px;background:#fff;box-shadow:none}.booking-section>summary{min-height:52px;padding:16px;font-size:.875rem;font-weight:400;letter-spacing:.07em;line-height:1.4;white-space:normal}.booking-section>summary>*{min-width:0;overflow-wrap:anywhere}
.booking-section .psgroup{background:#fff;border-radius:16px}.booking-section .pst b{font-weight:400;overflow-wrap:anywhere}.booking-section .pschange{min-height:44px;display:inline-flex;align-items:center}.booking-section .pstotal{padding:14px 0;border-top:1px solid #dedede;font-size:1rem;line-height:1.4}.booking-section .pstotal b{font-size:1.125rem;font-weight:500}.booking-section .paysheet .paybar .cta{background:#292927;color:#fff;letter-spacing:.08em;font-weight:400;white-space:normal;line-height:1.4}
.optional-friends{border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4}.optional-friends>summary{min-height:52px;justify-content:space-between;padding:8px 0;letter-spacing:.08em}.friend-plus{border:1px solid #c8a96a}
.piercing-prices summary{min-height:48px;font:400 .875rem/1.5 var(--sans);letter-spacing:.04em}.piercing-prices details{border-color:#dedede}
footer{border-top:1px solid #dedede;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}footer .eyebrow{flex-basis:100%;line-height:1.5}footer a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}footer .footer-logo{flex-basis:100%}
@media(max-width:360px){.booking-section>summary{padding:14px 12px;letter-spacing:.04em}}

.booking-member-card{margin:12px 16px 24px}.booking-member-card .gcard{width:100%;margin:0}.booking-member-card .gn{white-space:normal!important;overflow-wrap:anywhere;font-size:clamp(24px,8vw,44px)!important;line-height:1.1!important}.nofit.center{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px 16px;padding:16px;border:1px solid #dedede;border-radius:20px}.nofit.center>span{flex-basis:100%;font-weight:400}.nofit.center .quiet{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid #ddd;border-radius:999px;line-height:1.4}footer a{gap:8px}footer svg{flex-shrink:0}

.booking-member-card .mcard{margin:0}.booking-member-card .mcard .name{white-space:normal!important;overflow-wrap:anywhere;font-size:clamp(24px,8vw,44px)!important;line-height:1.1!important}


/* UPLIFT continuous-corner system, 2026-10-23.
   Apple-inspired web treatment, not an Apple framework. Solid surfaces remain
   readable without blur. Native superellipse corners progressively enhance a
   rounded fallback; no masks clip text, focus rings or existing gold effects. */
:root{
  --uplift-radius-card:28px;
  --uplift-radius-control:18px;
  --uplift-radius-field:16px;
  --uplift-hairline:rgba(28,28,30,.09);
  --uplift-depth:0 2px 4px rgba(28,28,30,.025),0 10px 28px rgba(28,28,30,.055);
  --uplift-ease:cubic-bezier(.22,.8,.25,1);
}

/* Continuous corners across the existing booking journey, including its card. */
.mcard,.gcard,.booking-section,.booking-section .pscard .gcard,
.card,.ticket,.qcard,.group-mini,.booking-section .psgroup,
.nofit.center,.lookbook,.port,.menu,.tellsheet,.md{
  border-radius:var(--uplift-radius-card);
}
.booking-section,.card,.ticket,.qcard,.nofit.center{box-shadow:var(--uplift-depth)}
.booking-section,.booking-section .psgroup,.nofit.center{border-color:var(--uplift-hairline)}
.booking-section.bad{border-color:var(--red)}
.btn,.cta,.nav .lang,.nav .back,main>.back,.homepill,.upbtn,.upsend,
.availbtn,.availgo,.mbtn,.booking-section .paysheet .paybar .cta,.nofit.center .quiet{
  border-radius:var(--uplift-radius-control);
}
.fields input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.birthday-parts input,textarea,select,.sigbox,.booking-section select{border-radius:var(--uplift-radius-field)}
/* Summary uses the parent contour without clipping the open section or focus. */
.booking-section>summary{border-radius:var(--uplift-radius-card)}
.btn,.cta,.nav .lang,.nav .back,main>.back,.homepill,.upbtn,.upsend,
.availbtn,.availgo,.mbtn,.booking-section>summary{
  transition:scale 180ms var(--uplift-ease),background-color 180ms ease,box-shadow 180ms ease;
}
.btn:active,.cta:active,.nav .lang:active,.nav .back:active,
main>.back:active,.homepill:active,.upbtn:active,.upsend:active,.availbtn:active,.availgo:active,.mbtn:active{scale:.98}
@supports (corner-shape:superellipse(1.5)){
  .mcard,.gcard,.booking-section,.booking-section>summary,.booking-section .pscard .gcard,
  .card,.ticket,.qcard,.group-mini,.booking-section .psgroup,.nofit.center,
  .lookbook,.port,.menu,.tellsheet,.md,.btn,.cta,.nav .lang,.nav .back,
  main>.back,.homepill,.upbtn,.upsend,.availbtn,.availgo,.mbtn,
  .booking-section .paysheet .paybar .cta,.nofit.center .quiet,
  .fields input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .birthday-parts input,textarea,select,.sigbox,.booking-section select{
    corner-shape:superellipse(1.5);
  }
}
.friend-plus,.group-share .group-plus{border-radius:50%;corner-shape:round}

@media(prefers-reduced-motion:reduce){
  .btn,.cta,.gbtn,.sbtn,.walletadd,.pscta,.nav .lang,.nav .back,main>.back,
  .homepill,.booknew,.upbtn,.upsend,.availbtn,.availgo,.mbtn,
  .booking-section>summary,.optional-friends>summary,a.item,button.item{transition:none;scale:none}
}
@media(forced-colors:active){
  .mcard,.gcard,.booking-section,.card,.ticket,.member .list,.member .client-journey,
  .member .optional-friends,.btn,.cta{outline:1px solid CanvasText;box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  :is(.btn,.cta,.gbtn,.sbtn,.walletadd,.pscta,.homepill,.booknew,.upbtn,.upsend,.availbtn,.availgo,.mbtn):active,
  .nav .lang:active,.nav .back:active,main>.back:active{scale:none}
}
/* Confirmed home only; original member card remains. */
.entry-uplift-logo{width:120px;display:block;margin:auto;filter:brightness(0)}.signin-card .lockup img{width:96px!important}.confirmed-home .lockup img,.confirmed-home .gtop img{width:100px;max-width:45vw}.confirmed-home .deals{position:sticky;top:0;z-index:10;background:#fff}.confirmed-home .deals>summary{min-height:48px}.confirmed-home .future-visit{display:block;min-height:44px;padding:12px;text-align:center}.home-thumb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0}.home-thumb>.btn{flex:1;min-width:120px}.home-round{display:flex;align-items:center;justify-content:center;width:64px;height:64px;flex-shrink:0;border-radius:50%;background:#292929;color:#fff;padding:7px;text-align:center;font:11px/1.3 system-ui;overflow-wrap:anywhere}.friends-plus{background:#cfad64;color:#252525;font-size:28px}.home-quick{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:30}.home-quick>summary{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#292929;color:#fff;font-size:28px;list-style:none}.home-quick>nav{position:absolute;right:0;bottom:64px;width:min(300px,calc(100vw - 32px));padding:16px;background:#fff;border:1px solid #ddd;border-radius:18px;box-shadow:0 8px 24px #0002}.home-quick nav a,.home-quick nav summary{display:block;min-height:48px;padding:12px;font-size:14px}.home-quick p{font-size:14px;line-height:1.5}.confirmed-home{padding-bottom:100px}.confirmed-home .name,.confirmed-home .gn{overflow-wrap:anywhere}.confirmed-home .display{font-weight:400}.confirmed-home .availbtn{display:none}.home-quick a:focus-visible,.home-round:focus-visible{outline:3px solid #2674cc;outline-offset:3px}@media(prefers-reduced-motion:reduce){.confirmed-home *{animation:none!important;transition:none!important}}

/* Confirmed day/time review: compact real slots, single concierge footer. */
.airy.times{display:flex;flex-wrap:wrap;gap:10px;padding:8px 16px}.airy.times a{border:1px solid #ccc;border-radius:14px;min-height:48px;min-width:86px;padding:13px 16px;text-align:center}.booking-footer{display:flex;flex-direction:column;align-items:center;gap:18px}.booking-footer img{width:110px;filter:brightness(0)}.booking-footer .quiet{min-height:48px;padding:14px 20px;border:1px solid #555;border-radius:24px}

/* Compact birthday: explicit labels and full touch targets. */
.birthday-input{max-width:22rem}.birthday-parts{grid-template-columns:minmax(4rem,1fr) minmax(4rem,1fr) minmax(5.5rem,1.35fr);gap:.5rem}.birthday-parts input{min-height:44px;font-size:1rem;padding:.5rem}.birthday-parts span{font-size:.75rem;line-height:1.5}

/* Readable circular availability action; preserve full label without mid-word breaks. */
.home-round:not(.friends-plus){width:88px;height:88px;padding:8px;overflow-wrap:normal;word-break:normal;font-size:11px}.home-round span{max-width:100%;hyphens:none}footer[hidden]{display:none!important}
/* iPad, sideways and desktop (2026-10-24, his words "Book uplift tattoo on the iPad or horizontal screen should be better / This is horrible"):
   the welcome card keeps its phone size and shape in the middle, its name always fits inside, the button sits clear below it */
@media (min-width:700px){
  .cl.journey,.booking-member-card,.signin-card{max-width:440px;margin-left:auto!important;margin-right:auto!important}
  .mcard,.gcard{max-width:420px!important;margin-left:auto!important;margin-right:auto!important}
  .mcard .name,.gcard .gn{font-size:clamp(22px,3.2vw,34px)!important;white-space:normal!important;overflow-wrap:anywhere;line-height:1.08!important}
  .mcard{transform:none!important}
  .cl.journey + .btns,.cl.journey ~ .book,.booking-member-card + *{margin-top:18px!important}
}

/* the welcome after sign-in and the walk-in, Artist Day style (2026-10-25, RULE 1): the card stack swiped sideways, the cards not
   reached yet locked; two small island buttons; Check In small at the top right; never a big bubble, never blue */
.welcome2 .cstack,.welcome2 .cstack .cs-in{background:transparent!important}.welcome2 .cktop{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));z-index:5;padding:9px 16px 8px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 8px 24px rgba(17,24,39,.12),inset 0 0 0 .5px rgba(0,0,0,.08);font:700 11px/1 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#161616;text-decoration:none}
.cstack{margin:40px 0 -24px;background:none!important;box-shadow:none!important;border:0!important;padding:0!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;outline:none}.cstack::-webkit-scrollbar{display:none}
.cstack .cs-in{display:flex;gap:14px;padding:24px 22px 48px}.cstack .cs-in>section{flex:0 0 calc(100% - 44px);max-width:420px;scroll-snap-align:center;margin:0!important}
.cstack .mcard.locked{filter:saturate(.75);opacity:.72;position:relative}.cstack .mcard.plat{background:linear-gradient(135deg,#e9e9ef,#bfc0c8 45%,#f4f4f7 70%,#a9aab3)!important;color:#1d1d22}
.cstack .lk svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.islands{display:flex;justify-content:center;gap:10px;margin:6px 0 18px}.islands .isl{display:inline-flex;align-items:center;height:42px;padding:0 22px;border-radius:999px;background:#161616;color:#fff;font:700 11px/1 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 22px rgba(0,0,0,.18);transition:transform .3s cubic-bezier(.28,1.75,.45,1)}.islands .isl:active{transform:scale(.94)}
.wk-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:18px 16px}.wk-card{display:block;position:relative;border-radius:26px;padding:22px 20px;background:#fff;color:#161616;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.05),0 24px 60px rgba(17,24,39,.12)}
.wk-card b{display:block;font:700 26px/1.1 var(--jo,'Josefin Sans',sans-serif);text-transform:uppercase;letter-spacing:.02em}.wk-card span{display:block;margin-top:6px;font:700 11px/1.3 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#6e6e73}
.wk-stack{display:flex;gap:14px;margin:0 0 -20px;padding:24px 32px 48px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.wk-stack::-webkit-scrollbar{display:none}.wk-stack .wk-card{flex:0 0 calc(100% - 64px);scroll-snap-align:center;min-height:180px;display:flex;flex-direction:column;justify-content:space-between}
.wk-stack .wk-go{color:inherit;text-decoration:none}.wk-stack .wk-t{font-size:15px!important;color:#161616!important;margin-top:14px!important}.wk-stack .pickme{background:#161616;color:#fff}.wk-stack .pickme span,.wk-stack .pickme .wk-t{color:rgba(255,255,255,.7)!important}
.wk-look{align-self:flex-start;margin-top:14px;padding:8px 14px 7px;border-radius:999px;background:rgba(0,0,0,.06);font:700 10px/1 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:inherit;text-decoration:none}
@media (prefers-reduced-motion:reduce){.cstack,.wk-stack{scroll-behavior:auto}}
.dswaive b{color:#1f7a3d}

/* ---------- Fable merged home (2026-10-25): the card, SAME AS LAST TIME, one sheet, the island ---------- */
.xhome main{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
.xintro{padding:calc(14px + env(safe-area-inset-top)) 16px 0;text-align:center}.xhello{margin:0;font:400 13px/16px var(--jo);letter-spacing:.18em;color:var(--label2)}
.xcard{margin:12px 16px 0;border-radius:var(--r-group);padding:18px 20px 16px;aspect-ratio:1.586;background:#fff;color:#000;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 24px 60px rgba(17,24,39,.14),inset 0 0 0 1px rgba(0,0,0,.06);animation:xland .7s cubic-bezier(.22,1.2,.36,1) both}
.xcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,rgba(0,0,0,.025) 2px 4px)}
.xct{display:flex;justify-content:space-between;font:700 9px/11px var(--jo);letter-spacing:.18em;color:var(--label2)}
.xcn{font:400 30px/34px var(--jo);letter-spacing:.01em}.xcs{font:700 9px/11px var(--jo);letter-spacing:.18em;color:var(--label2)}
@keyframes xland{from{opacity:0;transform:translateY(-30px) scale(.96)}}
.xlocks{display:flex;gap:8px;margin:10px 16px 0}.xlocks i{flex:1;height:54px;border-radius:14px;background:repeating-linear-gradient(135deg,#ececee 0 6px,#f5f5f7 6px 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-style:normal;color:#8e8e93}
.xlocks b{font:700 9px/11px var(--jo);letter-spacing:.16em}.xlocks small{font:400 7.5px/9px var(--jo);letter-spacing:.1em}
.xlast{margin:22px 16px 0}.xk{margin:0 0 8px;font:700 10px/12px var(--jo);letter-spacing:.18em;color:var(--label2)}
.xlastbtn{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;padding:14px 16px;border-radius:20px;background:var(--satin-black);color:#f6f0e2;box-shadow:0 12px 30px rgba(0,0,0,.22),0 0 0 6px rgba(200,169,106,.12);animation:xglow 3.2s ease-in-out infinite}
.xlastbtn b{font:500 16px/20px var(--jo);letter-spacing:.02em}.xlastbtn span{font:400 12px/16px var(--jo);letter-spacing:.08em;opacity:.8}.xlastbtn em{grid-row:1/3;font:700 10px/12px var(--jo);letter-spacing:.16em;font-style:normal;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.14)}
@keyframes xglow{50%{box-shadow:0 12px 30px rgba(0,0,0,.22),0 0 0 10px rgba(200,169,106,.22)}}
.xsheet{margin:22px 16px 0;padding:16px 16px 14px;border-radius:var(--r-group);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04),0 12px 34px rgba(17,24,39,.08);animation:xsheet .46s cubic-bezier(.32,.72,0,1) both}
@keyframes xsheet{from{opacity:0;transform:translateY(30px)}}
.xtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}.xtiles a{display:grid;place-items:center;min-height:46px;border-radius:14px;background:var(--fill3);font:700 10px/12px var(--jo);letter-spacing:.14em;text-align:center;padding:4px}.xtiles a.on{background:#000;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.xtimes{display:grid;gap:8px}.xtime{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;min-height:56px;padding:10px 16px;border-radius:16px;background:var(--fill3);animation:xrow .4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 40ms + 120ms)}
.xtime b{font:500 15px/18px var(--jo);letter-spacing:.04em}.xtime span{grid-row:1/3;font:700 18px/22px var(--jo);letter-spacing:.02em}.xtime i{font:400 10px/12px var(--jo);letter-spacing:.14em;font-style:normal;color:var(--label2)}
.xtime:active{transform:scale(.985);background:var(--fill)}
@keyframes xrow{from{opacity:0;transform:translateY(8px)}}
.xnone{margin:0;padding:14px;border-radius:16px;background:var(--fill3);font:400 13px/18px var(--jo);color:var(--label2);text-transform:none;letter-spacing:0}
.xdep{margin:12px 2px 0;font:400 12px/16px var(--jo);letter-spacing:.02em;color:var(--label2);text-transform:none}
.xmore{margin:12px 0 0;display:flex;gap:16px;flex-wrap:wrap}.xmore .quiet{font:700 10px/12px var(--jo);letter-spacing:.16em;color:var(--label2);text-decoration:underline;text-underline-offset:3px}
.xnot{margin:18px 0 0;text-align:center}
.xisl{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;display:flex;gap:4px;padding:6px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 14px 34px rgba(17,24,39,.16),inset 0 0 0 .5px rgba(0,0,0,.08);animation:xisl .48s cubic-bezier(.3,1.2,.45,1) both}
.xisl a{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;color:#000;font:700 10px/12px var(--jo);letter-spacing:.14em;white-space:nowrap}
.xisl a:first-child{background:rgba(120,120,128,.16)}
.xisl{width:min(calc(100% - 32px),380px)}.xisl a{flex:1 1 0;justify-content:center;padding:0 8px}.xisl a:last-child{color:#000}
.xisl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes xisl{from{opacity:0;transform:translate(-50%,10px) scale(.92)}}
.xhome .homepill,.xhome .availbtn{display:none}
.xheld{text-transform:none;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.xcard,.xsheet,.xtime,.xisl,.xlastbtn{animation:none!important}}

/* ---------- Fable preview: cards on every screen (2026-10-25, "Same cards view for every screen for every client") ---------- */
/* the deck: on a phone the cards stack (public/xstack.js), from about 700 wide they stand side by side (RULE 2) */
.xhead{display:flex;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.xhead p{margin:0;font:700 10px/12px var(--jo);letter-spacing:.18em;color:var(--label2);text-transform:uppercase}
.xdeck{position:relative;margin:14px auto 0;width:min(calc(100% - 32px),520px)}
.xdeck:not(.xone):not(.xgrid){height:min(660px,calc(100svh - 200px));min-height:460px}
.xdeck:not(.xone):not(.xgrid)>.xc{position:absolute;left:0;right:0;top:66px;bottom:0;overflow:auto;transform-origin:50% 0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s}
.xdeck.xone{margin-bottom:24px}
.xc{display:flex;flex-direction:column;gap:10px;border-radius:26px;padding:18px 20px 20px;background:#fff;color:#000;position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 24px 60px rgba(17,24,39,.14),inset 0 0 0 1px rgba(0,0,0,.06);-webkit-overflow-scrolling:touch}
.xc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,rgba(0,0,0,.022) 2px 4px)}
.xc-tab{margin:0;display:flex;justify-content:space-between;gap:10px;font:700 10px/12px var(--jo);letter-spacing:.18em;text-transform:uppercase;color:var(--label2)}
.xc-name{margin:6px 0 0;font:400 30px/34px var(--jo);letter-spacing:.02em;text-transform:uppercase}
.xc-big{font-size:38px;line-height:42px}
.xc-sub{margin:0;font:700 10px/14px var(--jo);letter-spacing:.16em;text-transform:uppercase;color:var(--label2)}
.xc-note{margin:auto 0 0;font:700 10px/12px var(--jo);letter-spacing:.18em;text-transform:uppercase}
.xc-grow{flex:1}
.xc-under{margin:auto 0 0;text-align:center}.xc-under .quiet{font:700 10px/12px var(--jo);letter-spacing:.16em;color:var(--label2);text-decoration:none}
.xc-go{align-self:center;margin-top:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:#161616;color:#fff;font:700 11px/1 var(--jo);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.xc .xtiles.x3{grid-template-columns:repeat(3,1fr);margin:4px 0 6px}
.xtwo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.xtwo a{display:flex;flex-direction:column;justify-content:space-between;min-height:120px;padding:16px;border-radius:20px;background:var(--fill3);color:#000;text-decoration:none}
.xtwo b{font:400 20px/24px var(--jo);letter-spacing:.06em;text-transform:uppercase}.xtwo span{font:700 10px/12px var(--jo);letter-spacing:.16em;color:var(--label2);text-transform:uppercase}
.xc-white{background:#fff}
.xc-bare{background:transparent;box-shadow:none;padding:0}.xc-bare::after{display:none}.xc-bare .xcl{margin:0}
.xc-locked{background:repeating-linear-gradient(135deg,#ededef 0 7px,#f6f6f8 7px 14px);color:#3a3a3c}
.xc-locked.xc-gold{background:repeating-linear-gradient(135deg,#efe6cf 0 7px,#f7f1e2 7px 14px)}
.xc-locked.xc-platinum{background:repeating-linear-gradient(135deg,#e4e6ea 0 7px,#eef0f3 7px 14px)}
.xc-lock svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.xc .xlastbtn{margin-top:auto}
/* every booking step: its page inside one card, the old page furniture off */
.xc-page{padding:16px 16px 20px}.xc-page>.hero,.xc-page>section:first-of-type{margin-top:0}
body:has(.xdeck) .dock,body:has(.xdeck) .availbtn{display:none!important}
/* the bar of cards at the thumb, frosted, centered, never wider than about 600 */
.xdots{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;display:flex;gap:4px;max-width:min(600px,calc(100% - 32px));overflow-x:auto;scrollbar-width:none;padding:5px;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 12px 30px rgba(17,24,39,.16),inset 0 0 0 .5px rgba(0,0,0,.08)}
.xdots::-webkit-scrollbar{display:none}
.xdots button{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#000;font:700 10px/1 var(--jo);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.xdots button[aria-current="true"]{background:#161616;color:#fff}
body.xbooked .xdots{bottom:calc(76px + env(safe-area-inset-bottom))}
body.xhasdots main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.xdeck.xgrid~.xisl,.xgrid{}
/* RULE 2: the opened fold, iPad and Mac: two or three cards side by side, the bar no longer needed */
.xdeck.xgrid{width:min(calc(100% - 48px),1180px);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:stretch}
.xdeck.xgrid>.xc{min-height:340px}
body:has(.xdeck.xgrid) .xdots{display:none}
/* a sideways phone: the cards beside the bar, the bar on the right edge */
@media (orientation:landscape) and (max-height:520px){
  .xdeck:not(.xone){width:calc(100% - 150px - env(safe-area-inset-right));margin-left:max(16px,env(safe-area-inset-left))}
  .xdeck:not(.xone):not(.xgrid){height:calc(100svh - 70px);min-height:0}
  .xdeck:not(.xone):not(.xgrid)>.xc{top:44px}
  .xdots{left:auto;right:max(10px,env(safe-area-inset-right));top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;max-height:calc(100svh - 40px);overflow-y:auto;border-radius:24px}
  .xdots button{min-height:36px}
  .xhead{padding-top:6px}
}
@media (prefers-reduced-motion:reduce){.xdeck>.xc{transition:opacity .2s!important}}
.xc-you .xcl{margin:4px 0 0}.xc-soft{letter-spacing:.08em;text-transform:none;font-weight:400;font-size:12px}
.xquick{display:flex;justify-content:center;gap:10px;margin-top:auto}
.xquick a{display:inline-flex;align-items:center;justify-content:center;min-width:112px;min-height:44px;padding:0 18px;border-radius:999px;background:#161616;color:#fff;font:700 11px/1 var(--jo);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.xquick+.xc-under{margin-top:12px}
/* NOTE pill and sheet (preview only) */
.xnote{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:calc(140px + env(safe-area-inset-bottom));z-index:45;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 22px rgba(17,24,39,.16),inset 0 0 0 .5px rgba(0,0,0,.1);font:700 10px/1 var(--jo);letter-spacing:.16em;text-transform:uppercase;color:#000}
.xnsheet{position:fixed;inset:0;z-index:60;display:grid;align-items:end;background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.xnsheet[hidden]{display:none}
.xnbox{margin:0 auto calc(14px + env(safe-area-inset-bottom));width:min(calc(100% - 24px),560px);padding:16px;border-radius:26px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.xnbox textarea{width:100%;box-sizing:border-box;margin-top:8px;border:0;border-radius:16px;background:var(--fill3);padding:12px;font:400 16px/22px var(--jo)}
.xnst{margin:6px 2px 0;min-height:16px;font:400 12px/16px var(--jo);color:var(--label2)}
.xnrow{display:flex;justify-content:space-between;align-items:center;margin:8px 0 0}.xnrow .quiet{font:700 10px/12px var(--jo);letter-spacing:.16em;text-transform:uppercase;color:#000}
.xnclose{min-height:44px;padding:0 22px;border:0;border-radius:999px;background:#161616;color:#fff;font:700 11px/1 var(--jo);letter-spacing:.16em;text-transform:uppercase}
body.xbooked .xnote{bottom:calc(140px + env(safe-area-inset-bottom))}
body:not(.xhasdots):not(.xbooked) .xnote{bottom:calc(20px + env(safe-area-inset-bottom))}
/* five-icon island */
.xisl.x5 a{padding:0;min-width:0}.xisl.x5 svg{width:22px;height:22px}
/* YOUR TEXTS: an iMessage thread from UPLIFT */
.xt-tabs{grid-template-columns:repeat(5,1fr)!important}.xt-tabs a{font-size:8.5px!important;letter-spacing:.08em!important}
.xt-from{margin:6px 0 0;text-align:center;font:700 10px/12px var(--jo);letter-spacing:.18em;color:var(--label2)}
.xthread{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.xthread li{max-width:82%;display:flex;flex-direction:column;gap:3px}
.xthread small{font:700 9px/11px var(--jo);letter-spacing:.14em;text-transform:uppercase;color:var(--label2)}
.xthread p{margin:0;padding:10px 14px;border-radius:20px;font:400 15px/20px -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;text-transform:none;letter-spacing:0}
.xthread em{font:400 10px/13px var(--jo);font-style:normal;color:var(--label2)}
.xt-studio{align-self:flex-start}.xt-studio p{background:#e9e9eb;color:#000;border-bottom-left-radius:6px}
.xt-client{align-self:flex-end;align-items:flex-end}.xt-client p{background:#1c1c1e;color:#fff;border-bottom-right-radius:6px}
.xt-note{align-self:center;max-width:92%!important;align-items:center;text-align:center}.xt-note p{background:transparent;padding:2px 6px;font:400 12px/16px var(--jo);color:var(--label2)}
/* Add friends */
.xqr{display:block;width:min(70vw,260px);margin:10px auto 6px;border-radius:18px;background:#fff;padding:10px;box-shadow:0 8px 24px rgba(17,24,39,.12)}
.xcenter{text-align:center}.xerr{margin:0;color:#c0392b;font:400 13px/18px var(--jo);text-transform:none;letter-spacing:0}

/* ---------- ONE SCREEN (his rule 2026-10-25, notes section 13): only the cards and the island move ---------- */
@view-transition{navigation:auto}
.xone-screen{background:#f4f4f6}
.xone-screen main{padding-top:calc(58px + env(safe-area-inset-top));padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.xlogo{position:fixed;top:calc(12px + env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));z-index:50;view-transition-name:xlogo}
.xlogo img{height:40px;width:auto;display:block}
.xone-screen .xhead{padding-top:0;justify-content:flex-end}.xone-screen .xhead p:first-child{display:none}
.xisl{view-transition-name:xisland}
.xisl.x3i{width:auto;gap:4px}.xisl.x3i a{flex:none;padding:0 20px;font:700 10px/12px var(--jo);letter-spacing:.16em;text-transform:uppercase;color:#000;justify-content:center}
.xisl.x3i a:first-child{background:transparent}
.xisl.x3i .xck{width:44px;padding:0;border-radius:50%;background:#161616;color:#fff}.xisl.x3i .xck svg{width:20px;height:20px}
.xone-screen .xnote{bottom:calc(84px + env(safe-area-inset-bottom))!important}
.xdots{display:none!important}
/* the front card is the one that changes between steps: it rises from the stack, the old one flies off */
.xdeck>.xc.xfront,.xdeck.xone>.xc{view-transition-name:xcard}
::view-transition-old(xcard){animation:xout .38s cubic-bezier(.4,0,1,1) both}
::view-transition-new(xcard){animation:xin .62s cubic-bezier(.28,1.35,.45,1) both}
@keyframes xout{to{transform:translateX(-112%) rotate(-7deg);opacity:.6}}
@keyframes xin{from{transform:translateY(46px) scale(.9);opacity:0}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@media (prefers-reduced-motion:reduce){::view-transition-old(xcard),::view-transition-new(xcard){animation:none}}
/* the cards behind: distance, shadow and blur (his n1 note); a one-card step still shows the stack behind it */
.xdeck:not(.xgrid):not(.xone)>.xc:not(.xfront){filter:blur(.6px) saturate(.9)}
.xdeck:not(.xgrid):not(.xone)>.xc:not(.xfront) *{pointer-events:none}
.xdeck:not(.xgrid):not(.xone)>.xc:not(.xfront){cursor:pointer}
.xdeck.xone{padding-top:44px}
.xdeck.xone::before,.xdeck.xone::after{content:"";position:absolute;left:4%;right:4%;height:60px;border-radius:26px;background:#fff;box-shadow:0 10px 30px rgba(17,24,39,.10),inset 0 0 0 1px rgba(0,0,0,.05);filter:blur(.6px)}
.xdeck.xone::before{top:0;left:8%;right:8%;opacity:.7}.xdeck.xone::after{top:22px}
.xdeck.xone>.xc{position:relative;z-index:1}
/* the client's own card turns over: front their name and the date they picked, back the uploads and the receipt */
.xc-flip{perspective:1600px;padding:0;background:transparent;box-shadow:none}.xc-flip::after{display:none}
.xc-flip>.xc-front,.xc-flip>.xc-back{display:flex;flex-direction:column;gap:10px;border-radius:26px;padding:18px 20px 20px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05),0 24px 60px rgba(17,24,39,.14),inset 0 0 0 1px rgba(0,0,0,.06);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.28,1.35,.45,1);min-height:100%;box-sizing:border-box}
.xc-flip>.xc-back{position:absolute;inset:0;transform:rotateY(180deg);overflow:auto}
.xc-flip.flipped>.xc-front{transform:rotateY(-180deg)}.xc-flip.flipped>.xc-back{transform:rotateY(0)}
.xdeck:not(.xone):not(.xgrid)>.xc-flip{overflow:visible}
.xturn{align-self:center;margin-top:auto;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--fill3);font:700 10px/1 var(--jo);letter-spacing:.16em;text-transform:uppercase;color:#000}
.xup{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 16px;border-radius:16px;background:var(--fill3)}
.xup span{font:400 14px/18px var(--jo)}.xup em{font:700 10px/12px var(--jo);letter-spacing:.16em;text-transform:uppercase;font-style:normal}
.xup input{position:absolute;opacity:0;width:1px;height:1px}
.xthumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.xthumbs i{aspect-ratio:1;border-radius:10px;background:#ddd center/cover;display:grid;place-items:center;font:700 8px/1 var(--jo);letter-spacing:.1em;color:#555;font-style:normal}
.printer{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.slot-bar{width:100%;height:18px;border-radius:999px;background:linear-gradient(180deg,#1b1b1d,#3a3a3d);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.1);position:relative;z-index:2}
.paper-clip{width:86%;overflow:hidden;margin-top:-9px}
.paper{background:#fbfaf7;padding:22px 18px 18px;color:#121214;transform:translateY(-100%);font:400 11px/14px var(--jo);letter-spacing:.12em;display:grid;gap:8px;-webkit-mask:linear-gradient(#000 calc(100% - 8px),transparent 0),radial-gradient(circle 5px at 8px 100%,transparent 98%,#000) 0 100%/16px 8px repeat-x;mask:linear-gradient(#000 calc(100% - 8px),transparent 0),radial-gradient(circle 5px at 8px 100%,transparent 98%,#000) 0 100%/16px 8px repeat-x}
.flipped .paper,.xpaid .paper{animation:print 1.8s steps(14,end) .4s forwards}
@keyframes print{to{transform:translateY(0)}}
.paper h4{margin:0;text-align:center;font-size:14px;letter-spacing:.3em}.paper .ln{display:flex;justify-content:space-between;gap:8px;color:#555}
.paper .ln.tot{color:#121214;font-weight:700;border-top:1px dashed rgba(18,18,20,.3);padding-top:8px}
.barcode{height:34px;margin-top:4px;background:repeating-linear-gradient(90deg,#121214 0 2px,transparent 2px 4px,#121214 4px 5px,transparent 5px 8px)}
@media (prefers-reduced-motion:reduce){.paper{transform:none!important;animation:none!important}.xc-flip>*{transition:none}}
/* Apple Pay on the card (preview: drawn, nothing is charged) */
.xapay{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;padding:18px;border-radius:22px;background:#fff;box-shadow:0 -10px 40px rgba(0,0,0,.18);animation:xapay .45s cubic-bezier(.22,1,.36,1) both}
@keyframes xapay{from{transform:translateY(110%)}}
.xapay p{margin:0 0 8px;font:700 10px/12px var(--jo);letter-spacing:.16em;text-transform:uppercase;color:var(--label2)}
.xapay b{display:block;margin:6px 0 14px;font:400 22px/26px var(--jo)}
.xapay div{height:50px;border-radius:14px;background:#000;color:#fff;display:grid;place-items:center;font:700 11px/1 var(--jo);letter-spacing:.16em}
/* the island from his reference picture: a frosted white pill of four solid glyphs with words, and a round CHECK IN apart */
.xisl2{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:10px;view-transition-name:xisland}
.xpill{display:flex;gap:2px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 14px 34px rgba(17,24,39,.16),inset 0 0 0 .5px rgba(0,0,0,.08)}
.xpill a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:62px;padding:6px 6px 5px;border-radius:999px;color:#000;text-decoration:none}
.xpill svg{width:24px;height:24px;fill:#000}
.xpill span{font:700 8.5px/10px var(--jo);letter-spacing:.12em;text-transform:uppercase}
.xround{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 14px 34px rgba(17,24,39,.16),inset 0 0 0 .5px rgba(0,0,0,.08);color:#000}
.xround svg{width:24px;height:24px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.xone-screen .xnote{bottom:calc(92px + env(safe-area-inset-bottom))!important}
/* ALL SET on the new client's card */
.xall{margin-top:6px;padding:12px 14px;border-radius:18px;background:var(--fill3)}
.xall ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.xall li button,.xall li a{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;min-height:40px;justify-content:center;padding:6px 0 6px 30px;position:relative;cursor:pointer;font:400 14px/18px var(--jo);color:#000}
.xall li button::before,.xall li a::before{content:"";position:absolute;left:0;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #000}
.xall li.done button::before,.xall li.done a::before{background:#000}
.xall li.done button::after,.xall li.done a::after{content:"";position:absolute;left:7px;top:50%;width:5px;height:10px;margin-top:-7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.xall li.done{opacity:.55}.xall small{font:400 11px/14px var(--jo);color:var(--label2)}
.xall.allset{background:#161616;color:#fff}.xall.allset .xc-sub{color:#fff}

/* Hi, I'm Arthur on the sign-in: one plain sentence in Apple's font, no Arthur mark (2026-10-25, "Remove Arthur logos everywhere") */
.hisay{margin:0 auto 12px;max-width:320px;text-align:center;font:400 15px/20px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,sans-serif;text-transform:none;letter-spacing:0;color:var(--label)}
/* the walkthrough fixes (2026-10-25): the member's card fits its card, the island never covers a card, the grey runs the whole
   height, and from 700 px wide the cards stand side by side (RULE 2) */
.xc-you .xcl{width:100%;max-width:420px;align-self:center}.xc-you .xcl .mcard{width:100%;max-width:none!important}
.xc-you .mcard .name{font-size:clamp(22px,11cqi,40px)!important;line-height:1.08!important;white-space:normal!important;overflow-wrap:anywhere}
html:has(.xdeck),html:has(.xdeck) body{background:#f2f2f4;min-height:100%}
body:has(.xisl2) main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
@media (min-width:700px){.xdeck.xgrid{width:min(calc(100% - 48px),1180px);display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;height:auto!important}
  .xdeck.xgrid>.xc{position:relative!important;inset:auto!important;transform:none!important;opacity:1!important;filter:none!important;min-height:380px}
  .xdeck.xgrid>.xc *{pointer-events:auto!important}}
/* only the cards and the island move (his rule 2026-10-25): the page itself never slides, so the island stays fixed to the screen's
   bottom (a moving main made the island float mid-screen); from 700 px the deck gets the whole width for 2 to 3 cards side by side;
   the member's card sits inside its card, never past its edge */
body:has(.xisl2) main{transform:none!important;animation:none!important}
@media (min-width:700px){body:has(.xdeck.xgrid) main{max-width:none}}
.xc-you .xcl .mcard{margin:0!important}

/* the checkout's effects (2026-10-25, "Clients checkout should have same effects throughout"): the needle line, the frost on the way
   to Stripe, and the receipt card that lands on Booked (public/fx.js) */
.fxline{position:fixed;inset:0;z-index:400;pointer-events:none}.fxline rect{fill:none;stroke:#111;stroke-width:1.2}
.fxfrost{position:fixed;inset:0;z-index:390;pointer-events:none;background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.fxreceipt{margin:18px 16px 6px;padding:16px 18px;border-radius:22px;background:linear-gradient(150deg,#f6f5f1,#ebe9e2);box-shadow:0 1px 3px rgba(0,0,0,.05),0 18px 40px rgba(17,24,39,.12),inset 0 0 0 1px rgba(0,0,0,.05)}
.fxreceipt .eyebrow{margin:0 0 8px;font:700 10px/1 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#7a7770}
.fxreceipt .rrow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid rgba(0,0,0,.07);font-size:14px}
.fxreceipt .rrow:first-of-type{border-top:0}.fxreceipt .rrow span{color:#7a7770;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700}
.fxreceipt .rrow b{text-align:right;overflow-wrap:anywhere}
@media (min-width:700px){.fxreceipt{max-width:520px;margin-left:auto;margin-right:auto}}

/* a Besties link (2026-10-25): the inviter's card with its stack behind, the friend's new card attaching to the group; Add friends as a card back */
.xjst{position:relative;width:100%;height:230px;margin:6px auto 18px;max-width:360px}
.xjc,.xjb,.xjnew{position:absolute;left:50%;width:min(320px,86%);aspect-ratio:1.586;border-radius:18px;transform:translateX(-50%)}
.xjc{top:20px;z-index:3;background:linear-gradient(150deg,#1c1c1e,#2a2a2d);color:#f4efe4;padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.xjb{z-index:1}.xjb.b1{top:8px;transform:translateX(-50%) scale(.96);background:linear-gradient(135deg,#efe2b8,#c3a061);z-index:2}.xjb.b2{top:-2px;transform:translateX(-50%) scale(.92);background:linear-gradient(135deg,#eceef1,#c9ced5);z-index:1}
.xjk{font:700 9px/1 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.18em;text-transform:uppercase;opacity:.7}.xjc b,.xjnew b{font:700 26px/1 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.02em;text-transform:uppercase}
.xjt{font:600 10px/1 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#d8bf86}
.xjst.joined{height:300px}.xjnew{top:20px;z-index:4;transform:translate(-50%,26px);background:#fff;color:#111;padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 22px 48px rgba(17,24,39,.22),inset 0 0 0 1px rgba(0,0,0,.06)}
.xjg{position:absolute;left:0;right:0;bottom:-6px;margin:0;text-align:center;font:700 11px/1 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#7a7770}
.xfback{margin:10px auto 0;max-width:380px;border-radius:26px;padding:22px 20px;background:linear-gradient(150deg,#1c1c1e,#2a2a2d);color:#f4efe4;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 22px 50px rgba(0,0,0,.25)}
.xfback .xfk{margin:0;font:700 11px/1 var(--jo,'Josefin Sans',sans-serif);letter-spacing:.18em;text-transform:uppercase;opacity:.75}.xfback .xqr{background:#fff;border-radius:14px;padding:8px}
.xfback .xc-sub{color:rgba(244,239,228,.75)}.xfback .xc-go{background:#f4efe4;color:#1c1c1e}

/* IMG7806, approved Library v4: adapt presentation tokens to the existing live card deck.
   Real member facts and every booking/payment/consent route remain in their original renderer. */
html:has(body.xhome),html:has(body.xhome) body.xhome{background:#fff;color:#181a1d}
body.xhome{--ref-champagne:#d8d0be;--ref-silver:#cdd2d8;--ref-radius:28px}
body.xhome .xdeck:not(.xgrid){width:min(calc(100% - 70px),320px);height:500px;min-height:500px;margin-top:20px;margin-bottom:28px}
body.xhome .xdeck:not(.xgrid)>.xc{top:36px;border-radius:var(--ref-radius);transform-origin:50% 50%;border:1px solid #e5e6e8;box-shadow:0 16px 34px #1423350c;filter:none}
body.xhome .xdeck:not(.xgrid)>.xc:not(.xfront):nth-child(2){background:linear-gradient(140deg,#d1c6b0dd,#eee9dfd9)}
body.xhome .xdeck:not(.xgrid)>.xc:not(.xfront):nth-child(3){background:linear-gradient(140deg,#bdc5cddd,#edf1f4e6)}
body.xhome .xc-you{background:linear-gradient(130deg,#fff,#f6f7f8);padding:26px 24px;color:#181a1d;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.xhome .xc-you::after{display:none}
body.xhome .xc-you .xc-tab{font:600 10px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#68727d;letter-spacing:.09em}
body.xhome .xref-logo{width:68px;height:46px;object-fit:contain;object-position:left center;margin-top:4px}
body.xhome .xc-you .xc-grow{flex:0}
body.xhome .xc-you .xc-name{font:750 30px/1.05 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.04em;text-align:left;overflow-wrap:anywhere;margin:20px 0 4px}
body.xhome .xc-you .xc-sub{font:500 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#626a72;letter-spacing:.04em}
body.xhome .xc-you .xquick{margin-top:auto;flex-wrap:wrap;gap:6px}
body.xhome .xc-you .xquick a{min-width:0;flex:1;padding:0 12px;border:1px solid #b6bdc5;background:#ffffff66;color:#34373c;font:650 10px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.055em}
body.xhome .xc-you .xcl .mcard{aspect-ratio:auto;min-height:260px;padding:0!important;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;color:#181a1d!important}
body.xhome .xc-you .xcl .mcard::before,body.xhome .xc-you .xcl .mcard::after{display:none}
body.xhome .xc-you .mcard .name{font:750 30px/1.05 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:-.04em!important;color:#181a1d!important}
body.xhome .xc-you .mcard .facts,body.xhome .xc-you .mcard .pan,body.xhome .xc-you .mcard .status,body.xhome .xc-you .mcard .plat{color:#626a72!important}
body.xhome .xc-you .mcard .lockup img{filter:brightness(0)!important;width:68px;height:46px;object-fit:contain;object-position:left center}
body.xhome .xc-you .mcard .lockup span{color:#626a72!important}
body.xhome .xc-you:has(form){animation:none!important;translate:0 0!important;rotate:0deg!important}
/* Individual translate/rotate compose with the deck's existing transform; form screens stay still. */
@keyframes book-reference-arrival{from{opacity:0;translate:-20px 25px;rotate:-4deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes book-reference-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:4px -9px;rotate:1deg}}
body.xhome .xdeck.xready:not(.xgrid)>.xc-you.xfront{animation:book-reference-arrival 2.5s .28s cubic-bezier(.2,.75,.2,1) backwards,book-reference-float 7s 3s ease-in-out infinite}
body.xhome .xdeck:focus-within>.xc,body.xhome .xdeck:hover>.xc,body.xhome[data-card-motion-paused=true] .xdeck>.xc,body.xhome[data-card-page-hidden=true] .xdeck>.xc{animation-play-state:paused!important}
.xref-pause{display:block;margin:0 auto 16px;min-height:44px;padding:0 14px;border:1px solid #e5e6e8;border-radius:999px;background:#ffffff8c;color:#68727d;font:600 10px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.055em;text-transform:uppercase}
.xref-pause:focus-visible{outline:2px solid #181a1d;outline-offset:3px}
.xref-pause:disabled{opacity:.7}
/* Preserve all existing island destinations; Friends sits left and the primary remains right. */
.xisl2{gap:6px;max-width:calc(100% - 24px);bottom:calc(12px + env(safe-area-inset-bottom));z-index:100}
.xpill{gap:0;padding:5px;background:#ffffff8c;border:1px solid #e5e8eb;box-shadow:0 4px 16px #18253608}
.xpill a{min-width:44px;min-height:44px;padding:4px;box-sizing:border-box}
.xpill a:last-child{order:-1}
.xpill a:last-child svg{fill:none;stroke:currentColor;stroke-width:1.4}
.xpill svg{width:20px;height:20px}
.xpill span{font-size:7px;letter-spacing:.04em}
.xround{width:auto;min-width:100px;min-height:54px;height:auto;padding:0 12px;box-sizing:border-box;border-radius:999px;background:#ffffff8c;border:1px solid #9ea7b1;box-shadow:0 4px 16px #18253608;text-decoration:none}
.xround span{font:650 11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.055em;text-transform:uppercase}
.xround:has(span) svg{display:none}
@media(min-width:700px){body.xhome .xdeck.xgrid>.xc-you{aspect-ratio:182/255;min-height:420px;align-self:start;box-sizing:border-box;width:100%;max-width:320px;justify-self:center}}
@media(orientation:landscape) and (max-height:520px){body.xhome .xdeck:not(.xgrid){width:280px;height:440px;min-height:440px;margin-left:auto;margin-right:auto}body.xhome .xdeck:not(.xgrid)>.xc{top:36px}body.xhome .xisl2{left:auto;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));bottom:auto;transform:none;flex-direction:column}body.xhome .xpill{flex-direction:column}body.xhome .xpill a{min-width:60px}body.xhome .xref-pause{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:8px;z-index:100;max-width:100px;margin:0}}
@media(prefers-reduced-motion:reduce){body.xhome .xdeck>.xc{animation:none!important;transition:none!important;translate:0 0!important;rotate:0deg!important}}

/* ---------- DIAGONAL DISPATCH (2026-10-26, his approved IMG_7806 card as ChatGPT's vertical stack motion 05; memory project_diagonal_dispatch_rebuild) ----------
   Every screen: a white ground, one white portrait card in front (28px corners, a hairline, a soft deep shadow), the champagne and silver
   cards fanned behind it, three small outlined circle actions on the personal card, a translucent glass island at the thumb with the
   dark CHECK IN pill. The front arrives on the diagonal axis and floats; the rears orbit in and bump once (public/xstack.js moves, this
   file owns every resting position by data-d). The booking steps keep their one card with the same rears drawn behind. Reduce Motion: still. */
:root{--dd-face:#fcfcfd;--dd-ink:#181a1d;--dd-mute:#68727d;--dd-line:#e5e6e8;--dd-champagne:#d8d0be;--dd-silver:#cdd2d8;--dd-r:28px;--dd-sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;--dd-ease:cubic-bezier(.2,.75,.2,1);--fanx:clamp(40px,14vw,60px)}
html:has(.xdeck),html:has(.xdeck) body,body.xone-screen,.xone-screen{background:#fff}
.xc,.xc-page,.xc-flip>.xc-front,.xc-flip>.xc-back{border-radius:var(--dd-r);background:linear-gradient(130deg,#fff,#f6f7f8);color:var(--dd-ink);border:1px solid var(--dd-line);box-shadow:0 16px 34px #1423350c,inset 0 1px 0 #fff}
.xc::after{display:none}
.xc-tab{color:var(--dd-mute);font:700 10px/12px var(--jo);letter-spacing:.14em}
.xc-name{font:750 30px/1.05 var(--dd-sys);letter-spacing:-.04em;text-transform:uppercase;overflow-wrap:anywhere}
.xc-big{font-size:34px}
.xc-sub{color:var(--dd-mute);font:600 10px/14px var(--dd-sys);letter-spacing:.09em}
.xc-soft{font:500 11px/15px var(--dd-sys);letter-spacing:.04em;text-transform:none;color:#626a72}
/* the personal card: logo top left, the name big and bold, the two kind pills and the three circle actions at the foot */
.xc-you{padding:24px 22px 18px;font-family:var(--dd-sys)}
.xc-you .xref-logo{width:68px;height:46px;object-fit:contain;object-position:left center;margin-top:2px}
.xc-you .xc-grow{flex:0 0 18px}
.xc-you .xquick{margin-top:auto;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.xc-you .xquick a,.xc-back .xquick a{min-width:0;flex:1;min-height:40px;padding:0 12px;border:1px solid #b6bdc5;background:#ffffff66;color:#34373c;font:650 10px/1.4 var(--dd-sys);letter-spacing:.055em;text-transform:uppercase}
.xacts{display:flex;align-items:center;gap:1px;margin:10px 0 -6px -8px}
.xact{position:relative;flex:none;width:44px;height:44px;min-height:44px;min-width:44px;padding:0;margin:0;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:var(--dd-mute);text-decoration:none;-webkit-tap-highlight-color:transparent}
.xact::before{content:"";position:absolute;inset:8px;border:1px solid #b6bdc5;border-radius:50%;background:transparent;transition:background .25s,border-color .25s}
.xact svg{position:relative;z-index:1;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.xact:active::before,.xact[aria-pressed="true"]::before{border-color:#344b60;background:#ffffff66}
/* the back of the personal card: quiet lines */
.xc>.xc-back{display:none}
.xc.xturn>*:not(.xc-tab):not(.xc-back):not(.xacts){display:none}
.xc.xturn>.xc-back{display:flex;flex-direction:column;gap:6px;flex:1}
.xc-back .xline{margin:0;display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--dd-line);font:600 10px/1.5 var(--dd-sys);letter-spacing:.09em;text-transform:uppercase;color:var(--dd-mute)}
.xc-back .xline b{color:var(--dd-ink);text-align:right;font-weight:650;overflow-wrap:anywhere}
.xc-back .xquick{margin-top:auto}
/* the deck on a phone: a portrait stage, the front card full, the champagne card left and the silver card right behind it */
.xdeck:not(.xone):not(.xgrid){width:min(calc(100% - 72px),320px);height:calc(min(100vw - 72px,320px) * 1.4 + 24px);min-height:0;margin:22px auto 10px;perspective:1250px}
.xdeck:not(.xone):not(.xgrid)>.xc{top:24px;transform-origin:50% 50%;filter:none!important;transition:transform .85s var(--dd-ease),opacity .4s,background .6s}
.xdeck:not(.xone):not(.xgrid)>.xc[data-d="1"]{transform:translate(-25px,-8px) rotate(-9deg) scale(.9);background:linear-gradient(140deg,#d1c6b0dd,#eee9dfd9);border-color:#d8d1c5}
.xdeck:not(.xone):not(.xgrid)>.xc[data-d="2"]{transform:translate(26px,-4px) rotate(8deg) scale(.93);background:linear-gradient(140deg,#bdc5cddd,#edf1f4e6);border-color:#cdd3da}
.xdeck:not(.xone):not(.xgrid)>.xc[data-d="3"]{transform:scale(.94);opacity:0;background:#f2f3f5;border-color:#d6dce1}
.xdeck:not(.xone):not(.xgrid)>.xc[data-d="4"]{transform:scale(.9);opacity:0}
.xdeck:not(.xgrid)>.xc[data-d="1"]>*:not(.xc-tab),.xdeck:not(.xgrid)>.xc[data-d="2"]>*:not(.xc-tab),.xdeck:not(.xgrid)>.xc[data-d="3"]>*:not(.xc-tab){opacity:0;pointer-events:none}
.xdeck:not(.xgrid)>.xc[data-d="1"]>.xc-tab,.xdeck:not(.xgrid)>.xc[data-d="2"]>.xc-tab,.xdeck:not(.xgrid)>.xc[data-d="3"]>.xc-tab{color:#475666;opacity:.8}
.xdeck:not(.xgrid)>.xc[data-d="1"]>.xc-tab>span:first-child,.xdeck:not(.xgrid)>.xc[data-d="2"]>.xc-tab>span:first-child{display:none}
.xdeck:not(.xgrid)>.xc[data-d="2"]>.xc-tab{justify-content:flex-end}
.xdeck:not(.xgrid)>.xc.xfront{touch-action:pan-y}
/* spread: the + under the deck, or two fingers apart: the front lifts, the rears fan out, the third card shows below */
.xdeck.xspread:not(.xone):not(.xgrid)>.xc.xfront{transform:translateY(-24px) scale(1.02)}
.xdeck.xspread:not(.xone):not(.xgrid)>.xc[data-d="1"]{transform:translate(calc(-1 * var(--fanx)),-18px) rotate(-17deg) scale(.82)}
.xdeck.xspread:not(.xone):not(.xgrid)>.xc[data-d="2"]{transform:translate(var(--fanx),-7px) rotate(17deg) scale(.84)}
.xdeck.xspread:not(.xone):not(.xgrid)>.xc[data-d="3"]{opacity:1;transform:translate(0,54px) rotate(2deg) scale(.78)}
.xplus{display:grid;place-items:center;width:44px;height:44px;margin:4px auto 0;padding:0;border:1px solid #d1dfe77a;border-radius:50%;background:#ffffff50;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#435e73;font:300 27px/1 var(--jo);transition:rotate .7s ease;-webkit-tap-highlight-color:transparent}
.xplus[aria-expanded="true"]{rotate:45deg}
/* the float, the bump, the motion the pause button stops */
@keyframes dd-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:4px -9px;rotate:1deg}}
@keyframes dd-bump-l{0%,100%{translate:0 0}40%{translate:12px -8px}68%{translate:-3px 2px}}
@keyframes dd-bump-r{0%,100%{translate:0 0}46%{translate:-12px 8px}73%{translate:3px -2px}}
.xdeck.xfloat:not(.xgrid)>.xc.xfront{animation:dd-float 7s ease-in-out infinite}
.xdeck.xbump:not(.xgrid)>.xc[data-d="1"]{animation:dd-bump-l .86s ease-out}
.xdeck.xbump:not(.xgrid)>.xc[data-d="2"]{animation:dd-bump-r .86s .04s ease-out}
.xdeck:focus-within>.xc,body[data-card-motion-paused=true] .xdeck>.xc,body[data-card-page-hidden=true] .xdeck>.xc{animation-play-state:paused!important}
body.xhome .xdeck.xready:not(.xgrid)>.xc-you.xfront{animation:none}
.xref-pause{margin:10px auto 14px;border-color:transparent;background:transparent;font:600 9px/1.4 var(--dd-sys);letter-spacing:.09em;color:#9aa3ab}
/* every booking step: its one card with the two rears drawn behind it; the step arrives on the diagonal */
.xdeck.xone{width:min(calc(100% - 56px),520px);padding-top:0;margin-top:26px;perspective:1250px}
.xdeck.xone::before,.xdeck.xone::after{content:"";position:absolute;inset:0;left:0;right:0;top:0;height:auto;border-radius:var(--dd-r);filter:none;opacity:1;transform-origin:50% 50%;box-shadow:0 16px 34px #1423350c}
.xdeck.xone::before{background:linear-gradient(140deg,#d1c6b0dd,#eee9dfd9);border:1px solid #d8d1c5;transform:translate(-25px,-8px) rotate(-9deg) scale(.9)}
.xdeck.xone::after{background:linear-gradient(140deg,#bdc5cddd,#edf1f4e6);border:1px solid #cdd3da;transform:translate(26px,-4px) rotate(8deg) scale(.93)}
.xc-page{padding:18px 18px 20px}
@keyframes ddin{from{transform:perspective(1250px) rotate3d(1,-1,0,-40deg) translateY(25px);opacity:0}}
::view-transition-new(xcard){animation:ddin .7s var(--dd-ease) both}
/* the island: translucent white glass, outline icons, Besties first, the dark CHECK IN pill apart */
.xisl2{left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));width:min(calc(100vw - 28px),390px);max-width:none;display:flex;align-items:center;gap:6px;z-index:100}
.xpill{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;height:62px;padding:5px;border:1px solid #dfe3e780;border-radius:40px;background:rgba(255,255,255,.48);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 8px 30px #29435b0b}
.xpill a{display:grid;place-items:center;width:100%;height:50px;min-width:44px;min-height:44px;padding:0;margin:0;border-radius:32px;color:#101419;transition:background .25s,transform .25s}
.xpill a:active{transform:scale(.94)}.xpill a.on,.xpill a[aria-current]{background:#e8eaedb0}
.xpill svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xpill span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.xpill a:last-child{order:-1}
.xround{flex:none;width:auto;height:52px;min-height:52px;min-width:0;padding:0 18px;border:0;border-radius:999px;background:#181a1d;color:#fff;box-shadow:0 8px 24px rgba(24,26,29,.22)}
.xround span{font:650 11px/1 var(--dd-sys);letter-spacing:.055em;text-transform:uppercase;color:#fff}
.xround svg{display:none}
/* RULE 2: a sideways phone keeps a smaller stage beside the island column; the fold and iPad stand the cards side by side */
@media (orientation:landscape) and (max-height:520px){
  .xdeck:not(.xone):not(.xgrid),body.xhome .xdeck:not(.xone):not(.xgrid){width:calc((100svh - 80px) * .714);height:calc(100svh - 56px);min-width:0;margin:12px auto 0}body.xhome .xdeck:not(.xone):not(.xgrid)>.xc{top:24px}
  .xdeck.xone{width:min(calc(100% - 180px - env(safe-area-inset-right)),520px);margin-left:max(28px,env(safe-area-inset-left))}
  .xisl2{left:auto;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));bottom:auto;transform:none;flex-direction:column;width:auto}
  .xpill{grid-template-columns:1fr;height:auto;width:62px;padding:5px}.xpill a{height:50px}
  .xround{height:auto;min-height:0;padding:14px 10px;width:62px;border-radius:31px}.xround span{writing-mode:vertical-rl;transform:rotate(180deg)}
  .xplus{margin-top:0}
}
@media (min-width:700px) and (min-height:521px){
  .xdeck.xgrid>.xc{filter:none!important;transform:none!important;opacity:1!important}
  .xdeck.xgrid>.xc-you{aspect-ratio:182/255;min-height:420px;width:100%;max-width:320px;justify-self:center;align-self:start}
  .xisl2{width:min(calc(100vw - 48px),420px)}
}
@media (prefers-reduced-motion:reduce){.xdeck>.xc,.xdeck.xone::before,.xdeck.xone::after{animation:none!important;transition:opacity .2s!important}::view-transition-new(xcard){animation:none}.xplus{transition:none}}
@media (prefers-reduced-transparency:reduce){.xpill,.xplus{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* ---------- Diagonal Dispatch, the latest ChatGPT release (9ffdb11c, 2026-10-26 18:25 UTC, read live at his ask): the + and pause
   circles under the stack with the one-line hint, the entry island (friends left, ACTIVATE YOUR CARD right) on the sign-in, the booking
   steps as the card's back: a small caps title, a two-pill choice, outlined secondary pills, one black main button ---------- */
.xctl{display:flex;justify-content:center;align-items:center;gap:10px;margin:6px auto 0}
.xctl .xplus,.xctl .xref-pause{display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid #d1dfe77a;border-radius:50%;background:#ffffff50;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#435e73;font:300 27px/1 var(--jo);letter-spacing:0;text-transform:none}
.xctl .xref-pause{font:400 13px/1 var(--jo);color:#435e73}
.xhint{margin:10px 16px 0;text-align:center;font:600 10px/14px var(--jo);letter-spacing:.14em;text-transform:uppercase;color:#687580}
/* the sign-in: the entry island, friends on the left, ACTIVATE YOUR CARD on the right */
.xentry .xpill{grid-template-columns:1fr;flex:none;width:62px}
.xentry .xpill a:not(:last-child){display:none}
.xentry .xround{flex:1;background:#ffffff66;color:#232b33;border:1px solid #9ea7b1;box-shadow:none;min-height:52px;justify-content:center;display:grid;place-items:center}
.xentry .xround span{display:none}
.xentry .xround::after{content:"Activate your card";font:650 12px/1 var(--dd-sys);letter-spacing:.055em;text-transform:uppercase;color:#173d58}
.xentry .xisl2{width:min(calc(100vw - 48px),310px);padding:5px;gap:5px;border:1px solid #dfe3e780;border-radius:40px;background:rgba(255,255,255,.48);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 8px 30px #29435b0b}
.xentry .xpill{border:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.xentry .xpill a{width:52px;height:52px;border-radius:50%;border:1px solid #aab3bc;background:#ffffff45}
/* a booking step: the card's back */
.xc-page .hero h1,.xc-page .display,.xc-page .head h1{font:600 12px/16px var(--dd-sys);letter-spacing:.09em;text-transform:uppercase;color:#34373c}
.xc-page .eyebrow{font:600 10px/14px var(--dd-sys);letter-spacing:.09em;color:#68727d}
.xc-page .airy.chips a,.xc-page .taps.kinds a,.xc-page .airy.langrow a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid #b6bdc5;border-radius:999px;background:#ffffff66;color:#34373c;font:650 10px/1.3 var(--dd-sys);letter-spacing:.055em;text-transform:uppercase;text-align:center}
.xc-page .airy.chips a.on,.xc-page .taps.kinds a.on,.xc-page .airy.langrow a.on{background:#e8eaedb0;border-color:#9ea7b1;color:#181a1d}
.xc-page .btn.ghost,.xc-page .cta.alt,.xc-page .btn.white{border:1px solid #b6bdc5;background:#ffffff66;color:#34373c;box-shadow:none;font:650 11px/1.3 var(--dd-sys);letter-spacing:.055em}
.xc-page .quiet{font:650 10px/1.3 var(--dd-sys);letter-spacing:.055em;text-transform:uppercase;color:#68727d;text-decoration:none;border:1px solid #b6bdc5;border-radius:999px;padding:0 12px;min-height:36px}
.xc-page .btn:not(.ghost):not(.white):not(.satin),.xc-page .cta:not(.alt){background:#1e2124;color:#fff;box-shadow:0 8px 24px rgba(24,26,29,.18);border-radius:999px}
/* the member's personal card fits its card: the flattened Wallet facts sit tight so the three circles stay in view (2026-10-26) */
.xc-you .xcl .mcard{min-height:0!important;gap:4px;padding:0!important}
.xc-you .xcl .mcard .row1{margin:0}.xc-you .xcl .mcard .pan{margin:10px 0 6px;font-size:13px;letter-spacing:.14em}
.xc-you .xcl .mcard .name{margin:0;font-size:30px!important}.xc-you .xcl .mcard .status{margin:2px 0 0;font:600 11px/1.5 var(--dd-sys)!important;letter-spacing:.09em!important;text-transform:uppercase}
.xc-you .xcl .mcard .facts{margin-top:10px;gap:14px}.xc-you .xcl .mcard .facts span{font:600 9px/12px var(--dd-sys);letter-spacing:.09em}.xc-you .xcl .mcard .facts b{font:400 12px/14px var(--jo)}
.xc-you .xc-sub{margin-top:8px}.xc-you .xquick{margin-top:12px}.xc-you .xacts{padding-top:8px;margin-bottom:-4px}
.xc-you{padding:20px 20px 14px}
/* RULE 2 on the sign-in (measured live 2026-10-26): sideways, the entry island is the narrow column at the right edge, never a 310px
   bar over the card; on the fold and iPad the card ends above the island */
@media (orientation:landscape) and (max-height:520px){.xentry .xisl2{width:auto;padding:5px;flex-direction:column;gap:6px}.xentry .xround{flex:none;min-height:0;height:auto;padding:14px 8px;width:52px;border-radius:26px}.xentry .xround::after{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px}}
@media (min-width:700px){.xentry .splash.signin{padding-top:10px;padding-bottom:0}.xentry .xdeck.xone{margin-top:14px}.xentry main{padding-top:calc(46px + env(safe-area-inset-top))}.xentry .form.entry{padding-bottom:0}.xentry .form.entry .btn{margin-bottom:0}}
/* Short screens: the card and sign-in sit beside each other, clear of the island.
   Keep the same Diagonal Dispatch faces, hierarchy and touch targets. */
@media (orientation:landscape) and (min-width:560px) and (max-height:520px){
  body.xentry:has(.xisl2) main{max-width:none;padding-top:calc(44px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .xentry .xdeck.xone{width:min(calc(100% - 128px - env(safe-area-inset-right)),700px);margin:10px 0 0 max(28px,env(safe-area-inset-left));max-width:none}
  .xentry .xc-page{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:12px 24px;padding:16px;min-height:0}
  .xentry .xc-tab{grid-column:1/-1;margin:0}
  .xentry .splash.signin{padding:0;gap:8px;min-width:0}
  .xentry .hisay{font-size:13px;line-height:18px;margin:0;max-width:280px}
  .xentry .signin-card{max-width:280px}
  .xentry .signin-card .mcard{min-height:0!important;aspect-ratio:1.586;padding:16px!important}
  .xentry .form.entry{padding:0;margin:0;min-width:0}
  .xentry .form.entry .f{margin:0 0 14px}
  .xentry .form.entry .btn{margin:0;min-height:44px;width:100%}
}