#ax{--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}
#ax *{box-sizing:border-box}
#ax .a{position:absolute}
#ax .x{position:absolute;inset:0}
#ax .s{position:absolute;left:0;top:0;width:402px;height:874px;background:#0B0B0D;overflow:hidden}
#ax .eb{font:600 11px/13px var(--m);letter-spacing:1.4px;text-transform:uppercase;color:#8E8E93}
#ax .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)}
#ax .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}
#ax .tn{font-variant-numeric:tabular-nums}
#ax .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}
#ax .tk{display:inline-block;position:relative}
#ax .tk>span{display:inline-block}
#ax .tk>.b{position:absolute;left:0;top:0;opacity:0}
#ax .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}
#ax .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)}
#ax .ic{display:inline-flex;line-height:0}
#ax .ic svg{width:1em;height:1em}
#af{--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%;display:flex;flex-direction:column;align-items:center;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}
#af *{box-sizing:border-box}
#af .a{position:absolute}
#af .x{position:absolute;inset:0}
#af .s{position:absolute;left:0;top:0;width:402px;height:874px;background:#0B0B0D;overflow:hidden;overflow:clip;visibility:hidden;border-radius:59.7px}
#af #sF{visibility:visible}
#af .eb{font:600 11px/13px var(--m);letter-spacing:1.4px;text-transform:uppercase;color:#8E8E93}
#af .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)}
#af .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;white-space:nowrap}
#af .tn{font-variant-numeric:tabular-nums}
#af .tk{display:inline-block;position:relative}
#af .tk>span{display:inline-block}
#af .tk>.b{position:absolute;left:0;top:0;opacity:0}
#af .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}
#af .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)}
#af .ic{display:inline-flex;line-height:0}
#af .ic svg{width:1em;height:1em}
#af button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
#af button:disabled{cursor:default}
#af button:focus-visible{outline:2px solid #E294ED;outline-offset:3px;border-radius:14px}
#af .bk:focus-visible,#af .fb:focus-visible{border-radius:50%}
#af .cd:focus-visible,#af .evc:focus-visible{border-radius:24px}
#af .mc:focus-visible{border-radius:20px}
#af #qB:focus-visible{border-radius:16px}
#af .pr{transition:transform 160ms cubic-bezier(.23,1,.32,1)}
#af .pr:active:not(:disabled){transform:scale(.95)}
#af .pc{transition:transform 200ms cubic-bezier(.23,1,.32,1),opacity 200ms cubic-bezier(.23,1,.32,1)}
#af .pc:active{transform:scale(.97);opacity:.88}
#af .hint::after,#ag .hint::after{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(226,148,237,.7),inset 0 0 16px rgba(226,148,237,.1),0 0 22px rgba(226,148,237,.3);pointer-events:none;animation:afi .5s cubic-bezier(.23,1,.32,1) both}
#af .hint::before,#ag .hint::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 42%,rgba(255,236,255,.2) 50%,transparent 58%) no-repeat;background-size:300% 100%;background-position:100% 0;animation:afs 3.6s cubic-bezier(.65,0,.35,1) .4s infinite}
#af #bR.hint::before,#af #qB.hint::before{background-image:linear-gradient(100deg,transparent 42%,rgba(201,89,221,.22) 50%,transparent 58%)}
@keyframes afi{from{opacity:0}to{opacity:1}}
@keyframes afs{0%{background-position:100% 0}40%,100%{background-position:0 0}}
#af .cvi{animation:afd 13.2s ease-in-out infinite}
@keyframes afd{0%,100%{transform:translate(0,2.5px)}25%{transform:translate(3.5px,0)}50%{transform:translate(0,-2.5px)}75%{transform:translate(-3.5px,0)}}
#af .sc{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
#af .sc::-webkit-scrollbar,#af .hs::-webkit-scrollbar,#af #mS::-webkit-scrollbar{display:none}
#af .hs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
#af .fd{position:absolute;left:0;top:0;width:402px;height:76px;background:linear-gradient(#0B0B0D 38%,rgba(11,11,13,0));opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:4}
#af .dm{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:9}
#af .t28{font:800 28px/34px var(--r);letter-spacing:-.5px}
#af .fb{position:absolute;top:62px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:#F2F2F7;background:rgba(44,44,48,.5);-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,.14);z-index:6}
#af .cl{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-radius:18px;background:rgba(44,44,48,.5);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 0 0 1px #2C2C2E;font:600 15px/20px var(--f);letter-spacing:-.23px;white-space:nowrap}
#af .chp{display:inline-flex;align-items:center;height:36px;margin:4px 0;padding:0 16px;border-radius:18px;background:#1C1C1E;color:#AEAEB2;font:600 15px/20px var(--f);letter-spacing:-.23px;white-space:nowrap;flex:none;transition:background-color .2s ease,color .2s ease}
#af .chp[aria-pressed=true]{background:rgba(201,89,221,.18);color:#E294ED}
#af input{all:unset;flex:1;min-width:0;height:44px;font:400 17px/22px var(--f);letter-spacing:-.43px;color:#F2F2F7;caret-color:#E294ED;-webkit-user-select:text;user-select:text;cursor:text}
#af input::placeholder{color:#8E8E93;opacity:1}
#af input::-webkit-search-cancel-button,#af input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
#af .lg{display:inline-block;white-space:nowrap;line-height:1;color:#F2F2F7}
#af .lgi{display:block;width:auto;max-width:200px;object-fit:contain;object-position:left center}
#af .lg-serif{font-family:var(--sr);font-weight:600;letter-spacing:-.01em}
#af .lg-wide{font-family:var(--f);font-weight:300;letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase}
#af .lg-round{font-family:var(--r);font-weight:800;letter-spacing:-.04em;text-transform:lowercase}
#af .lg-italic{font-family:var(--sr);font-style:italic;font-weight:500;letter-spacing:-.01em}
#af .lg-cond{font-family:"Avenir Next Condensed","HelveticaNeue-CondensedBold","Arial Narrow",var(--f);font-stretch:condensed;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#af .tb{position:absolute;top:0;width:80px;height:61px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 10px/12px var(--f);letter-spacing:.1px;border-radius:30px;transition:color .2s ease}
#af .tb .ic{font-size:23px}
#af .pin{position:absolute;width:0;height:0;z-index:1}
#af .pin.on{z-index:3}
#af .pin .pi{position:absolute;left:-26px;bottom:20px;width:52px;height:52px;border-radius:14px;border:2px solid #fff;background:#141416 center/cover;box-shadow:0 3px 8px rgba(0,0,0,.45);transform-origin:50% 100%;transition:transform .32s cubic-bezier(.34,1.56,.64,1),border-color .2s ease}
#af .pin.on .pi{transform:scale(1.23);border-color:#C959DD}
#af .pin .pn{position:absolute;left:-70px;width:140px;bottom:0;text-align:center;font:700 12px/16px var(--f);color:#fff;text-shadow:0 0 3px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#af .pin:focus-visible{outline:none}
#af .pin:focus-visible .pi{outline:2px solid #E294ED;outline-offset:3px}
#af #mS{position:absolute;left:0;top:655px;width:402px;height:124px;display:flex;gap:12px;padding:0 24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none;overscroll-behavior-x:contain}
#af #mS::after{content:'';flex:0 0 12px}
#af .mc{position:relative;flex:0 0 354px;scroll-snap-align:center;display:flex;align-items:center;gap:16px;height:124px;padding:12px;border-radius:20px;background:rgba(36,36,40,.74);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 14px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.04)}
#af .md{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#0A84FF;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.5)}
#af .mh{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;background:rgba(10,132,255,.28);animation:afp 2.4s ease-out infinite}
@keyframes afp{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1);opacity:0}}
#af .evc{position:relative;display:block;width:362px;border-radius:24px;overflow:hidden;background:#141416;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)}
#af .bd{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:12px;background:rgba(0,0,0,.45);color:#fff;font:600 12px/16px var(--f);font-variant-numeric:tabular-nums;white-space:nowrap}
#af .mi{display:flex;align-items:center;justify-content:space-between;width:100%;height:46px;padding:0 18px;font:400 17px/22px var(--f);letter-spacing:-.43px;color:#F2F2F7}
#af .mi:active{background:rgba(255,255,255,.08)}
#af .mi:focus-visible{outline-offset:-3px;border-radius:12px}
@media (prefers-reduced-motion:reduce){#af .hint::after,#ag .hint::after{animation:none}#af .hint::before,#ag .hint::before{animation:none;opacity:0}#af .pr,#af .pc,#ag button,#af .chp,#af .tb,#af .fd{transition:none}#af .cvi{animation:none}#af .mh{animation:none;opacity:.5;transform:scale(.6)}#af .pin .pi{transition:none}}
#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{height:0;display:flex;align-items:center}
/* The row for "Skip ahead to the door" and "Start over" takes room only while one of them shows. */
#ag .ga:has(button:not([style*="none"])){margin-top:14px;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;font-size:20px;background:#171717;color:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08),0 8px 20px -8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
#ag #rS:active{transform:scale(.94)}
#ag .ic{display:inline-flex;line-height:0}
#ag .ic svg{width:1em;height:1em;transition:transform 450ms cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover){#ag #nX:hover{background:#2C2C2E}#ag #rS:hover{background:#2C2C2E}#ag #rS:hover svg{transform:rotate(-45deg)}}
#af #ph{zoom:.7407}
/* 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;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --ease-out: cubic-bezier(0, 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;
  }

  .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, );
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}

@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
}

@property --tw-ease {
  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%}}
    .intro{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1}
    .intro p{grid-area:1/1;margin:0;padding:.15em 4vw;font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.35rem,3.9vw,4.6rem);font-weight:400;line-height:1.3;letter-spacing:-.035em}
    .phrase{display:flex;align-items:baseline;gap:.25em;white-space:nowrap;animation:line-exit .55s cubic-bezier(.4,0,.2,1) 8.44s forwards}
    .prefix{display:inline-flex;gap:.25em}
    .prefix-mask{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
    .prefix-word{display:inline-block;animation:word-enter 1.05s cubic-bezier(.16,1,.3,1) calc(.2s + var(--word-index)*.12s) both}
    .rotator{display:inline-block;position:relative;overflow:hidden;text-align:left;vertical-align:bottom;height:1.3em;animation:word-enter 1.05s cubic-bezier(.16,1,.3,1) .68s both}
    .rotator::before{content:"entertainment.";visibility:hidden}
    .word-track{position:absolute;inset:0 auto auto 0;display:flex;flex-direction:column;will-change:transform;animation:word-scroll 5.62s linear .5s both}
    .word-track>span{display:block;height:1.3em;line-height:1.3;flex-shrink:0}
    .word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
    .word{display:inline-block}
    .intro .introducing{font-size:clamp(1.55rem,3.05vw,3.7rem);text-align:center}
    .introducing .word{animation:word-enter 1.15s cubic-bezier(.16,1,.3,1) 9.04s both,word-exit .7s cubic-bezier(.65,0,.35,1) 10.84s forwards}
    main{animation:reveal var(--logo-duration) cubic-bezier(.22,1,.36,1) var(--logo-start) both}
    .product-experience{animation:peek-in 1.4s cubic-bezier(.16,1,.3,1) calc(var(--nav-start) + .85s) both}
    .rotator{overflow:visible;clip-path:inset(0 -.5em -.02em)}
    .word-track>span:last-child{position:relative;isolation:isolate;color:#111}
    .word-track>span:last-child::before,.word-track>span:last-child::after{content:"opportunity.";position:absolute;inset:0;pointer-events:none;color:transparent;background:url('/assets/texture.webp') center 70% / cover;-webkit-background-clip:text;background-clip:text;mask-image:linear-gradient(90deg,transparent 0%,#000 40%,#000 60%,transparent 100%);mask-size:48% 100%;mask-repeat:no-repeat;mask-position:-100% 0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%,#000 60%,transparent 100%);-webkit-mask-size:48% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:-100% 0;animation:opportunity-shine 3.8s cubic-bezier(.4,0,.2,1) 5.6s both}
    .word-track>span:last-child::before{z-index:1}
    .word-track>span:last-child::after{z-index:2;filter:blur(.075em);opacity:.55}
    @keyframes opportunity-shine{from{mask-position:-100% 0;-webkit-mask-position:-100% 0}to{mask-position:200% 0;-webkit-mask-position:200% 0}}
    @keyframes word-scroll{0.0000%{transform:translateY(-0.0em);animation-timing-function:cubic-bezier(.65,0,.25,1)}28.4698%{transform:translateY(-0.0em);animation-timing-function:cubic-bezier(.65,0,.25,1)}37.7224%{transform:translateY(-1.3em);animation-timing-function:cubic-bezier(.65,0,.25,1)}48.3986%{transform:translateY(-1.3em);animation-timing-function:cubic-bezier(.65,0,.25,1)}56.5836%{transform:translateY(-2.6em);animation-timing-function:cubic-bezier(.65,0,.25,1)}63.1673%{transform:translateY(-2.6em);animation-timing-function:cubic-bezier(.65,0,.25,1)}70.2847%{transform:translateY(-3.9em);animation-timing-function:cubic-bezier(.65,0,.25,1)}73.8434%{transform:translateY(-3.9em);animation-timing-function:cubic-bezier(.65,0,.25,1)}78.6477%{transform:translateY(-5.2em);animation-timing-function:cubic-bezier(.65,0,.25,1)}80.4270%{transform:translateY(-5.2em);animation-timing-function:cubic-bezier(.65,0,.25,1)}84.3416%{transform:translateY(-6.5em);animation-timing-function:cubic-bezier(.65,0,.25,1)}85.0534%{transform:translateY(-6.5em);animation-timing-function:cubic-bezier(.65,0,.25,1)}87.5445%{transform:translateY(-7.8em);animation-timing-function:cubic-bezier(.65,0,.25,1)}87.9004%{transform:translateY(-7.8em);animation-timing-function:cubic-bezier(.65,0,.25,1)}90.0356%{transform:translateY(-9.1em);animation-timing-function:cubic-bezier(.16,1,.3,1)}100.0000%{transform:translateY(-10.4em);animation-timing-function:cubic-bezier(.65,0,.25,1)}}
    @keyframes word-enter{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:translateY(0)}}
    @keyframes line-exit{to{opacity:0;transform:translateY(-6px)}}
    @keyframes word-exit{to{transform:translateY(-115%);opacity:0}}
    @keyframes peek-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
    @keyframes reveal{from{clip-path:inset(100% 0 0 0);transform:translateY(10px)}to{clip-path:inset(0 0 0 0);transform:translateY(0)}}
    .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){.intro{display:none}main,.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}}
  /* 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}
.intro-skip span{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid #ececec;font:400 13px/1 Onest,Arial,Helvetica,sans-serif;letter-spacing:-.01em;color:#6f6f6f;white-space:nowrap;animation:intro-skip-in .6s cubic-bezier(.22,1,.36,1) .8s both}
.intro-skip:focus-visible span{outline:2px solid #181818;outline-offset:3px}
@keyframes intro-skip-in{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
.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) { .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}
/* The small print under the phone in Try it yourself: smaller than the guide's line above it, and right under
   the guide (the layout's gap taken back; the guide already keeps room for a second line). */
.experience-notes{max-width:340px;margin:-28px auto 0}
@media(max-width:760px){.experience-notes{margin-top:-24px}}
.experience-note{margin:0;font-size:11px;line-height:1.55;color:#6e6e6e;text-wrap:balance}
.experience-note+.experience-note{margin-top:6px}
.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). */
.site-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:960px;margin:0 auto;padding:10px max(7vw,24px) 30px;font-family:Onest,Arial,Helvetica,sans-serif}
.site-facts div{border-top:1px solid #e6e6e6;padding-top:20px}
.site-facts b{display:block;font-weight:500;font-size:19px;letter-spacing:-.02em;color:#171717;text-wrap:balance}
.site-facts p{margin:8px 0 0;font-size:15px;line-height:1.55;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}
 /* On a phone everything above stands centred, so the facts do too, each under a short hairline. */
 .site-facts{grid-template-columns:1fr;gap:36px;padding:10px 26px 20px;text-align:center}
 .site-facts div{border-top:0;padding-top:0}
 .site-facts div::before{content:'';display:block;width:24px;height:1px;margin:0 auto 18px;background:var(--line-2)}
}
@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}}
/* Keep the original visual treatment. Timed by reading, not by one scale factor: the first three
   words hold 0.42-0.6 s still (long enough to read after they slide in), the rest spin like a slot
   machine, and the waits between parts are short. The roll is 15% quicker than the reading pass; later parts keep their spacing. */
