/* The landing site is written by site/from_canvas.py from the design canvas; every look lives inline in the pages. This file holds
   the page basics. There is one layout, the 1280 wide build: phones lay it out at 1280 (the viewport tag) and scale it to the screen,
   narrow desktop windows do the same through fit.js, so every screen shows the same composition. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: #1D2740; background: #E8ECF4; }
a { color: #1F2F78; text-decoration: none; } a:hover { color: #1D2740; }
img, video { max-width: 100%; }
.kg-nav-holder > nav { pointer-events: auto; }
/* liquidGL writes pointer-events: none inline on every element it makes a lens (it expects a lens to be a pane, not a control). The bar
   and the buttons are controls, so they take clicks back here; an author !important outranks an inline style without it. */
.kg-bar, .kg-button, [data-glass="bar"], [data-glass="button"] { pointer-events: auto !important; }
/* the bar's links land each section clear of the bar, and glide there unless the device asks for less motion */
#top, #how, #assistants, #owners { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* reach and focus: a skip link, a visible focus ring everywhere, and a stop button on moving video */
.skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: #1D2740; color: #FFFFFF; font-weight: 650; font-size: 15px; }
.skip:focus { top: 12px; color: #FFFFFF; }
:focus-visible { outline: 3px solid #2B3F96; outline-offset: 3px; border-radius: 6px; }
footer :focus-visible { outline-color: #FFB36B; }
.kg-pause { position: absolute; left: 12px; bottom: 12px; z-index: 12; font: inherit; font-size: 12.5px; font-weight: 650; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; color: #FFFFFF; background: rgba(17,24,51,0.72); cursor: pointer; }
.kg-pause:hover { background: rgba(17,24,51,0.86); }
.kg-pause:focus-visible { outline-color: #FFFFFF; }

/* the plain pages: privacy, terms, data and consent, and the 404 */
.doc { max-width: 1180px; margin: 0 auto; padding: 56px 40px 96px; box-sizing: border-box; }
.doc > * { max-width: 700px; }
.doc h1 { margin: 0 0 8px; font-size: 48px; line-height: 1.04; font-weight: 650; letter-spacing: -0.025em; color: #1D2740; }
.doc h2 { margin: 40px 0 10px; font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -0.015em; color: #1D2740; }
.doc p, .doc li { font-size: 17px; line-height: 1.65; color: #33405C; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }
.doc .doc-date { font-size: 14px; color: #5A6683; margin-bottom: 8px; }

@keyframes kleos-seat { 0%, 38% { fill: var(--from); } 62%, 100% { fill: var(--to); } }
@media (prefers-reduced-motion: reduce) { header svg rect, footer svg rect { animation: none !important; } html { scroll-behavior: auto; } }

/* the For assistants setup: the prompt shown to copy by hand when the clipboard is not allowed (assist.js) */
.kg-assist-prompt { box-sizing: border-box; width: min(100%, 34rem); margin-top: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid #D9DEE8;
  background: #FDFEFF; color: #1D2740; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
[data-assist-copy]:hover { border-color: #B9C2D6; }
[data-assist-copy]:focus-visible { outline: 3px solid #2B3F96; outline-offset: 3px; }
[data-assist-copy]:active { transform: translateY(1px); }

/* the people page (assistants.html): one lead line, one card with the setup button */
.doc .doc-lead { font-size: 20px; line-height: 1.55; color: #1D2740; margin: 4px 0 24px; }
.doc .assist-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 22px 24px; border-radius: 22px;
  background: linear-gradient(180deg, #FDFEFF 0%, #F2F5FA 100%); border: 1px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(29,39,64,0.06), 0 16px 34px -18px rgba(29,39,64,0.34); }
.doc .assist-card p { margin: 0; }
.doc .assist-note { font-size: 14px; color: #4A5672; }
.doc .assist-small { font-size: 12.5px; color: #5F6B88; }
.kg-assist-button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1px solid #1F2F78;
  background: #1F2F78; color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 24px -12px rgba(31,47,120,0.6); transition: transform var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease; }
.kg-assist-button:hover { border-color: #1F2F78; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 28px -12px rgba(31,47,120,0.7); }
.kg-assist-button:active { transform: translateY(0); }
.kg-assist-button:focus-visible { outline: 3px solid #8FA3F0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .kg-assist-button { transition: none; } .kg-assist-button:hover { transform: none; } }