:host{--ink:#111a33;--ink-2:#4a5370;--blue:#056DFF;--pink:#E90061;--red:#D92D20;--navy:#003087;--green:#0b8a4b;
--s1:0 1px 1px rgba(40,30,90,.05),0 1px 3px rgba(40,30,90,.08);
--s2:0 1px 2px rgba(40,30,90,.08),0 12px 28px -8px rgba(40,30,90,.18),0 28px 56px -18px rgba(40,30,90,.24);
--ease:cubic-bezier(.2,.8,.2,1);--enter:cubic-bezier(.16,1,.3,1);--t:3.4s;
--u:https://hold-my-bid.absorber1to9.workers.dev}
*{box-sizing:border-box;margin:0}
.sec-body-unused{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:500;color:var(--ink);background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block}
button{cursor:pointer;font:inherit}
button:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;white-space:nowrap}
.join{height:120px;background:linear-gradient(#eef0fb,#fff)}
.sec{width:min(100% - 64px,1120px);margin:0 auto;padding:24px 0 128px}
/* Head: the hero's line, its navy block and its 3D art in the line. */
.head{text-align:center;margin-bottom:60px}
h2{font-weight:800;font-size:60px;line-height:1.2}
h2 span.l{display:block}
.obj{display:inline-block;width:1.03em;height:1.03em;margin:-.24em .04em -.18em .14em;vertical-align:middle;filter:drop-shadow(0 12px 14px rgba(30,30,90,.22));animation:bob 5s ease-in-out infinite;transition:scale .2s var(--ease)}
h2:hover .obj{scale:1.12}
.obj.b{margin-left:-.12em;animation-delay:-2.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-7px) rotate(5deg)}}
.hl{position:relative;display:inline-block;overflow:hidden;padding:.02em .3em .08em;border-radius:.3em;color:#fff;background:linear-gradient(180deg,#25346b,var(--ink));box-shadow:inset 0 0 0 3px rgba(255,255,255,.1),inset 0 5px 0 rgba(255,255,255,.12),inset 0 -14px 18px -10px rgba(0,0,0,.5),0 18px 36px -12px rgba(17,26,51,.5);transition:scale .2s var(--ease)}
.hl::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-18deg);animation:sheen 4.5s var(--ease) 1.2s infinite}
.hl:hover{scale:1.03}
@keyframes sheen{0%,55%{left:-60%}85%,100%{left:120%}}
.lede{margin:20px auto 0;max-width:660px;font-size:21px;line-height:1.45;color:var(--ink-2)}
/* Tiles: each one is a window onto the hero's ground, with the hero's glass and pills inside. */
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:456px 304px 236px;gap:20px;grid-template-areas:"room room hold" "limit ai hold" "pay pay pay"}
.tile{position:relative;border-radius:36px;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;background:url(/bg/dreamy-fabrica-10-2560.webp) var(--p,40% 30%)/1900px auto}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:linear-gradient(180deg,rgba(250,250,255,.86),rgba(250,250,255,.38));box-shadow:inset 0 0 0 1px rgba(60,50,120,.07),inset 0 1px 0 #fff}
.tile.lit{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(40,30,90,.35)}
.room{grid-area:room;--p:8% 20%}.hold{grid-area:hold;--p:92% 30%}.limit{grid-area:limit;--p:20% 78%}.ai{grid-area:ai;--p:56% 70%}.pay{grid-area:pay;--p:50% 96%}
.clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.txt{position:absolute;left:32px;top:30px;z-index:2}
.txt h3{font-size:26px;font-weight:800;line-height:1.2}
.txt p{margin-top:8px;font-size:16px;line-height:1.45;color:var(--ink-2);max-width:268px}
.hold .txt p{max-width:214px}
.room .txt p{max-width:440px}.pay .txt p{max-width:300px}
.glass{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 10px -10px 28px -14px rgba(255,120,215,.3),inset -10px 10px 28px -14px rgba(110,190,255,.38),var(--s2),0 0 0 1px rgba(60,50,120,.06)}
.d3{position:absolute;z-index:3;filter:drop-shadow(0 16px 18px rgba(30,30,90,.24));transition:transform .4s var(--ease);animation:bob 6s ease-in-out infinite}
.d3:hover{transform:translateY(-8px) rotate(-10deg) scale(1.08);animation-play-state:paused}
@keyframes pop{from{opacity:0;scale:.6}}
/* Room */
.win{position:absolute;left:32px;right:32px;top:136px;bottom:-40px;border-radius:28px;overflow:hidden}
.bar{height:42px;display:flex;align-items:center;gap:7px;padding:0 18px;border-bottom:1px solid rgba(60,50,120,.08)}
.bar s{width:11px;height:11px;border-radius:50%;background:#ff6159}.bar s+s{background:#ffbd2e}.bar s+s+s{background:#28c941}
.url{margin:0 auto;translate:-24px 0;height:26px;padding:0 16px;font-size:12.5px;font-weight:700;color:var(--ink-2);background:rgba(40,45,90,.06)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:20px 28px 0}
.lot{display:flex;align-items:center;gap:16px}
.photo{width:88px;height:88px;border-radius:24px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.9),var(--s1);transition:transform .5s var(--ease)}
.room:hover .photo{transform:scale(1.05) rotate(-2deg)}
.live{height:26px;padding:0 10px 0 8px;gap:6px;font-size:12px;font-weight:800;color:#fff;background:var(--red);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px -3px rgba(217,45,32,.6)}
.live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.lot b{display:block;margin-top:8px;font-size:19px;font-weight:800;line-height:1.2}
.lot small{display:block;margin-top:2px;font-size:14px;font-weight:700;color:var(--ink-2)}
.price{text-align:right}
.big{height:70px;overflow:hidden;font-weight:800;font-size:68px;line-height:70px}
.roll{display:flex;flex-direction:column;transform:translateY(-140px)}
.roll span{height:70px}
.lit .roll{animation:roll var(--t) var(--ease) both}
@keyframes roll{0%,14%{transform:translateY(0)}26%,50%{transform:translateY(-70px)}62%,100%{transform:translateY(-140px)}}
.under{margin-top:4px;font-size:14px;font-weight:700;color:var(--ink-2)}
.bids{display:flex;gap:10px;padding:22px 28px 0}
.who{height:40px;padding:0 16px 0 5px;gap:9px;font-size:15px;font-weight:800;background:#fff;box-shadow:var(--s1),0 0 0 1px rgba(60,50,120,.06);transition:transform .14s var(--ease)}
.who:hover{transform:translateY(-2px)}
.who img{width:30px;height:30px;border-radius:50%;background:#ffe0ec}
.who.bot img{background:#dfe9ff}
.who em{font-style:normal;font-weight:700;color:var(--ink-2)}
.who.me{color:#fff;background:linear-gradient(180deg,#25346b,var(--ink));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -8px rgba(17,26,51,.6)}
.who.me em{color:#b9c6ee}
.lit .who{animation:pop .5s var(--enter) both}
.lit .who:nth-child(1){animation-delay:.15s}.lit .who:nth-child(2){animation-delay:.9s}.lit .who:nth-child(3){animation-delay:2.1s}
.crowd{display:flex;align-items:center;padding:20px 28px 0;font-size:14px;font-weight:700;color:var(--ink-2)}
.crowd img{width:38px;height:38px;border-radius:50%;margin-right:-9px;border:2px solid #fff;background:#eef1fb;transition:transform .2s var(--ease)}
.crowd img:hover{transform:translateY(-5px)}
.crowd span{margin-left:20px}
.gavel{right:-22px;top:-30px;width:132px;height:132px}
/* Rail: the hero's track, fill, knob and tip */
.rail{position:absolute;left:32px;right:32px;bottom:66px;height:20px;border-radius:9999px;background:rgba(40,45,90,.1);box-shadow:inset 0 1px 2px rgba(40,45,90,.16)}
.fill{position:absolute;left:0;top:0;bottom:0;width:70%;border-radius:9999px;background:linear-gradient(180deg,#4d98ff,var(--blue));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6)}
.knob{position:absolute;left:70%;top:50%;width:44px;height:44px;translate:-50% -50%;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 4px 12px -2px rgba(30,30,90,.35)}
.tip{position:absolute;left:70%;bottom:42px;translate:-50% 0;height:36px;padding:0 14px;font-size:15px;font-weight:800;color:var(--blue);background:#fff;box-shadow:var(--s2),0 0 0 1px rgba(60,50,120,.06)}
.tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:#fff;rotate:45deg;border-radius:2px;z-index:-1}
.ticks{position:absolute;left:32px;right:32px;bottom:26px;height:18px;font-size:13px;font-weight:700;color:var(--ink-2)}
.ticks span{position:absolute;top:0;translate:-50% 0;white-space:nowrap}
.lit.limit .fill{animation:lw var(--t) var(--ease) both}
.lit.limit .knob,.lit.limit .tip{animation:ll var(--t) var(--ease) both}
@keyframes lw{0%,14%{width:22%}62%,100%{width:70%}}
@keyframes ll{0%,14%{left:22%}62%,100%{left:70%}}
.knob.you{width:52px;height:52px;object-fit:cover;background:#ffe0ec}
.slider{right:-20px;top:-34px;width:128px;height:128px}
/* AI */
.robo{right:-54px;bottom:-32px;width:180px;height:180px;z-index:1}
.stack{position:absolute;left:28px;bottom:30px;display:grid;gap:10px;justify-items:start;z-index:4}
.trick{height:34px;padding:0 5px 0 13px;gap:0;font-size:14px;font-weight:800;color:#fff;background:var(--red);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -6px rgba(217,45,32,.7)}
.no{display:inline-flex;align-items:center;height:24px;margin-left:9px;padding:0 10px;max-width:90px;overflow:hidden;border-radius:9999px;background:#fff;color:var(--red);font-size:13px}
.lit.ai .who{animation-delay:.3s}
.lit .trick{animation:slide var(--t) var(--ease) both}
.lit .no{animation:no var(--t) var(--ease) both}
@keyframes slide{0%,30%{opacity:0;translate:-28px 0}42%{opacity:1;translate:6px 0}48%,100%{opacity:1;translate:0 0}}
@keyframes no{0%,56%{max-width:0;padding:0;margin-left:0;opacity:0}68%,100%{max-width:90px;padding:0 10px;margin-left:9px;opacity:1}}
/* Hold */
.phone{position:absolute;left:50%;top:172px;width:268px;height:640px;margin-left:-134px;border-radius:50px;padding:10px;background:linear-gradient(160deg,#2b3350,var(--ink));box-shadow:var(--s2),inset 0 0 0 1.5px rgba(255,255,255,.16);transition:transform .4s var(--ease)}
.hold:hover .phone{transform:translateY(-6px) rotate(-1deg)}
.scr{position:relative;height:100%;border-radius:40px;padding:66px 22px 0;text-align:center;background:linear-gradient(180deg,#f3f6ff,#fff 46%)}
.scr::before{content:"";position:absolute;top:12px;left:50%;width:84px;height:26px;margin-left:-42px;border-radius:9999px;background:#0b0f1c}
.pp{width:40px;height:46px;margin:0 auto 14px}
.scr small{display:block;font-size:14px;font-weight:700;color:var(--ink-2)}
.amt{font-size:46px;font-weight:800;line-height:1.2}
.ok{height:28px;padding:0 12px;margin-top:6px;font-size:13px;font-weight:800;color:var(--green);background:#e4f6ec}
.btn{position:relative;overflow:hidden;width:100%;height:54px;margin-top:28px;justify-content:center;border:0;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(180deg,#2a84ff,var(--blue));box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -8px 12px -6px rgba(10,20,90,.35),0 2px 4px rgba(10,30,110,.24),0 12px 26px -6px rgba(5,109,255,.7);transition:transform .14s var(--ease)}
.btn::before{content:"";position:absolute;left:10px;right:10px;top:3px;height:42%;border-radius:9999px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0))}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px) scale(.985)}
.btn .done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:inherit;background:linear-gradient(180deg,#19b464,var(--green))}
.lit .btn .done{animation:done var(--t) var(--enter) both}
@keyframes done{0%,38%{opacity:0;scale:.7}50%,100%{opacity:1;scale:1}}
.fl{display:grid;gap:10px;justify-items:center;margin-top:30px}
.fl i{height:10px;width:78%;border-radius:9px;background:#e9ecf5}.fl i+i{width:54%}
.held{position:absolute;right:14px;top:604px;z-index:4;height:38px;padding:0 16px 0 12px;font-size:14px;font-weight:800;background:#fff;box-shadow:var(--s2),0 0 0 1px rgba(60,50,120,.06)}
.held img{width:16px;height:18px}
.lit .held{animation:pop .5s var(--enter) 1.7s both}
.shield{right:-22px;top:-32px;width:128px;height:128px}
/* Pay */
.pay .rail{left:420px;right:214px;bottom:92px}
.pay .ticks{left:420px;right:214px;bottom:52px}
.pay .fill{width:68.57%}
.rel{position:absolute;left:68.57%;right:0;top:0;bottom:0;border-radius:0 9999px 9999px 0;background:repeating-linear-gradient(135deg,rgba(11,138,75,.6) 0 6px,rgba(11,138,75,.18) 6px 12px)}
.pay .tip{left:34%}.pay .tip.g{left:84%;color:var(--green)}
.lit.pay .fill{animation:pw var(--t) var(--ease) both}
.lit.pay .tip{animation:pop .5s var(--enter) 1.3s both}.lit.pay .tip.g{animation-delay:2s}
.lit.pay .rel{animation:fade var(--t) var(--ease) both}
@keyframes pw{0%,10%{width:0}46%,100%{width:68.57%}}
@keyframes fade{0%,52%{opacity:0}64%,100%{opacity:1}}
.ribbon{right:36px;top:-30px;width:150px;height:150px}
.ctl{display:flex;justify-content:center;margin-top:36px}
.pause{width:40px;height:40px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(40,45,90,.07);transition:background .14s var(--ease),transform .14s var(--ease)}
.pause:hover{background:rgba(40,45,90,.14)}.pause:active{transform:scale(.92)}
.pause .p2,.paused .pause .p1{display:none}.paused .pause .p2{display:block}
.paused .tile *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ctl{display:none}}
/* A3 layout */
.grid{grid-template-rows:456px 470px;grid-template-areas:"room room limit" "hold ai pay"}
.youbig{left:50%;top:116px;width:188px;height:188px;margin-left:-94px;z-index:1;border-radius:50%;object-fit:cover;background:linear-gradient(160deg,#ffe6f0,#ffd3e3);box-shadow:0 0 0 6px rgba(255,255,255,.92)}
.limit .slider{width:112px;height:112px}
.hold .phone{top:150px}.hold .scr{padding-top:54px}.hold .pp{width:34px;height:40px;margin-bottom:10px}
.hold .held{display:none}
.ai .stack{top:156px;bottom:auto}
.ai .robo{width:280px;height:280px;right:-46px;bottom:-40px}
.pay .rail{left:32px;right:32px;bottom:66px}.pay .ticks{left:32px;right:32px;bottom:26px}
.pay .ribbon{right:auto;left:50%;margin-left:-80px;top:152px;width:160px;height:160px}
.pay .txt p{max-width:290px}
/* Note 1: the block lines up with the words beside it */
.hl{vertical-align:bottom;margin-bottom:-.08em}
/* Note 3: a calmer live room: one lot, one price, three bidders */
.crowd{display:none}
.win{top:150px}
.row{padding:30px 32px 0}
.bids{padding:30px 32px 0;gap:12px}
.tile::before{background:var(--g) center bottom/cover}
.tile::after{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%);box-shadow:inset 0 0 0 1px rgba(60,50,120,.08),inset 0 1px 0 #fff}
.room{--g:url(/g/pattern-rays.webp)}
.limit{--g:url(/g/pattern-cubic-sand.webp)}
.hold{--g:url(/g/pattern-rings.webp)}
.ai{--g:url(/g/pattern-dots.webp)}
.pay{--g:url(/g/pattern-flutes.webp)}
.room::before{background-position:right center}
.limit .youbig{background:linear-gradient(160deg,#fff,#fff3e6)}
/* P3: the lot as one glass card, no browser bar */
.win{left:32px;right:32px;top:132px;bottom:32px;border-radius:32px}
.row{padding:34px 36px 0}
.photo{width:108px;height:108px;border-radius:28px}
.lot b{font-size:22px}
.big{height:84px;font-size:82px;line-height:84px}.roll span{height:84px}
.roll{transform:translateY(-168px)}
@keyframes roll{0%,14%{transform:translateY(0)}26%,50%{transform:translateY(-84px)}62%,100%{transform:translateY(-168px)}}
.bids{padding:34px 36px 0}
/* P4: roomier */
.lede{margin-top:32px}
.grid{gap:24px;grid-template-rows:496px 510px}
.txt{left:36px;top:36px}
.txt p{margin-top:12px}
.win{left:36px;right:36px;top:160px;bottom:36px}
.row{padding:38px 40px 0}
.bids{padding:38px 40px 0}
.youbig{top:140px}
.rail,.pay .rail{left:36px;right:36px;bottom:72px}.ticks,.pay .ticks{left:36px;right:36px;bottom:32px}
.hold .phone{top:184px}
.ai .stack{left:32px;top:190px}
.pay .ribbon{top:176px}
.robo{clip-path:inset(9.5% 0 0 0)}
/* ---- Section six, shared by every take ---- */
.sec{padding:120px 0 44px}
.sec a{color:inherit;text-decoration:none}
.c-ob{width:1.26em;height:1.26em;margin:-.38em -.06em -.26em .14em}
.c-acts{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:36px}
.c-go{position:relative;overflow:hidden;height:58px;padding:0 30px;gap:10px;font-weight:800;font-size:17px;color:#fff!important;background:linear-gradient(180deg,#2a84ff,var(--blue));box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -8px 12px -6px rgba(10,20,90,.35),0 0 0 1.5px rgba(255,255,255,.83),0 0 0 2.5px rgba(11,29,77,.25),0 2px 4px rgba(10,30,110,.24),0 12px 26px -6px rgba(5,109,255,.7);transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
.c-go::before{content:"";position:absolute;left:10px;right:10px;top:3px;height:42%;border-radius:9999px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));pointer-events:none}
.c-go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .55s var(--ease);pointer-events:none}
.c-go:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -8px 12px -6px rgba(10,20,90,.35),0 0 0 1.5px rgba(255,255,255,.83),0 0 0 2.5px rgba(11,29,77,.25),0 3px 6px rgba(10,30,110,.26),0 18px 34px -6px rgba(5,109,255,.85)}
.c-go:hover::after{left:120%}
.c-go:active{transform:translateY(1px) scale(.985);transition-duration:.09s}
.c-ar{transition:transform .14s var(--ease)}
.c-go:hover .c-ar{transform:translateX(4px)}
.c-watch{height:58px;padding:0 26px 0 11px;gap:12px;font-weight:800;font-size:17px;color:var(--ink);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--s1),0 0 0 1px rgba(60,50,120,.06);transition:transform .14s var(--ease),background .14s var(--ease)}
.c-watch:hover{transform:translateY(-2px);background:rgba(255,255,255,.96)}
.c-watch:active{transform:translateY(1px) scale(.985);transition-duration:.09s}
.c-pl{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);display:grid;place-items:center;transition:transform .2s var(--ease)}
.c-pl::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);animation:c-ping 2.4s var(--ease) infinite}
.c-watch:hover .c-pl{transform:scale(1.1)}
@keyframes c-ping{from{opacity:.6;scale:1}to{opacity:0;scale:1.7}}
.c-note{margin-top:18px;display:flex;justify-content:center;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--ink-2)}
.c-note svg{color:var(--green)}
/* the footer's parts */
.c-ft{margin-top:72px}
.c-brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:18px}
.c-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#cfe0ff,#e0d4ff 55%,#ffd3e3);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -6px 10px -6px rgba(60,50,160,.25),0 0 0 1px rgba(60,50,120,.08),var(--s1)}
.c-mark img{width:30px;height:30px;transition:transform .3s var(--ease)}
.c-brand:hover .c-mark img{transform:rotate(-14deg) scale(1.1)}
.c-links{display:flex;gap:34px;font-size:16px;font-weight:700}
.c-links a{padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.c-links a:hover{background-size:100% 2px}
.c-top{height:44px;padding:0 14px 0 18px;gap:8px;font-size:15px;font-weight:800;background:#fff;box-shadow:var(--s1),0 0 0 1px rgba(60,50,120,.06);transition:transform .14s var(--ease)}
.c-top:hover{transform:translateY(-2px)}
.c-up{transition:transform .2s var(--ease)}
.c-top:hover .c-up{transform:translateY(-3px)}
.c-row{display:flex;align-items:center;justify-content:space-between}
.c-fine{font-size:14px;line-height:1.5;color:var(--ink-2)}

.head{margin-bottom:56px}
.c-doors{display:grid;gap:24px}
.c-door{border-radius:40px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease)}
.c-door::before{background:var(--g) right bottom/cover}
.c-door::after{background:none}
.c-door:hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px color-mix(in srgb,var(--c) 70%,transparent)}
.c-doors:hover .c-door:not(:hover){opacity:.8}
.c-e1{--c:#ff6b5a;--g:url(/g/pattern-spot.webp)}
.c-e2{--c:#16b39a;--g:url(/g/pattern-arches.webp)}
.c-door .txt{left:40px;top:38px;right:40px}
.c-door .txt h3{font-size:34px}
.c-door .txt h3 a::after{content:"";position:absolute;inset:-38px -40px -600px;border-radius:40px}
.c-door .txt p{margin-top:10px;font-size:17px;max-width:300px}
.c-rd{position:absolute;left:40px;bottom:38px;z-index:2;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .3s var(--enter)}
.c-door:hover .c-rd{transform:translateX(6px) scale(1.06)}
.c-e1 .c-rd{background:linear-gradient(180deg,#2a84ff,var(--blue));box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -8px 12px -6px rgba(10,20,90,.35),0 0 0 1.5px rgba(255,255,255,.83),0 0 0 2.5px rgba(11,29,77,.25),0 12px 26px -6px rgba(5,109,255,.7)}
.c-e2 .c-rd{background:linear-gradient(180deg,#25346b,var(--ink));box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 0 0 1.5px rgba(255,255,255,.83),0 12px 26px -8px rgba(17,26,51,.6)}
.c-e2 .c-rd::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);animation:c-ping 2.4s var(--ease) infinite}
.c-tic{right:26px;top:34px;width:232px;height:232px}
.c-door:hover .c-tic{transform:translateY(-10px) rotate(-7deg) scale(1.05)}
.c-pop{right:-26px;top:-70px;width:164px;height:164px;animation-delay:-2.6s}
/* the seat: five are in, the sixth is taken by your picture, then it empties and is taken again */
.c-room{position:absolute;right:40px;bottom:38px;z-index:2;display:flex;align-items:center;height:76px;padding:0 14px 0 20px;border-radius:9999px}
.c-room img{width:48px;height:48px;border-radius:50%;margin-left:-10px;background:#ffe0ec;box-shadow:0 0 0 3px #fff}
.c-room img:nth-child(even){background:#dfe9ff}
.c-seat{position:relative;flex:none;width:52px;height:52px;margin-left:8px;border-radius:50%;border:2px dashed rgba(17,26,51,.34)}
.c-seat img{position:absolute;left:-2px;top:-2px;width:52px;height:52px;margin:0;background:#ffe0ec;box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--blue);animation:c-sit 5.6s var(--enter) infinite both}
.c-seat::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--blue);opacity:0;animation:c-wave 5.6s var(--ease) infinite both}
@keyframes c-sit{0%,24%{opacity:0;scale:.3;translate:0 -30px}34%,90%{opacity:1;scale:1;translate:0 0}100%{opacity:0;scale:.6;translate:0 0}}
@keyframes c-wave{0%,30%{opacity:0;scale:1}34%{opacity:.7;scale:1}56%,100%{opacity:0;scale:1.9}}
.c-door:hover .c-seat img,.c-door:hover .c-seat::after{animation-play-state:paused}
/* the player: the show runs to its end, the price climbs with it, a pointer rides the bar */
.c-play{position:absolute;right:40px;bottom:38px;z-index:2;width:330px;padding:16px 16px 16px;border-radius:30px;transition:transform .4s var(--ease)}
.c-door:hover .c-play{transform:translateY(-6px)}
.c-scr{position:relative;height:150px;border-radius:20px;overflow:hidden;background:#111a33}
.c-scr>img{width:100%;height:100%;object-fit:cover;scale:1.02;animation:c-zoom 9s ease-in-out infinite alternate}
@keyframes c-zoom{to{scale:1.12}}
.c-scr .live{position:absolute;left:12px;top:12px}
.c-pr{position:absolute;right:12px;top:10px;height:32px;padding:0 12px;border-radius:9999px;overflow:hidden;font-size:16px;font-weight:800;line-height:32px;color:var(--ink);background:#fff;box-shadow:var(--s1)}
.c-pr span{display:block;transform:translateY(-64px);animation:c-roll 7s var(--enter) infinite}
@keyframes c-roll{0%,26%{transform:translateY(0)}34%,60%{transform:translateY(-32px)}68%,100%{transform:translateY(-64px)}}
.c-ctl{display:flex;align-items:center;gap:12px;margin:14px 4px 0}
.c-pb{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink)}
.c-bar{position:relative;flex:1;height:6px;border-radius:6px;background:rgba(17,26,51,.12)}
.c-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:6px;background:var(--c);animation:c-fill 7s linear infinite}
.c-bar b{position:absolute;left:100%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--c),var(--s1);animation:c-head 7s linear infinite}
@keyframes c-fill{from{width:0}92%,100%{width:100%}}
@keyframes c-head{from{left:0}92%,100%{left:100%}}
.c-cur{position:absolute;left:100%;top:10px;width:22px;height:22px;margin-left:-4px;filter:drop-shadow(0 3px 4px rgba(17,26,51,.35));animation:c-head 7s linear infinite}
.c-door:hover .c-play *{animation-play-state:paused}
/* the footer: links, then the name as large as the page allows */
.c-ft-d{margin-top:84px}
.c-word{display:flex;justify-content:center;align-items:center;gap:.14em;margin-top:44px;font-size:128px;font-weight:800;line-height:1.1;white-space:nowrap}
.c-word img{width:1.06em;height:1.06em;margin-left:.06em;filter:drop-shadow(0 18px 20px rgba(30,30,90,.24));animation:bob 6s ease-in-out infinite;transition:scale .3s var(--enter)}
.c-word:hover img{scale:1.1}
.c-ft-d .c-fine{margin-top:40px;text-align:center}

.sec{padding-bottom:0}
.c-doors{grid-template-columns:1fr 1fr}
.c-door{height:408px}
.c-door .txt p{margin-top:12px}
/* the door's click area ends at the door: KD's ran 300 px past its foot and lay over the footer's links */
.c-door .txt h3 a::after{bottom:auto;height:408px}
/* the round button, in the primary button's finish */
.c-gl{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}
.c-gl::before{content:"";position:absolute;left:9px;right:9px;top:3px;height:44%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0))}
.c-gl::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .55s var(--ease)}
.c-door:hover .c-gl::after{left:130%}
.c-rd svg{position:relative}
.c-e1 .c-rd{box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -8px 12px -6px rgba(10,20,90,.35),0 0 0 1.5px rgba(255,255,255,.83),0 0 0 2.5px rgba(11,29,77,.25),0 2px 4px rgba(10,30,110,.24),0 12px 26px -6px rgba(5,109,255,.7)}
/* Oak, Nov 11, 7:26 PM, on the demo door's button: "this hdoul not be galss cuz glas thign is only for parmary and thsi sne sdo
   secondary". Only the live door's button keeps the gloss; the demo door's is a plain white round button with a navy mark. */
.c-e2 .c-rd{color:var(--ink);background:#fff;box-shadow:var(--s2),0 0 0 1px rgba(60,50,120,.07)}
.c-e2 .c-rd svg{fill:currentColor}
.c-e2 .c-gl{display:none}
.c-e2 .c-rd::after{border-color:rgba(17,26,51,.3)}
.c-door:active .c-rd{transform:translateY(1px) scale(.97);transition-duration:.09s}
/* the host: it speaks, the ring around it answers, it takes a breath, it speaks again */
.c-pop{right:-26px;top:-60px;width:204px;height:204px}
.c-host{position:absolute;right:40px;bottom:38px;z-index:2;display:flex;align-items:center;gap:14px;height:76px;padding:0 28px 0 14px;border-radius:9999px;transition:transform .4s var(--ease)}
.c-door:hover .c-host{transform:translateY(-6px)}
.c-hav{position:relative;flex:none;width:48px;height:48px;border-radius:50%}
.c-hav img{width:48px;height:48px;border-radius:50%;background:#ffe3ee;box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--c)}
.c-hav::after{content:"";position:absolute;inset:-5.5px;border-radius:50%;border:2px solid var(--c);opacity:0;animation:c-say 6s var(--ease) infinite}
@keyframes c-say{0%{opacity:.7;scale:1}24%{opacity:0;scale:1.55}25%,34%{opacity:0;scale:1}35%{opacity:.7;scale:1}60%,100%{opacity:0;scale:1.55}}
.c-host b{font-size:16px;font-weight:800;margin-left:4px}
.c-eq{display:flex;align-items:center;gap:4px;height:40px;animation:c-breath 6s var(--ease) infinite}
.c-eq i{width:5px;border-radius:5px;background:linear-gradient(180deg,#31d1b7,#0e9c86);animation:c-talk 1s ease-in-out infinite}
@keyframes c-talk{0%,100%{scale:1 .3}50%{scale:1 1}}
@keyframes c-breath{0%,70%,100%{scale:1 1}80%,92%{scale:1 .14}}
.c-door:hover .c-host *,.c-door:hover .c-hav::after{animation-play-state:paused}
.c-eq i:nth-child(1){height:12px;animation-duration:0.90s;animation-delay:-0.00s}
.c-eq i:nth-child(2){height:20px;animation-duration:1.20s;animation-delay:-0.13s}
.c-eq i:nth-child(3){height:30px;animation-duration:0.80s;animation-delay:-0.26s}
.c-eq i:nth-child(4){height:18px;animation-duration:1.10s;animation-delay:-0.39s}
.c-eq i:nth-child(5){height:36px;animation-duration:0.70s;animation-delay:-0.52s}
.c-eq i:nth-child(6){height:24px;animation-duration:1.30s;animation-delay:-0.65s}
.c-eq i:nth-child(7){height:14px;animation-duration:1.00s;animation-delay:-0.78s}
.c-eq i:nth-child(8){height:28px;animation-duration:0.85s;animation-delay:-0.91s}
.c-eq i:nth-child(9){height:40px;animation-duration:1.15s;animation-delay:-1.04s}
.c-eq i:nth-child(10){height:22px;animation-duration:0.75s;animation-delay:-1.17s}
.c-eq i:nth-child(11){height:32px;animation-duration:1.25s;animation-delay:-1.30s}
.c-eq i:nth-child(12){height:16px;animation-duration:0.95s;animation-delay:-1.43s}
.c-eq i:nth-child(13){height:26px;animation-duration:1.05s;animation-delay:-1.56s}
.c-eq i:nth-child(14){height:12px;animation-duration:0.80s;animation-delay:-1.69s}

/* the navy close, from D3 */
.c-slab{margin:96px calc(50% - 50vw) 0;padding:44px 0 36px;border-radius:48px 48px 0 0;color:#fff;background:radial-gradient(60% 90% at 50% 0,#2a3c86,rgba(42,60,134,0) 70%),linear-gradient(170deg,#1c2a5e,var(--ink) 60%);box-shadow:inset 0 5px 0 rgba(255,255,255,.08)}
.c-slab>div{width:min(100% - 64px,1120px);margin:0 auto}
.c-slab .c-links{color:rgba(255,255,255,.86)}
.c-slab .c-top{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.c-slab .c-word{margin-top:36px}
.c-slab .hl{color:var(--ink);background:linear-gradient(180deg,#fff,#dfe6ff);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),inset 0 -14px 18px -10px rgba(40,60,150,.28),0 18px 36px -12px rgba(0,0,0,.5)}
.c-slab .c-fine{margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);text-align:center;color:rgba(255,255,255,.62)}

@media (max-width:1063px){h2{font-size:52px}}
@media (max-width:879px){h2{font-size:44px}.head{margin-bottom:48px}}
@media (max-width:759px){h2{font-size:38px}}
@media (max-width:640px){.sec{width:calc(100% - 40px);padding:76px 0 88px}.head{margin-bottom:36px}h2{font-size:34px;line-height:1.24}.ctl{margin-top:28px}.pause{width:44px;height:44px}}
@media (max-width:389px){.sec{width:calc(100% - 32px)}h2{font-size:32px}}
@media (max-width:359px){h2{font-size:30px}}
@media (hover:none){.d3:hover{transform:none;animation-play-state:running}}

.c-br{display:none}
.d3.go{animation:wig .9s var(--ease)}
@keyframes wig{0%,100%{transform:none}30%{transform:translateY(-8px) rotate(-10deg) scale(1.08)}60%{transform:translateY(-2px) rotate(6deg) scale(1.03)}}
/* 1064 to 1183: the large design on a narrower door; the title and both objects step down so neither object meets a title */
@media (min-width:1064px) and (max-width:1183px){
.c-door .txt h3{font-size:30px}
.c-tic{right:24px;top:84px;width:184px;height:184px}
.c-pop{right:-24px;top:-62px;width:176px;height:176px}
}
@media (max-width:1063px){
.c-door{height:340px;border-radius:36px;container:door/inline-size}
.c-door .txt{left:28px;top:28px;right:28px}
.c-door .txt h3{font-size:30px;line-height:1.18;max-width:calc(100% - 100px)}
.c-door .txt h3 a::after{inset:-28px -28px auto;height:340px;border-radius:36px}
.c-door .txt p{font-size:16px;max-width:300px;text-wrap:pretty}
.c-br{display:inline}
.c-tic{right:-16px;top:-44px;width:156px;height:156px}
.c-pop{right:-20px;top:-58px;width:156px;height:156px}
.c-door:hover .c-tic{transform:translateY(-6px) rotate(-7deg) scale(1.05)}
.c-rd{left:28px;bottom:28px;width:56px;height:56px}
.c-room,.c-host{right:28px;bottom:24px;height:64px}
.c-room{padding:0 10px 0 18px}
.c-room>img{width:40px;height:40px;margin-left:-8px}
.c-seat{width:44px;height:44px;margin-left:8px}
.c-seat img{width:44px;height:44px}
.c-host{gap:10px;padding:0 20px 0 12px}
.c-hav,.c-hav img{width:40px;height:40px}
.c-host b{font-size:15px;margin-left:2px}
.c-slab{margin-top:88px;border-radius:44px 44px 0 0}
.c-slab .c-word{font-size:104px}
.c-word>*{flex:none}
}
/* a door under 400 px wide: four people and ten bars; under 340 px: three people and six bars */
@container door (max-width:399px){
.c-door .txt h3{font-size:26px;max-width:calc(100% - 84px)}
.c-door .txt p{font-size:15.5px}
.c-tic{right:-12px;top:-38px;width:128px;height:128px}
.c-pop{right:-14px;top:-48px;width:128px;height:128px}
.c-room>img:nth-child(1),.c-eq i:nth-child(n+11){display:none}
.c-eq{gap:3px}
.c-eq i{width:4px}
.c-eq i:nth-child(10){height:14px}
}
@container door (max-width:339px){
.c-room>img:nth-child(2),.c-eq i:nth-child(n+7){display:none}
.c-host{gap:8px;padding:0 16px 0 10px}
.c-eq i:nth-child(6){height:14px}
}
/* under 390 px the section's side margin is 16 px: a perched object mid-swing reached 3 px past the screen */
@media (max-width:389px){.c-tic,.c-pop{right:-8px}}
@media (max-width:879px){.c-slab .c-word{font-size:88px}.c-links{gap:28px}}
@media (max-width:759px){.c-slab .c-word{font-size:80px}}
@media (max-width:699px){
.c-doors{grid-template-columns:1fr;gap:24px}
.c-door{height:304px}
.c-door .txt h3 a::after{height:304px}
.c-pop{top:-30px}
.c-slab .c-word{font-size:72px}
}
@media (min-width:560px) and (max-width:699px){.c-br{display:none}}
@media (min-width:560px) and (max-width:640px){.c-slab .c-word{font-size:64px}}
@media (max-width:640px){
.sec{padding-bottom:0}
.c-doors{gap:20px}
.c-door,.c-door .txt h3 a::after{border-radius:30px}
.c-slab{margin-top:72px;padding:28px 0 max(28px,env(safe-area-inset-bottom));border-radius:32px 32px 0 0}
.c-slab>div{width:calc(100% - 40px);display:flex;flex-direction:column;align-items:center}
.c-row{display:contents}
.c-slab .c-links{gap:0 26px;font-size:15.5px}
.c-slab .c-links a{padding:13px 0}
.c-slab .c-word{order:1;margin-top:16px;font-size:54px}
.c-slab .c-fine{order:2;align-self:stretch;margin-top:28px;padding-top:22px;font-size:13.5px;text-wrap:pretty}
.c-slab .c-top{order:3;margin-top:22px}
}
@media (max-width:479px){.c-slab .c-word{flex-wrap:wrap;gap:.02em .14em;font-size:76px;line-height:1.1}}
@media (max-width:389px){.c-slab>div{width:calc(100% - 32px)}.c-slab .c-word{font-size:68px}.c-slab .c-links{gap:0 20px}}
@media (max-width:359px){.c-slab .c-word{font-size:64px}}
/* touch: nothing sticks after a tap, and the door at mid screen is the lit one */
@media (hover:none){
.c-door:hover{transform:none;box-shadow:none}
.c-doors:hover .c-door:not(:hover){opacity:1}
.c-door:hover .c-rd,.c-door:hover .c-host,.c-door:hover .c-tic{transform:none}
.c-door:hover .c-gl::after{left:-70%}
.c-door:hover .c-seat img,.c-door:hover .c-seat::after,.c-door:hover .c-host *,.c-door:hover .c-hav::after{animation-play-state:running}
}
@media (max-width:699px){
.c-door.lit{transform:translateY(-4px);box-shadow:0 30px 54px -30px color-mix(in srgb,var(--c) 70%,transparent)}
.c-door.lit .c-gl::after{left:130%}
.c-door.lit .c-ar{transform:translateX(3px)}
}
.sec-body-unused{background:#f3f5ff}

:host{all:initial;display:block;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:500;color:var(--ink);-webkit-font-smoothing:antialiased}