:root{--logo-start:7.87s;--logo-duration:.9s;--description-start:calc(var(--logo-start) + var(--logo-duration) + .3s);--description-duration:1.1s;--nav-start:calc(var(--description-start) + var(--description-duration) + .1s)}
.phrase{animation-duration:.4s;animation-delay:5.95s}
.prefix-word{animation-duration:.75s;animation-delay:calc(.15s + var(--word-index)*.085s)}
.rotator{animation-duration:.7s;animation-delay:.45s}
.word-track{animation-name:word-scroll-value;animation-duration:4.1s;animation-delay:.35s}
.introducing .word{animation-duration:.8s,.5s;animation-delay:6.37s,7.52s}
.word-track>span:last-child::before,.word-track>span:last-child::after{animation-duration:2.6s;animation-delay:4.13s}
.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:var(--nav-start)}
/* Each row is 1.3em. Holds (s): 1.0 .45 .42 .30 .20 .13 .09 .06 .04; moves .30 down to .14, then a .42 s settle. */
@keyframes word-scroll-value{
  0%,20.75%{transform:translateY(0);animation-timing-function:cubic-bezier(.65,0,.25,1)}
  26.97%,36.31%{transform:translateY(-1.3em);animation-timing-function:cubic-bezier(.65,0,.25,1)}
  42.12%,50.83%{transform:translateY(-2.6em);animation-timing-function:cubic-bezier(.65,0,.25,1)}
  56.22%,62.45%{transform:translateY(-3.9em);animation-timing-function:cubic-bezier(.65,0,.25,1)}
  67.01%,71.16%{transform:translateY(-5.2em);animation-timing-function:cubic-bezier(.65,0,.25,1)}
  75.1%,77.8%{transform:translateY(-6.5em);animation-timing-function:cubic-bezier(.65,0,.25,1)}
  81.33%,83.2%{transform:translateY(-7.8em);animation-timing-function:cubic-bezier(.65,0,.25,1)}
  86.31%,87.55%{transform:translateY(-9.1em);animation-timing-function:cubic-bezier(.65,0,.25,1)}
  90.46%,91.29%{transform:translateY(-10.4em);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  100%{transform:translateY(-11.7em)}
}
@media(prefers-reduced-motion:reduce){.site-header,.description-word-inner,.app-download{animation: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;--todo:rgba(255,196,0,.3);--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)}
.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}
.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{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{border-color:var(--ink);box-shadow:0 0 0 4px rgba(128,128,128,.16)}
.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)}
mark.todo{white-space:nowrap}
mark.todo,.legal-text .placeholder{padding:.05em .3em;border-radius:4px;background:var(--todo);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* 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-draft{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;color:var(--ink-2)}
.legal-draft::before{content:'';width:7px;height:7px;border-radius:50%;background:#f5b400}
.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-draft{border-radius:14px}
 .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;--todo:rgba(255,196,0,.26);--card-shadow:none}
.intro{color:#f2f2f2}
.word-track>span:last-child{color:#f2f2f2}
.nav-arrow{color:#E294ED}
.site-nav a:focus-visible,.night-pick:focus-visible{outline-color:#e8e8e8}
.hero-description{color:#d6d6d6}
.intro-skip span{background:rgba(20,20,20,.85);border-color:#2a2a2a;color:#a0a0a0}
.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}
.site-facts div{border-top-color:#222}
.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)}