@font-face{font-family:'Celebriza Display';src:url(/assets/site/fonts/display.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Celebriza Text';src:url(/assets/site/fonts/text.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Celebriza Card';src:url(/assets/site/fonts/card.woff2) format('woff2');font-weight:900;font-display:swap}

:root{
  --ink:#15121c;--soft:#4f4960;--mute:#6f6980;--line:rgba(21,18,28,.12);--white:#fff;--pearl:#f6f5fb;
  --hot:#e4145c;--hot2:#ee4a18;--cta:linear-gradient(96deg,var(--hot),var(--hot2));
  --brand:linear-gradient(96deg,#2a7bff 0%,#8f4dff 34%,#f2399b 68%,#ff6a2b 100%);
  --display:'Celebriza Display',system-ui,sans-serif;--body:'Celebriza Text',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--screen:100svh;--bar:56px;
  --lift:0 2px 6px rgba(35,20,70,.08),0 24px 60px -18px rgba(35,20,70,.28);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{background:#fff;color:var(--ink);-webkit-text-size-adjust:100%;font-size:16px;scroll-behavior:smooth}
/* Monitors: everything is in rem and grows with the window. */
@media(min-width:900px){html{font-size:clamp(16px,min(1.111vw,1.778vh),34px)}:root{--bar:4.2rem}}
body{font:400 1.0625rem/1.5 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
body.chatting{overflow:hidden}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:650;letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(2.4rem,9.6vw,4.6rem)}
h3{font-size:clamp(1.9rem,7.4vw,3.2rem);letter-spacing:-.03em;line-height:1.05}
em{font-style:normal}
h2 em,.grad{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:2px solid #8f4dff;outline-offset:3px}
.kick{font-weight:600;font-size:.95rem;color:var(--hot);margin-bottom:.7rem}
@media(max-width:899.98px){.wide-only{display:none!important}}
@media(min-width:900px){.narrow-only{display:none!important}}
[id]{scroll-margin-top:calc(var(--bar) + 8px)}

/* The world behind everything: a tiny canvas stretched over the page, so it costs nothing. */
#sky{position:fixed;left:0;top:0;width:100vw;height:100lvh;z-index:-1;pointer-events:none}

/* Bar */
.bar{position:fixed;inset:0 0 auto;z-index:30;height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) clamp(16px,4vw,4rem) 0;display:flex;align-items:center;justify-content:space-between;transition:background-color .3s,box-shadow .3s}
.bar.solid{background:#fff;box-shadow:0 1px 0 var(--line)}
.mark{font:700 1.45rem/1 var(--display);letter-spacing:-.015em;text-decoration:none;padding:8px 0}
.bar-nav{display:flex;align-items:center;gap:clamp(12px,2vw,2rem)}
.bar-link{font-weight:500;font-size:1rem;text-decoration:none;padding:10px 2px}
.bar-go{appearance:none;display:none;align-items:center;gap:6px;height:44px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:.98rem;padding:0 16px 0 4px}
.bar.solid .bar-go{display:inline-flex;animation:pop .5s var(--ease)}
.bar-bri{width:38px;height:38px;flex:none;display:block;border-radius:50%;background:radial-gradient(circle,#fff 56%,transparent 59%),conic-gradient(#2a7bff,#8f4dff,#f2399b,#ff6a2b,#ffc93c,#2a7bff)}
.bar-bri:has(canvas){background:none}
@media(min-width:900px){.bar-go{height:3rem;font-size:1.05rem;padding:0 1.2rem 0 .3rem}.bar-bri{width:2.6rem;height:2.6rem}}
@keyframes pop{from{transform:scale(.8);opacity:0}}

/* First screen: what this is in one line, then the designs to pick from right away */
.hero{position:relative;min-height:var(--screen);padding:calc(var(--bar) + env(safe-area-inset-top) + clamp(22px,4.2svh,56px)) 0 18px;display:flex;flex-direction:column}
.hero-copy{padding:0 clamp(18px,5vw,4rem);text-align:center}
h1{font-size:clamp(2rem,min(9.3vw,5.6svh),3.1rem);letter-spacing:-.035em;line-height:1}
.h1a,.h1b{display:block}
.rot{position:relative;display:inline-grid;vertical-align:top;overflow:hidden;margin-left:-.06em;padding-bottom:.1em;margin-bottom:-.1em}
.rot-w{grid-area:1/1;justify-self:start;white-space:nowrap;background:linear-gradient(96deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(108%);transition:transform .62s var(--ease)}
.rot-w.on{transform:none}
.rot-w.out{transform:translateY(-108%)}
.lede{margin:.6rem auto 0;max-width:36ch;font-size:clamp(1rem,4.1vw,1.15rem);line-height:1.32;color:var(--soft);text-wrap:balance}

.shop{position:relative;margin-top:clamp(12px,2.2svh,1.6rem);display:flex;flex-direction:column;flex:1;min-height:0}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px clamp(18px,5vw,4rem);justify-content:safe center}
.tabs::-webkit-scrollbar{display:none}
.tab{appearance:none;flex:none;min-height:42px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.8);padding:0 .85rem;font-weight:600;font-size:.94rem;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tab small{font-weight:500;opacity:.6;margin-left:.3em}
.lane-wrap{position:relative;margin-top:clamp(10px,1.6svh,1.2rem)}
.lane{--cw:clamp(150px,min(50vw,calc((100svh - 29.75rem)*.5625)),17rem);display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:40px calc(50% - var(--cw)/2) 64px;margin:-26px 0 -42px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.lane::-webkit-scrollbar{display:none}
.lc{flex:none;width:var(--cw);aspect-ratio:9/16;scroll-snap-align:center;position:relative;border-radius:22px;transform-origin:50% 60%;will-change:transform;transition:box-shadow .4s}
.lc-open{appearance:none;display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:inherit;overflow:hidden;background:#eee;box-shadow:var(--lift)}
.lc-open img,.lc-open video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.lc-open video{opacity:0;transition:opacity .35s}
.lc-open video.on{opacity:1}
.lc.center .lc-open{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--glow,#f2399b),0 26px 60px -16px var(--glow,#f2399b)}
.lc-play{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(255,255,255,.95);color:var(--ink);font-weight:600;font-size:.85rem;padding:.4rem .8rem;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.lc.center .lc-play{opacity:1}
.lane-arrow{flex:none;width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.25rem;display:grid;place-items:center;box-shadow:0 8px 20px -10px rgba(35,20,70,.4);z-index:3;transition:transform .2s var(--ease)}
.lane-arrow:hover{transform:scale(1.08)}
.choice{padding:0 clamp(18px,5vw,4rem);text-align:center}
.choice-head{display:flex;align-items:center;justify-content:center;gap:1.4rem}
.choice-name{min-width:0}
.choice-name b{display:block;font:700 1.4rem/1.1 var(--display);letter-spacing:-.02em}
.choice-name span{display:block;color:var(--soft);font-size:1rem;margin-top:2px}
.choice-name b span{display:inline;color:inherit;font-size:inherit;margin:0}
.choice-acts{display:flex;gap:8px;justify-content:center;margin-top:.7rem}
.choice-acts .btn{width:auto;min-height:50px;padding:0 1.1rem;white-space:nowrap;flex:0 1 auto}
.choice-acts .btn:first-child{flex:1;max-width:17rem}
.choice.swap .choice-name{animation:swap .45s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(8px)}}
.ask-bri{appearance:none;display:flex;align-items:center;gap:12px;margin:clamp(14px,2.4svh,2rem) auto 0;width:min(calc(100% - 36px),34rem);border:1px solid var(--line);background:rgba(255,255,255,.86);border-radius:22px;padding:8px 16px 8px 8px;text-align:left;font-size:.98rem;line-height:1.3;color:var(--soft);box-shadow:0 10px 30px -20px rgba(35,20,70,.5);transition:transform .2s var(--ease),border-color .2s}
.ask-bri:hover{transform:translateY(-2px);border-color:var(--ink)}
.ask-bri b{color:var(--ink)}
.ask-bri-face{width:58px;height:58px;flex:none;border-radius:50%;background:radial-gradient(circle,#fff 56%,transparent 59%),conic-gradient(#2a7bff,#8f4dff,#f2399b,#ff6a2b,#ffc93c,#2a7bff)}
.ask-bri-face:has(canvas){background:none}
.no-gl [data-bri]{background:url(/assets/site/bri-orb.webp) center/contain no-repeat}
@media(min-width:900px){
  .hero{padding-top:calc(var(--bar) + 1.2rem)}
  h1{font-size:4.5rem}
  .lede{font-size:1.35rem;max-width:52ch;margin-top:1rem}
  .tab{min-height:2.8rem;font-size:1.02rem;padding:0 1.2rem}
  .lane{--cw:clamp(10rem,calc((100svh - 36rem)*.5625),19rem);gap:1.6rem;padding-top:2.6rem;padding-bottom:4.4rem;margin:-1.6rem 0 -2.8rem}
  .lc{border-radius:1.5rem}
  .choice-name b{font-size:1.7rem}
  .choice-name span{font-size:1.1rem}
  .choice-acts .btn{min-height:3.3rem;font-size:1.1rem;padding:0 1.6rem}
  .ask-bri{font-size:1.05rem;width:36rem}
  .ask-bri-face{width:3.6rem;height:3.6rem}
}

/* Buttons */
.btn{appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;border:0;border-radius:999px;background:var(--cta);color:#fff;font-weight:700;font-size:1.0625rem;text-decoration:none;transition:transform .15s,filter .2s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:default}
.btn.quiet{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn.big{min-height:62px;font-size:1.2rem;width:min(24rem,100%);margin:1.6rem auto 0}
.icon{appearance:none;background:#fff;border:1px solid var(--line);border-radius:999px;min-width:44px;height:44px;padding:0 14px;font-size:.95rem;font-weight:500;display:grid;place-items:center;text-decoration:none;white-space:nowrap}
.ask{position:relative;display:block;width:min(40rem,100%);margin:0 auto;border-radius:999px;padding:2px;overflow:hidden;isolation:isolate;box-shadow:0 18px 40px -22px rgba(143,77,255,.65)}
.halo{position:absolute;z-index:-1;left:50%;top:50%;width:140%;aspect-ratio:1;margin:-70% 0 0 -70%;background:conic-gradient(#2a7bff,#8f4dff,#f2399b,#ff6a2b,#ffc93c,#2a7bff);animation:halo 6s linear infinite}
@keyframes halo{to{transform:rotate(360deg)}}
.ask input{display:block;width:100%;height:60px;border-radius:999px;border:0;background:#fff;padding:0 66px 0 1.35rem;font-size:1.0625rem;outline:0;text-overflow:ellipsis}
.ask input::placeholder{color:var(--mute);opacity:1}
.go{position:absolute;right:8px;top:8px;width:48px;height:48px;border-radius:50%;border:0;background:var(--cta);color:#fff;font-size:1.4rem;font-weight:700;display:grid;place-items:center;transition:transform .15s}
.go:active{transform:scale(.92)}
.chip{appearance:none;min-height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;padding:0 .95rem;font-weight:500;font-size:.98rem;white-space:nowrap}
@media(min-width:900px){.ask input{height:4.1rem;padding-right:4.6rem;font-size:1.15rem;padding-left:1.7rem}.go{width:3.3rem;height:3.3rem;right:.5rem;top:.5rem}}

/* The line that runs along the story */
.after{position:relative}
.thread{position:absolute;left:clamp(12px,3.2vw,3rem);top:0;bottom:12vh;width:2px;background:rgba(21,18,28,.08);border-radius:2px;pointer-events:none;z-index:1}
.thread i{display:block;width:100%;height:100%;background:linear-gradient(180deg,#2a7bff,#8f4dff 30%,#f2399b 62%,#ff6a2b 86%,#ffc93c);transform:scaleY(0);transform-origin:50% 0;will-change:transform}
.stop{position:absolute;left:calc(clamp(12px,3.2vw,3rem) - 6px);width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(21,18,28,.14);z-index:2;transition:box-shadow .3s,transform .6s var(--ease);transform:scale(.8)}
.stop.hit{box-shadow:0 0 0 3px #f2399b,0 0 18px 3px rgba(242,57,155,.45);transform:scale(1)}

/* The collection: every design by occasion, a row per section on the phone, a grid on monitors */
.cat{position:relative;padding:clamp(56px,10vh,6.5rem) 0 clamp(24px,5vh,3.5rem);text-align:center}
.cat .stop{top:clamp(56px,10vh,6.5rem)}
.cat h2{font-size:clamp(2.2rem,9vw,4.2rem);padding:0 clamp(18px,5vw,4rem)}
.cat-lede{color:var(--soft);font-size:1.02rem;margin:.7rem auto 0;max-width:36rem;padding:0 18px;text-wrap:balance}
.cat-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:18px clamp(18px,5vw,4rem) 4px;justify-content:safe center}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chips .chip{flex:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cat-chips .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-group{margin-top:clamp(22px,3.6vh,2.4rem);text-align:left}
.cat-head{display:flex;align-items:baseline;gap:10px;padding:0 clamp(18px,5vw,4rem);margin:0 0 12px}
.cat-head h3{font:700 1.4rem/1.1 var(--display);margin:0;letter-spacing:-.01em}
.cat-head span{color:var(--mute);font-size:.95rem}
.cat-head b{margin-left:auto;font-weight:600;font-size:.88rem;color:var(--soft);white-space:nowrap}
.cat-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px clamp(18px,5vw,4rem) 12px;scroll-padding:0 clamp(18px,5vw,4rem)}
.cat-row::-webkit-scrollbar{display:none}
.cc{flex:none;width:clamp(148px,39vw,200px);scroll-snap-align:start;appearance:none;border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.cc-img{display:block;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/16;background:var(--pearl);box-shadow:0 14px 30px -18px rgba(35,20,70,.45),0 0 0 1px var(--line);transition:transform .35s cubic-bezier(.2,1,.3,1),box-shadow .35s}
.cc-img img{width:100%;height:100%;object-fit:cover;display:block}
.cc:hover .cc-img,.cc:focus-visible .cc-img{transform:translateY(-4px);box-shadow:0 22px 36px -18px rgba(35,20,70,.5),0 0 0 1px var(--line)}
.cc:focus-visible{outline:none}
.cc:focus-visible .cc-img{outline:3px solid var(--hot);outline-offset:3px}
.cc-n{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;font-weight:600;font-size:.98rem;line-height:1.2}
.cc-n i{flex:none;font-style:normal;font-weight:600;font-size:.78rem;color:var(--soft);background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:99px;padding:3px 8px}
.cc small{display:block;color:var(--mute);font-size:.84rem;margin-top:3px;line-height:1.3}
.cat-nav{display:flex;gap:6px;margin-left:12px}
.cat-nav button{appearance:none;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1rem;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:transform .2s,opacity .2s}
.cat-nav button:disabled{opacity:.35;cursor:default}
.cat-nav button:not(:disabled):hover{transform:translateY(-2px)}
@media(min-width:900px){
  .cat-row{gap:1rem;scroll-behavior:smooth}
  .cc{width:11.5rem}
  .cat-head h3{font-size:1.6rem}
}

/* Talk: one scene that plays itself when it comes into view. Chat on top, the card it builds right under it. */
.talk{position:relative;padding:clamp(44px,8vh,6rem) clamp(16px,4vw,4rem) clamp(12px,3vh,2rem) clamp(32px,6vw,6.5rem)}
.talk-head{position:relative}
.talk-head .stop{left:calc(-1*clamp(32px,6vw,6.5rem) + clamp(12px,3.2vw,3rem) - 6px);top:.25rem}
.talk h2{font-size:clamp(2rem,8.2vw,2.6rem)}
.talk .kick{margin-bottom:.3rem}
.talk-steps{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.talk-steps li{display:grid;gap:7px;align-content:start}
.talk-steps li::before{content:'';height:3px;border-radius:3px;background:linear-gradient(90deg,var(--hot) var(--p,0%),var(--line) var(--p,0%))}
.talk-steps b{font:600 .86rem/1.15 var(--body);color:var(--mute);transition:color .3s}
.talk-steps li.on b,.talk-steps li.past b{color:var(--ink)}
.talk-steps span{display:none}
.tscene{margin-top:16px;display:grid;gap:12px;padding:12px;border-radius:28px;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 30px 70px -40px rgba(60,30,120,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tscene>*{transition:opacity .4s}
.tscene.fade>*{opacity:0}
.tscene-chat{display:flex;flex-direction:column;height:212px;min-width:0}
.tscene-top{display:flex;align-items:center;gap:8px;height:40px;flex:none;padding:0 4px}
.tscene-top b{font:700 1rem/1 var(--display)}
.tscene-top small{font-size:.8rem;color:var(--mute)}
.talk-bri{width:40px;height:40px;flex:none;display:block}
.lines{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;overflow:hidden;padding:6px 2px 4px;-webkit-mask:linear-gradient(transparent,#000 22px);mask:linear-gradient(transparent,#000 22px)}
.ln{display:none;flex:none;max-width:88%;padding:.55rem .8rem;border-radius:18px;font-size:.95rem;line-height:1.27;box-shadow:0 6px 18px -12px rgba(35,20,70,.4);background:#fff}
.ln.on{display:block;animation:bubble .55s var(--ease)}
.ln.gone{opacity:0;transition:opacity .3s}
.ln.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.ln.her{align-self:flex-start;border-bottom-left-radius:6px}
.ln.typing{color:transparent;width:64px;height:36px;position:relative;overflow:hidden}
.ln.typing::after{content:'';position:absolute;left:16px;top:15px;width:7px;height:7px;border-radius:50%;background:#b9b3c8;box-shadow:12px 0 #b9b3c8,24px 0 #b9b3c8;animation:dot 1s infinite}
.ln.spot{align-self:flex-start;border:1.5px solid #f2399b;transition:background .3s,box-shadow .3s}
.ln.spot.picked{background:#fff0f7;box-shadow:0 0 0 4px rgba(242,57,155,.14)}
.ln.spot b{display:block;font:700 1rem/1.15 var(--display);letter-spacing:-.02em}
.ln.spot small{color:var(--soft);font-size:.84rem}
.ln.done{align-self:flex-start;background:var(--cta);color:#fff;font-weight:700;padding:.62rem 1.05rem;border-radius:999px}
@keyframes bubble{from{opacity:0;transform:translateY(18px) scale(.92)}}
.tscene-card{display:grid;justify-items:center;gap:10px;min-width:0}
.mini{position:relative;width:min(58%,232px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;container-type:inline-size;box-shadow:var(--lift);background:#fff;transform:translateZ(0)}
.mini-blank{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:16cqw 12cqw 12cqw;gap:5cqw;background:linear-gradient(160deg,#f4f1ff,#fff3f8 55%,#fff7ee)}
.mini-tag{font:600 5.4cqw/1 var(--body);color:var(--mute);letter-spacing:.02em;margin-bottom:4cqw}
.sk{display:block;width:var(--w,60%);height:6cqw;border-radius:99px;background:linear-gradient(90deg,#ebe6f7 0%,#f8f6fd 45%,#ebe6f7 90%);background-size:220% 100%;animation:sk 1.6s linear infinite}
.sk.big{width:44cqw;height:44cqw;border-radius:50%;margin:3cqw 0}
.sk.pill{width:40cqw;height:12cqw;margin-top:auto}
@keyframes sk{to{background-position:-220% 0}}
.mini-design{position:absolute;inset:0;background:radial-gradient(90% 60% at 50% 30%,#4a1fb8,#2a0a78 70%);color:#fff;text-align:center;padding:15cqw 7cqw 10cqw;display:flex;flex-direction:column;align-items:center;clip-path:circle(0% at 84% 9%);transition:clip-path 1.15s cubic-bezier(.7,0,.2,1)}
.mini.s1 .mini-design{clip-path:circle(150% at 84% 9%)}
.mini small{font-size:4.6cqw;letter-spacing:.09em;text-transform:uppercase;color:#ffe7a3;margin-top:9cqw}
.mini-age{font:900 30cqw/.95 'Celebriza Card',Georgia,serif;color:transparent;-webkit-text-stroke:1.4px #ffc93c;margin-top:2cqw}
.mini em{font:900 8cqw/1.1 'Celebriza Card',Georgia,serif;color:#fff;margin-top:1cqw}
.mini strong{font:900 16cqw/1 'Celebriza Card',Georgia,serif;color:#ffc93c;margin:1.5cqw 0 4cqw;min-width:40cqw}
.mini-row{font-size:5.4cqw;font-weight:500;line-height:1.15;background:rgba(255,255,255,.14);border-radius:999px;padding:2.4cqw 4.6cqw;margin-top:2.4cqw;min-width:56cqw}
.mini-go{margin-top:auto;font-weight:700;font-size:6.2cqw;background:#ffc93c;color:#2a0a78;border-radius:999px;padding:3.4cqw 9cqw}
.fill{position:relative}
.fill::after{content:'';position:absolute;inset:12% 6%;border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.3) 50%,rgba(255,255,255,.12));background-size:220% 100%;animation:sk 1.6s linear infinite;transition:opacity .35s}
.fill>*,.mini strong.fill,.mini-go.fill{transition:color .35s,background-color .35s}
.fill:not(.on){color:transparent!important;background-color:rgba(255,255,255,.06)!important}
.fill:not(.on)>*{color:transparent}
.fill.on::after{opacity:0}
.fill.on{animation:land .7s var(--ease)}
@keyframes land{from{transform:scale(.8)}}
.mini-stars{position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 18% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 72% 14%,#fff,transparent),radial-gradient(2px 2px at 86% 42%,#ffe7a3,transparent),radial-gradient(1.5px 1.5px at 12% 62%,#fff,transparent),radial-gradient(2px 2px at 34% 84%,#a8c4ff,transparent),radial-gradient(1.5px 1.5px at 80% 76%,#fff,transparent);pointer-events:none}
.mini-rocket{position:absolute;width:11%;right:9%;top:6%;transform:rotate(16deg);animation:rocket 3.4s ease-in-out infinite}
@keyframes rocket{50%{transform:rotate(16deg) translateY(-8px)}}
.mini-pop{position:absolute;left:50%;bottom:17%;width:0;height:0;pointer-events:none}
.mini-pop i{position:absolute;width:7px;height:11px;border-radius:2px;left:-3px;top:-5px;opacity:0}
.mini-pop.go i{animation:conf 1.4s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.tscene-link{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:.86rem;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .6s var(--ease)}
.tscene-link svg{width:15px;height:15px;color:var(--hot)}
.tscene-link.on{opacity:1;transform:none}
@media(min-width:600px) and (max-width:899.98px){
  .tscene{grid-template-columns:1fr auto;align-items:end}
  .tscene-chat{height:min(68vw,500px)}
  .mini{width:min(34vw,260px)}
}
@media(min-width:900px){
  .talk{display:grid;grid-template-columns:28rem 1fr;gap:4rem;align-items:center;padding:clamp(4rem,10vh,7rem) clamp(3rem,6vw,8rem) 2rem}
  .talk-head .stop{left:calc(-1*clamp(3rem,6vw,8rem) + clamp(12px,3.2vw,3rem) - 6px)}
  .talk h2{font-size:4.2rem}
  .talk-steps{grid-template-columns:1fr;gap:1.1rem;margin-top:2rem}
  .talk-steps li{grid-template-columns:3px 1fr;column-gap:1.1rem;gap:.2rem 1.1rem}
  .talk-steps li::before{grid-row:1/3;width:3px;height:auto;background:linear-gradient(180deg,var(--hot) var(--p,0%),var(--line) var(--p,0%))}
  .talk-steps b{font:700 1.5rem/1.15 var(--display);letter-spacing:-.02em}
  .talk-steps span{display:block;color:var(--soft);font-size:1.05rem}
  .tscene{margin:0;grid-template-columns:1fr auto;gap:2rem;padding:1.6rem;border-radius:2.2rem;align-items:center;max-width:62rem}
  .tscene-chat{height:34rem}
  .tscene-top{height:3.4rem;gap:.7rem}
  .tscene-top b{font-size:1.3rem}.tscene-top small{font-size:1rem}
  .talk-bri{width:3.4rem;height:3.4rem}
  .ln{font-size:1.12rem;padding:.75rem 1.05rem;max-width:26rem}
  .ln.typing{width:5rem;height:2.9rem}
  .ln.typing::after{left:1.3rem;top:1.2rem}
  .mini{width:19rem;border-radius:1.8rem}
  .tscene-link{height:2.6rem;font-size:1rem;padding:0 1.2rem}
}

/* What guests get: a live clip of each thing, the words next to it */
.feats{position:relative;padding:clamp(48px,9vh,6rem) clamp(16px,4vw,4rem) 0 clamp(32px,6vw,6.5rem);overflow:clip}
.feats-head{position:relative;max-width:64rem}
.feats-head .stop,.feat-text .stop{left:calc(-1*clamp(32px,6vw,6.5rem) + clamp(12px,3.2vw,3rem) - 6px);top:.3rem}
.feat{display:grid;gap:18px;margin-top:clamp(36px,7vh,6rem);align-items:center}
.feats-head+.feat{margin-top:clamp(24px,4vh,3rem)}
.feat-text{position:relative}
.feat-text p{margin-top:.7rem;font-size:clamp(1.0625rem,4.5vw,1.3rem);line-height:1.34;color:var(--soft);max-width:32ch}
.ticklist{list-style:none;padding:0;margin-top:1rem;display:grid;gap:.5rem}
.ticklist li{position:relative;padding-left:1.7rem;font-size:1.03rem;line-height:1.3}
.ticklist li::before{content:'';position:absolute;left:0;top:.14em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--brand)}
.ticklist li::after{content:'';position:absolute;left:.34rem;top:.38em;width:.45rem;height:.24rem;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.feat-shot{position:relative;margin:0;justify-self:center;width:min(76vw,21rem)}
.feat-shot video{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:24px;box-shadow:var(--lift);background:#e9e6f2}
.sms{position:relative;display:block;margin:12px 0 0 auto;width:fit-content;max-width:86%;padding:.6rem .85rem .65rem;border-radius:18px 18px 6px 18px;background:#2a7bff;color:#fff;font-size:.92rem;line-height:1.25;box-shadow:0 14px 30px -12px rgba(20,60,160,.55);opacity:0;transform:translateY(14px) scale(.9);transform-origin:100% 100%;transition:opacity .35s,transform .6s var(--ease)}
.sms.on{opacity:1;transform:none}
.sms-from{display:block;font-size:.72rem;font-weight:600;opacity:.8;margin-bottom:.15rem}
[data-up]{opacity:0;transform:translateY(28px);transition:opacity .6s,transform .9s var(--ease)}
[data-up].in{opacity:1;transform:none}
@media(min-width:900px){
  .feat{grid-template-columns:1fr 1fr;gap:5rem}
  .feat.flip .feat-text{order:2}
  .feat-shot{width:22rem}
  .feat-shot video{border-radius:1.8rem}
  .sms{font-size:1.05rem;max-width:19rem;margin-top:1rem}
}

/* Price: three steps by design, guests always free */
.price{position:relative;padding:clamp(64px,12vh,8rem) clamp(18px,5vw,4rem) clamp(64px,11vh,7rem);text-align:center}
.price .stop{top:calc(clamp(64px,12vh,8rem) + .3rem)}
.price h2{font-size:clamp(2rem,8.4vw,3.6rem)}
.price-lede{margin:.8rem auto 0;max-width:36ch;color:var(--soft);font-size:clamp(1.05rem,4.3vw,1.25rem);line-height:1.34;text-wrap:balance}
.tiers{display:grid;gap:10px;margin:1.6rem auto 0;max-width:58rem}
.tier{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'n p' 's s';align-items:baseline;text-align:left;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--line)}
.tier.main{box-shadow:inset 0 0 0 2px #f2399b,0 20px 50px -30px rgba(242,57,155,.7)}
.tier-name{grid-area:n;font:700 1.15rem/1 var(--display)}
.tier-num{grid-area:p;justify-self:end;font:700 2.1rem/1 var(--display);letter-spacing:-.04em;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.tier-say{grid-area:s;margin-top:.35rem;color:var(--soft);font-size:.98rem;line-height:1.3}
.ticklist.center{justify-content:center;text-align:left;margin:1.5rem auto 0;width:fit-content;max-width:100%}
@media(min-width:900px){
  .tiers{grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .tier{grid-template-columns:1fr;grid-template-areas:'n' 'p' 's';text-align:center;padding:1.8rem 1.6rem;border-radius:1.6rem}
  .tier-num{justify-self:center;font-size:4.2rem;margin:.5rem 0 .3rem}
  .tier-say{font-size:1.05rem}
}

/* Bri, second on the page: big, with the field to talk to him */
.meet{position:relative;padding:clamp(56px,11vh,7rem) clamp(18px,5vw,4rem) clamp(30px,6vh,4rem);display:flex;flex-direction:column;align-items:center;text-align:center}
.meet .stop{top:clamp(56px,11vh,7rem)}
.meet-bri{width:min(64vw,36svh,24rem);height:min(64vw,36svh,24rem);margin:-1rem auto -.4rem}
.meet .kick{margin-bottom:.3rem}
.meet h2{font-size:clamp(2.4rem,10vw,4.6rem)}
.meet-lede{margin:.8rem auto 1.3rem;max-width:34ch;color:var(--soft);font-size:clamp(1.05rem,4.3vw,1.3rem);line-height:1.34;text-wrap:balance}
.meet .quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
@media(min-width:900px){.meet .chip{min-height:2.9rem;font-size:1.05rem;padding:0 1.15rem}}

/* Last call */
.final{position:relative;padding:clamp(60px,12vh,8rem) clamp(18px,5vw,4rem) clamp(60px,12vh,8rem);display:flex;flex-direction:column;align-items:center;text-align:center}
.final .stop{top:clamp(60px,12vh,8rem)}
.final-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:min(100%,32rem);margin:1.8rem auto 0}
.final-acts .btn{flex:1 1 13rem;min-height:56px}
.final h2{font-size:clamp(2.2rem,9.4vw,4.2rem);margin-bottom:1.1rem}
footer{border-top:1px solid var(--line);padding:22px clamp(18px,5vw,4rem) max(22px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;color:var(--soft);font-size:.95rem;background:#fff}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{padding:6px 0;text-underline-offset:3px}

/* Word by word */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translateY(112%) rotate(6deg);transform-origin:0 100%;transition:transform .95s var(--ease);transition-delay:calc(var(--i)*55ms)}
.in .w>span{transform:none}

/* The conversation */
.chat{position:fixed;inset:0;z-index:50;background:#fff;display:none;grid-template-columns:1fr;height:100dvh}
.chat.open{display:grid;animation:chatIn .45s var(--ease)}
@keyframes chatIn{from{opacity:0;transform:translateY(26px)}}
.chat-side{display:flex;flex-direction:column;min-height:0;height:100dvh}
.chat-top{display:flex;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--line)}
#chatBri{width:58px;height:58px;margin:-6px -2px;flex:none}
.chat.big #chatBri{display:none}
.chat-big{--cb:min(58vw,26svh,16rem);width:var(--cb);height:0;margin:0 auto;transition:height .55s var(--ease);flex:none}
.chat.big .chat-big{height:var(--cb)}
.chat-who{flex:1;min-width:0;line-height:1.15}
.chat-who b{display:block;font:700 1.15rem/1.1 var(--display)}
.chat-who small{color:var(--soft);font-size:.875rem}
.feed{flex:1;min-height:0;overflow-y:auto;padding:18px 16px 10px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.m{max-width:86%;font-size:1.125rem;line-height:1.34;animation:in .4s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
.m.her{align-self:flex-start;color:var(--ink)}
.m.me{align-self:flex-end;background:var(--ink);color:#fff;padding:.6rem .9rem;border-radius:20px;border-bottom-right-radius:6px}
.m-wait{align-self:flex-start;display:flex;gap:6px;padding:8px 2px;align-items:center}
.m-wait i{width:7px;height:7px;border-radius:50%;background:#8f4dff;animation:dot 1s ease-in-out infinite}
.m-wait i:nth-child(2){animation-delay:.15s;background:#f2399b}.m-wait i:nth-child(3){animation-delay:.3s;background:#ff6a2b}
@keyframes dot{50%{transform:translateY(-5px);opacity:.5}}
.opts{display:flex;flex-wrap:wrap;gap:8px;animation:in .4s var(--ease)}
.places{display:grid;gap:8px;animation:in .4s var(--ease)}
.place{position:relative;border:1px solid var(--line);border-radius:18px;padding:12px 98px 12px 14px;background:#fff;display:grid;gap:4px}
.place b{font:700 1.125rem/1.15 var(--display);letter-spacing:-.01em}
.place small{color:var(--soft);font-size:.94rem;line-height:1.3}
.place-row{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.94rem;margin-top:2px;align-items:center}
.place-row a{text-underline-offset:3px;padding:6px 0}
.place .chip{position:absolute;right:10px;top:10px;background:var(--cta);border:0;color:#fff;min-height:44px;padding:0 14px;font-weight:600}
.credit{font-size:.81rem;color:var(--mute)}
.srcs{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.875rem;color:var(--soft);animation:in .4s var(--ease)}
.srcs a{text-underline-offset:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picks{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;animation:in .4s var(--ease);flex:none}
.pick{flex:none;width:136px;appearance:none;border:1px solid var(--line);background:#fff;border-radius:18px;padding:6px 6px 10px;text-align:left;display:grid;gap:6px}
.pick img{width:100%;aspect-ratio:9/13;object-fit:cover;object-position:50% 30%;border-radius:13px;display:block}
.pick b{font:700 .94rem/1.1 var(--display);padding:0 4px}
.see.quiet{min-height:44px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500;font-size:1rem}
.dock{padding:8px 12px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:8px;background:#fff}
.see{display:none}
.see.on{display:flex}
.say{position:relative;display:flex;gap:8px}
.say input{flex:1;min-width:0;height:52px;border-radius:999px;border:1px solid var(--line);background:var(--pearl);padding:0 16px;font-size:1.0625rem;outline:0}
.say input:focus{border-color:#8f4dff}
.say .go{position:static;width:52px;height:52px;flex:none}
.pickr{position:relative;flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:1.25rem;overflow:hidden}
.pickr input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}
.say .up{flex:1;display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;border:1px dashed rgba(21,18,28,.4);font-weight:500;cursor:pointer}
.stage{display:none}
.sheet{position:fixed;inset:0;z-index:60;background:#fff;display:none;flex-direction:column}
.sheet.open{display:flex;animation:up .45s var(--ease)}
@keyframes up{from{transform:translateY(100%)}}
.sheet-frame{flex:1;min-height:0;position:relative}
.sheet-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#f4f3f8}
.sheet-bar{padding:10px 12px max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 1fr;gap:8px;background:#fff;border-top:1px solid var(--line)}
.sheet-bar .icon{height:54px}
.note{grid-column:1/-1;font-size:.94rem;color:#a3123f;line-height:1.3}
.note:empty{display:none}
.fin{position:fixed;inset:0;z-index:70;background:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:12px;overflow:auto}
.fin.open{display:flex}
#finBri{width:min(52vw,15rem);height:min(52vw,15rem);margin:-24px auto -10px;flex:none}
.fin h2{font-size:clamp(2.4rem,9vw,4rem)}
.fin p{color:var(--soft);max-width:30ch}
.fin code{display:block;font:500 1.0625rem/1.3 var(--body);background:var(--pearl);border:1px solid var(--line);border-radius:14px;padding:14px;word-break:break-all;width:min(26rem,100%)}
.fin .btn{width:min(26rem,100%)}
.qr{background:#fff;padding:10px;border-radius:12px;line-height:0}

/* Opening a design: the card grows into the real invitation */
.modal{position:fixed;inset:0;z-index:80;background:rgba(255,255,255,0);display:none;transition:background-color .4s}
.modal.open{display:block}
.modal.shown{background:#fff}
.modal-frame{position:absolute;left:0;top:0;overflow:hidden;background:#eee;box-shadow:var(--lift);transform-origin:0 0;will-change:transform,border-radius}
.modal-frame img,.modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.modal-frame iframe{opacity:0;transition:opacity .35s;background:transparent}
.modal-frame iframe.on{opacity:1}
.modal-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 12px max(12px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);transform:translateY(110%);transition:transform .5s var(--ease)}
.modal.shown .modal-bar{transform:none}
.modal-bar .icon{height:54px}
@media(min-width:900px){
  .modal.shown{background:rgba(248,247,252,.97)}
  .modal-bar{left:50%;right:auto;bottom:1.2rem;width:26rem;margin-left:-13rem;background:none;border:0;padding:0;transform:translateY(200%)}
  .modal.shown .modal-bar{transform:none}
}

@media(min-width:900px){
  .chat{grid-template-columns:32rem 1fr}
  .chat-side{border-right:1px solid var(--line)}
  .stage{display:flex;position:relative;align-items:center;justify-content:center;overflow:hidden;background:var(--tint,#f3f1fa);transition:background 1s}
  .stage .phone{position:relative;height:min(calc(100dvh - 8rem),56rem);aspect-ratio:9/16;border-radius:2rem;overflow:hidden;box-shadow:var(--lift);background:#fff}
  .stage .phone iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transition:opacity .5s}
  .stage-empty{position:absolute;inset:0;display:grid;place-items:center;background:#f3f1fa}
  .stage-empty video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
  .stage-empty p{position:relative;padding:0 14%;text-align:center;font:700 1.65rem/1.05 var(--display);letter-spacing:-.02em}
  .stage-act{position:absolute;right:1.8rem;bottom:1.8rem;width:18rem;display:none}
  .stage-act.on{display:grid;gap:8px}
  .see{display:none!important}
  .sheet{display:none!important}
}

.tier-tag{display:inline-block;vertical-align:.18em;margin-left:.3rem;padding:.12rem .45rem;border-radius:99px;font:600 .74rem/1.2 var(--body);font-style:normal;letter-spacing:0;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.7)}
@media(min-width:900px){.tier-tag{font-size:.85rem}}

/* Sections as stacked sheets: each a solid tint with rounded top corners that slides over the one before,
   so the eye always knows where a section starts. The first block after the hero stays on the sky. */
.after > section{z-index:2}
.after > section.cat,.after > section.talk,.after > section.feats,.after > section.price{margin-top:-30px;border-radius:32px 32px 0 0;box-shadow:0 -1px 0 rgba(21,18,28,.06),0 -22px 44px -34px rgba(35,20,70,.35)}
.after > section.cat{background:#fff}
.after > section.talk{background:#f5f2fb}
.after > section.feats{background:#fff6ee}
.after > section.price{background:#fff}
.thread,.stop{display:none!important}
.talk{padding-left:clamp(16px,4vw,4rem)}
.feats{padding-left:clamp(16px,4vw,4rem)}
@media(min-width:900px){.after > section.cat,.after > section.talk,.after > section.feats,.after > section.price{border-radius:56px 56px 0 0;margin-top:-48px}}