/* Self-hosted fonts from the attached design. Source and licenses: assets/fonts/README.md. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.a79fdb52d4a5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/geist-latin.19f9c92546aa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin.684ad5b531f8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Original attachment stylesheet, preserved verbatim. */
:root{--accent:#FFC83D}
body{margin:0;background:#F7F4E9}
.plan-cta{margin-top:auto}
.bound{position:absolute;left:50%;top:50%;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;border:1.5px dashed rgba(23,21,15,.28);animation:spin 40s linear infinite}
.foot .brand{color:var(--cream)}
.foot .brand-mascot{width:32px;height:39px}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
.nj{--ink:#0C0B09;--ink2:#15130F;--ink3:#1E1B16;--cream:#F4EFE2;--fog:#ABA496;--fog2:#8E887B;--paper:#F7F4E9;--paper2:#EFEADB;--card:#FFFDF7;--text:#17150F;--muted:#5E584C;--line:rgba(23,21,15,.12);--lined:rgba(255,244,214,.12);--fd:'Bricolage Grotesque','Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--fu:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--fm:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;--ease:cubic-bezier(.22,1,.36,1);--glow:color-mix(in oklab,var(--accent) 42%,transparent);--soft:color-mix(in oklab,var(--accent) 70%,transparent);font-family:var(--fu);font-size:16px;line-height:1.5;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;position:relative}
.nj *,.nj *::before,.nj *::after{box-sizing:border-box}
:where(.nj) :where(p,h1,h2,h3,h4,ul,ol,figure,blockquote){margin:0;padding:0}
:where(.nj) :where(ul,ol){list-style:none}
:where(.nj) a{color:inherit}
:where(.nj) img{display:block;max-width:100%}
.nj :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:1260px;margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.disp{font-family:var(--fd);font-weight:560;letter-spacing:-.045em;line-height:.95;font-variation-settings:'opsz' 96}
.h2{font-size:clamp(44px,6.2vw,96px)}
.h3{font-family:var(--fd);font-weight:560;letter-spacing:-.03em;line-height:1.05;font-size:clamp(24px,2.2vw,32px)}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--muted);max-width:580px}
.ac{color:var(--accent)}
.mark{background:linear-gradient(transparent 60%,var(--soft) 60%,var(--soft) 90%,transparent 90%);padding:0 .05em}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;font-family:var(--fu);font-weight:550;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;transition:transform .5s var(--ease),background .3s,box-shadow .5s var(--ease),color .3s}
.btn svg{flex:none}
.btn-accent{background:var(--accent);color:#17150F;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 14px 40px -14px var(--accent)}
.btn-accent::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 20px 50px -14px var(--accent)}
.btn-accent:hover::after{transform:translateX(120%)}
.btn-ghost-d{background:rgba(255,244,214,.06);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(255,244,214,.18)}
.btn-ghost-d:hover{background:rgba(255,244,214,.12);transform:translateY(-2px)}
.btn-ink{background:var(--text);color:var(--paper)}
.btn-ink:hover{transform:translateY(-2px);background:#000}
.btn-line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(23,21,15,.22)}
.btn-line:hover{background:rgba(23,21,15,.05);transform:translateY(-2px)}
.btn-sm{height:42px;padding:0 18px;font-size:14px}
.play-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(28px);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes navIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
.rise{animation:rise 1.2s var(--ease) backwards}

/* progress + nav */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--sp,0));box-shadow:0 0 12px var(--glow);pointer-events:none;will-change:transform}
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;width:min(calc(100% - 24px),1000px);display:flex;align-items:center;gap:8px;padding:7px 7px 7px 18px;border-radius:999px;background:rgba(17,15,12,.93);box-shadow:inset 0 0 0 1px rgba(255,244,214,.11),0 24px 60px -24px rgba(0,0,0,.65);color:var(--cream);animation:navIn 1s var(--ease) .2s both}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.brand-word{font-family:var(--fd);font-weight:620;font-size:19px;letter-spacing:-.03em}
.brand-word .dot{color:var(--accent)}
.nj-defs{position:absolute;width:0;height:0;overflow:hidden}
.brand-mascot{flex:none;width:25px;height:30px;overflow:visible;transform-origin:50% 90%;transition:transform .6s var(--ease)}
.brand:hover .brand-mascot{transform:rotate(-9deg) translateY(-2px)}

