@import url('/kai-assets/kai.css');
:root{color-scheme:light;--paper:var(--kai-paper);--ink:var(--kai-ink);--muted:var(--kai-muted);--focus:var(--kai-focus);--line:var(--kai-line);--wash:var(--kai-wash);--control:var(--kai-control)}
:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-snap-type:y proximity}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* No background on html: the body colour must propagate to the canvas, otherwise the body paints
   it over the sections' z-index:-1 canvases. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--kai-body);font-weight:400;-webkit-font-smoothing:antialiased;min-height:100svh;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--focus);outline-offset:6px;border-radius:4px}
/* viewport-fit=cover lets the page run under a phone's home indicator; the chrome pads by the safe areas. */
.masthead{position:fixed;top:0;left:0;right:0;z-index:2;display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:calc(24px + env(safe-area-inset-top,0px)) calc(48px + env(safe-area-inset-right,0px)) 24px calc(48px + env(safe-area-inset-left,0px))}
.login,.contact,.theme{display:flex;align-items:center;gap:24px;font-family:var(--kai-body);font-size:13px;color:var(--ink);padding:0 20px;border:1px solid var(--line);border-radius:30px;background:var(--paper);transition:background-color .45s ease,border-color .45s ease,color .45s ease;height:44px;box-sizing:border-box}.login:hover,.contact:hover,.theme:hover{background:var(--wash);border-color:var(--control)}.login span{font-size:18px;line-height:1}
.theme{width:44px;padding:0;justify-content:center;font-size:18px;margin-right:auto} /* desktop: theme on the left, Contact and Log in on the right */
.theme .icon{display:inline-block;line-height:1;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
/* Theme switch: colours cross-fade, and where the View Transitions API exists the new theme is
   revealed in a circle growing from the toggle (the script sets --reveal-x/y). */
body{transition:background-color .45s ease,color .45s ease}
html.theme-switching body,html.theme-switching .login,html.theme-switching .contact,html.theme-switching .theme{transition:none} /* the reveal circle is the only animation while a view transition runs; a tweening body colour behind an instantly repainted fluid canvas drew a seam between the sections */
dialog:focus,dialog:focus-visible{outline:0} /* the dialog itself takes focus on open (autofocus) so the close button shows no ring */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:reveal .65s cubic-bezier(.2,.7,.2,1)}
@keyframes reveal{from{clip-path:circle(0 at var(--reveal-x,50%) var(--reveal-y,0))}to{clip-path:circle(160% at var(--reveal-x,50%) var(--reveal-y,0))}}
.panel{position:relative;min-height:100svh;display:grid;grid-template-rows:minmax(240px,1fr) auto;justify-items:center;padding:calc(92px + env(safe-area-inset-top,0px)) 24px calc(96px + env(safe-area-inset-bottom,0px));isolation:isolate;scroll-snap-align:start}
/* The hero paints above the fluid that rises into it; it has no background, so the field shows through beneath the title. */
.hero{z-index:1}
.presence{position:relative;width:min(760px,90vw);height:100%;min-height:240px;max-height:640px;align-self:center;pointer-events:none;z-index:-1}
.presence canvas{position:absolute;width:100%;height:100%;inset:0;opacity:0;transition:opacity .7s}.presence.ready canvas{opacity:1}.presence.ready .fallback{opacity:0}
.fallback{position:absolute;inset:12% 15%;border-radius:47% 53% 42% 58%;background:radial-gradient(ellipse at 30% 35%,#8bc2d7 0,transparent 55%),radial-gradient(ellipse at 75% 60%,#e4aaa5 0,transparent 55%),radial-gradient(ellipse at 40% 80%,#8dace0 0,transparent 60%);filter:blur(35px);opacity:.8;transition:opacity .7s}
/* Section 2: the fluid fills its own section from the bottom edge and dissolves at the top, never
   reaching the hero title. 100lvh so it also sits under a phone browser's bottom toolbar. */
.flow{grid-template-rows:1fr;align-items:center;min-height:100lvh}
/* align-self:stretch matters: an absolutely positioned box with align-self:center shrink-wraps to 0 height instead of filling its insets. */
.flow .presence{position:absolute;inset:0;width:auto;height:auto;min-height:0;max-height:none;align-self:stretch;justify-self:stretch}
.flow .fallback{inset:0;border-radius:0;filter:blur(60px);opacity:.7;mask-image:linear-gradient(to bottom,transparent,#000 45%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%)}
.introduction{text-align:center;position:relative}.eyebrow{font-family:var(--kai-body);font-size:10px;font-weight:400;letter-spacing:2.5px;color:var(--muted);margin:0 0 16px}
h1,.display{font-family:var(--kai-display);font-weight:300;font-size:clamp(64px,7vw,90px);line-height:1.1;letter-spacing:-.055em;margin:0 0 16px}h1 .dot,.display span{color:var(--muted)}
/* Hero title: typed out as "Meet voice intelligence.", then the phrase turns over to "Kai".
   Each glyph settles in from a blur; the caret breathes; the turn is a 3D flip whose width
   glides so the rest of the line drifts to centre instead of jumping. The script keeps the
   phrase on one line (two on phones, "Meet" above) by fitting the font size first. */
.hero h1 .ch{opacity:0;filter:blur(6px);animation:ch-in .55s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ch-in{to{opacity:1;filter:blur(0)}}
.hero h1 .dot{opacity:0;transition:opacity .4s ease}.hero h1.typed .dot,.hero h1.settled .dot{opacity:1}
.hero h1 .caret{display:inline-block;width:.05em;height:.82em;margin-left:.08em;background:var(--muted);vertical-align:-.06em;animation:caret 1.1s ease-in-out infinite}
.hero h1.typed .caret,.hero h1.settled .caret{display:none}
@keyframes caret{0%,100%{opacity:1}50%{opacity:.15}}
.hero h1 .rotor{perspective:800px}
.hero h1 .word{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease,filter .4s ease,width .55s cubic-bezier(.2,.7,.2,1)}
.hero h1 .word.turn{display:inline-block;white-space:nowrap;transform-origin:50% 55%}
.hero h1 .word.out{opacity:0;filter:blur(8px);transform:rotateX(70deg) translateY(-.16em)}
.hero h1 .word.in{opacity:0;filter:blur(8px);transform:rotateX(-70deg) translateY(.16em);transition:none}
.flow .display{font-size:clamp(38px,10vw,84px);letter-spacing:-.03em;text-wrap:balance}
dialog{border:1px solid var(--line);border-radius:16px;padding:52px 40px 36px;max-width:min(440px,calc(100vw - 40px));background:var(--paper);color:var(--ink);text-align:center}dialog::backdrop{background:#232a3540;backdrop-filter:blur(8px)}dialog h2{font-family:var(--kai-display);font-size:30px;letter-spacing:-1px;font-weight:300;margin:0 0 16px}dialog p:not(.eyebrow){color:var(--muted);line-height:1.7;font-size:14px}.close{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:transparent;font-size:24px}.dismiss{background:var(--ink);color:var(--paper);border:0;padding:12px 32px;border-radius:30px;margin-top:12px;min-height:44px}
dialog p.address{color:var(--ink);font-size:18px;letter-spacing:-.2px;margin:0 0 8px;overflow-wrap:anywhere;user-select:all}
.dialog-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.dialog-actions .dismiss{margin-top:12px}
.ghost{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--ink);padding:12px 24px;border-radius:30px;margin-top:12px;min-height:44px;font-size:14px}.ghost:hover{background:var(--wash);border-color:var(--control)}
dialog p.status{min-height:1.5em;margin:12px 0 0;font-size:13px}
/* Phones: theme on the left, Log in on the right, Contact floating centred at the bottom of the screen. */
@media(max-width:600px){.masthead{padding:calc(16px + env(safe-area-inset-top,0px)) 24px 16px;gap:8px;justify-content:space-between}.login,.contact{padding:0 16px;gap:16px}.theme{padding:0;margin-right:0}.contact{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:0 22px}.panel{padding:calc(80px + env(safe-area-inset-top,0px)) 16px calc(84px + env(safe-area-inset-bottom,0px))}.presence{width:100%;min-height:220px}.flow .presence{inset:0;min-height:0}h1{font-size:44px;letter-spacing:-.057em}.hero h1 .lead{display:block} /* "Meet" on its own line, the phrase on the next */.flow .display{font-size:clamp(34px,11.5vw,48px);letter-spacing:-1.5px}.eyebrow{font-size:9px;letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}