:root{--paper:#152735;--ink:#f2e8d5;--muted:#adbdc6;--line:#344550;--mint:#f0ddba}html,body{background:#061727;color:var(--ink)}body{background-image:none}canvas{clip-path:none;opacity:0;transition:opacity 1.5s ease}body.scene-ready canvas{opacity:1}header{top:36px;left:6vw;color:#f4eee2;font-weight:500;letter-spacing:-.5px}header img{width:40px;height:40px}.hero{display:block;min-height:100svh;padding:0 6vw;isolation:isolate}.hero-copy{position:absolute;top:29%;width:min(36vw,485px);padding:0;border:0;background:none;box-shadow:none}.hero-copy h1{font-size:clamp(56px,5.7vw,86px);line-height:1.02;letter-spacing:-.055em;color:#f5e8cd;margin-bottom:27px;text-wrap:balance}.hero-copy p{color:#d6dce0;max-width:380px;font-size:14px;line-height:1.95}.actions{margin-top:28px;gap:12px}.button{border-color:#9ea8ad66;background:#0a1b2a88;color:#f4e9d2;padding:14px 20px;border-radius:4px;min-height:48px}.button.primary{background:#f1dfbc;border-color:#f1dfbc;color:#172c36}.button:hover{filter:brightness(1.08)}.scroll{color:#a9bac7;font-size:10px;letter-spacing:.04em;margin-top:36px}.demo-choices a{color:#f4e9d2}.section{padding-top:18vh;padding-bottom:18vh}.sample-section{padding-top:12vh;padding-bottom:8vh;display:flex;justify-content:flex-end}.sample-section .product{width:390px}.panel,.product{background:#112432ee;border:1px solid #b4ccd321;box-shadow:0 20px 70px #0003;border-radius:8px;color:var(--ink)}.panel{padding:42px}.product{background:#213340f5;color:#d7dfe2;border-color:#9cb5c02b;transform:none!important}.product h3{color:#e7e8e2}.product .row,.product .inbox-item,.exception{border-color:#819aa329}.panel h2{color:#f0dfbf}.tile{background:#344954;color:#d4d4c4}.row dt .i{color:#b1c0c7}.tag,.tag.neutral{background:#33474d;color:#c0d6cd;border-color:#607d7544}.tag.amber{background:#544631;color:#ead3a3;border-color:#957d4b66}.mock-buttons span,.mock-buttons span:first-child{background:#31464c;color:#dbe4df;border-color:#70878655}.number{color:#f1d7a4}.ticks .i{color:#c2cfb5}.faq h3{color:#f2e4c9}input,textarea{background:#0c1b28;border:1px solid #74828b66;color:#f4e8d7}input:focus,textarea:focus{border-color:#ecd6b2}.error,.form-status{color:#f0c397}.note,.location{color:#a1b3be}:focus-visible{outline-color:#f1d9ac}.end-actions{background:#112432ee}.story-panel{margin-left:auto}.quote{margin-left:0}.numbers{padding-top:8vh}.ending{padding-bottom:50px}h2,.number,.quote blockquote{font-family:Fraunces,Georgia,serif}
@media(min-width:701px){.beat>.product{margin-top:0}.beat{gap:7vw}.section{max-width:1240px}}
@media(max-width:700px){header{top:26px;left:25px;font-size:15px}header img{width:32px;height:32px}.hero{min-height:100svh;padding:0 26px;display:block}.hero-copy{top:123px;width:calc(100% - 52px);padding:0}.hero-copy h1{font-size:47px;max-width:330px;line-height:1.04;margin-bottom:18px}.hero-copy p{font-size:12px;line-height:1.85;max-width:326px}.hero-copy .actions{margin-top:21px;gap:9px}.button{padding:12px 14px;font-size:11px}.scroll{margin-top:18px;font-size:9px}.section{padding:11vh 20px}.sample-section .product{width:100%}.panel{padding:27px}.beat{min-height:0;gap:24px}.numbers .panel{padding:27px}.hero .demo-choices{font-size:12px;padding-top:12px}.hero .demo-choices a{background:#0c1b28;padding:5px 8px}.ending>.beat{padding-bottom:15vh}.sample-section{padding-top:5vh}.product{padding:23px}.faq{margin-bottom:15vh}.meeting{margin-bottom:12vh}}
@media(prefers-reduced-motion:reduce){canvas{transition:none}}

/* The light stays below the document so the form and native links remain usable. */
#light-viewport{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}#door-light{position:absolute;pointer-events:none;background:#fff6e3;opacity:0;transform:translate(-50%,-50%)}
.arrival{height:300svh;position:relative}.arrival .end-actions{position:absolute;bottom:0;left:0;width:100%;max-width:none;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;background:none;border:0;box-shadow:none;color:#24323a}.arrival .actions{justify-content:center}.arrival .button{color:#25333b;border-color:#6b726b;background:transparent}.arrival .button.primary{background:#e8d3a9;color:#253a43;border-color:#716850}.arrival .demo-choices a{color:#253a43}.arrival .note{color:#4c595b;text-align:center;max-width:480px}.arrival :focus-visible{outline-color:#253a43}
@media(prefers-reduced-motion:reduce){.arrival{height:100svh;background:#fff6e3}#door-light{display:none}}

/* The opening headline is a full sentence, so it runs smaller than a short slogan would to leave the home clear. */
.hero-copy h1{font-size:clamp(46px,4.7vw,70px);line-height:1.05;letter-spacing:-.04em}
.benefits .panel{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.benefits h3{font:500 26px/1.15 Fraunces,Georgia,serif;margin:14px 0 8px;color:#f1d7a4}
.benefits p{margin:0;font-size:14px;line-height:1.7}
.arrival-title{font:500 clamp(38px,5vw,72px)/1.05 Fraunces,Georgia,serif;letter-spacing:-.03em;color:#2a2115;margin:0 0 26px;text-align:center}
@media(max-width:700px){.hero-copy h1{font-size:38px;max-width:330px}.benefits .panel{grid-template-columns:1fr;gap:24px;padding:27px}}

/* Scroll reveals: cards ease up, their contents follow in a soft stagger, and charts grow. `translate` is used because cards already use `transform` for mouse parallax. */
.reveal-on .panel,.reveal-on .product{opacity:0;translate:0 26px;transition:opacity .8s ease,translate .9s cubic-bezier(.2,.7,.2,1)}
.reveal-on .seen{opacity:1;translate:0 0}
.reveal-on .st{opacity:0;translate:0 12px;transition:opacity .6s ease var(--d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.reveal-on .seen .st{opacity:1;translate:0 0}
/* Small charts in the benefit strip. */
.mini{margin-top:16px;display:grid;gap:7px}
.mini.hours{grid-template-columns:repeat(24,1fr);gap:3px;height:30px;align-items:end}
.mini .tick{display:block;height:100%;border-radius:2px;background:#f1d7a4;transform-origin:bottom}
.reveal-on .mini .tick{transform:scaleY(.08);opacity:.35;transition:transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms),opacity .5s ease var(--d,0ms)}
.reveal-on .seen .mini .tick{transform:none;opacity:1}
.bar-row{display:grid;grid-template-columns:46px 1fr 48px;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.bar-row b{font-weight:500;text-align:right;color:var(--ink)}
.bar{display:block;height:8px;border-radius:4px;background:#46596a;width:var(--w);transform-origin:left}
.bar.on{background:#f1d7a4}
.reveal-on .bar{transform:scaleX(0);transition:transform 1.3s cubic-bezier(.2,.7,.2,1) .5s}
.reveal-on .seen .bar{transform:none}

/* Cards are warm beige paper against the night, with their own dark text. Every card color lives here, and text outside the cards keeps the page's night colors. */
.panel,.product{--paper:#f3eee2;--ink:#2b2c24;--muted:#65625a;--line:#d5cdba;background:#f3eee2;border:1px solid #d5cdba;color:#2b2c24;box-shadow:0 18px 50px #0006}
.product{background:#ebe5d6;color:#3a3d33}
.panel h2,.product h3,.faq h3,.number,.benefits h3,.quote blockquote{color:#2b2c24}
.quote figcaption,.team p,.panel>p,.location{color:#5a584f}
.product .row,.product .inbox-item,.exception{border-color:#d5cdba}
.tile{background:#dcd4c1;color:#3f4a36}
.row dt .i{color:#6f6c5f}
.tag,.tag.neutral{background:#dfe6d3;color:#3f5a3a;border-color:#c9d3bb}
.tag.neutral{background:#dfd9ca;color:#57544a;border-color:#cfc8b6}
.tag.amber{background:#f5e3bd;color:#7a5a20;border-color:#e2cd9e}
.mock-buttons span,.mock-buttons span:first-child{background:#f3eee2;color:#3a3d33;border-color:#d5cdba}
.mock-buttons span:first-child{background:#dfe6d3}
.ticks .i{color:#4f6a45}
input,textarea{background:#fbf8f0;border:1px solid #cfc8b6;color:#2b2c24}
input:focus,textarea:focus{border-color:#8a7a55}
.panel .error,.panel .form-status{color:#9a4a22}
.panel .button.primary{background:#2b2c24;border-color:#2b2c24;color:#f3eee2}
.panel :focus-visible,.product :focus-visible{outline-color:#2b2c24}
.mini .tick,.bar.on{background:#b98f45}
.bar{background:#cfc8b6}
/* Sections sit closer together, so the page reaches the door in less scrolling. */
.section{padding-top:10vh;padding-bottom:10vh}
@media(max-width:700px){.section{padding-top:7vh;padding-bottom:7vh}}
/* Graphics use the purple from the logo: chart bars, icons and ticks. Amber stays reserved for what a person must check. */
.mini .tick,.bar.on{background:#5b2bb5}
.bar{background:#d9d2c3}
.tile{background:#e6dff0;color:#5b2bb5}
.row dt .i,.ticks .i{color:#5b2bb5}