/* Diary, the mascot: part-level animation */
.mascot{position:relative;display:block}
.mascot svg{display:block;width:100%;height:100%;overflow:visible}
.mascot .m-body{transform-box:view-box;transform-origin:50% 100%;animation:mFloat 5.5s ease-in-out infinite;transition:rotate .7s var(--ease)}
.mascot .diary-arm,.mascot .diary-eye,.mascot .diary-star,.mascot .diary-heart,.mascot .diary-mouth,.mascot .diary-microphone,.mascot .diary-earcup{transform-box:fill-box}
.mascot .diary-arm{transform-origin:50% 12%}
.mascot .diary-arm-left{animation:armL 5.5s ease-in-out infinite}
.mascot .diary-arm-right{animation:armR 5.5s ease-in-out infinite}
.mascot .diary-eye{transform-origin:50% 50%;translate:var(--gx,0px) var(--gy,0px);animation:blink 5.2s infinite}
.mascot .diary-eye-right{animation-delay:.05s}
.mascot .diary-mouth{transform-origin:50% 25%;transition:scale .6s var(--ease)}
.mascot .diary-star{transform-origin:50% 56%;animation:starTw 4.2s ease-in-out infinite}
.mascot .diary-heart{transform-origin:50% 60%;animation:beat 1.3s ease-in-out infinite}
.mascot .diary-pulse-line path{stroke-dasharray:100 100;animation:ecg 2.6s linear infinite}
.mascot .diary-microphone{transform-origin:96% 2%}
.mascot .diary-earcup{transform-origin:50% 50%}
.mascot.is-ask .m-body{rotate:-3deg}
.mascot.is-ask .diary-earcup{animation:cup .42s ease-in-out infinite alternate}
.mascot.is-ask .diary-microphone{animation:mic .3s ease-in-out infinite alternate}
.mascot.is-think .m-body{animation:mFloat 5.5s ease-in-out infinite,ponder 1.1s ease-in-out infinite alternate}
.mascot.is-think .diary-star{animation:starSpin 1.1s var(--ease) infinite}
.mascot.is-answer .m-body{rotate:3deg;animation:hop .85s var(--ease) 1,mFloat 5.5s ease-in-out .85s infinite}
.mascot.is-answer .diary-arm-right{animation:wave 1s ease-in-out 2}
.mascot.is-answer .diary-mouth{scale:1.14 1.3}
.mascot.is-answer .diary-heart{animation-duration:.8s}
.mascot.is-wave .diary-arm-right{animation:waveLoop 4.5s ease-in-out infinite}
.mascot.is-wave .diary-eye{animation:blink 5.2s infinite,look 9s ease-in-out infinite}
.mascot.is-wave .diary-mouth{scale:1.08 1.15}
@keyframes mFloat{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes armL{0%,100%{rotate:0deg}50%{rotate:6deg}}
@keyframes armR{0%,100%{rotate:0deg}50%{rotate:-6deg}}
@keyframes blink{0%,91%,100%{scale:1 1}94%{scale:1 .08}97%{scale:1 1}}
@keyframes starTw{0%,100%{rotate:0deg;scale:1}50%{rotate:12deg;scale:1.1}}
@keyframes starSpin{to{rotate:360deg}}
@keyframes beat{0%,100%{scale:1}14%{scale:1.16}28%{scale:1}42%{scale:1.09}70%{scale:1}}
@keyframes ecg{0%{stroke-dashoffset:100}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes cup{to{scale:1.06}}
@keyframes mic{from{rotate:-1.5deg}to{rotate:2.5deg}}
@keyframes ponder{from{rotate:-2.5deg}to{rotate:2.5deg}}
@keyframes hop{0%{translate:0 0}35%{translate:0 -40px}70%{translate:0 3px}100%{translate:0 0}}
@keyframes wave{0%,100%{rotate:0deg}30%{rotate:-40deg}60%{rotate:-18deg}82%{rotate:-36deg}}
@keyframes waveLoop{0%,8%,46%,100%{rotate:0deg}16%{rotate:-40deg}24%{rotate:-16deg}32%{rotate:-38deg}40%{rotate:-14deg}}
@keyframes look{0%,18%,100%{translate:0 0}28%,44%{translate:-12px 4px}56%,74%{translate:12px -3px}86%{translate:0 0}}
.nav-links{display:flex;gap:2px}
.nl{font-size:14px;color:#D8D2C3;text-decoration:none;padding:12px 14px;border-radius:999px;transition:background .25s,color .25s}
.nl:hover{background:rgba(255,244,214,.08);color:#fff}

/* hero */
.hero{position:relative;min-height:900px;padding:128px 0 52px;background:radial-gradient(900px 520px at 50% 27%,color-mix(in oklab,var(--accent) 10%,transparent),transparent 70%),radial-gradient(1400px 700px at 50% 125%,#1C170F,transparent 70%),var(--ink);color:var(--cream);overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.field{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,11,9,0) 0%,rgba(12,11,9,0) 60%,rgba(12,11,9,.7) 85%,rgba(12,11,9,.92) 100%)}
.grain{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:.08;mix-blend-mode:overlay}
.hero-inner{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:44px;width:100%;max-width:1320px;margin:0 auto;padding:0 32px}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);align-items:center;gap:40px;width:100%;max-width:1100px;margin:0 auto;min-height:260px}
.who{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.tx-wrap{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.tx{transition:opacity .5s var(--ease)}
.tx.out{opacity:0}
.tx-line{font-family:var(--fd);font-weight:460;font-size:clamp(20px,2vw,28px);line-height:1.22;letter-spacing:-.02em;color:var(--cream);max-width:360px;min-height:2.44em}
.tw{display:inline-block;margin-left:.24em;opacity:0;transform:translateY(8px)}
.tw.on{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.orb-anchor{position:relative;width:220px;height:240px;justify-self:center}
.orb-anchor .mascot{position:absolute;inset:0;margin:auto;height:100%;aspect-ratio:673/820;z-index:1}
.orb-status{position:absolute;left:50%;top:calc(100% + 26px);transform:translateX(-50%);font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog2);white-space:nowrap}
.ans{justify-self:start;width:100%;max-width:360px;opacity:0;transform:translateX(-16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ans.on{opacity:1;transform:none}
.who-d{color:var(--accent)}
.mini-orb{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.ans-text{font-family:var(--fd);font-weight:460;font-size:clamp(18px,1.6vw,22px);line-height:1.3;letter-spacing:-.015em;color:var(--cream);margin-bottom:14px}
.ans-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:18px;background:rgba(28,25,20,.78);box-shadow:inset 0 0 0 1px rgba(255,244,214,.12)}
.ans-kind{display:flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.kind-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ans-title{font-weight:600;font-size:16px;color:#fff}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.crumb{position:relative;font-size:13px;color:#E5DFD0;padding:4px 10px;border-radius:999px;background:rgba(255,244,214,.08)}
.crumb + .crumb{margin-left:12px}
.crumb + .crumb::before{content:'→';position:absolute;left:-13px;top:50%;transform:translateY(-52%);color:var(--fog2)}
.hero-copy{transform:translateY(calc(var(--hp,0) * 90px));opacity:calc(1 - var(--hp,0) * 1.5);will-change:transform,opacity}
.hero-eyebrow{display:flex;align-items:center;gap:10px;color:#CFC8B8;margin-bottom:16px}
.live-dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero-title{font-size:clamp(68px,12vw,190px);color:#FAF6EA;margin:0 0 30px -.04em;font-weight:580}
.hero-title .w{display:inline-block;margin-right:.18em}
.hero-title .w.last{margin-right:0}
.hero-title .d{color:var(--accent);text-shadow:0 0 70px var(--glow)}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px}
.hero-sub{font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:#CFC8B8;max-width:580px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,244,214,.10)}
.trust li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#C4BDAE}
.trust svg{color:var(--accent)}
.hero-note{margin-left:auto;font-size:12.5px;color:var(--fog2)}
/* legibility: soft dark scrims under the live conversation and the headline block, so the field never fights the words */
.tx-wrap{position:relative;isolation:isolate}
.ans{position:relative;isolation:isolate}
.tx-wrap::before,.ans::before{content:'';position:absolute;z-index:-1;inset:-38px -48px;border-radius:50%;background:radial-gradient(closest-side,rgba(12,11,9,.86),rgba(12,11,9,.55) 58%,rgba(12,11,9,0));pointer-events:none}
.tx-line,.ans-text{text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 26px rgba(12,11,9,.9)}
.who{text-shadow:0 0 12px rgba(12,11,9,.95)}
.hero-copy{position:relative;isolation:isolate}
.hero-copy::before{content:'';position:absolute;z-index:-1;left:-90px;right:-90px;top:-56px;bottom:-34px;background:radial-gradient(64% 74% at 34% 58%,rgba(12,11,9,.8),rgba(12,11,9,.42) 60%,rgba(12,11,9,0) 86%);pointer-events:none}
.hero-eyebrow,.hero-sub,.trust li{text-shadow:0 0 18px rgba(12,11,9,.9)}

/* manifesto + dawn */
.mani{position:relative;background:var(--ink);color:var(--cream);padding:150px 0 96px}
.mani-eyebrow{color:var(--fog2);margin-bottom:34px;display:flex;align-items:center;gap:12px}
.mani-eyebrow::before{content:'';width:28px;height:1px;background:var(--fog2)}
.mani-text{font-family:var(--fd);font-weight:520;font-size:clamp(44px,7.4vw,120px);line-height:.98;letter-spacing:-.045em;max-width:1200px;font-variation-settings:'opsz' 96}
.mw{display:inline-block;margin-right:.2em;opacity:clamp(.13,calc(var(--mp,1) * 13 - var(--i)),1);transition:opacity .25s linear;will-change:opacity}
.mw.i0{--i:0}.mw.i1{--i:1}.mw.i2{--i:2}.mw.i3{--i:3}.mw.i4{--i:4}.mw.i5{--i:5}.mw.i6{--i:6}.mw.i7{--i:7}.mw.i8{--i:8}.mw.i9{--i:9}.mw.i10{--i:10}
.mw.hl{color:var(--accent);text-shadow:0 0 50px var(--glow)}
.mani-foot{margin-top:60px;display:flex;flex-wrap:wrap;gap:14px;color:var(--fog)}
.pill-d{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;font-size:15px;color:#E6E0D1;background:rgba(255,244,214,.05);box-shadow:inset 0 0 0 1px rgba(255,244,214,.10)}
.pill-d b{font-weight:500;color:var(--accent);font-family:var(--fm);font-size:12px;letter-spacing:.08em}
.dawn{position:relative;height:380px;overflow:hidden;background:linear-gradient(180deg,#0C0B09 0%,#14110C 24%,#3A2D18 52%,#C6A665 76%,#EBDBB2 89%,#F7F4E9 100%)}
.sun{position:absolute;left:50%;top:58%;width:1100px;height:1100px;margin-left:-550px;border-radius:50%;background:radial-gradient(circle closest-side,rgba(255,228,160,.7),rgba(255,200,61,.24) 40%,rgba(255,200,61,0) 72%);transform:translateY(calc((1 - var(--dp,.6)) * 160px));pointer-events:none;will-change:transform}
.horizon{position:absolute;left:0;right:0;top:62%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,240,205,.75),transparent);opacity:.55}
.dawn-label{position:absolute;left:50%;top:36%;transform:translateX(-50%);width:max-content;max-width:90%;text-align:center;font-family:var(--fm);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,236,190,.82)}
/* shared section scaffolding */
.sec{position:relative;padding:140px 0}
.eb{color:var(--muted);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eb::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--accent)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 64px}
.sec-head .lede{margin-top:6px}
.reveal-on [data-reveal]:not([data-in]){opacity:0;transform:translateY(34px)}
.reveal-on [data-reveal]{transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* say it your way: product intro */
.say-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.say-copy .lede{margin-top:24px}
.steps{margin-top:44px;display:flex;flex-direction:column;gap:6px}
.step-btn{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;width:100%;padding:20px 22px 22px;border-radius:22px;cursor:pointer;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.step-btn:hover{background:rgba(23,21,15,.035)}
.step-btn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.step.is-on .step-btn{background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -32px rgba(60,40,10,.4)}
.step-top{display:flex;align-items:center;gap:12px;font-family:var(--fm);font-size:12px;letter-spacing:.14em;color:var(--muted)}
.step-k{padding:4px 9px;border-radius:999px;background:rgba(23,21,15,.06)}
.step.is-on .step-k{background:var(--accent);color:#17150F}
.step-q{font-family:var(--fd);font-weight:540;font-size:clamp(21px,1.9vw,27px);letter-spacing:-.025em;line-height:1.15;color:rgba(23,21,15,.42);transition:color .5s}
.step.is-on .step-q,.step-btn:hover .step-q{color:var(--text)}
.step-d{font-size:15px;line-height:1.5;color:var(--muted);max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s}
.step.is-on .step-d{max-height:90px;opacity:1}
.step-bar{display:block;height:2px;border-radius:2px;background:rgba(23,21,15,.08);overflow:hidden;margin-top:6px}
.step-fill{display:block;height:100%;background:var(--text);transform-origin:0 50%;transform:scaleX(0)}
.step.is-on .step-fill{transform:scaleX(var(--stp,0))}
.step.is-done .step-fill{transform:scaleX(1);background:rgba(23,21,15,.25)}
.say-stage{position:relative;height:700px;display:grid;place-items:center}
.halo{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle closest-side,var(--soft),transparent 72%);opacity:.55}
.orbit{position:absolute;width:640px;height:640px;border-radius:50%;border:1px dashed rgba(23,21,15,.14);animation:spin 80s linear infinite}
.orbit.o2{width:470px;height:470px;border-style:solid;border-color:rgba(23,21,15,.07);animation-duration:120s;animation-direction:reverse}
.phone{position:relative;width:304px;height:630px;border-radius:54px;background:#0F0E0B;padding:11px;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 2px #2A2620,0 60px 120px -50px rgba(40,25,0,.55),0 30px 60px -30px rgba(0,0,0,.35);transform:rotate(-2deg);animation:bob 9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-12px)}}
.island{position:absolute;top:20px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#000;z-index:3}
/* phone: the real Niji Diary app screens, built at the app's own 380px width and scaled into the frame */
.screen{position:relative;width:100%;height:100%;border-radius:44px;background:#f8f7f3;overflow:hidden}
.scr{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.scr.on{opacity:1}
.app{position:absolute;left:0;top:0;width:380px;height:820px;transform:scale(.7421);transform-origin:0 0;background:#f8f7f3;color:#202d29;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI','Noto Sans Gujarati',system-ui,sans-serif;font-size:15px;line-height:1.35;letter-spacing:0;-webkit-font-smoothing:antialiased}
.app .ic{width:20px;height:20px;flex:none;display:block}
.app .ic.sm{width:17px;height:17px}
.app .ic.xs{width:13px;height:13px}
.ap-layer{position:absolute;inset:0}
.ap-top{position:absolute;left:0;right:0;top:50px;height:56px;display:flex;align-items:center;gap:8px;padding:0 12px}
.ap-home{flex:none;display:flex;align-items:center;gap:7px;height:46px;padding:0 13px 0 10px;border-radius:15px;background:#eef1ec;border:1px solid #dce3dc}
.ap-home-t{display:flex;flex-direction:column;line-height:1.12}
.ap-home-t b{font-size:13.5px;font-weight:650}
.ap-home-t i{font-style:normal;font-size:11px;color:#56645e}
.ap-search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:48px;padding:0 6px 0 12px;border-radius:15px;background:#fff;border:1px solid #dce3dc;color:#56645e}
.ap-ph{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8b958f;font-size:15px}
.ap-val{flex:1;min-width:0;white-space:nowrap;font-size:15px;color:#202d29}
.ap-btn{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center}
.ap-btn.mint{background:#e7f0e2;color:#245847}
.ap-btn.blue{background:#e3eff5;color:#246b87}
.ap-gear{flex:none;margin-left:auto;width:34px;height:34px;display:grid;place-items:center;color:#202d29}
.app .ap-gear .ic{width:23px;height:23px}
.ap-body{position:absolute;left:0;right:0;top:112px;bottom:76px;padding:4px 14px 0;overflow:hidden}
.ap-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.ap-tile{height:68px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13.5px;font-weight:650;border:1px solid transparent}
.ap-tile.mint{background:#e7f0e2;border-color:#cfddc8;color:#2c4a3c}
.ap-tile.blue{background:#e3eff5;border-color:#c9dce6;color:#2b5568}
.ap-tile.gold{background:#fff0d2;border-color:#eed9a9;color:#6b4a14}
.ap-chips{display:flex;gap:7px;margin-top:13px;white-space:nowrap;overflow:hidden}
.ap-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;font-size:14px;background:#fffefb;border:1px solid #dce3dc;color:#202d29}
.ap-chip.on{background:#e7f0e2;border:1.5px solid #245847;font-weight:650}
.ap-chip.dark{background:#245847;border-color:#245847;color:#fff;font-weight:650}
.ap-count{position:relative;height:18px;margin:12px 0 9px;font-size:12.5px;color:#56645e}
.ap-count span{position:absolute;left:0;top:0;white-space:nowrap}
.ap-count2{position:relative;width:130px;height:18px;font-size:12.5px;color:#56645e}
.ap-count2 span{position:absolute;right:0;top:0;white-space:nowrap}
.ap-row{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr) 16px;align-items:start;gap:11px;padding:12px 10px 12px 11px;margin-bottom:9px;border-radius:17px;background:#fffefb;border:1px solid #e2e7e1;box-shadow:0 5px 16px #342d240d}
.ap-row .ap-tag{position:absolute;right:34px;top:12px}
.ap-row .ap-rt b{padding-right:96px}
.ap-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center}
.app .ap-ic .ic{width:23px;height:23px}
.ap-ic.blue,.ap-tag.blue{background:#e3eff5;color:#2b5568}
.ap-ic.gold,.ap-tag.gold{background:#fff0d2;color:#79551b}
.ap-ic.rose,.ap-tag.rose{background:#f9e5e1;color:#9a3f33}
.ap-ic.sand,.ap-tag.sand{background:#efe9df;color:#6a5a43}
.ap-ic.mint,.ap-tag.mint{background:#e7f0e2;color:#3d6a45}
.ap-rt{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:1px}
.ap-rt b{font-size:16px;font-weight:650;color:#202d29;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-rt span{font-size:11.5px;color:#56645e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-tag{display:inline-flex;align-items:center;gap:4px;height:23px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:700;border:1px solid rgba(32,45,41,.08);white-space:nowrap}
.ap-chev{color:#56645e;align-self:center}
.ap-tabs{position:absolute;left:0;right:0;bottom:0;height:76px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:2px;padding:7px 8px 0;background:#f8f7f3;border-top:1px solid #e8e3d6}
.ap-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 8px;border-radius:18px;font-size:11.5px;color:#56645e}
.app .ap-tab .ic{width:21px;height:21px}
.ap-tab.on{color:#202d29;font-weight:650}
.ap-tab.on.mint{background:#e7f0e2}.ap-tab.on.gold{background:#fff0d2}.ap-tab.on.lav{background:#eee8f4}
.ap-hero{position:relative;height:186px;border-radius:24px;padding:26px 18px;background:linear-gradient(140deg,#fdf4d3,#f7e6ad);border:1px solid #efdc9e}
.ap-gm{display:block;max-width:200px;font-size:27px;font-weight:750;letter-spacing:-.02em;color:#24412f;line-height:1.12}
.ap-hero p{margin-top:9px;max-width:168px;font-size:14px;line-height:1.4;color:#4f5c54}
.ap-hero-m{position:absolute;right:16px;top:18px;width:98px;height:120px;overflow:visible}
.ap-voice{position:absolute;right:16px;bottom:13px;display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;color:#24412f}
.ap-find{display:flex;align-items:center;gap:10px;height:54px;margin:12px 0;padding:0 14px;border-radius:15px;background:#fff;border:1px solid #dce3dc;color:#56645e}
.ap-q{position:relative;flex:1;height:22px;font-size:15.5px}
.ap-ph2{position:absolute;left:0;top:0;color:#8b958f;white-space:nowrap}
.ap-typing{position:absolute;left:0;top:0;display:flex;align-items:center;height:22px;color:#202d29}
.ap-l{display:inline-block;max-width:0;overflow:hidden;white-space:pre}
.ap-caret{display:inline-block;width:2px;height:19px;margin-left:1px;background:#245847;opacity:0}
.ap-card{margin-top:12px;padding:16px 14px;border-radius:20px;background:#fffefb;border:1px solid #e2e7e1}
.ap-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ap-card-h b{font-size:18px;font-weight:650}
.ap-card-h span{display:flex;align-items:center;gap:4px;font-size:13.5px;color:#202d29}
.ap-up{display:grid;grid-template-columns:50px minmax(0,1fr) 16px;gap:11px;align-items:center}
.ap-rt .ap-goldt{display:flex;align-items:center;gap:5px;color:#79551b}
.ap-seg{display:flex;align-items:flex-end;gap:7px}
.ap-date{margin-left:auto;display:flex;flex-direction:column;gap:2px;font-size:15px}
.ap-date i{font-style:normal;font-size:11px;color:#56645e}
.ap-date span{display:flex;align-items:center;gap:8px}
.ap-every{display:flex;align-items:center;gap:10px;height:46px;margin-top:12px;padding:0 14px;border-radius:15px;background:#eef1ec;border:1px solid #dce3dc}
.ap-every b{flex:1;font-size:15px;font-weight:650}
.ap-today{display:flex;align-items:baseline;justify-content:space-between;margin:20px 0 12px}
.ap-today b{font-size:21px;font-weight:700}
.ap-rem{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;margin-bottom:12px}
.ap-time{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:12px;font-size:12px;font-weight:650;color:#3d4a44}
.app .ap-time .ic{width:18px;height:18px;color:#8b958f}
.ap-rcard{display:flex;flex-direction:column;gap:3px;padding:14px 14px 12px;border-radius:18px;background:#fffefb;border:1px solid #e2e7e1}
.ap-rcard.act{border-left:4px solid #9ab9c7}
.ap-rcard i{font-style:normal;font-size:12px;font-weight:650;color:#4f7645}
.ap-rcard b{font-size:17px;font-weight:650}
.ap-rcard span{font-size:13px;color:#56645e}
.ap-acts{display:flex;align-items:center;gap:7px;margin-top:9px}
.ap-rcard .ap-done,.ap-rcard .ap-snz{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 12px;border-radius:11px;font-size:13px;font-weight:600}
.ap-rcard .ap-done{background:#245847;color:#fff}
.ap-rcard .ap-snz{background:#e7f0e2;color:#202d29;border:1px solid #d5e0cf}
.ap-rcard .ap-skip{font-size:13px;color:#245847;padding:0 6px}
.ap-rcard .ap-det{margin-top:8px;font-size:12px}
/* each step plays when its screen becomes active, and resets only after it has faded out */
.ap-new{max-height:0;opacity:0;overflow:hidden;transition:max-height 0s .5s,opacity 0s .5s}
.scr.on .ap-new{max-height:240px;opacity:1;transition:max-height .8s var(--ease) 1s,opacity .5s ease 1.15s}
.c-old,.c-new{transition:opacity 0s .5s}
.c-new{opacity:0}
.scr.on .c-old{opacity:0;transition:opacity .3s 1.1s}
.scr.on .c-new{opacity:1;transition:opacity .3s 1.25s}
.scr.on .ap-new .hl::after{animation:apRing 1.4s ease-out 1.8s 2}
.scr.on .ap-found::after{animation:apRing 1.4s ease-out 2.9s 2}
@keyframes apPulse{0%{box-shadow:0 0 0 0 rgba(36,88,71,.38),0 5px 16px #342d240d;border-color:#245847}75%{box-shadow:0 0 0 12px rgba(36,88,71,0),0 5px 16px #342d240d;border-color:#245847}100%{box-shadow:0 0 0 0 rgba(36,88,71,0),0 5px 16px #342d240d}}
.ap-l-res{opacity:0;transition:opacity 0s .5s}
.ap-l-home{transition:opacity 0s .5s}
.scr.on .ap-l-res{opacity:1;transition:opacity .45s ease 2.4s}
.scr.on .ap-l-home{opacity:0;transition:opacity .45s ease 2.4s}
.ap-ph2{transition:opacity 0s .5s}
.scr.on .ap-ph2{opacity:0;transition:opacity .1s .6s}
.ap-l{transition:max-width 0s .5s}
.scr.on .ap-l{max-width:1em;transition:max-width 0s linear .7s}
.scr.on .ap-l:nth-child(2){transition-delay:.79s}.scr.on .ap-l:nth-child(3){transition-delay:.88s}.scr.on .ap-l:nth-child(4){transition-delay:.97s}.scr.on .ap-l:nth-child(5){transition-delay:1.06s}.scr.on .ap-l:nth-child(6){transition-delay:1.15s}.scr.on .ap-l:nth-child(7){transition-delay:1.24s}.scr.on .ap-l:nth-child(8){transition-delay:1.33s}.scr.on .ap-l:nth-child(9){transition-delay:1.42s}.scr.on .ap-l:nth-child(10){transition-delay:1.51s}
.scr.on .ap-caret{opacity:1;animation:apCaret .9s step-end .6s infinite}
@keyframes apCaret{50%{opacity:0}}
.ap-find{transition:border-color 0s .5s,box-shadow 0s .5s}
.scr.on .ap-find{border-color:#245847;box-shadow:0 0 0 3px rgba(36,88,71,.12);transition:border-color .3s .55s,box-shadow .3s .55s}
.loc-tag.r{left:auto;right:16px}
.sec{padding:120px 0}
.uses{padding-top:24px}
.tst-sec{padding-top:40px}
.say-copy .h2,.tst .h2{font-size:clamp(44px,5.4vw,82px)}
.final{padding-bottom:90px}
.film-caps{position:absolute;left:0;right:0;bottom:70px;height:34px;text-align:center;font-family:var(--fd);font-size:clamp(16px,1.7vw,24px);letter-spacing:-.01em;color:var(--cream)}
.film-caps span{position:absolute;left:0;right:0;opacity:0;animation:capCycle 9s var(--ease) infinite}
.film-caps .fc2{animation-delay:3s}.film-caps .fc3{animation-delay:6s}
@keyframes capCycle{0%{opacity:0;transform:translateY(8px)}6%,28%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-6px)}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:64px}
.bc{position:relative;grid-column:span 4;background:var(--card);border-radius:30px;box-shadow:inset 0 0 0 1px var(--line);padding:24px;display:flex;flex-direction:column;gap:12px;overflow:hidden;min-height:470px;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.bc:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(23,21,15,.2),0 40px 70px -40px rgba(60,40,0,.45)}
.bc.s7{grid-column:span 7}.bc.s5{grid-column:span 5}.bc.s3{grid-column:span 3}
.viz{position:relative;height:220px;border-radius:20px;background:var(--paper2);overflow:hidden;margin-bottom:8px;flex:none}
.bc-k{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bc-h{font-family:var(--fd);font-weight:560;font-size:clamp(23px,2vw,28px);letter-spacing:-.03em;line-height:1.06}
.bc-p{font-size:15px;color:var(--muted);line-height:1.5;max-width:520px}
.ask{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;font-size:13.5px;padding:9px 14px 9px 11px;border-radius:999px;background:var(--text);color:#F7F4E9;transition:transform .5s var(--ease)}
.bc:hover .ask{transform:translateX(4px)}
.ask .mini-orb{width:7px;height:7px}
.bento-note{margin-top:28px;font-size:13px;color:var(--muted);max-width:820px}
/* viz: drawers */
.cab{position:absolute;left:50%;top:26px;width:230px;margin-left:-115px;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:#E3DCC8;box-shadow:inset 0 0 0 1px rgba(23,21,15,.08)}
.drw{position:relative;height:46px;border-radius:9px;background:#F7F3E7;box-shadow:inset 0 0 0 1px rgba(23,21,15,.08)}
.knob{position:absolute;left:50%;top:50%;width:34px;height:6px;margin:-3px 0 0 -17px;border-radius:6px;background:#BDB39B}
.drw.d-b{z-index:2;animation:pull 6s var(--ease) infinite}
@keyframes pull{0%,12%{transform:none}26%,74%{transform:translateY(16px) scale(1.07)}88%,100%{transform:none}}
.itm{position:absolute;left:50%;top:-34px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--accent);color:#17150F;opacity:0;animation:pop 6s var(--ease) infinite}
@keyframes pop{0%,24%{opacity:0;transform:translate(-50%,8px) scale(.9)}34%,70%{opacity:1;transform:translate(-50%,0) scale(1)}80%,100%{opacity:0;transform:translate(-50%,-6px)}}
.loc-tag{position:absolute;left:16px;bottom:14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:#3D382E;background:rgba(255,253,247,.9);padding:7px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
/* viz: receipt */
.rcpt{position:absolute;left:50%;top:22px;width:168px;margin-left:-120px;padding:14px 14px 12px;background:#fff;border-radius:6px 6px 0 0;box-shadow:0 18px 30px -18px rgba(40,25,0,.35);display:flex;flex-direction:column;gap:7px;animation:print 7s var(--ease) infinite}
.rcpt::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:7px;background:conic-gradient(from -45deg at bottom,#fff 90deg,transparent 0) 0 0/14px 7px repeat-x}
@keyframes print{0%{transform:translateY(60px);opacity:0}14%,86%{transform:none;opacity:1}100%{transform:translateY(-10px);opacity:0}}
.rl{height:6px;border-radius:3px;background:#ECE6D6}
.rl.w40{width:40%}.rl.w60{width:60%}.rl.w80{width:80%}.rl.w50{width:50%}
.rt{display:flex;justify-content:space-between;font-family:var(--fm);font-size:11px;padding-top:6px;border-top:1px dashed #D8D0BC}
.scanline{position:absolute;left:30%;width:200px;height:2px;top:24px;background:var(--accent);box-shadow:0 0 18px 4px var(--glow);opacity:0;animation:scan 7s var(--ease) infinite}
@keyframes scan{0%,18%{top:24px;opacity:0}22%{opacity:1}44%{top:170px;opacity:1}48%,100%{top:170px;opacity:0}}
.rchip{position:absolute;right:16px;display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:7px 11px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 12px 24px -16px rgba(40,25,0,.4);opacity:0;animation:chipIn 7s var(--ease) infinite}
.rchip.c1{top:48px;animation-delay:0s}.rchip.c2{top:92px;animation-delay:.25s}.rchip.c3{top:136px;animation-delay:.5s}
@keyframes chipIn{0%,46%{opacity:0;transform:translateX(12px)}54%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
/* viz: food */
.fchip{position:absolute;display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:600;padding:9px 13px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);animation:gather 7s var(--ease) infinite}
.fchip i{font-style:normal;font-weight:400;font-size:11px;color:var(--muted)}
.fchip.f1{left:8%;top:22px;--tx:70px;--ty:60px}.fchip.f2{right:9%;top:40px;--tx:-70px;--ty:44px}.fchip.f3{left:30%;top:132px;--tx:26px;--ty:-34px}
@keyframes gather{0%,20%{transform:none;opacity:1}46%{transform:translate(var(--tx),var(--ty)) scale(.7);opacity:0}86%{transform:translate(var(--tx),var(--ty)) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.recipe{position:absolute;left:50%;top:50%;width:230px;margin:-40px 0 0 -115px;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:18px;background:#17150F;color:#F7F4E9;opacity:0;animation:dish 7s var(--ease) infinite}
.recipe b{display:flex;align-items:center;gap:8px;font-size:14.5px}
.recipe i{font-style:normal;font-size:12px;color:#BDB6A7}
@keyframes dish{0%,40%{opacity:0;transform:scale(.85)}52%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:scale(.96)}}
/* viz: list */
.list{position:absolute;left:18px;right:18px;top:18px;display:flex;flex-direction:column;gap:8px;animation:listShift 7s var(--ease) infinite}
.li{display:flex;align-items:center;gap:10px;height:41px;font-size:14px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cb{position:relative;width:18px;height:18px;border-radius:6px;box-shadow:inset 0 0 0 1.5px #BDB39B;display:grid;place-items:center;flex:none}
.li.tick1 .cb::after{animation:tickFill 7s var(--ease) infinite}.li.tick2 .cb::after{animation:tickFill 7s var(--ease) 1.2s infinite}
@keyframes tick{0%,18%{background:transparent;box-shadow:inset 0 0 0 1.5px #BDB39B}24%,90%{background:#17150F;box-shadow:inset 0 0 0 1.5px #17150F}100%{background:transparent}}
.li.tick1 .lt,.li.tick2 .lt{animation:strikeText 7s var(--ease) infinite}.li.tick2 .lt,.li.tick2 .lt::after{animation-delay:1.2s}
@keyframes strike{0%,18%{color:var(--text);text-decoration-color:transparent}24%,90%{color:#9A9384;text-decoration:line-through;text-decoration-color:#9A9384}100%{color:var(--text)}}
.li.new{background:#FFF6DA;box-shadow:inset 0 0 0 1px var(--soft);animation:newRow 7s var(--ease) infinite}
@keyframes slideNew{0%,40%{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0}50%,92%{opacity:1;transform:none;max-height:44px;padding-top:10px;padding-bottom:10px}100%{opacity:0}}
/* viz: care */
.pot{position:absolute;left:50%;bottom:44px;width:70px;height:52px;margin-left:-35px;background:#C9824F;border-radius:6px 6px 16px 16px}
.pot::before{content:'';position:absolute;left:-6px;right:-6px;top:-8px;height:12px;border-radius:5px;background:#B87444}
.leaves{position:absolute;left:50%;bottom:96px;width:0;height:0}
.leaf{position:absolute;left:0;bottom:0;width:16px;height:86px;margin-left:-8px;border-radius:50% 50% 45% 45%;background:linear-gradient(#5E8C4A,#3E6B33);transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
.leaf.l1{transform:rotate(-46deg);--r:-46deg}.leaf.l2{transform:rotate(-20deg);--r:-20deg;height:104px}.leaf.l3{transform:rotate(4deg);--r:4deg;height:112px}.leaf.l4{transform:rotate(28deg);--r:28deg;height:96px}.leaf.l5{transform:rotate(52deg);--r:52deg;height:78px}
@keyframes sway{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) + 4deg))}}
.drop{position:absolute;left:58%;top:10px;width:9px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#7FC8FF;opacity:0;animation:drip 3.5s ease-in infinite}
@keyframes drip{0%{transform:translateY(0);opacity:0}10%{opacity:1}60%{transform:translateY(70px);opacity:1}70%,100%{transform:translateY(74px);opacity:0}}
.log{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.days{display:flex;gap:5px}
.dd{width:12px;height:12px;border-radius:4px;background:#E2DBC7}
.dd.on{background:#5E8C4A}
.dd.now{position:relative;background:var(--accent)}
/* viz: agenda */
.ag{position:absolute;inset:16px;display:flex;flex-direction:column;gap:8px}
.ag-head{display:flex;justify-content:space-between;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 4px 4px}
.ag-row{position:relative;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px}
.ag-row.r2::after{animation-delay:3s}.ag-row.r3::after{animation-delay:6s}
@keyframes agHi{0%,4%{box-shadow:inset 0 0 0 1px var(--line)}10%,30%{box-shadow:inset 0 0 0 1.5px #17150F,0 10px 20px -14px rgba(40,25,0,.5)}36%,100%{box-shadow:inset 0 0 0 1px var(--line)}}
.ag-t{font-family:var(--fm);font-size:12px;color:var(--muted)}
.ag-tag{font-size:11px;padding:4px 8px;border-radius:999px;background:#F1ECDD}
.ag-tag.y{background:var(--accent)}
/* viz: bars */
.bars{position:absolute;left:20px;right:20px;bottom:44px;top:20px;display:flex;align-items:flex-end;gap:12px}
.bg{flex:1;display:flex;align-items:flex-end;gap:4px;height:100%}
.bar{flex:1;border-radius:6px 6px 2px 2px;background:#17150F;transform-origin:50% 100%;animation:grow 6s var(--ease) infinite}
.bar.est{background:repeating-linear-gradient(-45deg,transparent 0 4px,rgba(23,21,15,.22) 4px 6px);box-shadow:inset 0 0 0 1.5px rgba(23,21,15,.35)}
@keyframes grow{0%{transform:scaleY(.04)}22%,84%{transform:scaleY(1)}100%{transform:scaleY(.04)}}
.blbl{position:absolute;left:20px;right:20px;bottom:16px;display:flex;justify-content:space-between;gap:12px;font-family:var(--fm);font-size:10.5px;color:var(--muted)}
.blbl span{flex:1;text-align:center}
.legend{position:absolute;right:14px;top:12px;display:flex;gap:12px;font-size:11px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:5px}
.sw{width:10px;height:10px;border-radius:3px;background:#17150F}
.sw.est{background:repeating-linear-gradient(-45deg,transparent 0 3px,rgba(23,21,15,.3) 3px 4px);box-shadow:inset 0 0 0 1.2px rgba(23,21,15,.4)}
/* viz: export */
.files{position:absolute;left:50%;top:50%;width:0;height:0}
.file{position:absolute;left:-48px;top:-62px;width:96px;height:124px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 16px 30px -18px rgba(40,25,0,.45);padding:12px 10px;display:flex;flex-direction:column;justify-content:space-between;font-size:11.5px;color:var(--muted);animation:fan 7s var(--ease) infinite}
.file b{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#17150F}
.file.fa{--fx:-82px;--fr:-12deg}.file.fb{--fx:-28px;--fr:-4deg}.file.fc{--fx:28px;--fr:4deg;background:#17150F;color:#CFC8B8}.file.fc b{color:var(--accent)}.file.fd{--fx:82px;--fr:12deg}
@keyframes fan{0%,12%{transform:none}30%,80%{transform:translateX(var(--fx)) rotate(var(--fr))}96%,100%{transform:none}}

/* talk scan type */
.tst{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;margin-top:20px}
.modes{display:flex;flex-direction:column;gap:8px;margin-top:36px}
.mode-btn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:44px 1fr;gap:4px 16px;width:100%;padding:18px 20px;border-radius:22px;cursor:pointer;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.mode-btn:hover{background:rgba(23,21,15,.035)}
.mode-btn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.mode.is-on .mode-btn{background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -32px rgba(60,40,10,.4)}
.mode-ic{grid-row:span 2;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(23,21,15,.06);transition:background .4s}
.mode.is-on .mode-ic{background:var(--accent)}
.mode-t{font-family:var(--fd);font-weight:560;font-size:22px;letter-spacing:-.025em}
.mode-d{font-size:15px;color:var(--muted);line-height:1.5}
.tst-stage{position:relative;height:540px;border-radius:36px;background:#17150F;color:var(--cream);overflow:hidden;box-shadow:0 50px 100px -60px rgba(40,25,0,.7)}
.tst-stage::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 0%,color-mix(in oklab,var(--accent) 14%,transparent),transparent 70%)}
.pane{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px;opacity:0;transform:scale(.97);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none}
.pane.on{opacity:1;transform:none}
.wave{display:flex;align-items:center;gap:5px;height:120px}
.wave i{display:block;width:6px;border-radius:6px;background:linear-gradient(var(--accent),#FFE7A8);transform:scaleY(.25);animation:wvS 1.4s ease-in-out infinite}
@keyframes wv{0%,100%{height:12px;opacity:.6}50%{height:var(--h,90px);opacity:1}}
.cap-l{font-family:var(--fd);font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;text-align:center;max-width:420px;line-height:1.2}
.res{display:inline-flex;align-items:center;gap:10px;font-size:14px;padding:10px 16px;border-radius:999px;background:rgba(255,244,214,.07);box-shadow:inset 0 0 0 1px rgba(255,244,214,.14)}
.vf{position:relative;width:250px;height:300px}
.vf .rcp{position:absolute;inset:26px 34px;background:#FBF9F2;border-radius:6px;padding:16px 14px;display:flex;flex-direction:column;gap:8px;transform:rotate(-3deg)}
.vf .rcp .rl{background:#E6DFCD}
.corner{position:absolute;width:30px;height:30px;border-color:var(--accent);border-style:solid;border-width:0}
.corner.tl{left:0;top:0;border-left-width:3px;border-top-width:3px;border-top-left-radius:14px}.corner.tr{right:0;top:0;border-right-width:3px;border-top-width:3px;border-top-right-radius:14px}.corner.bl{left:0;bottom:0;border-left-width:3px;border-bottom-width:3px;border-bottom-left-radius:14px}.corner.br{right:0;bottom:0;border-right-width:3px;border-bottom-width:3px;border-bottom-right-radius:14px}
.vf .sl{position:absolute;left:12px;right:12px;height:2px;background:var(--accent);box-shadow:0 0 20px 5px var(--glow);animation:vscan 2.8s ease-in-out infinite}
@keyframes vscan{0%,100%{top:16px}50%{top:280px}}
.fields{position:absolute;right:-150px;top:40px;display:flex;flex-direction:column;gap:8px}
.fld{display:flex;flex-direction:column;gap:2px;font-size:13px;padding:9px 13px;border-radius:14px;background:rgba(255,244,214,.08);box-shadow:inset 0 0 0 1px rgba(255,244,214,.14);opacity:0;transform:translateX(-10px)}
.pane.on .fld{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pane.on .fld.g2{transition-delay:.5s}.pane.on .fld.g3{transition-delay:1s}.pane.on .fld.g1{transition-delay:.1s}
.fld i{font-style:normal;font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog2)}
.review{font-size:12px;color:var(--fog)}
.typebox{width:min(440px,100%);display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:rgba(255,244,214,.07);box-shadow:inset 0 0 0 1px rgba(255,244,214,.16);font-size:18px}
.typed{position:relative;display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:typeClip 4.5s steps(9,end) infinite}
@keyframes typing{0%,8%{width:0}45%,88%{width:9.6ch}100%{width:0}}
@keyframes caret{50%{border-color:transparent}}
.results{width:min(440px,100%);display:flex;flex-direction:column;gap:8px}
.rrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(255,244,214,.05);box-shadow:inset 0 0 0 1px rgba(255,244,214,.10);font-size:14px}
.rrow span{color:var(--fog);font-size:12.5px}
.langs{margin-top:110px}
.langs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px;margin-bottom:34px}
.marquee{position:relative;overflow:hidden;padding:6px 0}
.track{display:flex;gap:14px;width:max-content;animation:marq 70s linear infinite}
.track.rev{animation-direction:reverse;animation-duration:85s}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.lchip{display:flex;align-items:baseline;gap:14px;padding:15px 24px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.lchip span{font-family:var(--fd);font-size:24px;letter-spacing:-.02em}
.lchip i{font-style:normal;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lchip.y{background:var(--accent);box-shadow:none}
.lchip.y i{color:#3D382E}
.fine{font-size:13px;color:var(--muted)}
/* small helpers + viz refinements */
.blk{display:block}
.li.new{overflow:hidden}
.viz .bars{top:46px}
.file{width:84px;height:112px;left:-42px;top:-56px}
.file.fa{--fx:-64px}.file.fb{--fx:-22px}.file.fc{--fx:22px}.file.fd{--fx:64px}
.vf{margin-right:150px}
.vf .rcp{color:#17150F}
.typed{font-family:var(--fm);font-size:17px}
@keyframes typing{0%,8%{width:0}40%,88%{width:9ch}100%{width:0}}
.wave i{--h:80px;--s:.667}
.wave i:nth-child(3n){--h:54px;--s:.45;animation-delay:-.45s}
.wave i:nth-child(3n+1){--h:104px;--s:.867;animation-delay:-.9s}
.wave i:nth-child(4n){--h:118px;--s:.983;animation-delay:-.2s}
.wave i:nth-child(5n){--h:36px;--s:.3;animation-delay:-1.1s}
.wave i:nth-child(7n){--h:96px;--s:.8;animation-delay:-.65s}
.tst-lede{margin-top:24px}
.langs-h{font-size:clamp(30px,3.4vw,50px);letter-spacing:-.04em;line-height:1}
.langs-p{max-width:440px}
.m2{margin-top:12px}

/* night panel: film + privacy */
.night-wrap{margin:0 12px;border-radius:44px;background:var(--ink);color:var(--cream);overflow:hidden;position:relative;isolation:isolate}
.night-wrap::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 500px at 15% 0%,color-mix(in oklab,var(--accent) 7%,transparent),transparent 70%),radial-gradient(800px 600px at 100% 60%,rgba(127,200,255,.05),transparent 70%)}
.night .eb{color:var(--fog)}
.night .lede{color:#BDB6A7}
.film-sec{padding:130px 0 40px}
.film-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px;margin-bottom:44px}
.film{position:relative;display:block;aspect-ratio:16/9;border-radius:30px;overflow:hidden;text-decoration:none;color:var(--cream);background:radial-gradient(60% 70% at 50% 50%,#2A2214,#0E0D0A 70%);box-shadow:inset 0 0 0 1px rgba(255,244,214,.10),0 60px 120px -60px rgba(0,0,0,.8)}
.film-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(255,244,214,.10);transform:translate(-50%,-50%)}
.film-ring.a{width:30%;aspect-ratio:1}.film-ring.b{width:48%;aspect-ratio:1;border-style:dashed;animation:spin 90s linear infinite}.film-ring.c{width:70%;aspect-ratio:1;border-color:rgba(255,244,214,.06)}
.film-ripple{position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;border-radius:50%;border:1px solid var(--accent);transform:translate(-50%,-50%) scale(.6);opacity:0;animation:ripple 4.5s var(--ease) infinite}
.film-ripple.r2{animation-delay:1.5s}.film-ripple.r3{animation-delay:3s}
@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.6);opacity:.7}100%{transform:translate(-50%,-50%) scale(4.2);opacity:0}}
.film-orb{position:absolute;left:50%;top:50%;width:13%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 36% 30%,#FFF7DC,var(--accent) 52%,#B87800);box-shadow:0 0 80px 10px var(--glow),0 0 200px 40px color-mix(in oklab,var(--accent) 16%,transparent);transition:transform .8s var(--ease)}
.film:hover .film-orb{transform:translate(-50%,-50%) scale(1.08)}
.film-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;color:#17150F;z-index:2;transition:transform .6s var(--ease)}
.film:hover .film-play{transform:scale(1.12)}
.film-meta{position:absolute;left:28px;right:28px;bottom:24px;display:flex;justify-content:space-between;font-family:var(--fm);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#CFC8B8}
.film-tag{position:absolute;left:28px;top:24px;display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.film-links{margin-top:18px;font-size:14px;color:var(--fog)}
.film-links a{color:var(--cream)}
.privacy{padding:120px 0 130px}
.priv-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start;margin-top:56px}
.vault{position:relative;padding:28px;border-radius:30px;background:linear-gradient(180deg,rgba(255,244,214,.05),rgba(255,244,214,.02));box-shadow:inset 0 0 0 1px rgba(255,244,214,.10)}
.vault-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 190px;align-items:center}
.device{display:flex;flex-direction:column;gap:9px;padding:18px;border-radius:22px;background:#0F0E0B;box-shadow:inset 0 0 0 1px rgba(255,244,214,.12)}
.dv-head,.dv-foot{display:flex;align-items:center;gap:8px;font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.dv-head svg{color:var(--accent)}
.dv-foot{margin-top:4px;color:var(--fog2);letter-spacing:.06em;text-transform:none;font-size:11.5px}
.rec{position:relative;display:grid;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;background:rgba(255,244,214,.04);box-shadow:inset 0 0 0 1px rgba(255,244,214,.08);font-size:14px;overflow:hidden}
.rec .rw{grid-area:1/1;display:block;overflow:hidden}.rec .plain,.rec .ciph{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip}
.rec .rw-p{animation:encPo 8s var(--ease) infinite}.rec .rw-p .plain{animation:encPi 8s var(--ease) infinite}
.rec .ciph{font-family:var(--fm);font-size:12.5px;color:var(--accent);letter-spacing:.04em}.rec .rw-c{animation:encCo 8s var(--ease) infinite}.rec .rw-c .ciph{animation:encCi 8s var(--ease) infinite}
.rec .scan{position:absolute;top:6px;bottom:6px;left:0;right:0;opacity:0;animation:encS 8s var(--ease) infinite}.rec .scan::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 14px 2px var(--glow)}
.rec.r2 .rw,.rec.r2 .plain,.rec.r2 .ciph,.rec.r2 .scan{animation-delay:.5s}
.rec.r3 .rw,.rec.r3 .plain,.rec.r3 .ciph,.rec.r3 .scan{animation-delay:1s}
@keyframes encP{0%,16%{clip-path:inset(0 0 0 0)}40%,70%{clip-path:inset(0 0 0 100%)}94%,100%{clip-path:inset(0 0 0 0)}}
@keyframes encC{0%,16%{clip-path:inset(0 100% 0 0)}40%,70%{clip-path:inset(0 0 0 0)}94%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes encL{0%,15%{left:0;opacity:0}17%{opacity:1;left:0}40%{left:calc(100% - 2px);opacity:1}42%,69%{opacity:0;left:calc(100% - 2px)}71%{opacity:1}94%{left:0;opacity:1}96%,100%{opacity:0;left:0}}
.link{position:relative;height:2px;margin:0 10px;background:repeating-linear-gradient(90deg,rgba(255,244,214,.35) 0 6px,transparent 6px 12px);transition:opacity .6s}
.link::after{content:'';position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:travel 2.4s linear infinite}
@keyframes travel{from{transform:translateX(0)}to{transform:translateX(62px)}}
.link.off{opacity:.12}
.link.off::after{animation:none;opacity:0}
.cloud{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:22px;background:rgba(255,244,214,.05);box-shadow:inset 0 0 0 1px rgba(255,244,214,.14);transition:opacity .6s,filter .6s,transform .6s var(--ease)}
.cloud.off{opacity:.3;filter:grayscale(1);transform:scale(.96)}
.cloud-t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.cloud-s{font-size:12.5px;line-height:1.45;color:var(--fog)}
.ai-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,244,214,.10)}
.ai-switch{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:6px 16px 6px 6px;border-radius:999px;cursor:pointer;background:rgba(255,244,214,.06);box-shadow:inset 0 0 0 1px rgba(255,244,214,.16);font-weight:550;font-size:14.5px}
.ai-switch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sw-track{position:relative;width:52px;height:32px;border-radius:999px;background:#3A352C;transition:background .4s}
.sw-thumb{position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#F4EFE2;transition:transform .5s var(--ease)}
.ai-switch.is-on .sw-track{background:var(--accent)}
.ai-switch.is-on .sw-thumb{transform:translateX(20px);background:#17150F}
.ai-note{flex:1;min-width:240px;font-size:14px;line-height:1.5;color:#CFC8B8}
.points{display:flex;flex-direction:column}
.pt{display:grid;grid-template-columns:52px 1fr;gap:6px 8px;padding:26px 0;border-top:1px solid rgba(255,244,214,.10)}
.pt:first-child{border-top:0;padding-top:4px}
.pt-n{grid-row:span 2;font-family:var(--fm);font-size:13px;color:var(--accent);padding-top:6px}
.pt h3{font-family:var(--fd);font-weight:560;font-size:24px;letter-spacing:-.025em}
.pt p{font-size:15px;color:#BDB6A7;line-height:1.55}
.priv-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:40px;font-size:14px;color:var(--fog)}
.priv-links a{color:var(--cream)}

/* spaces */
.space-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:60px}
.sp{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:30px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.sp-viz{position:relative;height:200px;border-radius:20px;background:var(--paper2);margin-bottom:10px;display:grid;place-items:center;overflow:hidden}
.sp-top{display:flex;align-items:center;justify-content:space-between}
.sp-n{font-family:var(--fm);font-size:12px;color:var(--muted)}
.sp-tag{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(23,21,15,.06)}
.sp-tag.y{background:var(--accent)}
.sp h3{font-family:var(--fd);font-weight:560;font-size:28px;letter-spacing:-.03em;line-height:1.05}
.sp p{font-size:15px;color:var(--muted)}
.avs{display:flex;align-items:center}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;color:#17150F;box-shadow:0 0 0 3px var(--paper2)}
.av + .av{margin-left:-10px}
.av.a1{background:#FFC83D}.av.a2{background:#F2B8A2}.av.a3{background:#A9D8C0}.av.a4{background:#AFC9F2}.av.a5{background:#CDBDF0}.av.a6{background:#E9DFC6}
.av.join{animation:join 6s var(--ease) infinite}
@keyframes join{0%,20%{opacity:0;transform:translateX(24px) scale(.8)}34%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateX(0) scale(.9)}}
.lockbadge{position:absolute;right:calc(50% - 46px);top:calc(50% - 40px);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#17150F;color:var(--accent)}
.shared{position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.shared span{font-size:11.5px;padding:5px 9px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.team .av{width:38px;height:38px;font-size:12px;margin:0!important}
.role{position:absolute;top:14px;right:14px;font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:#17150F;color:var(--accent)}
.invite{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;margin-top:16px;padding:28px 30px;border-radius:30px;background:var(--paper2)}
.invite p{font-size:16px;color:var(--text);max-width:560px}
.flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fstep{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;padding:10px 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.fstep.s2::after{animation-delay:1s}.fstep.s3::after{animation-delay:2s}
@keyframes fstep{0%,10%{box-shadow:inset 0 0 0 1px var(--line)}18%,40%{box-shadow:inset 0 0 0 1.5px #17150F,0 10px 20px -14px rgba(40,25,0,.5)}50%,100%{box-shadow:inset 0 0 0 1px var(--line)}}
.fstep code{font-family:var(--fm);font-size:12px;letter-spacing:.08em}
.farrow{color:var(--muted)}
.sp-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:22px}
.tlink{font-weight:550;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.tlink:hover{border-color:var(--accent)}
/* plans */
.plans-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.billing{display:inline-flex;padding:5px;border-radius:999px;background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line)}
.bill{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;font-weight:550;font-size:14.5px;cursor:pointer;color:var(--muted);transition:background .4s,color .4s,box-shadow .4s}
.bill.is-on{background:var(--card);color:var(--text);box-shadow:0 6px 18px -10px rgba(40,25,0,.45),inset 0 0 0 1px var(--line)}
.bill:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.save{font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;padding:3px 7px;border-radius:999px;background:var(--accent);color:#17150F}
.planned{display:inline-flex;align-items:center;gap:10px;margin-top:44px;font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:30px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(23,21,15,.2),0 40px 70px -44px rgba(60,40,0,.5)}
.plan.free{background:transparent;box-shadow:none;border:1.5px dashed rgba(23,21,15,.24)}
.plan-k{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan h3{font-family:var(--fd);font-weight:580;font-size:30px;letter-spacing:-.03em;line-height:1}
.plan-tag{font-size:14.5px;color:var(--muted);min-height:44px}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-family:var(--fd);font-weight:560;font-size:50px;letter-spacing:-.045em;line-height:1}
.price span{font-size:14px;color:var(--muted)}
.price-sub{font-size:13px;color:var(--muted);min-height:20px}
.mins{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--paper2)}
.mins b{font-family:var(--fd);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1}
.mins span{font-size:12.5px;line-height:1.35;color:var(--muted)}
.feat{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.feat li{display:flex;gap:10px;font-size:14.5px;line-height:1.4}
.feat svg{flex:none;margin-top:2px}
.soon{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:999px;font-weight:550;font-size:14px;color:var(--muted);background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line)}
.plan.free .soon{background:transparent}
.plan-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.pn{padding:22px 24px;border-radius:24px;background:var(--paper2);font-size:14.5px;line-height:1.55;color:var(--muted)}
.pn b{color:var(--text);font-weight:600}
.fineprint{margin-top:22px;font-size:12.5px;line-height:1.55;color:var(--muted);max-width:900px}

/* availability */
.avail{padding-top:0}
.avail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.avc.dark{min-height:320px;padding:44px 48px}
.avc.dark .ghost-phone{right:12%;bottom:-150px}
.avc{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px;border-radius:30px;overflow:hidden;min-height:360px}
.avc.dark{background:#17150F;color:var(--cream)}
.avc.light{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.avc h3{font-family:var(--fd);font-weight:560;font-size:clamp(30px,3vw,42px);letter-spacing:-.035em;line-height:1;max-width:400px}
.avc p{font-size:15.5px;line-height:1.55;max-width:400px}
.avc.dark p{color:#BDB6A7}
.avc.light p{color:var(--muted)}
.avc .eyebrow{color:var(--muted);font-size:12px;line-height:1.5}
.avc.dark .eyebrow{color:var(--fog)}
.avc .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto}
.url{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:12.5px;padding:7px 12px;border-radius:999px;background:var(--paper2);align-self:flex-start}
.tf{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:rgba(255,244,214,.06);box-shadow:inset 0 0 0 1px rgba(255,244,214,.14);color:#CFC8B8}
.ghost-phone{position:absolute;right:-24px;bottom:-130px;width:210px;height:420px;border-radius:44px;border:1.5px solid rgba(255,244,214,.16);transform:rotate(12deg)}
.gp-mascot{position:absolute;left:50%;top:18%;width:96px;height:117px;margin-left:-48px;overflow:visible;animation:breath 4s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(.92)}50%{transform:scale(1.06)}}
.note-s{font-size:13px;color:var(--muted)}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq-side{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.faq-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:22px 4px;cursor:pointer;font-family:var(--fd);font-weight:520;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.015em;line-height:1.25}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.qa-ic{position:relative;flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(23,21,15,.2);transition:transform .5s var(--ease),background .3s}
.qa-ic::before,.qa-ic::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.6px;margin:-.8px 0 0 -5.5px;background:currentColor;border-radius:2px}
.qa-ic::after{transform:rotate(90deg)}
.qa[open] .qa-ic{transform:rotate(45deg);background:var(--accent);box-shadow:none}
.qa-a{padding:0 60px 26px 4px;font-size:15.5px;line-height:1.6;color:var(--muted)}
.qa-a a{color:var(--text)}
.qa[open] .qa-a{animation:qaIn .6s var(--ease)}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* final cta + footer */
.final-wrap{margin:0 12px 12px;border-radius:44px;background:var(--ink);color:var(--cream);overflow:hidden;position:relative;isolation:isolate}
.final{position:relative;padding:150px 24px 120px;text-align:center}
.final::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 420px at 50% 30%,color-mix(in oklab,var(--accent) 14%,transparent),transparent 70%)}
.stars{position:absolute;inset:0;z-index:-1;opacity:.7;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#FFF4D6,transparent),radial-gradient(1px 1px at 28% 62%,#FFF4D6,transparent),radial-gradient(1.4px 1.4px at 44% 24%,#FFF4D6,transparent),radial-gradient(1px 1px at 63% 78%,#FFF4D6,transparent),radial-gradient(1.2px 1.2px at 78% 34%,#FFF4D6,transparent),radial-gradient(1px 1px at 88% 66%,#FFF4D6,transparent),radial-gradient(1.3px 1.3px at 6% 84%,#FFF4D6,transparent),radial-gradient(1px 1px at 52% 50%,#FFF4D6,transparent),radial-gradient(1.1px 1.1px at 70% 10%,#FFF4D6,transparent),radial-gradient(1px 1px at 36% 90%,#FFF4D6,transparent);background-size:520px 360px;animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.45}50%{opacity:.85}}
.final-orb{position:relative;width:250px;height:250px;margin:0 auto 30px}
.final-orb::before{content:'';position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle closest-side,color-mix(in oklab,var(--accent) 30%,transparent),transparent 75%)}
.final-orb .mascot{position:absolute;inset:0;margin:auto;height:200px;aspect-ratio:673/820}
.fo-ring{position:absolute;inset:4px;border-radius:50%;background:conic-gradient(from 0deg,#FF9B8A,#FFC83D,#8BE3B4,#7FC8FF,#B9A2FF,#FF9B8A);-webkit-mask:radial-gradient(circle closest-side,transparent 88%,#000 90%,#000 97%,transparent 99%);mask:radial-gradient(circle closest-side,transparent 88%,#000 90%,#000 97%,transparent 99%);animation:spin 8s linear infinite}
.fo-ripple{position:absolute;inset:44px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ripple2 4s var(--ease) infinite}
.fo-ripple.r2{animation-delay:2s}
@keyframes ripple2{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.8);opacity:0}}
.final .eyebrow{color:var(--fog)}
.final-h{font-size:clamp(52px,8.4vw,132px);margin:18px 0 22px;color:#FAF6EA}
.final-p{font-size:18px;line-height:1.5;color:#CFC8B8;max-width:520px;margin:0 auto}
.nform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:580px;margin:38px auto 0;text-align:left}
.nlabel{grid-column:1/-1;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);padding-left:20px}
.nin{height:56px;width:100%;padding:0 22px;border-radius:999px;border:0;background:rgba(255,244,214,.07);box-shadow:inset 0 0 0 1px rgba(255,244,214,.2);color:#fff;font-family:var(--fu);font-size:16px;outline:none;transition:box-shadow .3s,background .3s}
.nin::placeholder{color:#8E887B}
.nin:focus{box-shadow:inset 0 0 0 1.5px var(--accent);background:rgba(255,244,214,.1)}
.nform .btn{height:56px}
.consent{grid-column:1/-1;display:flex;align-items:center;gap:12px;min-height:44px;padding-left:20px;font-size:13.5px;color:#BDB6A7;cursor:pointer}
.consent input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none}
.nform-ok{display:inline-flex;align-items:center;gap:10px;margin-top:38px;padding:16px 22px;border-radius:999px;background:rgba(255,244,214,.07);box-shadow:inset 0 0 0 1px var(--soft);font-size:16px}
.final-fine{margin-top:20px;font-size:13px;color:var(--fog2)}
.final-fine a{color:#CFC8B8}
.foot{position:relative;padding:20px 0 0;color:#CFC8B8}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:40px;padding-top:56px;border-top:1px solid rgba(255,244,214,.10)}
.foot-brand .brand{margin:0}
.foot-brand p{margin-top:12px;font-size:15px;color:var(--fog)}
.mail{display:inline-block;margin-top:16px;color:var(--cream);font-size:15px}
.foot h4{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fog2);margin-bottom:10px}
.foot nav a{display:block;padding:9px 0;color:#DCD6C7;text-decoration:none;font-size:15px}
.foot nav a:hover{color:var(--accent)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;font-size:13px;color:var(--fog2)}
.foot-big{display:block;font-family:var(--fd);font-weight:600;font-size:clamp(84px,17vw,280px);letter-spacing:-.06em;line-height:.8;text-align:center;white-space:nowrap;background:linear-gradient(180deg,rgba(255,244,214,.11) 12%,rgba(255,244,214,.015) 82%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:36px;padding-bottom:6px;user-select:none}
.wave i{height:120px}

/* responsive */
@media (max-width:1100px){
.say-grid,.tst,.priv-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
.bc,.bc.s7,.bc.s5,.bc.s3{grid-column:span 6}
.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.faq-side{position:static}
.stage{gap:24px;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr)}
.orb-anchor{width:180px;height:200px}
}
@media (max-width:760px){
.wrap,.hero-inner{padding:0 20px}
.sec{padding:96px 0}
.nav{padding-left:14px}
.nav-links{display:none}
.hero{padding-top:100px;min-height:0}
.stage{grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px;min-height:0}
.orb-anchor{order:1;width:150px;height:172px}
.tx-wrap{order:2;align-items:center;text-align:center;margin-top:48px}
.tw{margin:0 .12em}
.ans{order:3;justify-self:center;text-align:center}
.ans .who,.crumbs{justify-content:center}
.ans-card{align-items:center}
.hero-title{margin-bottom:22px}
.hero-note{margin-left:0}
.mani{padding:110px 0 70px}
.dawn{height:300px}
.bc,.bc.s7,.bc.s5,.bc.s3{grid-column:span 12}
.bc{min-height:0}
.say-stage{height:600px}
.phone{scale:.86}
.orbit{display:none}
.tst-stage{height:460px}
.vf{margin-right:0}
.fields{display:none}
.vault{padding:18px}
.vault-row{grid-template-columns:minmax(0,1fr)}
.link{width:2px;height:30px;margin:8px auto;background:repeating-linear-gradient(180deg,rgba(255,244,214,.35) 0 6px,transparent 6px 12px)}
.link::after{display:none}
.space-grid,.plan-grid,.plan-notes,.avail-grid{grid-template-columns:minmax(0,1fr)}
.invite{grid-template-columns:minmax(0,1fr);padding:24px}
.nform{grid-template-columns:minmax(0,1fr)}
.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-brand{grid-column:1/-1}
.night-wrap,.final-wrap{margin-left:6px;margin-right:6px;border-radius:30px}
.qa-a{padding-right:8px}
.film{aspect-ratio:4/5}
.ghost-phone{opacity:.5}
}
html.nj-still .nj *,html.nj-still .nj *::before,html.nj-still .nj *::after{animation:none!important;transition:none!important}
html.nj-still .typed,html.nj-still .typed-in{transform:none}
html.nj-still .rec .rw-c,html.nj-still .rec .scan{display:none}
@media (prefers-reduced-motion:reduce){
.nj *,.nj *::before,.nj *::after{animation:none!important;transition:none!important}
.nj .typed,.nj .typed-in{transform:none}
.nj .rec .rw-c,.nj .rec .scan{display:none}
}
.if-wrap{display:contents}
[hidden]{display:none!important}
.film-video{position:absolute;inset:0;z-index:5;width:100%;height:100%;object-fit:cover;background:#000;border-radius:inherit}

.nj .design-style-1{animation-delay: .18s}
.nj .design-style-2{animation-delay: .3s}
.nj .design-style-3{animation-delay: .46s}
.nj .design-style-4{animation-delay: .62s}
.nj .design-style-5{animation-delay: .74s}
.nj .design-style-6{animation-delay: .88s}
.nj .design-style-7{height: 38%; animation-delay: 0s}
.nj .design-style-8{height: 56%; animation-delay: .05s}
.nj .design-style-9{height: 62%; animation-delay: .1s}
.nj .design-style-10{height: 48%; animation-delay: .15s}
.nj .design-style-11{height: 30%; animation-delay: .2s}
.nj .design-style-12{height: 70%; animation-delay: .25s}
.nj .design-style-13{height: 84%; animation-delay: .3s}
.nj .design-style-14{height: 52%; animation-delay: .35s}
.nj .design-style-15{height: 46%; animation-delay: .4s}
.nj .design-style-16{height: 64%; animation-delay: .45s}
.nj .design-style-17{height: 58%; animation-delay: .5s}
.nj .design-style-18{height: 40%; animation-delay: .55s}
/* Production wiring retains the supplied visual composition. */
.skip-link{position:fixed;top:8px;left:16px;z-index:1000;background:#FFC83D;color:#17150F;padding:14px 20px;border-radius:10px;transform:translateY(-150%);font:600 16px sans-serif}
.skip-link:focus{transform:translateY(0);outline:3px solid #fff;outline-offset:3px}
.nj .btn-sm{min-height:44px}
.nj button:focus-visible,.nj a:focus-visible,.nj summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.nj .anchor-alias{display:block;position:relative;scroll-margin-top:110px}
.nj .film-trigger{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:inherit}
.nj .film-video{object-fit:contain}
.nj .notify-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nj .notify-status{grid-column:1/-1;margin:0;font-size:14px;line-height:1.6;color:var(--cream)}
.nj .notify-status:empty{display:none}
.nj .notify-status[data-state="error"]{color:#ffb7ac}
.nj .nform button:disabled{opacity:.65;cursor:wait}
.nj .motion-toggle{min-height:44px;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:8px 18px;font:inherit;color:var(--cream);background:transparent;cursor:pointer}
html.nj-still{scroll-behavior:auto}
html.nj-still .nj .rise,html.nj-still .nj [data-reveal]{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.nj .rise,.nj [data-reveal]{opacity:1;transform:none;filter:none}}

.nj .store-badge{display:inline-flex;align-items:center;min-height:48px;width:170px;max-width:100%}
.nj .store-badge img{display:block;width:100%;height:auto}

html:not(.nj-motion):not(.nj-still) .nj *,html:not(.nj-motion):not(.nj-still) .nj *::before,html:not(.nj-motion):not(.nj-still) .nj *::after{animation:none!important;transition:none!important}
html:not(.nj-motion):not(.nj-still) .nj .typed,html:not(.nj-motion):not(.nj-still) .nj .typed-in{transform:none}
html:not(.nj-motion):not(.nj-still) .nj .motion-toggle{display:none}
html:not(.nj-motion):not(.nj-still) .nj .rec :is(.rw-c,.scan){display:none}
.nj .film-links a,.nj .priv-links span a,.nj .qa-a a,.nj .final-fine a,.nj .tlink,.nj .mail{display:inline-flex;align-items:center;min-height:44px}
.nj .foot nav a{display:flex;align-items:center;min-height:44px}
/* Amount bindings inherit the display type; only the billing label is small. */
.nj .price b > span{font-size:inherit;color:inherit}
.nj .price{flex-wrap:wrap;row-gap:4px}
.nj .price > span{white-space:nowrap}

/* Resume hidden illustrations at the same animation phase when they return. */
:is(html[data-motion-suspended="true"] .nj, .nj [data-motion-suspended="true"], .nj .pane:not(.on), .nj .scr:not(.on)),
:is(html[data-motion-suspended="true"] .nj, .nj [data-motion-suspended="true"], .nj .pane:not(.on), .nj .scr:not(.on))::before,
:is(html[data-motion-suspended="true"] .nj, .nj [data-motion-suspended="true"], .nj .pane:not(.on), .nj .scr:not(.on))::after,
:is(html[data-motion-suspended="true"] .nj, .nj [data-motion-suspended="true"], .nj .pane:not(.on), .nj .scr:not(.on)) *,
:is(html[data-motion-suspended="true"] .nj, .nj [data-motion-suspended="true"], .nj .pane:not(.on), .nj .scr:not(.on)) *::before,
:is(html[data-motion-suspended="true"] .nj, .nj [data-motion-suspended="true"], .nj .pane:not(.on), .nj .scr:not(.on)) *::after{animation-play-state:paused!important}

/* Keep the supplied scan paths and timing without animating layout offsets. */
.nj .scanline{animation-name:nj-receipt-scan}
@keyframes nj-receipt-scan{
  0%,18%{transform:translateY(0);opacity:0}
  22%{opacity:1}
  44%{transform:translateY(146px);opacity:1}
  48%,100%{transform:translateY(146px);opacity:0}
}
@media(prefers-reduced-motion:no-preference){
  html.nj-motion:not(.nj-still) .nj .vf .sl{top:16px;animation-name:nj-capture-scan}
}
@keyframes nj-capture-scan{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(264px)}
}

/* Display-sized layers keep SVG detail without oversized compositor textures. */
.nj .mascot-scene{position:absolute;pointer-events:none}
.nj .mascot-scene>.m-body{position:relative;width:100%;height:100%;overflow:visible;transform-origin:50% 100%;transform:translateZ(0);will-change:transform;animation-name:mascot-float}
.nj .mascot-part,.nj .mascot-shadow-group{position:absolute;overflow:visible;pointer-events:none}
.nj .mascot-part-moving{transform:translateZ(0);will-change:transform}
/* These original shadows surround multiple independently moving children. */
/* Shared shadows are baked into each part's static tile (see initializeMascotLayers). */
.nj .mascot.is-think .mascot-scene>.m-body{animation-name:mascot-float,ponder}
.nj .mascot.is-answer .mascot-scene>.m-body{animation-name:mascot-hop,mascot-float}
.nj .mascot.is-wave .mascot-scene .diary-eye{animation-name:blink,mascot-look}
@keyframes mascot-float{0%,100%{translate:0 0}50%{translate:0 calc(-16px * var(--mascot-scale))}}
@keyframes mascot-hop{0%,100%{translate:0 0}35%{translate:0 calc(-40px * var(--mascot-scale))}70%{translate:0 calc(3px * var(--mascot-scale))}}
@keyframes mascot-look{0%,18%,100%{translate:0 0}28%,44%{translate:calc(-12px * var(--mascot-scale)) calc(4px * var(--mascot-scale))}56%,74%{translate:calc(12px * var(--mascot-scale)) calc(-3px * var(--mascot-scale))}86%{translate:0 0}}

/* Cached field layers and compositor animations from the supplied performance edition. */



.grain{display:none}
.hero.fl-ready .field{inset:auto;left:0;top:0;width:auto;height:auto;will-change:transform}
.fl-stack{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.fl-near,.fx-layer{position:absolute;left:0;top:0;width:100%;height:100%}
.fl-near,.fl-lamp{will-change:transform}
.fl-canvas{position:absolute;left:-40px;top:-40px}
.fl-node{position:absolute;left:0;top:0;width:4.05px;height:4.05px;border-radius:50%;background:rgba(255,241,210,.26);transition:opacity .4s}
.fl-node.is-hid{background:rgba(255,241,210,.073)}
.fl-node.is-off{opacity:0}
.fl-lamp,.fl-ripple{position:absolute;left:0;top:0}
.fl-dim{transition:opacity .6s var(--ease)}
.hero.is-dim .fl-dim{opacity:.5}
.fl-labels{position:absolute;inset:0}
.fl-label{position:absolute;left:0;top:0;font:500 11px/1 var(--fm);color:#ECE5D4;white-space:nowrap;opacity:0}
.aura{position:absolute;left:0;top:0;width:0;height:0}
.aura-glow,.aura-ring,.aura-wobble{position:absolute;display:block}
.aura-glow{border-radius:50%;background:radial-gradient(circle closest-side,color-mix(in oklab,var(--accent) 44%,transparent) 6%,color-mix(in oklab,var(--accent) 8%,transparent) 44%,transparent);opacity:.64;transition:opacity .6s}
html.nj-motion .aura[data-ph="ask"] .aura-glow{animation:auraVoice 1.3s linear infinite}
html.nj-motion .aura[data-ph="think"] .aura-glow{animation:auraThink .16s ease-in-out infinite alternate}
html.nj-motion .aura[data-ph="answer"] .aura-glow{animation:auraCalm .785s ease-in-out infinite alternate}
@keyframes auraVoice{0%{opacity:.78}12%{opacity:.98}25%{opacity:.8}37%{opacity:1}50%{opacity:.79}62%{opacity:.94}75%{opacity:.83}87%{opacity:.97}100%{opacity:.78}}
@keyframes auraThink{from{opacity:.65}to{opacity:.75}}
@keyframes auraCalm{from{opacity:.62}to{opacity:.68}}
.aura-ring{opacity:.35;transition:opacity .6s;animation:spin 10.47s linear infinite}
.aura[data-ph="ask"] .aura-ring,.aura[data-ph="think"] .aura-ring{opacity:1}
.fx-spark{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle closest-side,color-mix(in oklab,var(--accent) 90%,transparent),transparent);opacity:0}
.fx-spark::after{content:"";position:absolute;left:9px;top:9px;width:8px;height:8px;border-radius:50%;background:#FFF6DA}
.fx-beam{position:absolute;left:0;top:-.65px;height:1.3px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent) 50%,transparent) 20%,color-mix(in oklab,var(--accent) 95%,transparent));opacity:0}
.fx-beam-dot{position:absolute;left:-2.2px;top:-2.2px;width:4.4px;height:4.4px;border-radius:50%;background:var(--accent);opacity:0}
.fx-hi{position:absolute;left:0;top:0;width:0;height:0}
.fx-hi>span{position:absolute;border-radius:50%}
.fx-hi-glow{left:-30px;top:-30px;width:60px;height:60px;background:radial-gradient(circle closest-side,color-mix(in oklab,var(--accent) 66%,transparent),transparent)}
.fx-hi-ring{left:-11px;top:-11px;width:22px;height:22px;border:1px solid color-mix(in oklab,var(--accent) 70%,transparent)}
.fx-hi-core{left:-4.2px;top:-4.2px;width:8.4px;height:8.4px;background:#FFF6DA}
html.nj-motion .fx-hi-glow{animation:hiGlow .785s ease-in-out infinite alternate}
html.nj-motion .fx-hi-ring{animation:hiRing .785s ease-in-out infinite alternate}
@keyframes hiGlow{from{opacity:.8}to{opacity:1}}
@keyframes hiRing{from{transform:scale(.91)}to{transform:scale(1.09)}}
.fx-clock{position:absolute;left:-18px;top:-18px;width:36px;height:36px;overflow:visible;transform:rotate(-90deg)}
.fx-clock circle{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:100.53;stroke-dashoffset:100.53}
html.nj-motion .fx-clock circle{animation:clockDraw 1.3s linear forwards}
html.nj-still .fx-clock circle{stroke-dashoffset:0}
@keyframes clockDraw{to{stroke-dashoffset:0}}
.fx-pill{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 11px;border-radius:15px;background:rgba(18,16,12,.86);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 50%,transparent);font:500 12.5px/1 var(--fu);color:#F4EFE2;white-space:nowrap;opacity:0;transition:opacity .55s linear .18s}
.fx-pill::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.fx-pill.on{opacity:1}


.nj .mascot-part.diary-pulse-line path{animation:none;stroke-dasharray:none}
.nj .ecg-clip,.nj .ecg-inner{position:absolute;inset:0}
.nj .ecg-clip{overflow:hidden;animation:ecgClip 2.6s linear infinite}
.nj .ecg-inner{animation:ecgInner 2.6s linear infinite}
@keyframes ecgClip{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes ecgInner{0%{transform:translateX(100%)}55%{transform:translateX(0)}100%{transform:translateX(-100%)}}


.fo-ring.fo-ring--canvas{background:none;-webkit-mask:none;mask:none}
.fo-ring-canvas{position:absolute;inset:0;width:100%;height:100%}
.ghost-phone::before{content:"";position:absolute;left:50%;top:calc(18% + 72px);width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;background:radial-gradient(circle closest-side,color-mix(in oklab,var(--accent) 34%,transparent),transparent 72%)}


.live-dot::after,.dd.now::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--glow);animation:pulseRing 2.4s ease-out infinite}
.dd.now::after{animation-name:pulseSquare}
@keyframes pulseRing{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(3.85);opacity:0}}
@keyframes pulseSquare{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(2.65);opacity:0}}


.ap-row::after{content:"";position:absolute;inset:-1px;border-radius:17px;border:1.5px solid #245847;opacity:0;pointer-events:none}
@keyframes apRing{0%{opacity:1;transform:scale(1)}75%{opacity:0;transform:scale(1.045)}100%{opacity:0;transform:scale(1.045)}}


.drw.d-b::after{content:"";position:absolute;inset:0;border-radius:9px;box-shadow:0 18px 30px -12px rgba(40,25,0,.4);opacity:0;animation:pullShadow 6s var(--ease) infinite;pointer-events:none}
@keyframes pullShadow{0%,12%{opacity:0}26%,74%{opacity:1}88%,100%{opacity:0}}
.cb::after{content:"";position:absolute;inset:0;border-radius:6px;background:#17150F;opacity:0}
@keyframes tickFill{0%,18%{opacity:0}24%,90%{opacity:1}100%{opacity:0}}
.li .lt{position:relative}
.li.tick1 .lt::after,.li.tick2 .lt::after{content:"";position:absolute;left:0;right:0;top:52%;height:1.5px;background:#5E584C;transform:scaleX(0);transform-origin:0 50%;animation:strikeLine 7s var(--ease) infinite}
.li.tick2 .lt::after{animation-delay:1.2s}
@keyframes strikeText{0%,18%{opacity:1}24%,90%{opacity:.55}100%{opacity:1}}
@keyframes strikeLine{0%,18%{transform:scaleX(0)}24%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes listShift{0%,40%{transform:translateY(-41px)}50%,100%{transform:translateY(0)}}
@keyframes newRow{0%,40%{opacity:0;transform:translateY(-8px)}50%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.ag-row::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1.5px #17150F,0 10px 20px -14px rgba(40,25,0,.5);opacity:0;animation:agRing 9s var(--ease) infinite;pointer-events:none}
@keyframes agRing{0%,4%{opacity:0}10%,30%{opacity:1}36%,100%{opacity:0}}
.fstep::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #17150F,0 10px 20px -14px rgba(40,25,0,.5);opacity:0;animation:fstepRing 6s var(--ease) infinite;pointer-events:none}
@keyframes fstepRing{0%,10%{opacity:0}18%,40%{opacity:1}50%,100%{opacity:0}}


@keyframes wvS{0%,100%{transform:scaleY(.1);opacity:.6}50%{transform:scaleY(var(--s,.667));opacity:1}}
.typed-in{display:inline-block;padding-right:3px;animation:typeText 4.5s steps(9,end) infinite}
.typed::after{content:"";position:absolute;right:0;top:.14em;bottom:.14em;width:2px;background:var(--accent);animation:caretBlink .8s step-end infinite}
@keyframes typeClip{0%,8%{transform:translateX(-100%)}40%,88%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes typeText{0%,8%{transform:translateX(100%)}40%,88%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes caretBlink{50%{opacity:0}}


.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:1;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(247,244,233,0))}
.marquee::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(247,244,233,0))}


@keyframes encPo{0%,16%{transform:translateX(0)}40%,70%{transform:translateX(100%)}94%,100%{transform:translateX(0)}}
@keyframes encPi{0%,16%{transform:translateX(0)}40%,70%{transform:translateX(-100%)}94%,100%{transform:translateX(0)}}
@keyframes encCo{0%,16%{transform:translateX(-100%)}40%,70%{transform:translateX(0)}94%,100%{transform:translateX(-100%)}}
@keyframes encCi{0%,16%{transform:translateX(100%)}40%,70%{transform:translateX(0)}94%,100%{transform:translateX(100%)}}
@keyframes encS{0%,15%{transform:translateX(0);opacity:0}17%{transform:translateX(0);opacity:1}40%{transform:translateX(calc(100% - 2px));opacity:1}42%,69%{transform:translateX(calc(100% - 2px));opacity:0}71%{opacity:1}94%{transform:translateX(0);opacity:1}96%,100%{transform:translateX(0);opacity:0}}

.tst-stage,.night-wrap,.final-wrap{overflow:visible}
.tst-stage::before,.night-wrap::before,.stars{border-radius:inherit}
.foot-big{overflow:hidden;border-radius:0 0 44px 44px}

.orbit{animation:none}
@media (max-width:760px){
.foot-big{border-radius:0 0 30px 30px}

.fo-ripple{animation-name:ripple2s}
}
@keyframes ripple2s{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.2);opacity:0}}

.nj .m-hop,.nj .m-pose,.nj .m-eyes{position:absolute;inset:0;pointer-events:none}
.nj .m-pose{transform-origin:50% 100%;transition:rotate .7s var(--ease)}
.nj .mascot .mascot-scene>.m-body,.nj .mascot.is-think .mascot-scene>.m-body,.nj .mascot.is-answer .mascot-scene>.m-body{animation:mascot-float 5.5s ease-in-out infinite;rotate:none;transition:none}
.nj .mascot.is-ask .m-pose{rotate:-3deg}
.nj .mascot.is-answer .m-pose{rotate:3deg}
.nj .mascot.is-think .m-pose{animation:ponder 1.1s ease-in-out infinite alternate}
.nj .mascot.is-answer .m-hop{animation:mascot-hop .85s var(--ease) 1}
.nj .mascot.is-wave .mascot-scene .diary-eye{animation-name:blink}
.nj .mascot.is-wave .m-eyes{animation:mascot-look 9s ease-in-out infinite}

.hero[data-motion-suspended="true"] canvas.field,.hero[data-motion-suspended="true"] .fl-stack,
.final-orb[data-motion-suspended="true"] .fo-ring-canvas{visibility:hidden}

.user-guide{display:grid;gap:16px;width:100%;margin-top:14px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff0bc;scroll-margin-top:110px}
.user-guide h3{font-size:clamp(24px,3vw,32px);line-height:1.12}
.user-guide p{margin:0}
.user-guide>.btn{justify-self:start;max-width:100%;white-space:normal;text-align:center}
.user-guide .user-guide-format{font-size:13px;line-height:1.6;color:#56665f}