/* Athlevo coded prototype. Values are measured on the case study boards (393 x 852 pt screens), tokens live in tokens/tokens.css. */
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{font:400 14px/1.4 var(--ui);color:var(--paper);background:var(--board);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;text-align:inherit}button:disabled{cursor:default}
a{color:inherit}h1,h2,h3,p,dl,dd,ul{margin:0;padding:0}i,em{font-style:normal}
:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

/* page */
.wrap{max-width:1180px;margin:0 auto;padding:24px 24px 40px;display:grid;grid-template-columns:auto 1fr;gap:72px;align-items:start}

/* device: lavender rim and black bezel, as drawn on the flow boards */
.phone{position:relative;flex:none;padding:5px;border-radius:72px;background:linear-gradient(150deg,#AEBAF1 0,#6B7BBE 22%,#3D4E8D 50%,#6B7BBE 78%,#AEBAF1 100%);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.phone::before,.phone::after{content:"";position:absolute;width:4px;border-radius:2px;background:#6B7BBE}
.phone::before{left:-3px;top:170px;height:34px;box-shadow:0 62px 0 #6B7BBE,0 62px 0 0 #6B7BBE,0 124px 0 #6B7BBE}.phone::after{right:-3px;top:250px;height:92px}
.bezel{padding:14px;border-radius:67px;background:#000}
.screen{position:relative;width:393px;height:min(852px,calc(100vh - 86px));min-height:680px;border-radius:53px;background:var(--ink);overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.status{position:relative;z-index:6;flex:none;height:54px;display:flex;justify-content:space-between;align-items:center;padding:8px 30px 0 44px;font-size:17px;pointer-events:none}
.status b{font-weight:600;letter-spacing:-.01em}.island{position:absolute;left:50%;top:11px;transform:translateX(-50%);width:124px;height:36px;border-radius:20px;background:#000}
.sys{display:flex;gap:6px;align-items:center}.sys svg{fill:currentColor;display:block}
.homebar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:#fff;z-index:8;pointer-events:none}

/* icons */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pic{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.pic .h{fill:currentColor;stroke:none}
.st{width:14px;height:14px;fill:var(--volt);vertical-align:-2px}

/* scroll area */
.view{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 0 132px;scrollbar-width:none;margin-top:0}.view::-webkit-scrollbar{display:none}
.view.root{padding-bottom:128px}

/* home header */
.top{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 0}
.loc small{display:block;color:#C9C9C9;font-size:12px;line-height:16px}.loc b{display:flex;align-items:center;gap:6px;font-weight:500;font-size:16px;line-height:24px}
.loc .ic{width:20px;height:20px;color:var(--lav)}.loc .ic:last-child{width:14px;height:14px;color:var(--paper)}
.top-r{display:flex;gap:8px;align-items:center}
.avatar{width:var(--control);height:var(--control);border-radius:50%;display:grid;place-items:center;flex:none;background:radial-gradient(circle at 60% 35%,#F2553F,#B8231B);font-weight:600;font-size:16px;color:#fff}
.avatar.xl{position:relative;display:inline-grid;width:144px;height:144px;font-size:44px;box-shadow:0 0 0 1px var(--lav)}
.avatar.xl i{position:absolute;right:6px;bottom:14px;width:22px;height:22px;border-radius:50%;background:var(--lav);color:var(--ink);display:grid;place-items:center}.avatar.xl i .ic{width:12px;height:12px}

/* round buttons */
.rb{position:relative;width:var(--control);height:var(--control);border-radius:50%;display:grid;place-items:center;flex:none}
.rb.lav{background:var(--lav);color:var(--ink)}.rb.lav:active{background:var(--lav-active);color:var(--paper)}
.rb.ghost{background:#151515;border:1px solid #262626;color:var(--paper)}.rb.sm{width:32px;height:32px}.rb.sm .ic{width:16px;height:16px}
.rb.ghost.sm{background:var(--card);border-color:#2B2A1C;color:var(--volt)}
.rb.frost{position:absolute;left:12px;top:12px;width:36px;height:36px;background:rgba(22,22,22,.28);color:var(--volt);backdrop-filter:blur(6px);z-index:2}.rb.frost.r{left:auto;right:12px}.rb.frost .ic{width:18px;height:18px}
.rb.fav .ic .f{fill:currentColor}.rb.ghost.fav{color:var(--lav)}.rb.ghost.sm.fav,.rb.frost.fav{color:var(--volt)}
.rb.dot::after{content:"";position:absolute;right:9px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 2px var(--lav)}

/* search */
.search{display:flex;gap:14px;align-items:center;height:var(--field-h);margin:16px 16px 0;padding:0 12px 0 16px;background:var(--field);border:1px solid #2E2E2E;border-radius:var(--r-pill);flex:1;min-width:0}
.search>.ic{color:var(--paper);opacity:.9}.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);font:400 12px/1 var(--ui)}.search input::placeholder{color:#8A8A96;opacity:1}
.fbtn{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--paper)}.fbtn.on{color:var(--lav)}.fbtn.on::after{content:"";position:absolute;right:4px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--volt)}
.freeline{display:flex;align-items:center;gap:8px;width:calc(100% - 32px);margin:10px 16px 0;padding:0 4px;height:24px;font-size:12px;color:var(--grey)}
.freeline .ic{width:16px;height:16px}.freeline span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.freeline i{color:var(--lav)}.freeline.on{color:var(--lav)}.freeline.on span{color:var(--paper)}

/* section heading */
.h{display:flex;justify-content:space-between;align-items:center;padding:22px 16px 12px}.h h2{font-size:16px;font-weight:500;line-height:24px}
.h>button:not(.btn){display:flex;align-items:center;gap:4px;font-size:14px;color:var(--lav);opacity:.86}.h>button .ic{width:16px;height:16px}.h.tight{padding-top:16px}
h1{font-size:18px;font-weight:600;line-height:24px}h3{font-size:16px;font-weight:500;line-height:24px;margin:20px 0 12px}
.grey{color:var(--grey)}.grey b{color:var(--paper);font-weight:500}.center{text-align:center}.pad{padding:0 16px}
.note{margin:-4px 16px 12px;color:var(--grey);font-size:12px}.fineprint{font-size:12px;margin-top:16px}.empty{color:var(--grey);padding:0 16px;font-size:14px}
hr{border:0;border-top:1px solid var(--line);margin:24px 0 0}hr.dash{border-top:1px dashed #2A2A2A;margin:16px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--r-pill);background:var(--lav);color:var(--ink);font-weight:500;font-size:16px;text-decoration:none;white-space:nowrap}
.btn:active{background:var(--lav-active);color:var(--paper)}.btn:disabled,.btn.off{background:#26194D;color:#5B48AE}
.btn.lg{height:var(--button);font-weight:600;min-width:0}.btn.wide{width:100%;margin-top:20px}.btn.sm{height:32px;padding:0 12px;font-size:14px;gap:6px}.btn .ic{width:20px;height:20px}.btn.sm .ic{width:16px;height:16px}

/* big home cards */
.big{position:relative;display:flex;align-items:center;width:calc(100% - 32px);height:142px;margin:16px 16px 0;padding:0 24px;border-radius:var(--r-card);overflow:hidden;color:var(--ink)}
.big.yellow{background:linear-gradient(90deg,var(--volt) 0,#FFE95F 28%,#FDF6C4 55%,#fff 82%)}.big.lavc{background:linear-gradient(90deg,var(--lav) 0,#B9BAFB 40%,#DEDEE8 78%,#EDEDED 100%)}
.big b{display:block;font-size:18px;font-weight:600;line-height:24px}.big small{display:block;margin-top:6px;font-size:14px;line-height:20px;color:#3A3A3A}
.big img{position:absolute;right:26px;bottom:-22px;width:104px;height:auto}.big .art{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:128px}

/* athletic events row */
.cats{display:flex;gap:14px;overflow-x:auto;padding:0 16px;scrollbar-width:none}.cats::-webkit-scrollbar{display:none}
.cats button{flex:none;width:74px;text-align:center;color:var(--grey);font-size:12px}.cats .pic{display:block;box-sizing:content-box;width:34px;height:34px;padding:20px;border-radius:50%;background:var(--bar);color:#8E8CC0;margin-bottom:8px}

/* rails and spotlight cards */
.rail{display:flex;gap:16px;overflow-x:auto;padding:0 16px;scroll-padding:0 16px;scroll-snap-type:x proximity;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.rail>*{scroll-snap-align:start;flex:none}
.band{background:#111;margin-top:22px;padding-bottom:20px}.band .h{padding-top:18px}
.ph{display:block;background-size:cover;background-position:center;background-color:var(--bar)}
.ph.none{display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 82%,#fff),var(--tint));color:rgba(255,255,255,.9)}.ph.none b{font-size:20px;font-weight:600}.ph.none .pic{width:40%;height:auto;max-width:56px}
.ph.round{border-radius:50%}
.spot{position:relative;width:207px;text-align:left}.spot .ph{height:133px;border-radius:var(--r-tile)}
.spot .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:16px}.spot .row b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spot .row span{flex:none}
.meta{display:flex;justify-content:space-between;gap:10px;margin-top:4px;color:var(--grey);font-size:14px;white-space:nowrap}.meta span{display:inline-flex;align-items:center;gap:4px}.meta .ic{width:16px;height:16px;color:var(--lav)}
.by{position:absolute;left:8px;top:95px;display:flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 3px;border-radius:var(--r-pill);background:rgba(22,22,22,.72);font-size:12px;backdrop-filter:blur(6px)}.spot .by .ph{width:24px;height:24px;border-radius:50%}.spot .by .ph b{font-size:10px}
.favmark{position:absolute;right:10px;top:10px;color:var(--volt)}.favmark .ic{width:18px;height:18px}.favmark .f{fill:currentColor}
.pack{width:190px;text-align:left}.pk{display:flex;justify-content:center;gap:10px;padding:14px 0 12px;border-radius:var(--r-card);background:var(--lav)}.pk .ph{width:66px;height:66px;box-shadow:0 0 0 2px rgba(22,22,22,.12)}
.pack b{display:block;margin-top:10px;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pack small{display:block;color:var(--grey);font-size:12px;margin:2px 0 6px}
.mini{width:130px;padding:14px 8px 12px;border-radius:var(--r-tile);background:var(--card);text-align:center}.mini .ph{width:88px;height:88px;margin:0 auto 10px}.mini b{display:block;font-weight:500;font-size:16px}.mini small{color:var(--grey);font-size:12px;white-space:nowrap}

/* match reason and trust tag: the schedule and trust rules, shown where the decision is made */
.why{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:16px;color:var(--lav)}.why .ic{width:14px;height:14px}.why.none{color:var(--grey)}.why.center{display:flex;justify-content:center;margin-top:10px}
.trust-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:16px;color:var(--paper)}.trust-tag .ic{width:14px;height:14px;color:var(--lav)}.trust-tag .f{fill:var(--lav)}.trust-tag .d{stroke:var(--ink)}

/* list cards (venues, coaches) */
.stack{display:flex;flex-direction:column;gap:16px;padding:0 16px}
.lcard{position:relative;display:grid;grid-template-columns:138px 1fr;column-gap:16px;padding:16px;border-radius:var(--r-list);background:var(--card);cursor:pointer}
.lcard .ph{width:138px;height:116px;border-radius:10px}.lcard>div{min-width:0;display:flex;flex-direction:column;gap:5px}.lcard b{font-size:16px;font-weight:500;padding-right:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rate{font-size:14px}.rate i,.mini i,.pack i,.ttl i,.detail i,.glass p i,.bk i,.counts i,.cc-cap i{margin:0 2px;color:var(--grey)}.lcard .meta{margin:0;font-size:12px;justify-content:flex-start;gap:12px}.lcard .act{margin-top:auto}
.lcard .rb{position:absolute;right:14px;top:14px}.match{grid-column:1/-1;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--lav)}

/* chips */
.chips{display:flex;gap:10px;overflow-x:auto;padding:0 16px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chips.wrap{flex-wrap:wrap;padding:0}.chips.mini{padding:0;gap:6px}
.chips button{flex:none;height:40px;padding:0 20px;border-radius:var(--r-pill);background:var(--lav);border:1px solid var(--lav);color:var(--ink);font-size:14px}
.chips button.on{background:transparent;border-color:var(--lav);color:var(--lav)}.chips.mini button{height:28px;padding:0 14px;font-size:12px}

/* promo carousel */
.promo{display:flex;gap:16px;overflow-x:auto;margin-top:24px;padding:0 57px;scroll-snap-type:x mandatory;scrollbar-width:none}.promo::-webkit-scrollbar{display:none}
.pcard{position:relative;flex:none;width:278px;height:130px;padding:0 20px;border-radius:var(--r-card);scroll-snap-align:center;display:flex;align-items:center;overflow:hidden;color:var(--ink)}
.pcard.yellow{background:linear-gradient(90deg,var(--volt) 0,#FFE95F 30%,#FDF6C4 62%,#fff 100%)}.pcard.white{background:#fff}.pcard.red{background:linear-gradient(90deg,#FD3F3F,#FF6A5F);color:#fff}
.pcard b{display:block;font-size:18px;font-weight:600;line-height:24px}.pcard small{display:block;margin-top:4px;font-size:13px;line-height:18px}
.pico{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:76px;height:76px;stroke-width:1;opacity:.55}
.dots{display:flex;justify-content:center;gap:5px;margin-top:10px}.dots i{width:6px;height:6px;border-radius:3px;background:#555}.dots i.on{width:14px;background:var(--volt)}

/* top coaches deck */
.deck{position:relative;height:330px;margin:4px 0 0;overflow:hidden;touch-action:pan-y}
.cc{position:absolute;left:50%;top:0;width:248px;height:318px;margin-left:-124px;border-radius:28px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--tint) 86%,#fff),var(--tint));transition:transform .3s ease,opacity .3s ease;cursor:pointer;user-select:none}
.cc.p0{z-index:5}.cc.p-1{transform:translateX(-72px) translateY(22px) scale(.86);z-index:4}.cc.p1{transform:translateX(72px) translateY(22px) scale(.86);z-index:4}
.cc.p-2{transform:translateX(-128px) translateY(44px) scale(.72);z-index:3}.cc.p2{transform:translateX(128px) translateY(44px) scale(.72);z-index:3}
.cc:not(.cur)>*:not(.cc-img){opacity:0;pointer-events:none}.cc:not(.cur) .cc-img{opacity:.75}
.cc-img{position:absolute;inset:0 0 auto 0;height:163px;background-size:cover;background-position:center top;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.cc-img.none{display:grid;place-items:center;-webkit-mask-image:none;mask-image:none}.cc-img.none b{font-size:64px;font-weight:600;color:rgba(255,255,255,.85)}
.cc-cap{position:absolute;inset:auto 0 0 0;padding:44px 16px 16px;display:flex;flex-direction:column;gap:3px;background:linear-gradient(transparent,rgba(22,22,22,.72) 34%,rgba(22,22,22,.9))}
.cc-cap b{font-size:18px;font-weight:600}.cc-cap small{font-size:12px;color:rgba(246,246,246,.86)}.cc-cap i{color:rgba(246,246,246,.6)}
.cc-tags{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(246,246,246,.16)}.cc .why.none{color:rgba(246,246,246,.6)}

/* detail header */
.bar{display:flex;align-items:center;gap:8px;padding:20px 16px 0}.bar .search{margin:0 0 0 4px}.bar.plain{justify-content:space-between;padding-top:20px;min-height:68px}
.ttl{flex:1;min-width:0}.ttl b{display:block;font-size:18px;font-weight:600;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ttl small{display:block;font-size:12px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grow{flex:1}

/* hero and glass panels */
.hero{position:relative;height:232px;margin:20px 16px 0;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--tint) 86%,#fff),var(--tint));display:grid;place-items:center}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}.hero.none b{font-size:88px;font-weight:600;color:rgba(255,255,255,.85)}.hero.none .pic{width:96px;height:96px;color:var(--lav)}
.hero.inset{align-items:end}.hero.inset img{width:261px;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 22%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 22%);mask-composite:intersect}
.glass{position:relative;margin:17px 16px 0;padding:30px 16px 22px;border-radius:var(--r-card);text-align:center;background:radial-gradient(90% 120% at 50% 100%,color-mix(in srgb,var(--glow) 34%,transparent),transparent 72%),#333333}
.glass.first{padding-top:22px}.glass+.glass{margin-top:30px}.glass p{font-size:12px;line-height:17px;color:#E8E8E8}
.pill{position:absolute;left:50%;top:-20px;transform:translateX(-50%);height:40px;padding:0 24px;border-radius:var(--r-pill);background:var(--paper);color:var(--ink);font-size:14px;font-weight:500;display:grid;place-items:center;white-space:nowrap;box-shadow:0 0 0 3px var(--ink)}.pill.lav{background:var(--lav)}
.stats{display:flex;justify-content:space-around;gap:4px}.stats>*{flex:1;text-align:center;min-width:0}.stats small{display:flex;justify-content:center;align-items:center;gap:3px;font-size:14px;color:#E2DEDB;white-space:nowrap}.stats b{display:block;margin-top:8px;font-size:16px;font-weight:500;color:var(--lav);white-space:nowrap}
.stats.four small{font-size:13px}.stats small .ic{width:13px;height:13px}.stats button b{text-decoration:underline;text-decoration-color:rgba(175,176,255,.5);text-underline-offset:4px}
.trustrow{display:flex;align-items:center;gap:14px;width:100%;text-align:left}.trustrow b{font-weight:500;font-size:14px}.trustrow small{display:block;margin-top:2px;font-size:12px;line-height:17px;color:#D0D0D0}.trustrow small .ic{width:12px;height:12px;vertical-align:-2px;color:var(--lav)}
.ring{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(closest-side,#2B2B2B 78%,transparent 80%),conic-gradient(var(--lav) calc(var(--p)*1%),rgba(255,255,255,.14) 0)}.ring b{font-size:18px;font-weight:600;color:var(--paper)}
.amen{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}.amen span{padding:5px 10px;border-radius:var(--r-pill);background:rgba(22,22,22,.5);font-size:12px}
.glass .btn{margin-top:14px}
.rev{background:var(--card);border-radius:var(--r-tile);padding:14px 16px}.rev p{margin:0 0 6px;font-size:14px}.rev small{color:var(--grey);font-size:12px}

/* price bar */
.buy{position:absolute;left:0;right:0;bottom:0;display:flex;gap:16px;align-items:center;padding:16px 16px 34px;background:var(--bar);z-index:4}
.buy>div{flex:none;min-width:104px}.buy small{display:block;font-size:16px;color:var(--lav);opacity:.86}.buy b{font-size:18px;font-weight:600}.buy i{margin-left:4px;font-size:10px;color:var(--grey)}.buy .btn{flex:1}

/* slot booking */
.days{display:flex;gap:6px}.days button{flex:1;border-radius:var(--r-tile);padding:8px 0;background:var(--card);text-align:center}.days small{display:block;font-size:12px;color:var(--grey)}.days b{font-size:16px;font-weight:500}
.days button.on{background:var(--lav);color:var(--ink)}.days button.on small{color:#3A3A6A}
.legend{display:flex;gap:14px;font-size:12px;color:var(--grey);margin:16px 0 10px}.lgd{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--card);border:1px solid #333;margin-right:5px;vertical-align:-1px}.lgd.fitc{background:rgba(175,176,255,.2);border-color:var(--lav)}.lgd.tk{background:#2A2A2A;border-color:#2A2A2A}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.grid button{height:44px;border-radius:var(--r-tile);background:var(--card);border:1px solid #242424;font-size:14px;text-align:center}
.grid button.f{border-color:var(--lav);background:rgba(175,176,255,.12);color:var(--lav)}.grid button.on{background:var(--volt);color:var(--ink);font-weight:600;border-color:var(--volt)}.grid button:disabled{opacity:.32;text-decoration:line-through;background:#2A2A2A}

/* review, payment, success */
.detail{padding:16px;border-radius:var(--r-tile);background:var(--card)}.detail b{display:block;font-size:16px;font-weight:500;color:var(--lav)}.detail small{display:block;font-size:14px;color:var(--grey);margin:2px 0 12px}.detail small:last-child{margin-bottom:0}
.bill div{display:flex;justify-content:space-between;align-items:center;height:32px}.bill dt{color:var(--grey);font-size:14px}.bill dd{font-size:16px}
.payrow{display:flex;align-items:center;gap:20px;width:100%;height:63px;padding:0 24px;margin-bottom:10px;border-radius:var(--r-tile);background:var(--card)}.payrow span{flex:1}.payrow b{display:block;font-weight:500;font-size:14px}.payrow small{font-size:10px;color:var(--grey)}
.payrow .ic{color:#C8C8C8}.radio{width:24px;height:24px;border-radius:50%;border:1px solid #6C6C6C;background:radial-gradient(circle,#6C6C6C 0 7px,transparent 8px)}.payrow.on .radio{border-color:var(--lav);background:radial-gradient(circle,var(--lav) 0 7px,transparent 8px)}
.okart{position:relative;height:180px;display:grid;place-items:center}.okring{width:104px;height:104px;border-radius:50%;background:var(--lav);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 14px rgba(175,176,255,.14),0 0 0 30px rgba(175,176,255,.06)}.okring .ic{width:48px;height:48px;stroke-width:2}
.okart i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--volt)}.okart i:nth-child(2){left:22%;top:26%}.okart i:nth-child(3){right:20%;top:20%;background:var(--lav);width:7px;height:7px}.okart i:nth-child(4){left:28%;bottom:16%;background:var(--lav);width:6px;height:6px}.okart i:nth-child(5){right:24%;bottom:22%;width:8px;height:8px}
.ref{font:500 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--lav);letter-spacing:.04em}.row2{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px}.center .grey,.grey.center{margin-top:8px}

/* events */
.catcard{position:relative;display:flex;align-items:center;gap:18px;height:132px;padding:0 24px;border-radius:var(--r-list);overflow:hidden;color:#fff;text-align:left;background:var(--c);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-opacity='.09' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M12 20c8-10 18 10 26 0M70 14l10 16 10-16zM20 70a12 12 0 1 0 24 0 12 12 0 1 0-24 0M78 62c6-8 16-8 22 0s-2 20-12 14M52 100c8-10 18 10 26 0M100 100l8 10M8 108l10-8M56 44a6 6 0 1 0 12 0 6 6 0 1 0-12 0'/%3E%3C/svg%3E")}
.catcard .pic{width:84px;height:84px;color:var(--ink);stroke-width:2.2}.catcard span{flex:1;text-align:right}.catcard b{display:block;font-size:18px;font-weight:600}.catcard small{font-size:12px;opacity:.9}.catcard[style*="AFB0FF"],.catcard[style*="7CDC89"]{color:var(--ink)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 16px}.tile{position:relative;height:124px;border-radius:var(--r-tile);overflow:hidden;background-size:cover;background-position:center;text-align:left}
.tile::before,.evhero::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(13,13,13,.78))}.tile b{position:absolute;left:12px;bottom:8px;font-size:28px;font-weight:700;letter-spacing:-.01em}.tile b i{margin-left:5px;font-size:16px;font-weight:600}
.tile em{position:absolute;right:10px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--lav);color:var(--ink);display:grid;place-items:center}.tile em .ic{width:14px;height:14px;stroke-width:2}
.evhero{position:relative;height:272px;margin-top:-54px;padding-top:54px;border-radius:0 0 24px 24px;overflow:hidden;background-size:cover;background-position:center}.evhero .bar{position:relative;z-index:1;padding-top:14px}.evhero .rb.lav{width:40px;height:40px}.evhero .rb.ghost{width:40px;height:40px;background:rgba(22,22,22,.3);border-color:rgba(255,255,255,.2)}
.evhero>b{position:absolute;left:24px;bottom:14px;font-size:96px;line-height:1;font-weight:700;letter-spacing:-.03em;z-index:1}.evhero>b i{margin-left:12px;font-size:46px;letter-spacing:-.02em}
.emptybig{text-align:center;padding:56px 24px}.emptybig b{font-size:16px;font-weight:500}.emptybig p{color:var(--grey);margin:8px 0 18px}

/* chats */
.seg{display:flex;gap:16px;padding:12px 16px 8px}.seg button{flex:1;height:44px;border-radius:var(--r-pill);background:var(--lav-off);border:1px solid var(--lav-off-line);color:#9E9FE0;font-size:16px;text-align:center}.seg .on{background:var(--lav);border-color:var(--lav);color:var(--ink)}
.threads button{display:flex;gap:16px;align-items:flex-start;width:calc(100% - 32px);margin:0 16px;padding:14px 0;border-bottom:1px solid var(--line);text-align:left}.threads .ph{width:64px;height:64px;flex:none}
.threads span:not(.ph){flex:1;min-width:0;padding-top:6px}.threads b{display:block;font-size:16px;font-weight:500}.threads small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-size:12px;line-height:16px;color:var(--grey)}
.threads em{flex:none;padding-top:6px;text-align:right;font-size:12px;color:var(--grey)}.threads em i{display:grid;place-items:center;width:24px;height:24px;margin:8px 0 0 auto;border-radius:50%;background:var(--lav);color:var(--ink);font-weight:500}
.v-thread{padding-bottom:96px}.thead{display:flex;align-items:center;gap:12px;margin-top:-54px;padding:68px 16px 18px;border-radius:0 0 var(--r-card) var(--r-card);background:var(--lav);color:var(--ink);position:sticky;top:-54px;z-index:3}
.thead .ph{width:40px;height:40px;flex:none}.thead div{flex:1}.thead b{display:block;font-size:16px;font-weight:600}.thead small{font-size:12px;color:#fff}.plainb{width:32px;height:32px;display:grid;place-items:center}
.msgs{display:flex;flex-direction:column;gap:10px;padding:16px}.m{max-width:78%;width:fit-content;padding:14px 16px;border-radius:20px;background:var(--card);font-size:12px;line-height:17px}.m.me{align-self:flex-end;background:var(--lav);color:var(--ink)}
.compose{position:absolute;left:16px;right:16px;bottom:34px;display:flex;gap:10px;align-items:center;height:var(--field-h);padding:0 8px 0 14px;border:1px solid var(--lav);border-radius:var(--r-pill);background:#1E1E1E;z-index:4}
.compose input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);font:400 14px/1 var(--ui)}.compose input::placeholder{color:var(--grey)}.compose>.ic{color:var(--lav)}.compose button{width:36px;height:36px;border-radius:50%;background:var(--lav);color:var(--ink);display:grid;place-items:center}.compose button .ic{width:18px;height:18px}

/* profile and bookings */
.name{margin-top:18px;font-size:18px;font-weight:600}.counts{margin-top:14px;font-size:16px;color:var(--grey)}.counts b{color:var(--paper);font-weight:600}
.rows{margin-top:28px}.rows>*{display:flex;justify-content:space-between;align-items:center;width:100%;height:63px;padding:0 24px;border-radius:var(--r-tile);background:var(--card);font-size:16px}.rows span{color:var(--grey)}.rows b{display:flex;align-items:center;gap:6px;font-weight:500}.rows .ic{width:16px;height:16px;color:var(--lav)}.rows+.note{margin-top:18px}
.bk{position:relative;padding:16px;border-radius:var(--r-tile);background:var(--card)}.bk b{display:block;font-size:16px;font-weight:500;margin-top:10px}.bk small{display:block;font-size:14px;color:var(--grey);margin-top:2px}.bk .ref{font-size:12px;margin-top:8px}.bk .btn{position:absolute;right:16px;bottom:16px}
.chipdate{display:inline-block;padding:3px 10px;border:1px solid var(--lav-off-line);border-radius:var(--r-pill);font-size:12px;color:#9E9FE0}

/* navigation bar: outline icons, raised yellow centre button, filled icon and label when active */
.tabs{position:absolute;left:0;right:0;bottom:0;height:98px;padding:0 14px;background:var(--bar);display:grid;grid-template-columns:repeat(5,1fr);align-items:start;z-index:5}.tabs[hidden]{display:none}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:24px;height:74px;color:#929292;font-size:12px}.tabs button span{display:none;color:var(--lav)}
.tabs button.on{padding-top:13px;color:var(--lav)}.tabs button.on span{display:block}.tabs button.on .f{fill:var(--lav)}.tabs button.on .d{stroke:var(--bar)}
.tabs .mid{justify-self:center;width:56px;height:56px;margin-top:-23px;padding:0;border-radius:50%;background:var(--volt);color:var(--ink);justify-content:center;box-shadow:0 0 0 7px var(--bar)}.tabs .mid.on{color:var(--ink);padding:0}.tabs .mid .ic{width:28px;height:28px}.tabs .mid.on circle:first-child{fill:var(--ink)}.tabs .mid.on circle:nth-child(2){stroke:var(--volt)}

/* sheets */
.sheetwrap{position:absolute;inset:0;z-index:9;background:rgba(0,0,0,.6);display:flex;align-items:flex-end}.sheetwrap[hidden]{display:none}
.sheet{width:100%;max-height:86%;overflow:auto;padding:10px 16px 34px;border-radius:28px 28px 0 0;background:var(--bar);scrollbar-width:none}.sheet::-webkit-scrollbar{display:none}
.grab{display:block;width:40px;height:4px;margin:0 auto 10px;border-radius:2px;background:#444}.sh-h{display:flex;justify-content:space-between;align-items:center}.sh-h b{font-size:18px;font-weight:600}.sheet .rb.ghost.sm{color:var(--paper);border-color:#333;background:#151515}
.sheet h3{margin:18px 0 8px}.sheet .grey{font-size:12px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.opts button{padding:12px 16px;border-radius:var(--r-tile);background:var(--card);border:1px solid #2A2A2A}.opts b{display:block;font-weight:500;font-size:14px}.opts small{font-size:12px;color:var(--grey)}
.opts button.on{border-color:var(--lav);background:rgba(175,176,255,.12)}.opts button.on b{color:var(--lav)}
.trustrow.static{margin-top:14px}.trustrow.static .ring{background:radial-gradient(closest-side,var(--bar) 78%,transparent 80%),conic-gradient(var(--lav) calc(var(--p)*1%),rgba(255,255,255,.14) 0)}
.tp{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0 14px}.tp b{display:block;font-weight:500;font-size:14px}.tp small{font-size:12px;color:var(--grey)}.tp em{font-size:16px;font-weight:500;color:var(--lav)}
.tp i{position:absolute;left:0;right:0;bottom:4px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--lav) calc(var(--p)*1%),#333 0)}
.creds{list-style:none;display:flex;flex-direction:column;gap:8px}.creds li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-tile);background:var(--card)}.creds b{display:block;font-weight:500;font-size:14px}.creds small{font-size:12px;color:var(--grey)}
.creds .v .ic{color:var(--lav)}.creds .v .f{fill:var(--lav)}.creds .v .d{stroke:var(--ink)}.creds .v small{color:var(--lav)}.creds .u .ic{color:var(--grey)}

.toast{position:absolute;left:50%;top:64px;transform:translate(-50%,-20px);opacity:0;max-width:86%;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:20px;font-weight:500;font-size:13px;text-align:center;transition:.25s;z-index:10;pointer-events:none}.toast.on{opacity:1;transform:translate(-50%,0)}

/* the page around the phone: stacked logo as on the cover board, DM Sans (the brand typeface on the identity board) */
.side{padding-top:36px;max-width:560px}.logo{display:block;width:104px;height:auto}
.lede{font:500 34px/1.22 var(--brand);letter-spacing:-.02em;margin:36px 0 14px;max-width:16ch;color:var(--grey)}.lede em{color:var(--paper)}
.sub{color:var(--grey);font-size:15px;margin:0 0 22px;max-width:44ch}
.facts{list-style:none;display:flex;flex-direction:column;gap:14px}
.facts li{display:grid;grid-template-columns:52px 52px 1fr;gap:10px;align-items:center}
.facts i{width:52px;height:52px;border-radius:50%;background:var(--lav);color:var(--ink);display:grid;place-items:center}.facts svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.facts b{width:52px;height:52px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;font:700 14px/1 var(--brand)}
.facts span{padding:14px 22px;border-radius:28px;background:#1A1A1A;font-size:14px;line-height:1.45}.facts em{display:block;color:var(--grey);font-size:13px;margin-top:3px}
.fine{margin-top:30px;color:var(--grey);font-size:14px}.fine a{color:var(--paper)}.fine small{display:block;margin-top:8px;font-size:12px;line-height:1.5;color:var(--grey);max-width:60ch}

@media(max-width:900px){
  .wrap{grid-template-columns:minmax(0,1fr);padding:0;gap:0}
  .phone,.bezel{min-width:0;max-width:100%}
  .phone{padding:0;border-radius:0;background:none;box-shadow:none}.phone::before,.phone::after{display:none}.bezel{padding:0;border-radius:0;background:none}
  .screen{width:100%;height:100vh;height:100dvh;min-height:0;border-radius:0}
  .status{display:none}.view{padding-top:6px}.evhero,.thead{margin-top:-6px;top:-6px}.evhero{padding-top:6px}.thead{padding-top:20px}
  .side{padding:36px 20px 44px;max-width:none}.lede{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}