/* The film in a 3D MacBook (components/MacBookFilm.jsx, macbook3d.js). Above the start page's menu (z 5) so the dark
   covers it when the camera goes in. The MacBook's base is 74 % of the window wide (92 % on a phone, at most 1180 px);
   its canvas, the slot, is 1.34 times that across and .82 of that high (room for the lid and the reflection), and comes
   up 20 px into the opening above it. A phone: see below. The canvas, the screen's <video> (laid on the 3D screen by a
   matrix3d) and the play button are placed by the component. */
.mac-film{--base:min(1180px,74vw);position:relative;z-index:6;display:flex;justify-content:center;margin-top:-20px;padding-bottom:40px;overflow-x:clip;background:#000;-webkit-tap-highlight-color:transparent}
/* the slot: never wider than the page (the canvas beyond the window would be empty), its height kept to the MacBook */
.mac-film-slot{position:relative;flex:none;width:min(100%,calc(var(--base) * 1.34));height:calc(var(--base) * 1.34 * .82);pointer-events:none}
/* a phone: the MacBook gets a screen of its own, black, nothing else in view; pinned in the middle for 90 % of a
   screen of scrolling while its lid opens (the component), then the page goes on */
.mac-film-pin{display:contents}
@media(max-width:700px){
  .mac-film{--base:calc(100vw - 16px);display:block;margin-top:0;padding-bottom:0;height:190vh;height:190svh}
  .mac-film-pin{display:block;position:sticky;top:0;height:100vh;height:100svh}
  .mac-film-slot{width:100%;height:100%}
  .mac-film.is-flat{height:auto}
  .mac-film.is-flat .mac-film-pin{position:static;height:auto;display:flex;justify-content:center}
}
.mac-film-dim{position:absolute;left:0;width:100%;background:#000;opacity:0;pointer-events:none;transition:opacity .9s cubic-bezier(.32,.72,0,1)}
.mac-film.is-in .mac-film-dim{pointer-events:auto}   /* nothing of the page under the dark can be clicked */
.mac-film-stage{position:absolute;inset:0}
.mac-film-body{position:absolute;inset:0}
.mac-film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.mac-film.is-ready .mac-film-canvas{opacity:1}
.mac-film-screen{position:absolute;left:0;top:0;width:1600px;height:1000px;transform:scale(0);transform-origin:0 0;background:#000;opacity:0;pointer-events:none;transition:opacity .3s ease}
.mac-film.is-in .mac-film-screen{opacity:1;pointer-events:auto}
.mac-film.is-out .mac-film-screen{transition-duration:.5s}
.mac-film-video{display:block;width:100%;height:100%;object-fit:fill;background:#000}
/* play: the only thing on the black screen, in its middle; its place, opacity and visibility follow the lid (the component) */
.mac-film-play{all:unset;box-sizing:border-box;position:absolute;left:0;top:0;width:76px;height:76px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;pointer-events:auto;
  background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 8px 30px rgba(0,0,0,.35);transition:scale .2s cubic-bezier(.23,1,.32,1),background-color .2s ease}
@media(max-width:700px){.mac-film-play{width:52px;height:52px}}
.mac-film-play svg{position:absolute;left:54%;top:50%;width:34%;height:38%;transform:translate(-50%,-50%)}
@media(hover:hover){.mac-film-play:hover{scale:1.06;background:rgba(255,255,255,.2)}}
.mac-film-play:active{scale:.94}
.mac-film-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.mac-film:not(.is-rest) .mac-film-play{pointer-events:none}
.mac-film.is-in .mac-film-video{cursor:pointer}
.mac-film.is-in:not(.is-awake){cursor:none}
.mac-film.is-in:not(.is-awake) .mac-film-video{cursor:none}
/* the controls (B2): a 1.5 px line on the film's foot, edge to edge, the progress white on a faint track (it thickens
   while held or hovered, and it is 28 px tall to the finger); under it the time, white and grey, and three quiet icons
   on the right. Shown while the mouse moves (a tap on a phone), away after 2 s; always while paused. */
.mac-film-bar{position:absolute;left:50%;z-index:2;transform:translateX(-50%);color:#fff;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.mac-film.is-in.is-awake .mac-film-bar{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
.mac-film-track{position:absolute;left:0;right:0;top:-14px;height:28px;cursor:pointer;touch-action:none;outline:none}
.mac-film-track::before,.mac-film-track i{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:rgba(255,255,255,.2);transition:height .18s cubic-bezier(.23,1,.32,1),margin-top .18s cubic-bezier(.23,1,.32,1)}
.mac-film-track i{background:#fff;transform-origin:0 50%}
.mac-film-track.is-held::before,.mac-film-track.is-held i{height:4px;margin-top:-2px}
@media(hover:hover){.mac-film-track:hover::before,.mac-film-track:hover i{height:4px;margin-top:-2px}}
.mac-film-track:focus-visible::before{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.mac-film-row{display:flex;align-items:center;gap:20px;height:36px;margin-top:14px;padding:0 20px;box-sizing:border-box;font:500 12px/1 Onest,-apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.mac-film-bar.is-inside .mac-film-row{position:absolute;left:0;right:0;bottom:12px;margin:0}
.mac-film-length{color:rgba(255,255,255,.42);margin-right:auto}
.mac-film-row button{all:unset;display:grid;place-items:center;width:36px;height:36px;margin:0 -9px;border-radius:50%;cursor:pointer;opacity:.85;transition:opacity .15s ease}
@media(hover:hover){.mac-film-row button:hover{opacity:1}}
.mac-film-row button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
/* no WebGL: the film as a plain 16:10 player */
.mac-film.is-flat .mac-film-slot{width:var(--base);height:auto;aspect-ratio:16/10;margin:40px 0;pointer-events:auto}
.mac-film.is-flat .mac-film-screen{width:100%;height:100%;transform:none;opacity:1;pointer-events:auto}
.mac-film.is-flat :is(.mac-film-canvas,.mac-film-play){display:none}
/* The phone in "Try it yourself" (components/AccessPhone.jsx): the iOS app at its own size, 402 x 874 points,
   in Onest and the app's colours (Theme.swift: bg #0B0B0D, ink #F2F2F7, ink2 #AEAEB2, ink3 #8E8E93, line #2C2C2E). */
#af{--ink:#F2F2F7;--ink2:#AEAEB2;--ink3:#8E8E93;--line:#2C2C2E;--bg:#0B0B0D;--s2:#1C1C1E;--f:Onest,system-ui,-apple-system,sans-serif;position:relative;width:100%;aspect-ratio:459/913;text-align:left;font-family:var(--f);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none}
#af *{box-sizing:border-box}
#af button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
#af button:disabled{cursor:default}
#af button:focus-visible,#af a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:12px}
#af p,#af h2,#af h3{margin:0}
#af .ic{display:inline-block;flex:none;vertical-align:middle}
#af img{display:block}

/* The device */
#ph{position:relative;width:459px;height:913px}
#ph .fr-b{position:absolute;width:10px;border-radius:1.6px 0 0 1.6px;background:#4a4a4e;box-shadow:inset .7px 0 0 #000,inset 0 .7px 0 #000,inset 0 -.7px 0 #000,inset 1.4px 0 0 #252527}
#ph .fr-b.r{border-radius:0 1.6px 1.6px 0}
#ph .fr-body{position:absolute;left:9.2px;top:0;width:440.6px;height:913px;border-radius:79px;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.6),0 12px 32px rgba(0,0,0,.4)}
#ph .fr-rim{position:absolute;inset:1.4px;border-radius:77.6px;background:#4a4a4e;box-shadow:inset 0 0 0 .7px #979699,inset 0 0 0 1.4px #c9c9cc,inset 0 0 0 2.1px #6a6a6e}
#ph .fr-in{position:absolute;inset:7.1px;border-radius:71.9px;background:#000}
#scn{position:absolute;left:19.3px;top:19.5px;width:402px;height:874px;border-radius:59.7px;background:var(--bg);overflow:hidden;overflow:clip;clip-path:inset(0 round 59.7px);isolation:isolate}
#af .mdefs{position:absolute;width:0;height:0;overflow:hidden}
#af .tabv{position:absolute;inset:0}
#af .pane{position:absolute;inset:0;background:var(--bg);transition:transform .45s cubic-bezier(.32,.72,0,1);will-change:transform;overflow:hidden}
#af .pane.far{visibility:hidden}
#af .pane-dim{position:absolute;inset:0;background:#000;pointer-events:none;transition:opacity .45s cubic-bezier(.32,.72,0,1);z-index:50}
#af .sc{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
#af .sc::-webkit-scrollbar{display:none}
#af .sbar{position:absolute;left:0;top:0;width:402px;height:54px;pointer-events:none;z-index:90}
#af .sb-t{position:absolute;left:48px;top:20px;width:52px;text-align:center;font:600 17px/22px -apple-system,system-ui,sans-serif;letter-spacing:-.43px}
#af .sb-s{position:absolute;left:285px;top:26px}#af .sb-w{position:absolute;left:308px;top:25.5px}#af .sb-b{position:absolute;left:331px;top:24.5px}
#af .island{position:absolute;left:138.5px;top:14px;width:125px;height:36.5px;border-radius:18.25px;background:#000;z-index:91}
#af .homebar{position:absolute;left:134px;top:861px;width:134px;height:5px;border-radius:3px;background:rgba(255,255,255,.72);pointer-events:none;z-index:91}

/* Shared parts */
#af .press{transition:transform .26s cubic-bezier(.34,1.3,.64,1),opacity .2s ease}
#af .press:active:not(:disabled){transform:scale(.97);opacity:.9}
#af .round{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s cubic-bezier(.34,1.3,.64,1)}
#af .round:active{transform:scale(.92)}
#af .round.on{background:#fff;color:#0B0B0D;box-shadow:none}
#af .round.glass{background:rgba(60,60,64,.42);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 .5px 0 rgba(255,255,255,.18)}
#af .round.heart.on{background:rgba(60,60,64,.42);color:#FF2E54}
#af .float-l{position:absolute;left:20px;top:58px;z-index:40}
#af .float-r{position:absolute;right:20px;top:58px;z-index:40}
#af .hair{display:block;height:.5px;background:var(--line)}
#af .caps{font:600 11px/13px var(--f);letter-spacing:1.3px;text-transform:uppercase;color:var(--ink3)}
#af .note{margin-top:8px;font:400 12px/16px var(--f);color:var(--ink3);text-align:center}
#af .btn1{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;border-radius:28px;background:#fff;color:#0B0B0D;font:600 17px/22px var(--f);letter-spacing:-.2px}
#af .btn1.busy{background:linear-gradient(100deg,#fff 30%,#d9d9de 50%,#fff 70%) 0 0/300% 100%;animation:ph-sh 1s linear infinite}
@keyframes ph-sh{from{background-position:100% 0}to{background-position:-50% 0}}
#af .btn2{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;border-radius:28px;background:var(--s2);color:var(--ink);font:600 17px/22px var(--f)}
#af .btn-t{display:block;width:100%;min-height:44px;text-align:center;font:600 16px/44px var(--f);color:var(--ink)}
#af .pill{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:21px;background:var(--s2);font:600 16px/20px var(--f);color:var(--ink)}
#af .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
#af .mk{object-fit:contain;-webkit-user-drag:none}
#af .mk-n{font-weight:600;letter-spacing:-.02em;line-height:1.05;text-align:center;color:#fff}
#af .empty{margin:0 4px;padding:24px 16px;border-radius:24px;background:#141416;text-align:center;display:grid;gap:8px;font:400 15px/20px var(--f);color:var(--ink3)}
#af .empty b{font:600 17px/22px var(--f);color:var(--ink)}
#af .empty button{min-height:44px;font:600 15px/44px var(--f);color:var(--ink)}

/* Pictures: the app's grade (saturation .86, contrast 1.06) */
#af .cv{position:relative;overflow:hidden;background:#000}
#af .cv-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.06) brightness(.98)}
#af .cv-n{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:#000;padding:0 24px}
#af .cv-n span{font:600 30px/1.1 var(--f);letter-spacing:-.6px;color:#fff;text-align:center}
#af .cv-n i{display:block;width:44px;height:1px;background:#8B5CF6}

/* Tab bar: the floating glass bar of iOS 26 */
#af .tabbar{position:absolute;left:21px;top:792px;width:360px;height:62px;border-radius:31px;display:flex;padding:4px;background:rgba(36,36,40,.72);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:inset 0 .5px 0 rgba(255,255,255,.2),inset 0 0 0 .5px rgba(255,255,255,.09),0 10px 30px rgba(0,0,0,.45);z-index:60;transition:transform .35s cubic-bezier(.32,.72,0,1),opacity .25s ease}
#af .tabbar.off{transform:translateY(110px);opacity:0;pointer-events:none}
#af .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:27px;color:var(--ink);font:500 10.5px/13px var(--f);transition:background-color .25s ease}
#af .tb.on{background:rgba(10,10,12,.82)}
#af .tb .ic{height:25px}

/* Menus */
#af .pop-wrap{position:absolute;inset:0;z-index:80}
#af .pop-shut{position:absolute;inset:0}
#af .pop{position:absolute;min-width:236px;padding:6px 0;border-radius:22px;background:rgba(44,44,48,.78);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 .5px 0 rgba(255,255,255,.16);animation:ph-pop .28s cubic-bezier(.32,1.25,.5,1) both;transform-origin:30px 0}
#af .pop button{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;padding:0 20px 0 12px;font:400 17px/22px var(--f);color:var(--ink)}
#af .pop button+button{box-shadow:inset 0 .5px 0 rgba(255,255,255,.1)}
#af .pop .pk{width:24px;display:grid;place-items:center}
@keyframes ph-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* Sheets slide up over everything */
#af .sheet{position:absolute;inset:0;z-index:70;background:var(--bg);transform:translate3d(0,100%,0);transition:transform .5s cubic-bezier(.32,.72,0,1);pointer-events:none}
#af .sheet.on{transform:none;pointer-events:auto}

/* Tonight */
#af .t-head{padding:0 20px}
#af .t-row1{display:flex;align-items:center;justify-content:space-between;padding-top:69px}
#af .wm{height:22px;width:auto}
#af .t-row2{display:flex;align-items:center;justify-content:space-between;margin-top:26px}
#af .t-city{display:flex;align-items:baseline;gap:8px;font:500 34px/41px var(--f);letter-spacing:-.7px;color:var(--ink)}
#af .t-city .ic{transform:translateY(-1px)}
#af .t-sub{margin-top:6px;font:400 15px/20px var(--f);color:var(--ink2)}
#af .t-search{display:flex;align-items:center;gap:8px;margin:14px 20px 0;padding:0 16px;height:44px;border-radius:16px;background:var(--s2)}
#af .t-search input{all:unset;flex:1;font:400 17px/22px var(--f);color:var(--ink)}
#af .t-search input::placeholder{color:var(--ink3)}
#af .t-next{display:flex;align-items:center;gap:6px;margin:22px 20px 0;width:362px;height:50px;padding:0 20px 0 16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);font:400 16px/20px var(--f);color:var(--ink2)}
#af .t-next .dot{margin-right:6px}
#af .t-next b{font-weight:600;color:var(--ink)}
#af .t-next em{margin-left:auto;font-style:normal;font-weight:600;color:var(--ink)}
#af .t-list{display:grid;gap:14px;margin-top:14px;padding:0 16px}
#af .t-card{display:block;width:370px;border-radius:24px;overflow:hidden;position:relative}
#af .t-card .cv{height:277.5px;border-radius:24px}
#af .t-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 35%,rgba(0,0,0,.78))}
#af .t-words{position:absolute;left:12px;right:12px;bottom:22px;display:flex;flex-direction:column;align-items:center;text-align:center}
#af .t-words .mk-n{font-size:30px}
#af .t-place{margin-top:10px;font:500 14px/18px var(--f);color:rgba(255,255,255,.72)}
#af .t-deal{margin-top:4px;font:600 15px/20px var(--f);color:#fff;font-variant-numeric:tabular-nums}

/* A club */
#af .vn .vn-cover{height:300px}
#af .vn-shade{position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,0))}
#af .vn-body{padding:24px 24px 0}
#af .vn-name{font:600 40px/46px var(--f);letter-spacing:-1.4px}
#af .vn-line{margin-top:8px;font:400 15px/20px var(--f);color:var(--ink2)}
#af .vn-days{display:flex;gap:24px;margin:12px -24px 0;padding:0 24px;overflow-x:auto;scrollbar-width:none}
#af .vn-days::-webkit-scrollbar{display:none}
#af .vn-days button{flex:none;min-height:44px;font:500 15px/44px var(--f);color:var(--ink3);white-space:nowrap}
#af .vn-days button.on{font-weight:600;color:var(--ink)}
#af .vn-ways{display:flex;gap:14px;margin-top:20px}
#af .way{flex:1;display:flex;flex-direction:column;min-width:0}
#af .way b{font:600 17px/22px var(--f);color:var(--ink)}
#af .way>span{margin-top:2px;font:400 15px/20px var(--f);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#af .way-i{margin-top:10px;aspect-ratio:4/3;border-radius:14px}
#af .way-i .cv-i{transform:scale(1.3);transform-origin:0 100%}
#af .way-i.b .cv-i{transform-origin:100% 0}
#af .way-i.mute{opacity:.4}
#af .way-i .cv-n span{font-size:16px}
#af .vn-h{margin-top:40px;font:500 20px/25px var(--f);letter-spacing:-.4px}
#af .vn-rows{margin-top:6px}
#af .vn-rows p{display:flex;justify-content:space-between;gap:16px;padding:12px 0;font:400 15px/20px var(--f)}
#af .vn-rows span{color:var(--ink2)}
#af .vn-rows b{font-weight:400;color:var(--ink);text-align:right}
#af .vn-map{position:relative;margin-top:20px;height:150px;border-radius:16px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 .5px var(--line)}
#af .vn-map svg{display:block}
#af .vn-pin{position:absolute;left:170px;top:68px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.6)}
#af .vn-addr{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:5px;font:600 13px/16px var(--f);color:#fff;text-shadow:0 1px 3px #000}
#af .vn-where{margin-top:10px;font:400 13px/18px var(--f);color:var(--ink3)}
#af .vn-p{margin-top:10px;font:400 16px/22px var(--f);color:var(--ink2)}
#af .vn-cr{display:block;margin-top:16px;font:400 11px/14px var(--f);color:var(--ink3);text-decoration:none}
#af .vn-bar{position:absolute;left:0;top:0;width:402px;height:106px;background:var(--bg);box-shadow:inset 0 -.5px 0 rgba(255,255,255,.06);display:flex;align-items:flex-end;justify-content:center;padding:0 72px 15px;opacity:0;transition:opacity .2s ease-out;pointer-events:none;z-index:30}
#af .vn-bar.on{opacity:1}
#af .vn-bar span{font:600 17px/22px var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* A club's tables */
#af .tl{background:#000}
#af .tl-hero{height:330px}
#af .tl-shade{position:absolute;left:0;right:0;top:0;height:130px;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0))}
#af .tl-body{padding:26px 24px 40px}
#af .tl-h{margin-top:6px;font:700 40px/46px var(--f);letter-spacing:-1.2px}
#af .tl-guests{display:flex;align-items:center;justify-content:space-between;margin-top:22px}
#af .tl-guests>span{font:500 16px/20px var(--f);color:rgba(255,255,255,.55)}
#af .tl-guests div{display:flex}
#af .tl-guests button{position:relative;min-width:32px;min-height:44px;text-align:center;font:450 17px/44px var(--f);color:rgba(255,255,255,.35)}
#af .tl-guests button.on{font-weight:650;color:#fff}
#af .tl-guests button.on::after{content:'';position:absolute;left:9px;right:9px;bottom:5px;height:1.5px;background:#fff}
#af .tl-row{display:block;width:100%;padding:16px 0}
#af .tl-row.mute{opacity:.4}
#af .tl-a,#af .tl-b{display:flex;justify-content:space-between;align-items:baseline}
#af .tl-a b{font:600 20px/25px var(--f);font-variant-numeric:tabular-nums}
#af .tl-b{margin-top:6px;font:400 16px/20px var(--f);color:rgba(255,255,255,.75)}
#af .tl-c{display:block;margin-top:8px;font:400 14px/18px var(--f);color:rgba(255,255,255,.55)}

/* A table: the club's room behind everything */
#af .room{position:absolute;inset:0}
#af .room .cv{position:absolute;inset:0}
#af .room .cv-i{transform:scale(1.04)}
#af .room-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.18),rgba(20,8,4,.38) 30%,rgba(16,7,4,.62) 58%,rgba(11,9,9,.86) 100%)}
#af .tb-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding:150px 24px 0}
#af .tb-top.in{align-items:flex-start;text-align:left;padding:0 20px}
#af .tb-hero{margin:0 -20px;width:402px;height:242px}
#af .tb-hero-s{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 60%,rgba(0,0,0,.55))}
#af .tb-hero .tb-mark{position:absolute;left:20px;bottom:14px}
#af .tb-mark{height:64px;display:flex;align-items:center}
#af .tb-mark.sm{height:44px}
#af .tb-line{margin-top:30px;font:400 16px/20px var(--f);color:rgba(255,255,255,.78)}
#af .tb-title{margin-top:118px;font:700 40px/46px var(--f);letter-spacing:-1px}
#af .tb-title.l{margin-top:24px;font-size:34px;line-height:41px;letter-spacing:-.7px}
#af .tb-sub{margin-top:10px;font:400 16px/20px var(--f);color:var(--ink2)}
#af .tb-sub b{font-weight:600;color:var(--ink)}
#af .tb-body{display:grid;gap:20px;padding:26px 24px 24px}
#af .seats{display:flex;gap:10px}
#af .seat{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 15px/1 var(--f);flex:none}
#af .seat.in{background:#2C2C2E;color:var(--ink)}
#af .seat.you{box-shadow:inset 0 0 0 2px #fff;color:#fff}
#af .seat.open{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);background-image:radial-gradient(circle,transparent 60%,transparent 61%)}
#af .seat.open:not(:disabled):hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
#af .story{font:400 16px/21px var(--f);color:var(--ink2)}
#af .story b{font-weight:400;color:var(--ink)}
#af .price .pr-n{display:flex;align-items:baseline;gap:12px}
#af .pr-n b{font:600 34px/40px var(--f);letter-spacing:-.6px;font-variant-numeric:tabular-nums;transition:opacity .2s}
#af .pr-n b.big{font-size:44px;line-height:52px;letter-spacing:-1px}
#af .pr-n span{font:400 15px/20px var(--f);color:var(--ink2)}
#af .pr-track{position:relative;margin-top:18px;height:2px;background:rgba(255,255,255,.18);border-radius:1px}
#af .pr-track i{position:absolute;top:-6px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .6s cubic-bezier(.34,1.2,.64,1)}
#af .pr-ends{display:flex;justify-content:space-between;margin-top:14px;font:400 12px/16px var(--f);color:var(--ink3)}
#af .tb-how{display:flex;align-items:center;gap:6px;font:600 15px/20px var(--f);color:var(--ink2)}
#af .items p{display:flex;justify-content:space-between;padding:14px 0;box-shadow:inset 0 .5px 0 var(--line);font:400 15px/20px var(--f);color:var(--ink2)}
#af .items b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
#af .tb-cur{font:400 12px/16px var(--f);color:var(--ink3)}
#af .tb-bar{position:absolute;left:0;right:0;bottom:0;padding:12px 20px 30px;background:rgba(22,22,24,.8);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);z-index:20}
#af .friends{padding:16px;border-radius:24px;background:rgba(28,28,30,.85);display:grid;gap:12px}
#af .fr-top{display:flex;gap:12px}
#af .fr-ic{width:44px;height:44px;border-radius:50%;background:#2C2C2E;display:grid;place-items:center;flex:none}
#af .fr-top>span:last-child{display:grid;gap:4px;font:400 15px/20px var(--f);color:var(--ink2)}
#af .fr-top b{font:600 17px/22px var(--f);color:var(--ink)}
#af .friends .btn2{min-height:48px;background:#2C2C2E;font-size:16px}
#af .friends .note{text-align:left;margin:0}

/* The pass */
#af .ps-shade{background:linear-gradient(rgba(0,0,0,.2),rgba(20,10,6,.55) 30%,rgba(11,11,13,.95) 75%)}
#af .ps-sample{padding-top:126px;text-align:center;font:400 12px/16px var(--f);color:rgba(255,255,255,.6)}
#af .ps-card{margin:12px 20px 0;padding:22px 22px 24px;border-radius:28px;background:linear-gradient(160deg,#1d1d20,#0b0b0d 60%);box-shadow:inset 0 .5px 0 rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.5)}
#af .ps-top{display:flex;justify-content:space-between;align-items:flex-start}
#af .ps-top p{display:grid;text-align:right;font:400 13px/17px var(--f);color:var(--ink3)}
#af .ps-top b{font:600 15px/20px var(--f);color:var(--ink)}
#af .ps-tb{margin-top:28px;font:600 34px/41px var(--f);letter-spacing:-.7px}
#af .ps-seat{margin-top:4px;font:400 16px/20px var(--f);color:var(--ink2)}
#af .qr{position:relative;display:block;margin:22px auto 0;width:226px;height:226px;padding:18px;border-radius:20px;background:#fff;overflow:hidden}
#af .qr svg{display:block;width:190px;height:190px}
#af .qr-line{position:absolute;left:8px;right:8px;top:0;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#0B0B0D 20%,#0B0B0D 80%,transparent);opacity:0}
#af .qr.scan .qr-line{animation:ph-scan .9s cubic-bezier(.65,0,.35,1) both}
@keyframes ph-scan{0%{opacity:0;transform:translateY(6px)}10%,90%{opacity:.8}100%{opacity:0;transform:translateY(218px)}}
#af .ps-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-top:22px;min-height:226px;justify-content:center;animation:ph-in .5s cubic-bezier(.34,1.3,.64,1) both}
#af .ps-in b{font:600 24px/30px var(--f)}
#af .ps-in span{font:400 15px/20px var(--f);color:var(--ink2);max-width:260px}
@keyframes ph-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
#af .ps-light{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font:400 16px/20px var(--f);color:var(--ink)}
#af .ps-code{margin-top:4px;text-align:center;font:400 13px/17px var(--f);color:var(--ink3)}
#af .ps-door{margin:28px 20px 0;font:400 16px/22px var(--f);color:var(--ink2)}
#af .ps-door b{font-weight:400;color:var(--ink)}
#af .ps-map{display:flex;align-items:center;gap:6px;margin:16px 20px 0;font:600 16px/20px var(--f)}
#af .ps-help{margin:28px 20px 0;padding:18px 16px;border-radius:24px;background:rgba(28,28,30,.8);font:400 15px/20px var(--f);color:var(--ink2)}
#af .ps-help>span{display:block;margin-bottom:10px;font-weight:600;color:var(--ink)}
#af .ps-help div{display:flex;gap:8px;margin-top:14px}
#af .ps-help button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:50px;border-radius:14px;background:#2C2C2E;font:600 15px/20px var(--f);color:var(--ink2)}
#af .ps-help button.red{background:rgba(255,46,84,.15);color:#FF2E54}

/* Ask Access */
#af .ak .sc{padding:0 24px}
#af .ak-mark{display:flex;justify-content:center;padding-top:118px;height:200px;align-items:center}
#af .ak-h{margin-top:20px;font:600 34px/41px var(--f);letter-spacing:-.7px}
#af .ak-p{margin:10px 0 26px;font:400 16px/22px var(--f);color:var(--ink2)}
#af .ak .caps{margin-top:20px}
#af .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#af .chips button{min-height:40px;padding:0 16px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);font:500 15px/40px var(--f);color:var(--ink2)}
#af .chips button.on{background:#fff;color:#0B0B0D;box-shadow:none}
#af .ak-n{margin-top:4px}
#af .ak-done{display:grid;justify-items:center;gap:12px;margin-top:20px;text-align:center;font:400 15px/20px var(--f);color:var(--ink2)}
#af .ak-done b{font:600 20px/25px var(--f);color:var(--ink)}
#af .ak-done .btn2{margin-top:12px}

/* Map: near black, like the app's */
#af .mp{background:#000}
#af .mp-v{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:grab}
#af .mp-w{position:absolute;left:0;top:0;transition:transform .55s cubic-bezier(.32,.72,0,1)}
#af .mp-v:active .mp-w{transition:none}
#af .mp-top{position:absolute;left:0;top:0;width:402px;height:200px;background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,0));pointer-events:none}
#af .mp-head{position:absolute;left:20px;top:64px;pointer-events:none}
#af .mp-head h2{font:600 34px/41px var(--f);letter-spacing:-.7px}
#af .mp-head p{margin-top:2px;font:400 15px/20px var(--f);color:var(--ink2)}
#af .mp-head a{display:inline-block;margin-top:6px;font:400 11px/14px var(--f);color:var(--ink3);text-decoration:none;pointer-events:auto}
#af .mp-near{position:absolute;left:0;right:0;bottom:96px;text-align:center;font:600 10px/12px var(--f);letter-spacing:1.6px;text-transform:uppercase;color:#4d4d53;pointer-events:none}
#af .mpin{position:absolute;width:0;height:0;z-index:1}
#af .mpin.on{z-index:3}
#af .mp-c{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;background:#0B0B0D;box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 3px 10px rgba(0,0,0,.7);display:grid;place-items:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
#af .mpin.on .mp-c{transform:scale(1.18);box-shadow:0 0 0 2px #fff,0 3px 14px rgba(0,0,0,.8)}
#af .mp-f{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden}
#af .mp-f img{object-fit:contain}
#af .mp-f img.ph{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.06)}
#af .mp-f b{font:700 14px/1 var(--f);color:#fff}
#af .mp-g{position:absolute;top:-20px;height:40px;display:flex;transform:translateX(-50%)}
#af .mp-g .mp-f{flex:none;width:40px;height:40px;margin-left:-14px;background:#0B0B0D;box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 3px 10px rgba(0,0,0,.7)}
#af .mp-g .mp-f:first-child{margin-left:0}
#af .mp-g .mp-f img{max-height:16px}
#af .mp-g .mp-f img.ph{max-height:none}
#af .grp .mp-n{top:26px}#af .grp .mp-s{top:42px}
#af .mp-n,#af .mp-s{position:absolute;left:-70px;width:140px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000,0 0 6px #000}
#af .mp-n{top:28px;font:600 13px/16px var(--f);color:#fff}
#af .mp-s{top:44px;font:400 11px/14px var(--f);color:var(--ink2)}
#af .mp-card{position:absolute;left:16px;right:16px;bottom:100px;display:flex;align-items:center;gap:12px;padding:12px;border-radius:24px;background:rgba(28,28,30,.86);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 10px 30px rgba(0,0,0,.5);animation:ph-up .35s cubic-bezier(.32,.72,0,1) both;z-index:5}
@keyframes ph-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
#af .mp-ci{width:72px;height:72px;border-radius:14px;flex:none}
#af .mp-ci .cv-n span{font-size:12px}
#af .mp-ct{flex:1;min-width:0;display:grid;gap:3px}
#af .mp-ct b{font:600 17px/22px var(--f)}
#af .mp-ct span{font:400 13px/17px var(--f);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#af .mp-ct em{font:600 13px/17px var(--f);font-style:normal;color:var(--ink)}

/* Access */
#af .ac-head{position:absolute;left:20px;top:64px}
#af .ac-head h2{font:600 34px/41px var(--f);letter-spacing:-.7px}
#af .ac-head p{margin-top:4px;font:400 17px/22px var(--f);color:var(--ink2)}
#af .ac-a{position:absolute;left:107px;top:230px;width:188px;height:188px}
#af .ac-bottom{position:absolute;left:20px;right:20px;bottom:100px;display:flex;flex-direction:column;gap:12px}
#af .ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 10px}
#af .ac-b{height:36px;border-radius:18px;text-align:center;font:500 15px/36px var(--f);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
#af .metal{position:relative;background:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
#af .metal::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:linear-gradient(100deg,rgba(255,255,255,.2) 0%,#e9e9ee 18%,#7b5cff 28%,#ff5aa0 34%,rgba(255,255,255,.35) 46%,#fff 70%,#5ac8fa 82%,rgba(255,255,255,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
#af .ac-opts{display:grid;gap:10px}
#af .ac-o{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 20px;border-radius:26px;font:500 17px/22px var(--f);color:var(--ink);box-shadow:none}
#af .ac-o em{font:400 15px/20px var(--f);font-style:normal;color:var(--ink2)}
#af .ac-none{font:400 15px/20px var(--f);color:var(--ink2);padding:0 4px}
#af .ac-else{padding:4px 20px;font:500 15px/20px var(--f);color:var(--ink2)}
#af .ac-ans{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:20px;background:#1C1C1E;font:400 15px/20px var(--f);color:var(--ink2);text-align:left}
#af .ac-ans b{flex:none;padding:8px 14px;border-radius:16px;background:#fff;color:#0B0B0D;font:600 14px/18px var(--f)}
#af .ac-field{display:flex;align-items:center;height:56px;padding:0 18px 0 22px;border-radius:28px;box-shadow:none}
#af .ac-field input{all:unset;flex:1;font:400 20px/24px var(--f);color:var(--ink);user-select:text;-webkit-user-select:text}
#af .ac-field input::placeholder{color:var(--ink3)}

/* Events */
#af .ev-hero{position:relative;height:292px}
#af .ev-hero .cv{position:absolute;inset:0}
#af .ev-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,0) 40%,rgba(0,0,0,0) 80%,rgba(11,11,13,.4))}
#af .ev-city{position:absolute;left:20px;top:66px;display:flex;align-items:center;gap:6px;height:44px;padding:0 16px;border-radius:22px;background:rgba(60,60,64,.42);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font:500 16px/20px var(--f);color:var(--ink)}
#af .ev-btns{position:absolute;right:20px;top:66px}
#af .ev-top{display:block;width:100%;padding:24px 20px 0}
#af .ev-when{font:500 15px/20px var(--f);color:var(--ink2)}
#af .ev-top h2,#af .evp-body h2{margin-top:6px;font:600 32px/38px var(--f);letter-spacing:-.7px;color:var(--ink)}
#af .ev-at{margin-top:6px;font:400 16px/21px var(--f);color:var(--ink2)}
#af .ev-tags{margin-top:4px;font:400 13px/17px var(--f);color:var(--ink3)}
#af .ev-h{margin:26px 20px 0;font:600 22px/28px var(--f);letter-spacing:-.4px}
#af .ev-list{padding:6px 20px 0}
#af .ev-row{display:flex;align-items:flex-start;gap:14px;width:100%;padding:12px 0;box-shadow:inset 0 -.5px 0 var(--line)}
#af .ev-d{width:30px;flex:none;display:grid}
#af .ev-d b{font:600 24px/28px var(--f);font-variant-numeric:tabular-nums}
#af .ev-d span{font:400 12px/16px var(--f);color:var(--ink3)}
#af .ev-th{width:56px;height:56px;border-radius:8px;flex:none}
#af .ev-th .cv-n span{font-size:9px}
#af .ev-th .cv-n i{display:none}
#af .ev-t{flex:1;min-width:0;display:grid;gap:1px}
#af .ev-t b{font:600 18px/23px var(--f)}
#af .ev-t span{font:400 15px/20px var(--f);color:var(--ink2)}
#af .ev-t em{font:400 13px/17px var(--f);font-style:normal;color:var(--ink3);display:flex;align-items:center;gap:4px}
#af .evp-hero{height:252px}
#af .evp-body{padding:24px 20px 0}
#af .evp-facts{display:grid;grid-template-columns:1fr 1.2fr .9fr;margin-top:24px;box-shadow:inset 0 .5px 0 var(--line),inset 0 -.5px 0 var(--line)}
#af .evp-facts p{display:grid;gap:4px;padding:14px 0 14px 0;font:400 12px/16px var(--f);color:var(--ink3)}
#af .evp-facts p+p{padding-left:14px;box-shadow:inset .5px 0 0 var(--line)}
#af .evp-facts b{font:600 16px/20px var(--f);color:var(--ink)}
#af .evp-lu{margin-top:20px;display:grid;gap:4px;font:600 16px/21px var(--f)}
#af .evp-lu span{font:400 13px/17px var(--f);color:var(--ink3)}
#af .evp-v{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;font:600 18px/22px var(--f)}
#af .evp-bar{position:absolute;left:0;right:0;bottom:0;height:160px;padding:20px 20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;background:#141416;z-index:20}
#af .evp-bar>span{display:grid;gap:2px;font:600 16px/20px var(--f)}
#af .evp-bar em{font:400 13px/17px var(--f);font-style:normal;color:var(--ink3)}
#af .evp-bar .btn1{width:auto;min-height:48px;padding:0 22px;font-size:16px}

/* Profile and My nights */
#af .pf-head{display:flex;justify-content:space-between;align-items:center;padding:64px 20px 0}
#af .pf-head h2{font:600 34px/41px var(--f);letter-spacing:-.7px}
#af .pf-card{position:relative;margin:24px 20px 0;height:234px;border-radius:24px;background:radial-gradient(120% 90% at 20% 0%,#2a2a2e,#141416 55%,#0d0d0f);box-shadow:inset 0 .5px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.5);overflow:hidden}
#af .pf-card::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);pointer-events:none}
#af .pf-card img{position:absolute;left:22px;top:26px;height:26px;width:auto}
#af .pf-m{position:absolute;right:22px;top:30px;font:500 15px/20px var(--f);color:var(--ink2)}
#af .pf-card b{position:absolute;left:22px;bottom:24px;font:600 22px/28px var(--f)}
#af .pf-id{position:absolute;right:22px;bottom:28px;display:flex;align-items:center;gap:5px;font:500 13px/17px var(--f);color:#E44499}
#af .pf-row{display:flex;align-items:center;gap:16px;width:100%;min-height:62px;padding:0 20px;box-shadow:inset 0 -.5px 0 var(--line);font:400 18px/22px var(--f);color:var(--ink)}
#af .pf-row>span{flex:1}
#af .pf-row em{font:400 16px/20px var(--f);font-style:normal;color:var(--ink2)}
#af .pf-cap{margin:30px 20px 0;font:500 14px/18px var(--f);color:var(--ink2)}
#af .pf-clubs{display:flex;gap:10px;margin:14px 0 0;padding:0 20px;overflow:hidden}
#af .pf-club{flex:none;width:94px;height:112px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;align-content:center;gap:8px}
#af .pf-club.find{font:600 13px/16px var(--f);color:var(--ink)}
#af .pf-club .mk-n{font-size:13px}
#af .pf-note{margin:14px 20px 20px;font:400 13px/17px var(--f);color:var(--ink3)}
#af .pf-ic{width:44px;height:44px;border-radius:50%;background:var(--s2);display:grid;place-items:center;flex:none}
#af .nt-title{padding-top:72px;text-align:center;font:500 17px/22px var(--f);color:var(--ink2)}
#af .nt-one{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 24px 0}
#af .nt-one h2{margin-top:24px;font:600 34px/41px var(--f);letter-spacing:-.7px}
#af .nt-one p{margin-top:8px;font:400 17px/22px var(--f);color:var(--ink2)}
#af .nt-one div{display:flex;gap:10px;margin-top:20px}
#af .nt-plan{display:flex;align-items:center;gap:14px;margin:24px 20px 0}
#af .nt-plan>span:nth-child(2){flex:1;display:grid;gap:2px;font:400 15px/20px var(--f);color:var(--ink2)}
#af .nt-plan b{font:600 18px/22px var(--f);color:var(--ink)}

/* The next tap glows softly, as a guide */
#af [data-hl=on]{position:relative}
#af [data-hl=on]::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),0 0 24px rgba(255,255,255,.22);pointer-events:none;animation:ph-hl 2.4s ease-in-out infinite;z-index:3}
#af .seat[data-hl=on]::after{border-radius:50%}
@keyframes ph-hl{0%,100%{opacity:.35}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){#af .pane,#af .pane-dim,#af .sheet,#af .tabbar,#af .mp-w,#af .press,#af .pr-track i{transition:none}#af [data-hl=on]::after,#af .btn1.busy,#af .pop,#af .mp-card,#af .ps-in{animation:none}}

/* The guide under the phone */
#ag{margin-top:28px;font-family:Onest,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#ag .gt{min-height:3.2em;font-size:clamp(16px,1.35vw,18px);line-height:1.6;letter-spacing:-.015em;color:#4a4a4a}
#ag .ga{display:flex;align-items:center;min-height:0}
#ag .ga:has(button){margin-top:14px;min-height:52px}
#ag button{all:unset;box-sizing:border-box;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 200ms ease}
#ag button:focus-visible{outline:2px solid #171717;outline-offset:3px}
#ag #nX{padding:13px 22px;border-radius:99px;background:#171717;color:#fff;font:500 15px/20px Onest,Arial,Helvetica,sans-serif;letter-spacing:-.01em;box-shadow:0 1px 1px rgba(0,0,0,.08),0 8px 20px -8px rgba(0,0,0,.45)}
#ag #nX:active{transform:scale(.97)}
#ag #rS{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#171717;color:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08),0 8px 20px -8px rgba(0,0,0,.45)}
#ag #rS:active{transform:scale(.94)}
@media (hover:hover){#ag #nX:hover,#ag #rS:hover{background:#2C2C2E}}
/* The phone in "More of your night" (stories/engine.js). Same look as access-film.css, scoped to .ast. */
.ast{--f:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--r:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--sr:ui-serif,"New York","Iowan Old Style",Charter,Georgia,serif;--m:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;position:relative;width:100%;cursor:pointer;color:#F2F2F7;font-family:var(--f);line-height:normal;text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none}
.ast *{box-sizing:border-box}
.ast .a{position:absolute}
.ast .off{opacity:0}
.ast .x{position:absolute;inset:0}
.ast .stg>.s{visibility:hidden}
.ast .stg>.s0{visibility:visible}
.ast .s{position:absolute;left:0;top:0;width:402px;height:874px;background:#0B0B0D;overflow:hidden;border-radius:59.7px}
.ast .eb{font:600 11px/13px var(--m);letter-spacing:1.4px;text-transform:uppercase;color:#8E8E93}
.ast .cd{background:#141416;border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.025)}
.ast .pl{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:99px;font:700 11px/13px var(--f);letter-spacing:.4px;text-transform:uppercase}
.ast .tn{font-variant-numeric:tabular-nums}
.ast .tk{display:inline-block;position:relative}
.ast .tk>span{display:inline-block;white-space:pre}
.ast .tk>.b{position:absolute;left:0;top:0;opacity:0}
.ast .hl{position:absolute;pointer-events:none;box-shadow:0 0 0 2.5px #E294ED,0 0 22px 4px rgba(201,89,221,.55);opacity:0}
.ast .bk{left:20px;top:70px;width:44px;height:44px;border-radius:50%;background:#141416;box-shadow:0 4px 16px rgba(0,0,0,.35);display:grid;place-items:center;font-size:19px}
.ast .aur{left:0;top:0;width:402px;height:440px;background:radial-gradient(circle 200.5px at 261.3px 242px,rgba(232,183,240,.1),rgba(232,183,240,.045) 50%,rgba(232,183,240,0)),radial-gradient(circle 230.5px at 341.7px 154px,rgba(255,46,84,.35),rgba(255,46,84,.1575) 50%,rgba(255,46,84,0)),radial-gradient(circle 331px at 100.5px 22px,rgba(201,89,221,.55),rgba(201,89,221,.2475) 50%,rgba(201,89,221,0));-webkit-mask-image:linear-gradient(#000,#000 50%,transparent);mask-image:linear-gradient(#000,#000 50%,transparent)}
.ast .bt{height:56px;border-radius:16px;background:#F2F2F7;color:#0B0B0D;display:flex;align-items:center;justify-content:center;gap:8px;font:700 16px/20px var(--f);letter-spacing:-.31px;box-shadow:0 8px 30px rgba(242,242,247,.18)}
.ast .bt2{height:52px;border-radius:12px;background:#1C1C1E;color:#F2F2F7;display:flex;align-items:center;justify-content:center;gap:8px;font:600 16px/20px var(--f);letter-spacing:-.31px}
.ast .shim{background:linear-gradient(90deg,#E294ED 30%,#fff 50%,#E294ED 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ast-shim 1.1s linear infinite}
@keyframes ast-shim{from{background-position:100% 0}to{background-position:-100% 0}}
.ast .ic{display:inline-flex;line-height:0}
.ast .ic svg{width:1em;height:1em}
/* The iPad films (stories/films-club.js): landscape screens, clipped to the device's box. */
.ast .ipad .s{width:1180px;height:820px;border-radius:18px}
.ast .rl{position:absolute;left:0;top:0;width:88px;height:820px;background:#0B0B0D;box-shadow:inset -1px 0 0 #1C1C1E}
.ast .ri{position:absolute;left:14px;width:60px;height:58px;border-radius:16px;display:grid;justify-items:center;align-content:center;gap:3px;color:#8E8E93;font:600 10px/12px var(--f)}
.ast .ri .ic{font-size:21px}
.ast .ri.on{background:rgba(201,89,221,.18);color:#E294ED}
.ast .row{display:flex;align-items:center;border-bottom:1px solid #1C1C1E}
@media(prefers-reduced-motion:reduce){.ast .shim{animation:none}}
/* Talk with your data (components/DataChat.jsx). The copy follows the page's colours (tokens in
   pages.css); the window is the venue workspace, dark like the iPad, on any page. */
.data-chat{padding:24px max(7vw,24px) 72px;font-family:Onest,Arial,Helvetica,sans-serif}
.data-chat-copy{max-width:640px;margin:0 auto;text-align:center}
.data-chat-copy h2{margin:0;font-size:clamp(30px,3vw,44px);line-height:1.04;font-weight:500;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.data-chat-sub{max-width:520px;margin:16px auto 0;font-size:17px;line-height:1.6;letter-spacing:-.015em;color:var(--ink-3);text-wrap:balance}
.data-chat-caption{margin:14px 0 0;text-align:center;font-size:10px;line-height:1.5;letter-spacing:.015em;color:var(--ink-4)}

.chat-win{--f:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;position:relative;max-width:860px;margin:44px auto 0;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#0B0B0D;color:#F2F2F7;font-family:var(--f);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),0 40px 80px -36px rgba(0,0,0,.55);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
.chat-bar{position:relative;display:flex;align-items:center;justify-content:center;height:44px;border-bottom:1px solid #1C1C1E;background:#111113}
.lights{position:absolute;left:16px;top:50%;display:flex;gap:8px;transform:translateY(-50%)}
.lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
.lights i:nth-child(2){background:#febc2e}
.lights i:nth-child(3){background:#28c840}
.chat-title{font-size:13px;font-weight:600;color:#8E8E93}
.chat-replay{position:absolute;right:12px;top:50%;transform:translateY(-50%);height:28px;padding:0 12px;border:1px solid #2C2C2E;border-radius:999px;background:transparent;color:#C7C7CC;font:500 12px/1 var(--f);cursor:pointer;animation:chat-in .4s cubic-bezier(.22,1,.36,1)}
.chat-replay:hover{border-color:#48484A;color:#F2F2F7}
.chat-replay:focus-visible{outline:2px solid #E294ED;outline-offset:2px}

.chat-thread{display:flex;flex-direction:column;gap:22px;height:510px;padding:28px max(28px,6%) 20px;overflow-y:auto;scrollbar-width:none}
.chat-thread::-webkit-scrollbar{display:none}
.chat-thread>:first-child{margin-top:auto}
.chat-hello{margin:auto;text-align:center;animation:chat-in .5s cubic-bezier(.22,1,.36,1)}
.chat-hello .ai-mark{margin:0 auto 16px;width:40px;height:40px;border-radius:12px;font-size:17px}
.chat-hello p{margin:0;font-size:22px;font-weight:600;letter-spacing:-.4px}
.chat-hello .chat-hello-sub{margin-top:8px;font-size:15px;font-weight:400;letter-spacing:-.2px;color:#8E8E93}
.ai-mark{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#E294ED,#B14FC9);color:#fff;font:800 13px/1 var(--f);letter-spacing:-.5px}
.msg-user{align-self:flex-end;max-width:72%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:#1C1C1E;font-size:15px;line-height:1.45;letter-spacing:-.2px;animation:chat-up .45s cubic-bezier(.22,1,.36,1)}
.msg-ai{display:flex;gap:14px;align-items:flex-start;animation:chat-in .4s cubic-bezier(.22,1,.36,1)}
.ai-think{margin:4px 0 0;font-size:15px;color:transparent;background:linear-gradient(90deg,#636366 30%,#F2F2F7 50%,#636366 70%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:chat-shim 1.3s linear infinite}
.ai-body{flex:1;min-width:0;font-size:15px;line-height:1.6;letter-spacing:-.2px;color:#D1D1D6}
.ai-body>*{margin:0 0 12px}
.ai-body>:last-child{margin-bottom:0}
.ai-body p{margin:0}
.ai-body>p{margin-top:4px}
.ai-body strong{font-weight:600;color:#F2F2F7}
.ans-item{display:flex;gap:12px}
.ans-n{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:rgba(201,89,221,.18);color:#E294ED;font-size:12px;font-weight:700}
.ans-bars{margin-left:34px!important;padding:14px 16px;border:1px solid #1C1C1E;border-radius:14px;background:#111113;animation:chat-in .4s cubic-bezier(.22,1,.36,1)}
.ans-bars>p{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#8E8E93}
.ans-bar{display:grid;grid-template-columns:36px 1fr 40px;align-items:center;gap:12px;height:22px;font-size:13px}
.ans-bar span{color:#8E8E93}
.ans-bar i{height:6px;border-radius:3px;background:#1C1C1E;overflow:hidden}
.ans-bar em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#B14FC9,#E294ED);transform-origin:left;animation:bar-grow .9s cubic-bezier(.22,1,.36,1) both}
.ans-bar:nth-child(3) em{animation-delay:.08s}.ans-bar:nth-child(4) em{animation-delay:.16s}
.ans-bar b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:#F2F2F7}

.chat-compose{display:flex;align-items:center;gap:12px;margin:0 max(20px,4%) 20px;padding:10px 10px 10px 18px;border:1px solid #2C2C2E;border-radius:16px;background:#141416}
.compose-text{flex:1;min-width:0;font-size:15px;line-height:1.45;letter-spacing:-.2px}
.compose-ph{color:#636366}
.caret{display:inline-block;width:1.5px;height:1.1em;margin-left:2px;vertical-align:-.18em;background:#E294ED;animation:caret 1.05s steps(1) infinite}
.chat-send{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#F2F2F7;color:#0B0B0D;transition:background-color .15s ease,transform .15s ease}
.chat-send.is-hover{background:#fff}
.chat-send.is-press{transform:scale(.88);background:#D1D1D6}
/* On a phone a fingertip touches Send: a soft round light that lands, presses and lets go. */
.chat-send{position:relative}
.chat-send::after{content:'';position:absolute;inset:-9px;border-radius:50%;background:rgba(242,242,247,.22);opacity:0;transform:scale(.55);pointer-events:none}
.is-touch .chat-send.is-hover::after{opacity:1;transform:scale(1);transition:opacity .2s ease,transform .25s cubic-bezier(.22,1,.36,1)}
.is-touch .chat-send.is-press::after{opacity:0;transform:scale(1.35);transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}

.mac-cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));transition:opacity .35s ease}
.mac-cursor.is-moving{transition:transform 1.15s cubic-bezier(.45,.05,.25,1),opacity .35s ease}
.mac-cursor.is-off{opacity:0}
.mac-cursor.is-press path{transform:scale(.9);transform-origin:5.5px 3px}

@keyframes chat-in{from{opacity:0}}
@keyframes chat-up{from{opacity:0;transform:translateY(10px)}}
@keyframes chat-shim{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes caret{50%{opacity:0}}
@keyframes bar-grow{from{transform:scaleX(0)}}

@media(max-width:899px){
 .data-chat{padding:8px 16px 56px}
 .chat-win{margin-top:32px;border-radius:16px}
 .chat-thread{height:440px;padding:22px 16px 16px;gap:18px}
 .msg-user{max-width:88%;font-size:14px}
 .ai-body{font-size:14px}
 .msg-ai{gap:10px}
 .ans-bars{margin-left:0!important}
 /* The question takes two lines on a phone; the box keeps that height once it is sent, so the page stays put. */
 .chat-compose{margin:0 12px 12px;padding-left:14px;min-height:62px}
 .compose-text{font-size:14px}
 .chat-title{font-size:12px}
 .lights{display:none}
}
@media(prefers-reduced-motion:reduce){.chat-win *{animation:none!important;transition:none!important}}
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

@layer base, components;

@layer utilities {
  .\!visible {
    visibility: visible !important;
  }

  .visible {
    visibility: visible;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .block {
    display: block;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .shrink {
    flex-shrink: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .rounded {
    border-radius: .25rem;
  }

  .italic {
    font-style: italic;
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

    @font-face{font-family:schdesign;src:url('/assets/schdesign.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
    :root{--logo-start:11.34s;--logo-duration:1.3s;--description-start:calc(var(--logo-start) + var(--logo-duration) + 1s);--description-duration:2.15s;--nav-start:calc(var(--description-start) + var(--description-duration) + .15s)}
    *{box-sizing:border-box}
    html,body{margin:0;background:#fff;color:#111}
    body{overflow-x:hidden}
    main{position:relative;min-height:calc(100svh - 160px);overflow:hidden;padding:clamp(32px,6svh,64px) 0 64px}
    .brand-frame{height:14.45vw;display:flex;justify-content:center;align-items:flex-start}
    h1{font-family:schdesign,sans-serif;font-weight:400;font-size:26.605vw;line-height:1;white-space:nowrap;flex-shrink:0;margin:0;transform:translate(0.025em,-.14em);letter-spacing:0;color:transparent;background-image:url('/assets/texture.webp');background-size:120vw auto;background-position:-20vw 70%;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;user-select:none}
    @media(max-width:600px){main{min-height:0;padding-top:40px;padding-bottom:40px}h1{font-size:26.605vw;margin-left:0;background-size:120vw auto;background-position:-20vw 70%}}
    :is(.mac-film,.product-experience){animation:peek-in 1.4s cubic-bezier(.16,1,.3,1) calc(var(--nav-start) + .85s) both}
    @keyframes word-enter{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:translateY(0)}}
    @keyframes peek-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
    .site-header{position:relative;margin-top:clamp(28px,4svh,48px);z-index:5;padding:0 24px;animation:nav-enter 1.4s cubic-bezier(.4,0,.2,1) var(--nav-start) both}
    .site-nav{width:min(100%,640px);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;column-gap:24px;font-family:Onest,Arial,Helvetica,sans-serif;font-size:15px;line-height:1;font-weight:400;letter-spacing:-.015em}
    .site-nav a{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;color:#181818;text-decoration:none;white-space:nowrap;transition:color .25s,background-color .25s,border-color .25s}
    .site-nav a::after{content:"";position:absolute;bottom:8px;width:24px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.22,1,.36,1)}
    .site-nav a:hover::after{transform:scaleX(1)}
    .site-nav a:focus-visible{outline:2px solid #181818;outline-offset:5px}
    @keyframes nav-enter{from{opacity:0;transform:translateY(-4px);visibility:hidden}to{opacity:1;transform:translateY(0);visibility:visible}}
    @media(max-width:600px){.site-header{padding:0 20px}.site-nav{font-size:14px;column-gap:10px;grid-template-columns:repeat(4,auto);justify-content:space-between}}
    @media(max-width:380px){.site-nav{font-size:13px;column-gap:6px}}
    @media(max-width:360px){.site-header{padding:0 12px}.site-nav{font-size:12px;column-gap:4px}}
    .hero-description{position:relative;width:92vw;max-width:52rem;margin:clamp(80px,12svh,132px) auto 0;text-align:center;color:#292929;font-family:Onest,Arial,Helvetica,sans-serif;font-size:clamp(20px,1.8vw,28px);font-weight:400;line-height:1.4;letter-spacing:-.012em}
    .description-line{display:block;text-wrap:balance}
    .description-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
    .description-word-inner{display:inline-block;animation:word-enter 1.05s cubic-bezier(.16,1,.3,1) calc(var(--description-start) + var(--word-delay)) both}
    @media(max-width:600px){.hero-description{max-width:32rem;font-size:18px;line-height:1.5}}
    @media(prefers-reduced-motion:reduce){html:not(.intro) :is(.mac-film,.product-experience,.site-header,.hero-description,.description-word-inner){animation:none}}
    .brand-frame a{flex-shrink:0;text-decoration:none}
    .subpage main{min-height:0;padding-bottom:0}
    .subpage main,.subpage .site-header,.subpage .product-experience,.subpage .app-download{animation:none}
    @media(forced-colors:active){h1{color:CanvasText;background:none}.logo-film{display:none}}
    /* The club film in the start page's logo (components/LogoFilm.jsx): as wide as the word and as tall as its letters
       (0.533 em up from the baseline at 0.6745 em), cut to the letters by the same word drawn from the font. It is white
       until its first frame, like the film's own first frame; if it cannot play, the logo keeps its colours. */
    h1:has(>.logo-film){position:relative;background-image:none}
    h1:has(>.logo-film.is-off){background-image:url('/assets/texture.webp')}
    .logo-film{position:absolute;left:0;top:calc(.6745em - .533em);width:100%;height:.533em;object-fit:fill;background:#fafafa;pointer-events:none;-webkit-mask:url('/assets/access-mask.svg') 0 0/100% 100% no-repeat;mask:url('/assets/access-mask.svg') 0 0/100% 100% no-repeat}
    .logo-film.is-off{display:none}
    .logo-sand{position:absolute;left:0;top:calc(.6745em - .533em);width:100%;height:.533em;pointer-events:none}
  /* Tap or click anywhere to skip the intro (components/IntroSkip.jsx). */
.intro-skip{position:fixed;inset:0;z-index:20;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app-download {
  display:flex;
  justify-content:center;
  margin:32px 24px 0;
  animation:app-download-enter 1.15s cubic-bezier(.22,1,.36,1) calc(var(--description-start) + var(--description-duration) + .15s) both;
}
.app-download-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:210px;
  min-height:54px;
  padding:0 23px;
  border:1px solid #e4e4e7;
  border-radius:12px;
  background:#fff;
  color:#151515;
  font-family:Onest,Arial,Helvetica,sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.015em;
  text-decoration:none;
  transition:background-color .3s ease,border-color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.app-download-button:hover { background:#fafafa;border-color:#cacacf; }
.app-download-button:focus-visible { outline:2px solid #6b64ad;outline-offset:5px; }
.app-download-button:not(:disabled) { cursor:pointer; }
.app-download-icon { width:19px;height:22px;flex:none; }
.app-download-label {
  background:url('/assets/texture.webp') 25% 70% / 160% auto no-repeat;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}
@keyframes app-download-enter {
  from { opacity:0;transform:translateY(6px);visibility:hidden; }
  to { opacity:1;transform:translateY(0);visibility:visible; }
}
@media(prefers-reduced-motion:reduce) { html:not(.intro) .app-download { animation:none; } }
@media(forced-colors:active) { .app-download-label { background:none;color:ButtonText; } }
.product-experience{padding:59px max(7vw,24px) 140px;background:#fff;font-family:Onest,Arial,Helvetica,sans-serif;overflow:hidden}
.experience-layout{max-width:480px;margin:0 auto;display:grid;justify-items:center;gap:28px;text-align:center}
.experience-eyebrow{margin:0 0 26px;color:#777;font-size:11px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase}
.experience-copy h2{margin:0;font-size:clamp(30px,3vw,44px);line-height:1.04;font-weight:500;letter-spacing:-.045em;color:#171717}
.experience-body{margin:28px 0 0;font-family:Onest,Arial,Helvetica,sans-serif;font-size:clamp(16px,1.35vw,18px);line-height:1.75;letter-spacing:-.015em;color:#727272}
.experience-device{width:min(100%,340px);margin:0 auto;position:relative}
.experience-phone{padding:8px;border-radius:49px;background:linear-gradient(110deg,#77787b 0%,#d0d0d1 2%,#45464a 4%,#222326 18%,#696a6d 48%,#28292c 78%,#999a9d 97%,#35363a);box-shadow:inset 0 0 0 1px #76777a,inset 0 0 0 2px #ffffff30,0 2px 3px #00000016,12px 24px 35px -18px #16162038,22px 52px 70px -28px #16162030;position:relative;isolation:isolate}
.experience-phone::before{content:'';position:absolute;inset:3px;border:1px solid #ffffff35;border-radius:46px;pointer-events:none}
.phone-hardware i{position:absolute;width:3px;background:linear-gradient(90deg,#55565a,#b7b8bb 50%,#4b4c50);border-radius:2px 0 0 2px;left:-3px;box-shadow:0 1px 1px #00000030}
.phone-action{top:99px;height:23px}.phone-volume-up{top:144px;height:43px}.phone-volume-down{top:199px;height:43px}
.phone-hardware .phone-power{left:auto;right:-3px;top:160px;height:68px;border-radius:0 2px 2px 0}
.phone-status{position:absolute;top:21px;left:25px;right:23px;display:flex;align-items:center;justify-content:space-between;color:#f5f5f7;font-size:11px;font-weight:600;letter-spacing:-.02em;pointer-events:none}.phone-status svg{width:49px;height:12px}
.experience-screen{position:relative;min-height:658px;overflow:hidden;border:2px solid #070709;border-radius:41px;background:#101014;color:#f7f5fa;padding:14px 20px 29px}
.experience-screen::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,#ffffff06 0%,#ffffff02 30%,transparent 46%);box-shadow:inset 0 0 0 1px #ffffff0b}
.phone-island{position:relative;width:94px;height:26px;background:#020203;border-radius:20px;margin:0 auto 25px;box-shadow:0 0 0 1px #ffffff03}
.phone-island::after{content:'';position:absolute;right:10px;top:8px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#273348 0%,#101923 30%,#050609 65%);box-shadow:0 0 0 2px #0b0b0e,inset 0 0 2px #39517155}
.phone-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}
.phone-brand{font-size:25px;font-weight:700;letter-spacing:-1.5px}.phone-brand>span{color:#d49ce2}
.phone-tab{font-size:11px;background:#26202d;color:#dfb6ed;padding:9px 12px;border-radius:10px}
.phone-eyebrow{font-size:9px;letter-spacing:.16em;color:#a9a3b2;text-transform:uppercase;margin:0 0 10px}
.experience-screen h3{font-size:31px;line-height:1.08;letter-spacing:-.045em;font-weight:600;margin:0 0 25px}
.phone-card{padding:16px 13px;border-radius:21px;background:#1c1b21}
.phone-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.phone-row strong{font-size:13px;font-weight:600}.phone-row small{display:block;margin-top:6px;font-size:10px;color:#aaa3b3}.phone-price{text-align:right}.phone-price small{font-size:8px;letter-spacing:.07em}
.phone-seats{background:linear-gradient(140deg,#2b1f33,#18171e);padding:14px 10px;border-radius:13px;margin-top:18px}.phone-seats .phone-row{font-size:10px;color:#bab0c4}.phone-seats .phone-row span:first-child{color:#ddb1eb}
.seat-dots{display:flex;justify-content:space-between;margin:14px 0}.seat-dots span{display:grid;place-items:center;width:22px;height:22px;border:1px dashed #5b5067;border-radius:50%;color:#7b6c89}.seat-dots .filled{background:#644074;border:0;color:#e9c6f4;font-size:12px}
.phone-progress{height:4px;border-radius:5px;background:#35303e}.phone-progress::before{content:'';display:block;width:75%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b67bcf,#e0a3d5)}
.phone-availability{margin-top:17px;color:#bab3c5;font-size:10px}.phone-availability strong{font-size:11px;color:#eee9f3}
.phone-reserve{display:flex;justify-content:space-between;align-items:center;gap:8px;background:linear-gradient(110deg,#a56bc5,#c585cb);padding:17px 12px;border-radius:13px;margin-top:16px;font-size:11px;font-weight:600}
.phone-note{font-size:10px;line-height:1.6;text-align:center;color:#aaa3b3;margin:15px 5px 14px}.phone-home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:100px;height:4px;background:#eee;border-radius:8px}
.experience-device #ag{margin-top:24px}.experience-device #ag .ga{justify-content:center}
.experience-copy,.experience-device{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.experience-device{transition-delay:.08s}
.product-experience[data-reveal=pending] .experience-copy,.product-experience[data-reveal=pending] .experience-device{opacity:0;transform:translateY(16px)}
@media(max-width:760px){.product-experience{padding:51px 26px 90px}.experience-layout{gap:24px}.experience-copy h2{font-size:clamp(28px,7.5vw,36px)}.experience-eyebrow{margin-bottom:20px}.experience-body{margin-top:22px;font-size:16px}.experience-device{width:min(100%,320px)}}
@media(prefers-reduced-motion:reduce){.experience-copy,.experience-device{transition:none!important;opacity:1!important;transform:none!important}}
.product-experience.product-try{animation:none;padding-bottom:40px}
/* Try it on a phone: the whole app fits on the screen with its guide, with room beside it to scroll, and
   until the app is used a swipe over it scrolls the page (ProductExperience.jsx). */
@media(max-width:760px){.product-try .experience-device{width:min(100%,320px,calc((100svh - 150px) * .4494))}}
@media(pointer:coarse){.product-try .experience-device:not(.in-use) #af .sc{overflow-y:hidden}}
/* A night on one screen: the device plays the scenes one after the other, the list beside it shows
   which one and picks another, and one line under the device says what happens now (ProductExperience.jsx). */
.product-experience.night-player{overflow:visible}
.night-player .experience-copy{max-width:620px;margin:0 auto;text-align:center}
.experience-sub{max-width:540px;margin:16px auto 0;font-size:17px;line-height:1.6;letter-spacing:-.015em;color:#727272;text-wrap:balance}
.night-grid{display:grid;grid-template-columns:minmax(0,400px) 340px;gap:88px;justify-content:center;align-items:center;margin-top:44px;text-align:left}
.night-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.night-pick{display:block;width:100%;padding:10px 0;border:0;background:none;text-align:left;cursor:pointer;font:500 26px/1.18 Onest,Arial,Helvetica,sans-serif;letter-spacing:-.035em;color:#949494;transition:color .45s cubic-bezier(.22,1,.36,1);text-wrap:balance}
.night-pick:hover{color:#5e5e5e}
.night-pick.is-on{color:#171717}
.night-pick span{display:block}
/* How far the playing scene's film has come: a hairline under its heading, as wide as the heading. */
.night-pick{position:relative;width:fit-content;max-width:100%}
.night-bar{position:absolute;left:0;right:0;bottom:2px;height:1.5px;border-radius:1px;background:var(--line-2);overflow:hidden;animation:night-bar-in .4s ease both;transition:opacity .4s ease}
.night-bar b{display:block;height:100%;border-radius:inherit;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.night-grid.before-start .night-bar{opacity:0}
@keyframes night-bar-in{from{opacity:0}}
/* On a phone the list becomes a row of hairlines under the device, one per scene, and only the playing
   scene's heading shows (the list is in the media query below). The hairlines are thin; each one's button
   is 44 px tall for a finger. */
.night-seg,.night-head{display:none}
.night-seg button{flex:1;height:44px;margin:-14px 0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.night-seg i{display:block;height:2px;border-radius:1px;background:var(--line-2);overflow:hidden}
.night-seg b{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.night-seg .is-done b{transform:scaleX(1)}
.night-seg .is-on b{transform:scaleX(var(--p,0))}
.night-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:-10px;border-radius:6px}
.night-head{margin:18px 0 0;text-align:center;font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.night-head span{display:block}
.night-head>span{grid-area:1/1;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.night-head>.is-on{opacity:1;transform:none}
.night-pick:focus-visible{outline:2px solid #181818;outline-offset:4px;border-radius:4px}
.night-stage{display:grid;justify-items:center}
.night-now{min-height:2.9em;max-width:340px;margin:18px 0 0;text-align:center;font-size:16px;line-height:1.45;letter-spacing:-.015em;color:#4d4d4d;text-wrap:balance}
.night-now span{display:block;animation:night-now .45s cubic-bezier(.22,1,.36,1)}
@keyframes night-now{from{opacity:0;transform:translateY(4px)}}
/* Every film of a night sits ready in the same place; only the playing one shows. */
.night-stage .experience-device{position:relative}
.film-slot{position:absolute;inset:0;opacity:0;pointer-events:none}
.film-slot.is-leaving{opacity:1;z-index:1}
.film-slot.is-on{opacity:1;z-index:2;pointer-events:auto;transition:opacity .35s cubic-bezier(.22,1,.36,1)}
/* The phone has its final size from the first frame, so swapping films never changes the page height.
   It and its line fit on a short screen whole, since the films start only once all of the device shows. */
.night-stage .experience-device{aspect-ratio:459/913;width:min(340px,calc((100vh - 170px) * .5027))}
.night-stage #ph,.night-stage .ph{zoom:.7407}
.night-caption{margin:10px 0 0;text-align:center;font-size:10px;line-height:1.5;letter-spacing:.015em;color:#8a8a8a}
.night-stage .night-caption{margin:2px 0 0}
@media(min-width:900px){.night-caption.on-mob{display:none}.product-experience.night-player{padding-bottom:108px}}
@media(max-width:899px){.night-caption.on-desk{display:none}}
/* Each night opens the same way: who it is for, then the heading. */
.night-player .experience-eyebrow{margin:0 0 16px}
.night-player .experience-copy h2{text-wrap:balance}
/* The guests' night: who it is for and the heading stand above the list, beside the phone. */
.night-grid.head-beside{margin-top:0}
.night-grid.head-beside .experience-copy{max-width:none;margin:0 0 36px;text-align:left}
.night-grid.head-beside .experience-eyebrow{font-size:10px;margin:0 0 14px}
@media(min-width:900px){
 .night-grid.head-beside .night-side{align-self:stretch;display:flex;flex-direction:column}
 .night-grid.head-beside .night-list{margin-block:auto}
 .night-grid.head-beside .experience-copy h2{color:#949494;transition:color .45s cubic-bezier(.22,1,.36,1)}
 .night-grid.head-beside.before-start .experience-copy h2{color:#171717}
 .night-grid.head-beside.before-start .night-pick.is-on{color:#949494}
}
/* The promoter's night mirrors the guest's: the phone on the left. */
.night-grid.flip{grid-template-columns:340px minmax(0,400px)}
.night-grid.flip .night-stage{order:-1}
/* The venue's night: a wider column for the iPad, which starts at its final size too. */
.night-grid.is-ipad{grid-template-columns:minmax(0,300px) minmax(0,720px);gap:56px}
.night-grid.is-ipad .night-pick{font-size:24px}
.night-grid.is-ipad .night-stage .experience-device{width:100%;max-width:min(720px,calc((100vh - 170px) * 1.4147));aspect-ratio:1228/868}
.night-grid.is-ipad .night-now{max-width:520px}
.night-stage .ast-ipad{height:100%}
.night-stage .ph.ipad{zoom:.5863}
/* Three facts, and the end of the page (the footer is in pages.css). */
/* The page's full width, centred, no lines: only large headings and air. */
.site-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(4vw,32px);padding:60px max(4vw,24px);text-align:center;font-family:Onest,Arial,Helvetica,sans-serif}
.site-facts b{display:block;font-weight:500;font-size:clamp(28px,3vw,44px);line-height:1.06;letter-spacing:-.04em;color:#171717;text-wrap:balance}
.site-facts p{margin:20px auto 0;max-width:30ch;font-size:17px;line-height:1.5;color:#727272}
.site-end{padding:0 0 70px}
.site-end .app-download{margin-top:0}
@media(max-width:899px){
 .night-grid,.night-grid.flip,.night-grid.is-ipad{grid-template-columns:1fr;gap:0;margin-top:28px}
 .night-stage,.night-grid.flip .night-stage{order:-1}
 .night-grid.head-beside .night-side{display:contents}
 .night-grid.head-beside .experience-copy{order:-2;margin:0 0 28px;text-align:center}
 .night-stage .experience-device{width:min(240px,calc((100svh - 300px) * .5027))}
 .night-stage #ph,.night-stage .ph{zoom:.5229}
 .night-grid.is-ipad .night-stage{margin:0 -16px}
 .night-grid.is-ipad .night-stage .experience-device{width:calc(100vw - 20px);max-width:560px}
 .night-stage .ph.ipad{zoom:.3013}
 /* The camera over the venue's iPad (ProductExperience.jsx): the iPad is cut to its own rounded edge. */
 .night-grid.is-ipad .night-stage .experience-device{overflow:hidden;border-radius:14px}
 .night-grid.is-ipad .film-slot .ast-ipad{transform-origin:0 0}
 .night-seg{display:flex;gap:6px;width:min(100%,260px);margin:22px auto 0}
 .night-head{display:grid}
 .night-now{font-size:15px;margin-top:6px}
 .night-list{display:none}
 .product-experience.night-player{padding-bottom:56px}
 .site-facts{grid-template-columns:1fr;gap:40px;padding:0 24px 16px}
 .site-facts b{font-size:22px}
 /* On a phone only the headings. */
 .site-facts p{display:none}
}
/* On a phone the start page's facts come up into the black under the MacBook (mac-film.css): the open MacBook's
   foot is 48.2 % down the pinned screen plus 42.3 % of its width less 27 px (measured from 360 to 700 px wide),
   and the facts start about 48 px under it. They and Try it yourself come up with them over the film's black, and
   are gone while the film plays. */
@media(max-width:700px){
 .mac-film:not(.is-flat)+.site-facts{margin-top:calc(21px - 51.8vh + 42.3vw);margin-top:calc(21px - 51.8svh + 42.3vw)}
 .mac-film:not(.is-flat)+.site-facts,.mac-film:not(.is-flat)+.site-facts+.product-try{position:relative;z-index:7;transition:opacity .3s ease}
 .mac-film:not(.is-flat):not(.is-rest)+.site-facts,.mac-film:not(.is-flat):not(.is-rest)+.site-facts+.product-try{opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.night-bar{display:none}.night-seg .is-on b{transform:scaleX(1)}.night-head>span{transition:none}.night-pick,.film-slot.is-on,.night-grid.head-beside .experience-copy h2{transition:none}.night-now span{animation:none}}
/* The intro. The logo waits big in the middle of the screen while the club film plays in its letters, moves up to
   its place at the film's cut at 16.17 s (the sign), and then the text, the menu, the button and the first section come up in the
   order and tempo they always had. <html class="intro"> is set in index.html; LogoFilm.jsx adds .intro-text at 11.25 s and .intro-go at the cut
   (or after 4 s if the film cannot play); IntroSkip.jsx swaps both for .no-intro when the intro is over or skipped.
   Every delay below counts from .intro-go: until then the entrances wait, paused on their first frame.
   The logo's letters are 0.533 em tall and their middle is 0.268 em below the top of the brand frame (baseline at
   0.6745 em with line-height 1, minus the h1's -.14em), so 7.13vw at the h1's 26.605vw. */
:root{--logo-start:0s;--logo-duration:1.6s;--glide:cubic-bezier(.7,0,.12,1);--description-start:0s;--description-duration:1.1s;--nav-start:1s;--logo-y:7.13vw;--intro-dy:calc(50svh - clamp(32px,6svh,64px) - var(--logo-y));--intro-scale:1.1418}
@media(max-width:600px){:root{--intro-dy:calc(50svh - 40px - var(--logo-y))}}
.site-header{animation-duration:1s}
.description-word-inner{animation-duration:.75s;animation-delay:calc(var(--description-start) + var(--word-delay)*.6)}
.app-download{animation-duration:.85s;animation-delay:calc(var(--nav-start) + .25s)}
/* While it waits the letters fill the screen edge to edge (3.292 em of ink at 26.605vw: 1 / 0.8758 = 1.1418), then up to
   its place in 1.6 s on a soft start and a long, smooth landing (--glide). The frame moves and the word grows around the middle of its letters (0.268 em
   down the h1, as its own -.14em is applied first). The font's empty right side bearing would then reach past the
   screen, so main clips sideways (and only sideways: the logo waits below main's bottom edge on a tall screen). */
html.intro main{overflow:visible;overflow-x:clip}
html.intro .brand-frame{transform:translateY(var(--intro-dy))}
html.intro main h1{transform-origin:50% .268em;scale:var(--intro-scale)}
html.intro-go .brand-frame{animation:logo-travel var(--logo-duration) var(--glide) var(--logo-start) both}
html.intro-go main h1{animation:logo-grow var(--logo-duration) var(--glide) var(--logo-start) both}
@keyframes logo-travel{from{transform:translateY(var(--intro-dy))}to{transform:none}}
@keyframes logo-grow{from{scale:var(--intro-scale)}to{scale:1}}
html.intro:not(.intro-go) :is(.site-header,.app-download,.mac-film,.product-experience){animation-play-state:paused}
/* The text comes up under the waiting logo at the film's cut at 11.25 s (.intro-text, LogoFilm.jsx), word by word as
   always, standing --text-dy below its own place; when the logo moves up it follows 0.08 s behind, on the same curve,
   and the menu comes in as the logo lands. The moving parts are on their own layers from the start, so the move
   begins without a hitch. */
html.intro:not(.intro-text):not(.intro-go) .description-word-inner{animation-play-state:paused}
html.intro .hero-description{transform:translateY(var(--text-dy,0px))}
html.intro-go .hero-description{animation:text-travel var(--logo-duration) var(--glide) .08s both}
@keyframes text-travel{from{transform:translateY(var(--text-dy,0px))}to{transform:none}}
html.intro :is(.brand-frame,main h1,.hero-description){will-change:transform}
html.no-intro :is(.site-header,.description-word-inner,.app-download,.mac-film,.product-experience,.hero-description){animation:none}
/* With reduced motion the intro still plays (index.html); without it, nothing moves. */
@media(prefers-reduced-motion:reduce){html:not(.intro) :is(.site-header,.description-word-inner,.app-download){animation:none}}
/* The full-screen start (components/IntroFilm.jsx): over the logo, under the skip layer, black until the film plays. */
.intro-film{position:fixed;inset:0;z-index:19;background:#000;overflow:hidden;pointer-events:none;contain:strict}
html:not(.intro) .intro-film,.intro-film.is-done{display:none}
.intro-film video{position:absolute;display:block;object-fit:fill;transform-origin:50% 50%;will-change:transform}
.if-bar{position:absolute;left:0;right:0;top:0;background:#000;will-change:transform}
.if-bar.top{transform:translateY(-100%)}
.if-bar.bottom{transform:translateY(100%)}
.if-cut{position:absolute;overflow:visible}
.if-cut path{fill:#000;opacity:0;transition:opacity .2s cubic-bezier(.45,0,.55,1)}
.if-cut path.on{opacity:1}
.if-hole{position:absolute;inset:0;width:100%;height:100%;display:none;overflow:visible}
.if-hole path{fill:#000}
.intro-film.is-zoom .if-hole.on{display:block}
.intro-film.is-zoom :is(.if-bar,.if-cut){display:none}
/* The about, contact, privacy and terms pages, the way to the team on the promoters' and venues' pages,
   and the footer. Colours are tokens, so dark.css can turn them over in one place. */
:root{--page:#fff;--glass:rgba(255,255,255,.72);--ink:#171717;--ink-2:#4d4d4d;--ink-3:#727272;--ink-4:#a3a3a3;--line:#ebebeb;--line-2:#d6d6d6;--panel:#f7f7f7;--field:#fff;--solid-bg:#171717;--solid-ink:#fff;--solid-hover:#2c2c2e;--card-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 48px -28px rgba(0,0,0,.16)}

/* The menu: a small arrow after each link (Navigation.jsx), purple until the page has given it the logo's
   colour straight above it; the page you are on is white. */
.site-nav a{gap:5px;color:var(--ink-2)}
.site-nav a::after{display:none}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--ink)}
.site-nav a[aria-current=page]{font-weight:500}
.nav-arrow{flex:none;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:#C959DD;transition:transform .3s cubic-bezier(.22,1,.36,1)}
/* On the start page the arrows follow the film in the logo, so their colour changes softly. */
main:has(.logo-film) .nav-arrow{transition:transform .3s cubic-bezier(.22,1,.36,1),color .25s ease}
.site-nav a:hover .nav-arrow{transform:translate(1.5px,-1.5px)}
.site-nav a:hover .nav-arrow.down{transform:translate(1.5px,1.5px)}
/* On a phone the arrows shrink with the type so all four still fit in one row; only phones narrower than
   344 px have no room for four, and there only the page you are on keeps its arrow. */
@media(max-width:600px){.site-nav a{gap:3px}.nav-arrow{width:9px;height:9px}}
@media(max-width:430px){.site-nav a{gap:2px}.nav-arrow{width:8px;height:8px}}
@media(max-width:343px){.site-nav a:not([aria-current=page]) .nav-arrow{display:none}}

/* The phone's slim bar and its menu (Navigation.jsx): frosted glass at the top, the menu over the whole page. */
.phone-bar{position:fixed;left:0;right:0;top:0;z-index:31;display:flex;align-items:center;justify-content:space-between;height:calc(54px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0 22px;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 -1px 0 var(--line);transform:translateY(-101%);transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .3s ease,box-shadow .3s ease}
.phone-bar.is-shown{transform:none}
.phone-bar.is-open{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.phone-bar-mark{font-family:schdesign,sans-serif;font-size:27px;line-height:1;text-decoration:none;color:transparent;background:url('/assets/texture.webp') 30% 70% / 260% auto no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-tap-highlight-color:transparent}
.phone-bar-btn{position:relative;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phone-bar-btn i{position:absolute;left:13px;width:18px;height:1.5px;border-radius:1px;background:var(--ink);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.phone-bar-btn i:first-child{top:18.5px}
.phone-bar-btn i:last-child{top:24px}
.is-open .phone-bar-btn i:first-child{transform:translateY(2.75px) rotate(45deg)}
.is-open .phone-bar-btn i:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.phone-bar-btn:focus-visible,.phone-bar-mark:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:10px}
.phone-menu{position:fixed;inset:0;z-index:30;padding:calc(88px + env(safe-area-inset-top)) 24px 40px;background:var(--page);font-family:Onest,Arial,Helvetica,sans-serif;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.phone-menu.is-open{opacity:1;visibility:visible;transition:opacity .3s ease}
.phone-menu ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.phone-menu li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.phone-menu.is-open li{opacity:1;transform:none;transition-delay:calc(60ms + var(--i) * 45ms)}
.phone-menu a{display:flex;align-items:center;justify-content:space-between;padding:18px 2px;font-size:30px;line-height:1.1;font-weight:500;letter-spacing:-.04em;color:var(--ink-2);text-decoration:none;-webkit-tap-highlight-color:transparent}
.phone-menu a[aria-current=page]{color:var(--ink)}
.phone-menu .nav-arrow{width:16px;height:16px;stroke-width:1.3}
.phone-menu a:active{color:var(--ink)}
@media(min-width:900px){.phone-bar,.phone-menu{display:none}}
@media(prefers-reduced-motion:reduce){.phone-bar,.phone-bar-btn i,.phone-menu,.phone-menu li{transition:none}}

.page{max-width:1200px;margin:0 auto;padding:72px max(7vw,24px) 120px;font-family:Onest,Arial,Helvetica,sans-serif;color:var(--ink)}
.page-eyebrow{margin:0 0 20px;font-size:11px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.page-head h1,.contact-intro h1{margin:0;font-family:Onest,Arial,Helvetica,sans-serif;font-size:clamp(42px,5.6vw,76px);line-height:1.02;font-weight:500;letter-spacing:-.05em;white-space:normal;color:var(--ink);background:none;transform:none;user-select:auto;text-wrap:balance}
.page-lead{max-width:620px;margin:28px 0 0;font-size:clamp(18px,1.55vw,21px);line-height:1.55;letter-spacing:-.015em;color:var(--ink-3);text-wrap:pretty}
.tx{color:transparent;background:url('/assets/texture.webp') 25% 70% / 180% auto no-repeat;-webkit-background-clip:text;background-clip:text}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border:0;border-radius:999px;font:500 15px/1 Onest,Arial,Helvetica,sans-serif;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn span{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.btn:hover span{transform:translateX(3px)}
.btn-solid{background:var(--solid-bg);color:var(--solid-ink)}
.btn-solid:hover{background:var(--solid-hover)}
.btn-quiet{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-quiet:hover{border-color:var(--ink-3)}
.btn-wide{width:100%;margin-top:6px}

/* The way to the team, after a page has made its case. */
.partner-cta{box-sizing:border-box;width:calc(100% - 2 * max(7vw,24px));max-width:calc(960px - 2 * max(7vw,24px));margin:64px auto 110px;padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:40px;border:1px solid var(--line);border-radius:28px;background:var(--panel);font-family:Onest,Arial,Helvetica,sans-serif}
.partner-cta h2{margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.1;font-weight:500;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.partner-cta p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--ink-3);text-wrap:pretty}

/* About us */
.about-head{max-width:900px}
.about-block{margin-top:128px}
.block-title{margin:0 0 36px;font-size:clamp(26px,2.4vw,32px);line-height:1.15;font-weight:500;letter-spacing:-.035em}
.beliefs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
.beliefs li{display:grid;align-content:start;grid-template-columns:52px 1fr;row-gap:10px;padding:32px 0 36px;border-top:1px solid var(--line)}
.belief-n{grid-row:span 2;padding-top:7px;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink-4)}
.beliefs h3{margin:0;font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.03em}
.beliefs p{margin:0;max-width:420px;font-size:16px;line-height:1.65;color:var(--ink-3)}
.sides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.side{display:flex;flex-direction:column;gap:14px;min-height:210px;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--ink);text-decoration:none;transition:border-color .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.side:hover{border-color:var(--line-2);transform:translateY(-2px)}
.side:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.side-who{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.side-line{font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.side-go{margin-top:auto;font-size:18px;color:var(--ink-3);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.side:hover .side-go{transform:translateX(4px);color:var(--ink)}
.about-page .partner-cta{width:auto;max-width:none;margin:128px 0 0}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:80px;align-items:start}
.contact-lines{margin:52px 0 0;border-top:1px solid var(--line)}
.contact-lines div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-lines dt{font-size:13px;line-height:1.6;color:var(--ink-3)}
.contact-lines dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.contact-lines a{color:var(--ink);text-decoration:none}
.contact-card{padding:36px;border:1px solid var(--line);border-radius:26px;background:var(--panel);box-shadow:var(--card-shadow)}
.contact-card form{display:grid;gap:18px}
.contact-card>.topic{margin-bottom:18px}
.topic{margin:0;padding:0;border:0;min-width:0}
.topic legend{margin:0 0 10px;padding:0;font-size:13px;color:var(--ink-2)}
.topic-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:14px;background:var(--field)}
.topic label{position:relative;display:flex;align-items:center;justify-content:center;height:40px;border-radius:10px;font-size:14px;color:var(--ink-3);cursor:pointer;transition:background-color .25s ease,color .25s ease}
.topic label:hover{color:var(--ink)}
.topic label.is-on{background:var(--solid-bg);color:var(--solid-ink)}
.topic input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.topic label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:block;min-width:0}
.field>span{display:block;margin:0 0 8px;font-size:13px;color:var(--ink-2)}
.field i{margin-left:6px;font-style:normal;color:var(--ink-4)}
.field input,.field textarea,.field select{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--field);color:var(--ink);font:400 15px/1.4 Onest,Arial,Helvetica,sans-serif;letter-spacing:-.01em;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{height:auto;min-height:136px;padding:12px 14px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--ink-4)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(128,128,128,.16)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);cursor:pointer}
.consent input{margin-top:2px;width:16px;height:16px;accent-color:var(--ink)}
.form-error{margin:0;font-size:13px;color:#d14343}
.form-note{margin:0;text-align:center;font-size:12px;color:var(--ink-4)}
.contact-sent{padding:20px 4px}
.contact-sent-title{margin:0 0 10px;font-size:24px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.contact-sent p{margin:0 0 24px;font-size:15px;line-height:1.6;color:var(--ink-3)}

/* Privacy policy and terms */
.legal-page .page-head{max-width:780px}
.legal-page .page-head h1{font-size:clamp(36px,4.4vw,58px)}
.legal-meta{margin:26px 0 0;font-size:14px;color:var(--ink-3)}
.legal-grid{display:grid;grid-template-columns:220px minmax(0,720px);gap:96px;margin-top:64px;padding-top:48px;border-top:1px solid var(--line)}
.legal-toc{position:sticky;top:32px;align-self:start}
.legal-toc summary{margin:0 0 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);list-style:none;pointer-events:none}
.legal-toc summary::-webkit-details-marker{display:none}
.legal-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.legal-toc a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:1px solid transparent;font-size:14px;line-height:1.4;color:var(--ink-3);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.legal-toc a:hover{color:var(--ink)}
.legal-toc a[aria-current]{color:var(--ink);border-left-color:var(--ink)}
.legal-text{font-size:16px;line-height:1.75;letter-spacing:-.01em;color:var(--ink-2)}
.legal-text>:first-child{margin-top:0}
.legal-text h2{margin:64px 0 16px;font-size:24px;line-height:1.25;font-weight:500;letter-spacing:-.03em;color:var(--ink);scroll-margin-top:32px}
.legal-text h3{margin:36px 0 10px;font-size:18px;line-height:1.3;font-weight:500;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:32px}
.legal-text p{margin:0 0 16px}
.legal-text ul,.legal-text ol{margin:0 0 18px;padding-left:20px}
.legal-text li{margin:0 0 10px;padding-left:4px}
.legal-text li::marker{color:var(--ink-4)}
.legal-text strong{font-weight:500;color:var(--ink)}
.legal-text a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color .2s ease}
.legal-text a:hover{text-decoration-color:var(--ink)}
.legal-table{width:100%;margin:8px 0 28px;border-collapse:collapse;font-size:15px;line-height:1.6}
.legal-table th{padding:0 20px 12px 0;border-bottom:1px solid var(--line-2);text-align:left;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.legal-table td{padding:16px 24px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.legal-table td:first-child{width:40%;color:var(--ink)}

/* The footer */
.site-footer{display:grid;grid-template-columns:1fr auto;gap:48px;width:calc(100% - 2 * max(7vw,24px));max-width:calc(1200px - 2 * max(7vw,24px));margin:0 auto;padding:52px 0 60px;border-top:1px solid var(--line);font:400 14px/1.4 Onest,Arial,Helvetica,sans-serif;color:var(--ink-3)}
.foot-mark{display:inline-block;font-family:schdesign,sans-serif;font-size:36px;line-height:1;text-decoration:none;color:transparent;background:url('/assets/texture.webp') 30% 70% / 260% auto no-repeat;-webkit-background-clip:text;background-clip:text}
.foot-brand p{margin:14px 0 0;font-size:13px;color:var(--ink-4)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(140px,auto));gap:56px}
.foot-cols p{margin:0 0 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.foot-cols a{display:block;padding:5px 0;color:var(--ink-2);text-decoration:none;transition:color .2s ease}
.foot-cols a:hover{color:var(--ink)}
/* Access on social media (Social.jsx): round buttons, each mark at the size that makes the four look even. */
.foot-social{display:flex;gap:10px;margin-top:28px}
.foot-social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;color:var(--ink-3);-webkit-tap-highlight-color:transparent;transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.foot-social svg{width:var(--s);height:var(--s);fill:currentColor}
.foot-social a:active{transform:scale(.94)}
.foot-social a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(hover:hover){.foot-social a:hover{color:var(--ink);border-color:var(--ink-4);background:var(--panel)}}

@media(max-width:899px){
 .page{padding:48px 24px 90px}
 .about-block{margin-top:88px}
 .beliefs{grid-template-columns:1fr}
 .sides{grid-template-columns:1fr}
 .side{min-height:0}
 .side-go{margin-top:8px}
 .about-page .partner-cta{margin-top:88px}
 .partner-cta{flex-direction:column;align-items:flex-start;gap:26px;padding:30px 26px;border-radius:24px;margin:48px auto 64px}
 .contact-grid{grid-template-columns:1fr;gap:48px}
 .contact-lines div{grid-template-columns:1fr;gap:2px}
 .contact-card{padding:22px;border-radius:22px}
 .field-row{grid-template-columns:1fr}
 /* 16 px: anything smaller and an iPhone zooms the page in when a field is tapped. */
 .field input,.field textarea{font-size:16px}
 .legal-grid{grid-template-columns:1fr;gap:0;margin-top:36px;padding-top:0;border-top:0}
 .legal-toc{position:static;margin:0 0 44px;padding:0 18px;border:1px solid var(--line);border-radius:14px}
 .legal-toc summary{display:flex;justify-content:space-between;align-items:center;margin:0;padding:16px 0;pointer-events:auto;cursor:pointer}
 .legal-toc summary::after{content:'+';font-size:18px;letter-spacing:0;transition:transform .25s ease}
 .legal-toc[open] summary::after{transform:rotate(45deg)}
 .legal-toc ol{margin:0 0 14px}
 .legal-table thead{display:none}
 .legal-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
 .legal-table td{display:block;width:auto;padding:0;border:0}
 .legal-table td:first-child{width:auto;margin-bottom:4px;font-weight:500}
 .site-footer{grid-template-columns:1fr;gap:40px;width:auto;margin:0 26px;padding:44px 0 48px}
 .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;font-size:13px}
 .foot-social{gap:12px;margin-top:24px}
 .foot-social a{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.btn,.btn span,.side,.side-go,.topic label,.legal-toc a,.foot-social a{transition:none}}
/* The menu a little bigger (Alessio, 2026-10-06). On a phone the type follows the screen's width so the four
   links and their arrows always fit in one row: 15 px on the widest phones, about 13 px on a 390 px iPhone,
   never below 12 px. */
.site-nav{width:min(100%,760px);font-size:18px}
@media(max-width:600px){.site-nav{font-size:clamp(12px,calc(4.6vw - 5px),15px);column-gap:6px}}
/* Test: the whole site black. Loaded last in main.jsx; remove that import and this file to go back, and set
   theme-color in index.html back to #ffffff (the colour of the phone browser's bar). */
html,body,.product-experience{background:#000;color:#f2f2f2}
:root{--page:#000;--glass:rgba(0,0,0,.72);--ink:#f5f5f5;--ink-2:#c2c2c2;--ink-3:#8f8f8f;--ink-4:#5c5c5c;--line:#1d1d1f;--line-2:#2f2f32;--panel:#0b0b0c;--field:#000;--solid-bg:#f5f5f5;--solid-ink:#0b0b0b;--solid-hover:#d9d9d9;--card-shadow:none}
.nav-arrow{color:#E294ED}
.site-nav a:focus-visible,.night-pick:focus-visible{outline-color:#e8e8e8}
.hero-description{color:#d6d6d6}
.experience-eyebrow{color:#8a8a8a}
.experience-copy h2,.night-pick.is-on,.site-facts b{color:#f5f5f5}
.experience-body,.experience-sub,.site-facts p{color:#9a9a9a}
.night-pick{color:#5a5a5a}
.night-pick:hover{color:#a8a8a8}
@media(min-width:900px){.night-grid.head-beside .experience-copy h2,.night-grid.head-beside.before-start .night-pick.is-on{color:#5a5a5a}.night-grid.head-beside.before-start .experience-copy h2{color:#f5f5f5}}
.night-now{color:#bdbdbd}
.night-caption{color:#6e6e6e}
.app-download-button{background:#0d0d0d;border-color:#2a2a2a;color:#f2f2f2}
.app-download-button:hover{background:#161616;border-color:#3a3a3a}
#ag .gt{color:#bdbdbd}
#ag button:focus-visible{outline-color:#e8e8e8}
#ag #nX,#ag #rS{background:#f2f2f2;color:#0b0b0b}
@media (hover:hover){#ag #nX:hover,#ag #rS:hover{background:#d8d8d8}}
/* Silver devices, like an iPhone 17 Pro and an iPad Pro in silver: polished aluminium around the black glass. Around the
   frame the room reflects in light and dark bands; across it the rounded edge catches a bright line, then falls off toward the glass. */
#ax,#af,.ast{--bd:#6f7175;--fr:conic-gradient(from 200deg,#eef0f2,#8a8c90 6%,#dfe1e4 12%,#666a6f 20%,#c9cbce 27%,#fbfcfd 34%,#7c7f83 43%,#b9bbbf 51%,#f3f4f6 58%,#6e7176 67%,#d5d7da 75%,#ffffff 83%,#8f9296 91%,#eef0f2);--fr-sh:inset 0 0 0 .6px rgba(30,32,36,.6),inset 0 0 0 1.3px rgba(255,255,255,.55),inset 0 0 0 2.2px rgba(255,255,255,.18);--bn:linear-gradient(90deg,#74777b,#d9dbde 28%,#ffffff 42%,#a3a6aa 68%,#7e8185);--bn-sh:inset 0 0 0 .6px rgba(30,32,36,.65)}