/* desyr.chat — the one stylesheet. Colours are tokens with light-dark(): the system picks light or dark,
   the switch in the nav overrides it with data-theme on <html>. Brand: the logo's coral; the app window
   and the small app fragments use the desyr app's own colours. Depth comes from hairlines with a top
   highlight (--edge), glass (.glass), an aurora glow and a fine grain. Motion lives at the end, behind
   prefers-reduced-motion; the scripts that drive it (src/components) do nothing under "reduce". Only
   transform, opacity and filter animate, so nothing shifts the layout. */

@font-face {
  font-family: Figtree; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/fonts/figtree-latin.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: Figtree; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: light dark;
  --bg: light-dark(#f7f3f9, #15111c);
  --card: light-dark(#ffffff, #1f1928);
  --raise: light-dark(#f0eaf4, #2c2439);
  --line: light-dark(#e5dcea, #332a41);
  --text: light-dark(#1d1826, #f6f1f8);
  --muted: light-dark(#5d5468, #bdb3c7);
  --accent: light-dark(#c2384f, #ff9a80);
  --accent-2: light-dark(#6d4bd0, #b9a6ff);
  --glow: light-dark(rgb(255 132 102 / .16), rgb(255 120 96 / .16));
  --error: light-dark(#ba1a1a, #ffb4ab);
  --shadow: 0 40px 100px -40px light-dark(rgb(60 30 70 / .35), rgb(0 0 0 / .9));
  --edge: inset 0 1px 0 light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .07)), 0 0 0 1px var(--line);
  --glass: light-dark(rgb(255 255 255 / .62), rgb(36 29 47 / .55));
  /* Corners: crisp, not pills. */
  --r-lg: 20px;
  --r: 14px;
  --r-md: 10px;
  --r-sm: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  /* Buttons: dark ink on bright coral, 7.5:1. */
  --coral: #ff8466;
  --ink: #1d1220;
  /* The desyr app's own surfaces and text, for the window and the fragments. */
  --a-rail: light-dark(#e9e7ef, #232329);
  --a-side: light-dark(#f5f2fa, #1b1b21);
  --a-chat: light-dark(#ffffff, #0d0e13);
  --a-sel: light-dark(#dde1ff, #384379);
  --a-text: light-dark(#1b1b21, #e3e1e9);
  --a-muted: light-dark(#5f5f6b, #a3a2ae);
  --a-line: light-dark(#e3e1e9, #2a2a31);
  --a-accent: light-dark(#505b92, #b9c3ff);
  --green: #3abf7e;
}
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }

*, ::before, ::after { box-sizing: border-box; }
html { scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font: 450 17px/1.6 Figtree, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
/* A fine grain over everything, for depth; it never takes a click. */
body::after { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; background: url(/img/grain.svg); opacity: .06; mix-blend-mode: overlay; }
h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.8rem, .8rem + 8.4vw, 7.4rem); font-weight: 850; letter-spacing: -.045em; line-height: .94; }
h1 span { display: block; }
h1 span + span, .statement em { font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); font-weight: 850; letter-spacing: -.04em; line-height: 1; }
h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: .15em; }
small { font-size: .82em; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.wrap { width: min(100% - 2 * clamp(16px, 3vw, 32px), 1240px); margin-inline: auto; }
.sr, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; z-index: 60; left: 16px; top: -80px; padding: 10px 16px; border-radius: var(--r-md); background: var(--card); color: var(--text); }
.skip:focus { top: 12px; }
.glass { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--edge); }

/* The floating nav; on narrow screens its links fold into a menu (src/components/site-menu.ts) */
.top { position: sticky; top: 14px; z-index: 20; display: flex; justify-content: center; padding: 14px 16px 0; margin-top: -14px; }
.pill { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--edge), 0 16px 40px -20px rgb(0 0 0 / .5); }
.brand { display: inline-flex; align-items: center; gap: 9px; padding: 0 14px 0 8px; color: var(--text); text-decoration: none; font-size: 1.45rem; font-weight: 850; letter-spacing: -.03em; }
.nav { position: relative; display: flex; }
.nav a[aria-current] { color: var(--accent); }
.nav-mark { position: absolute; bottom: 1px; left: 0; width: 18px; height: 3px; border-radius: 2px; background: var(--coral); opacity: 0; transform: translateX(calc(var(--mx, 0px) - 9px)); pointer-events: none; }
.nav.marked .nav-mark { opacity: 1; }
.nav.open .nav-mark { display: none; }
.nav a { padding: 9px 14px; border-radius: var(--r-md); color: var(--text); text-decoration: none; font-weight: 600; }
.nav a:hover, .round:hover { background: var(--raise); }
.nav .cta { display: none; }
.round { display: grid; place-items: center; min-width: 42px; height: 42px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); font: 750 .85rem/1 Figtree, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.theme[aria-pressed=true] .moon, .theme[aria-pressed=false] .sun, .menu { display: none; }
.menu[aria-expanded=true] .open-icon, .menu[aria-expanded=false] .close-icon { display: none; }
.pill > .btn { min-height: 42px; margin-left: 6px; padding: 0 20px; font-size: .95rem; }
@media (max-width: 1020px) {
  .nav { display: none; }
  .js .menu { display: grid; }
  .js .nav.open { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: grid; padding: 8px; border-radius: var(--r); background: var(--card); box-shadow: var(--edge), var(--shadow); }
  .nav.open a { padding: 12px 14px; }
}
@media (max-width: 520px) { .pill > .btn { display: none; } .nav.open .cta { display: block; color: var(--accent); } }

/* Buttons; .glow has a turning gradient border, .magnet leans towards the pointer (pointer-effects.ts) */
.btn {
  --fill: var(--coral);
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 32px; border: 0; border-radius: var(--r-md);
  background: var(--fill); color: var(--ink); font: 750 1.1rem/1.2 Figtree, system-ui, sans-serif; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.btn:hover { --fill: #ff957b; box-shadow: 0 16px 40px -16px rgb(255 132 102 / .9); }
.btn.alt { --fill: var(--raise); color: var(--text); box-shadow: var(--edge); }
.btn.alt:hover { --fill: var(--line); }
.btn.glow { border: 2px solid transparent; background: linear-gradient(var(--fill), var(--fill)) padding-box, conic-gradient(from var(--angle), #ff8466, #fff1ec, #9b8cff, #ff8466) border-box; box-shadow: 0 12px 44px -14px rgb(255 132 102 / .75); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Hero: the words first, then the app window in perspective over a drifting aurora */
.hero { overflow-x: clip; padding-top: clamp(40px, 6vw, 88px); text-align: center; }
.hero-copy { display: grid; justify-items: center; }
.lead { max-width: 34ch; margin: 26px auto 36px; color: var(--muted); font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.45; text-wrap: balance; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; }
.ctas .btn { min-width: 230px; }
@media (max-width: 560px) { .ctas { display: grid; width: min(100%, 360px); } .ctas .btn { min-width: 0; } }
.depth { position: relative; isolation: isolate; margin-top: clamp(44px, 5vw, 72px); perspective: 1800px; }
.aurora { position: absolute; inset: -14% -8% 0; z-index: -1; pointer-events: none; }
.aurora i { position: absolute; width: 62%; aspect-ratio: 1.4; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); }
.aurora i:nth-child(1) { --c: light-dark(rgb(255 120 90 / .32), rgb(255 110 84 / .45)); top: 0; left: -6%; }
.aurora i:nth-child(2) { --c: light-dark(rgb(130 100 255 / .26), rgb(124 92 255 / .42)); top: 8%; right: -6%; }
.aurora i:nth-child(3) { --c: light-dark(rgb(80 160 255 / .2), rgb(70 140 255 / .3)); bottom: -6%; left: 22%; }
.tilt { position: relative; transform-style: preserve-3d; transform-origin: 50% 0; }
.float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px 10px 12px; border-radius: var(--r-md); color: var(--text); font-size: 14px; font-weight: 700; }
.float .i { width: 18px; height: 18px; color: var(--green); }
.float .av { width: 26px; height: 26px; font-size: 11px; }
/* Pinned to the window's top-right corner, over the empty end of the title bar: it covers nothing. */
.f1 { top: -18px; right: 3%; overflow: hidden; transform: translateZ(90px); }
.f2 { top: 52%; right: -1%; transform: translateZ(130px); }
@media (max-width: 900px) { .float { display: none; } }

/* The app window: the desyr app as it looks, drawn in HTML so it follows the theme (and comes alive:
   src/components/hero-chat.ts); its cut-off lower edge fades into the page. */
.app {
  position: relative; max-width: 1240px; margin-inline: auto; overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: var(--a-rail); color: var(--a-text);
  box-shadow: 0 0 0 1px var(--line), var(--shadow); font-size: 14.5px; line-height: 1.45; text-align: left;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
}
.app p, .tile p { margin: 0; }
.app i, .tile i { font-style: normal; }
.titlebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--a-line); }
.lights { display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.lights i + i { background: #febc2e; }
.lights i + i + i { background: #28c840; }
.address { display: flex; align-items: center; gap: 6px; padding: 4px 16px; border-radius: var(--r-sm); background: var(--a-side); color: var(--a-muted); font-size: 12.5px; font-weight: 600; }
.address .i { width: 13px; height: 13px; }
.ui { display: grid; grid-template-columns: 68px 244px 1fr 224px; grid-template-rows: minmax(0, 1fr); height: 600px; }
.rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; }
/* :where() keeps this below the avatar colours (.a1 …) */
.rail > :where(i) { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--a-side); }
.rail > .av { border-radius: 50%; }
.rail .space { border-radius: var(--r-md); color: #fff; font-weight: 800; background: linear-gradient(135deg, #ff8a5c, #c9304f); }
.rail .space.b { background: linear-gradient(135deg, #6a77c9, #3c4680); }
.rail .here::before { content: ''; position: absolute; left: -13px; width: 4px; height: 28px; border-radius: 0 4px 4px 0; background: var(--a-text); }
.rail hr { width: 26px; margin: 2px 0; border: 0; border-top: 2px solid var(--a-line); }
.rail .low { margin-top: auto; }
.side, .members, .main { background: var(--a-side); }
.side { display: flex; flex-direction: column; gap: 2px; padding: 10px; color: var(--a-muted); }
.banner { display: flex; align-items: flex-end; height: 96px; margin-bottom: 8px; padding: 12px 14px; border-radius: var(--r-md); color: #fff; font-size: 15px; font-weight: 800; background: linear-gradient(140deg, #ff8a5c, #e5455f 45%, #6d4bd0); }
.cat { padding: 10px 10px 4px; font-size: 12px; font-weight: 750; }
.side span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; font-weight: 550; }
.side .on { background: var(--a-sel); color: var(--a-text); font-weight: 700; }
.side .i { width: 16px; height: 16px; }
.side em { margin-left: auto; padding: 0 7px; border-radius: 999px; background: #c9304f; color: #fff; font: 800 11px/20px Figtree, sans-serif; }
.side .voice { padding: 3px 10px 3px 34px; }
.side .voice .av { width: 22px; height: 22px; font-size: 10px; }
.main { display: flex; flex-direction: column; min-width: 0; }
.head { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; font-weight: 800; white-space: nowrap; overflow: hidden; }
.head small { padding-left: 12px; border-left: 1px solid var(--a-line); color: var(--a-muted); font-weight: 550; }
.live-call { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 3px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--green) 22%, transparent); font-size: 12px; font-weight: 750; }
.live-call i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.chat { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 0; margin: 0 8px 8px; padding: 12px 22px 14px; overflow: hidden; border-radius: var(--r); background: var(--a-chat); }
.msg { display: flex; gap: 12px; padding: 7px 0; }
/* The chat reads from the bottom up, like a real one: the messages sit on the composer, and earlier
   ones run out under the top edge (justify-content: flex-end), fading. A message just arrived glows for a moment (::before). */
.chat::before { content: ''; position: absolute; inset: 0 0 auto; z-index: 1; height: 72px; background: linear-gradient(var(--a-chat) 15%, transparent); pointer-events: none; }
.chat .msg { position: relative; isolation: isolate; }
.chat .msg::before { content: ''; position: absolute; inset: 0 -12px; z-index: -1; border-radius: var(--r-md); background: var(--a-sel); opacity: 0; }
.day { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--a-muted); font-size: 12px; font-weight: 750; }
.day::before, .day::after { content: ''; flex: 1; height: 1px; background: var(--a-line); }
.msg time { margin-left: 8px; color: var(--a-muted); font-size: 12px; }
.av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 800; }
.a1 { background: linear-gradient(135deg, #e0603a, #b8304a); }
.a2 { background: linear-gradient(135deg, #6a77c9, #3c4680); }
.a3 { background: linear-gradient(135deg, #2f9a6a, #1b6b48); }
.a4 { background: linear-gradient(135deg, #a05cd6, #6b3aa8); }
.a5 { background: linear-gradient(135deg, #3a8fd0, #22609a); }
/* The people are drawn faces (pages/_faces.html), cut round; a company keeps its letter. */
.av .face { display: block; width: 100%; height: 100%; border-radius: 50%; }
.av.co { border-radius: var(--r-sm); background: linear-gradient(135deg, #6a77c9, #3c4680); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips span { padding: 1px 9px; border-radius: var(--r-sm); background: var(--a-sel); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.file { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 9px 14px; border-radius: var(--r-md); background: var(--a-side); font-weight: 700; }
.file .i { color: #e5455f; }
.file small, .members small { color: var(--a-muted); font-weight: 550; }
.replies { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--a-accent); font-size: 13px; font-weight: 750; }
.replies .av { width: 22px; height: 22px; font-size: 10px; }
.at { padding: 0 4px; border-radius: 4px; background: var(--a-sel); color: var(--a-accent); font-weight: 750; }
.typing { display: flex; align-items: center; gap: 4px; color: var(--a-muted); font-size: 13px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-muted); }
.typing span { margin-left: 4px; }
/* An empty line still has its height: the indicator is the same height before and after its text is set. */
.typing span::before { content: '\200b'; }
.app .typing { align-self: flex-start; margin: 2px 0 10px; padding: 6px 12px; transform-origin: 0 100%; border-radius: var(--r-md); background: var(--a-chat); box-shadow: 0 0 0 1px var(--a-line); transition: opacity .3s; }
.app .typing:not(.shown) { opacity: 0; }
.app .compose { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r-md); background: var(--a-side); color: var(--a-muted); }
/* The composer: a placeholder, and over it the reply Mia types (hero-chat.ts: a letter each, a caret
   after the last one); the send button lights up while there is something to send. */
.compose .field { display: grid; flex: 1; min-width: 0; }
.compose .field > * { grid-area: 1 / 1; }
.draft { position: relative; overflow: hidden; color: var(--a-text); white-space: nowrap; }
.draft span { opacity: 0; }
.draft .on { opacity: 1; }
.caret { position: absolute; top: 2px; bottom: 2px; left: 0; width: 2px; border-radius: 1px; background: var(--coral); opacity: 0; }
.compose.busy .ph { opacity: 0; }
.compose.busy .caret { opacity: 1; }
.send { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -6px -6px -6px auto; border-radius: var(--r-sm); }
.compose.busy .send { background: var(--coral); color: var(--ink); }
.at { display: inline-block; }
/* Mia's pointer, with her name, like a colleague's in a shared document (hero-chat.ts moves it). */
.cursor { position: absolute; top: 0; left: 0; z-index: 5; display: none; pointer-events: none; }
.cursor svg { display: block; width: 22px; height: 22px; fill: #fff; stroke: #1d1220; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .3)); transform-origin: 5px 3px; }
.cursor b { position: absolute; top: 19px; left: 17px; padding: 2px 8px; border-radius: 2px 7px 7px; background: var(--coral); color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.cursor::before { content: ''; position: absolute; top: -15px; left: -13px; width: 36px; height: 36px; border: 2px solid var(--coral); border-radius: 50%; opacity: 0; }
.members { display: flex; flex-direction: column; gap: 4px; padding: 6px 14px; }
.members .cat { padding: 12px 0 4px; color: var(--a-muted); }
.members > span { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-weight: 700; line-height: 1.25; }
.members small { display: block; font-size: 12px; }
.members .av { position: relative; width: 32px; height: 32px; font-size: 13px; }
.members .live::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--a-side); }
.members .away { color: var(--a-muted); }
@media (max-width: 1100px) { .ui { grid-template-columns: 66px 236px 1fr; } .members { display: none; } }
@media (max-width: 760px) {
  .ui { grid-template-columns: 58px 1fr; height: 480px; }
  .side, .head small, .titlebar .lights, .compose .i, .send, .file small { display: none; }
  .titlebar { grid-template-columns: 1fr; justify-items: center; }
  .chat { padding: 10px 14px; }
}

/* Sections: few, big, with room around them */
.section { padding-top: clamp(80px, 9vw, 136px); }
.intro { max-width: 820px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; }
.intro p { max-width: 40ch; margin: 22px auto 0; color: var(--muted); font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); }

/* What's inside: a bento of live app fragments (they play when in view: bento.ts) */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 26px; min-height: 340px; padding: 28px; overflow: hidden; border-radius: var(--r); background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 70%, var(--bg))); box-shadow: var(--edge); color: var(--a-text); font-size: 14.5px; line-height: 1.45; }
.tile-text h3 { margin-bottom: 8px; color: var(--text); }
.tile-text p { max-width: 40ch; color: var(--muted); font-size: 1rem; }
.t-chat { grid-column: span 4; }
.t-calls { grid-column: span 2; grid-row: span 2; }
.t-mail, .t-cal { grid-column: span 2; }
.t-files, .t-notify { grid-column: span 3; }
@media (max-width: 1000px) { .bento { grid-template-columns: 1fr 1fr; } .bento > .tile { grid-column: span 1; grid-row: auto; } .bento > .t-chat, .bento > .t-calls { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bento > .tile { grid-column: auto; } }
.pane, .stack { display: grid; gap: 4px; align-self: center; width: min(100%, 520px); margin-top: auto; }
.pane { padding: 12px; border-radius: var(--r-md); background: var(--a-chat); box-shadow: 0 0 0 1px var(--a-line), 0 20px 40px -24px rgb(0 0 0 / .5); }
.pane .msg { padding: 6px; }
.pane .typing { padding: 4px 6px 2px; }
.line { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; }
.line.on { background: var(--a-sel); }
.line > span { flex: 1; min-width: 0; }
.line b, .line small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line small, .line time { color: var(--a-muted); }
.line time { font-size: 12.5px; }
.doc { display: grid; place-items: center; width: 40px; height: 46px; border-radius: var(--r-sm); color: #fff; font-size: 11px; font-weight: 800; background: #c9304f; }
.doc.x { background: #1b7a52; }
.doc.p { background: #505b92; }
/* The call: four tiles. Whoever speaks has a green ring and a sound wave (.talk; in motion it passes
   from Lea to Mia to Sam, .s1-.s3), Jonas is muted, and Sam's camera is on, the room behind softly blurred. */
.cams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cam { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; color: #fff; }
.cam .face { position: relative; width: 84%; aspect-ratio: 1; margin-bottom: -6%; transform-origin: 50% 100%; }
.cam::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2.5px var(--green), inset 0 0 22px rgb(58 191 126 / .6); opacity: 0; }
.cam b { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 5px; background: rgb(10 8 16 / .45); font-size: 11.5px; font-weight: 750; }
.cam b .i { width: 13px; height: 13px; margin-left: -2px; color: #ffb4ab; stroke-width: 2.2; }
.wave { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: 2px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--green); opacity: 0; }
.wave i { width: 2.5px; height: 10px; border-radius: 2px; background: #fff; transform: scaleY(.6); }
.wave i + i { transform: scaleY(1); }
.wave i + i + i { transform: scaleY(.45); }
.cam.talk::after, .cam.talk .wave { opacity: 1; }
.video { background: linear-gradient(170deg, #efe3d6, #b9a3c6); }
.video .face { width: 104%; margin-bottom: -10%; }
.room, .room i { position: absolute; }
.room { inset: 0; filter: blur(5px); }
.room i { top: 10%; left: 12%; width: 42%; height: 40%; border-radius: 4px; background: #fff8ef; box-shadow: 0 0 0 3px #d9c6b4; }
.room i + i { top: 34%; left: auto; right: 6%; width: 28%; height: 36%; border-radius: 50% 50% 40% 40%; background: #6f9a5c; box-shadow: none; }
.controls { display: flex; justify-content: center; gap: 10px; padding-top: 8px; }
.controls i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--a-side); }
.controls .end { background: #c9304f; color: #fff; }
.day { gap: 0; }
.day p { display: grid; grid-template-columns: 46px 1fr; align-items: center; min-height: 42px; border-top: 1px dashed var(--a-line); }
.day p:first-child { border-top: 0; }
.day time { color: var(--a-muted); font-size: 12px; }
.day .now i { position: relative; height: 2px; background: #e5455f; }
.day .now i::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e5455f; }
.ev { padding: 5px 9px; overflow: hidden; border-radius: var(--r-sm); background: color-mix(in srgb, var(--coral) 28%, var(--a-chat)); font-size: 13px; font-weight: 750; line-height: 1.25; }
.ev small { display: block; font-weight: 550; }
.ev.v { background: var(--a-sel); }
.ev.busy { background: repeating-linear-gradient(135deg, var(--a-side) 0 6px, var(--a-line) 6px 12px); color: var(--a-muted); }
.stack { gap: 10px; width: min(100%, 420px); }
.toast { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--a-chat); box-shadow: 0 0 0 1px var(--a-line), 0 20px 40px -24px rgb(0 0 0 / .6); text-align: left; }
.toast b, .toast small { display: block; }
.toast small { color: var(--a-muted); }
.stack .toast:nth-child(2) { scale: .96; opacity: .85; }
.stack .toast:nth-child(3) { scale: .92; opacity: .65; }

/* The logo, then the boxes: under the heading desyr's logo appears as the section rises
   (scroll-progress.ts, .moving), and the feature boxes come out from under it (bento.ts). Still,
   both simply stand in place. Above the boxes, which come out from under it. */
.mark { position: relative; z-index: 10; display: grid; place-items: center; padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 5vw, 72px); }
.mark img { width: clamp(96px, 11vw, 132px); height: auto; border-radius: 28%; box-shadow: 0 0 0 10px var(--glow), 0 30px 80px -20px rgb(229 69 95 / .6); }

/* Privacy: the one dark band on the page, in both themes (color-scheme: dark, so every token takes its
   dark value inside). A big statement that lights up word by word as it rises (words.ts), a direct
   message crossing desyr's servers as ciphertext (cipher.ts), and four facts. */
.statement { font-size: clamp(2.6rem, .8rem + 6.4vw, 6.4rem); font-weight: 850; letter-spacing: -.045em; line-height: .96; text-align: center; text-wrap: balance; }
.vault { position: relative; isolation: isolate; overflow: hidden; margin: clamp(80px, 9vw, 136px) clamp(8px, 1.5vw, 20px) 0; padding-block: clamp(72px, 9vw, 128px); border-radius: clamp(20px, 3vw, 36px); background: #0d0a12; box-shadow: 0 0 0 1px rgb(255 255 255 / .06); color: var(--text); color-scheme: dark; }
.vault .aurora { inset: -35% -10% auto; height: 75%; opacity: .75; }
/* On a dark page the band still has to stand out: a violet depth, a lit top edge and a glow. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .vault { background: radial-gradient(120% 70% at 50% 0%, #2a1d47, #120d1c 55%, #0b0810); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 0 0 1px rgb(185 166 255 / .2), 0 40px 120px -50px rgb(124 92 255 / .55); }
  :root:not([data-theme=light]) .vault .aurora { opacity: 1; }
}
:root[data-theme=dark] .vault { background: radial-gradient(120% 70% at 50% 0%, #2a1d47, #120d1c 55%, #0b0810); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 0 0 1px rgb(185 166 255 / .2), 0 40px 120px -50px rgb(124 92 255 / .55); }
:root[data-theme=dark] .vault .aurora { opacity: 1; }
.vault .statement { margin-bottom: clamp(48px, 6vw, 80px); }
.split em .w { background: linear-gradient(100deg, var(--accent), var(--accent-2)) calc(var(--o, 0px) * -1) 0 / var(--ew, 100%) 100%; -webkit-background-clip: text; background-clip: text; }
.cipher { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: 20px 28px; max-width: 1040px; margin: 0 auto clamp(64px, 8vw, 104px); }
.cipher .end { display: grid; gap: 12px; padding: 20px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--edge), var(--shadow); }
.cipher .who { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 800; }
.cipher .who .av { width: 30px; height: 30px; font-size: 12px; font-style: normal; }
.cipher .bubble { margin: 0; padding: 11px 15px; border-radius: 4px 16px 16px; background: var(--raise); font-weight: 600; line-height: 1.4; }
.cipher .state { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--muted); font-size: .88rem; font-weight: 650; }
.cipher .end .state { justify-content: flex-start; }
.cipher .state .i { width: 16px; height: 16px; color: var(--green); }
.track { display: grid; gap: 14px; }
.lane { position: relative; height: 46px; container-type: inline-size; }
.lane::before { content: ''; position: absolute; inset: 50% 0 auto; border-top: 2px dashed var(--line); }
.packet { position: absolute; top: 50%; left: 0; translate: 0 -50%; padding: 9px 13px; border-radius: var(--r-md); background: color-mix(in srgb, var(--accent-2) 20%, var(--card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 45%, transparent), 0 0 32px -8px var(--accent-2); color: var(--accent-2); font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; white-space: nowrap; transform: translateX(calc(50cqi - 50%)); }
.cipher figcaption { grid-column: 1 / -1; max-width: 52ch; margin: 8px auto 0; color: var(--muted); text-align: center; }
@media (max-width: 760px) {
  .cipher { grid-template-columns: 1fr; }
  .lane { height: 96px; container-type: size; }
  .lane::before { inset: 0 auto 0 50%; border-top: 0; border-left: 2px dashed var(--line); }
  .packet { top: 0; left: 50%; translate: -50% 0; transform: translateY(calc(50cqb - 50%)); }
}
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.facts li { position: relative; isolation: isolate; display: grid; gap: 10px; align-content: start; padding: 26px 24px 28px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(255 255 255 / .07); }
.facts .ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, var(--coral) 30%, transparent), color-mix(in srgb, var(--accent-2) 26%, transparent)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 10px 30px -10px var(--coral); }
.facts .i { width: 24px; height: 24px; color: #fff; }
.facts b { font-size: 1.12rem; }
.facts span { color: var(--muted); }

/* Pricing: one card, its border a slowly turning gradient (like the main button's), a soft glow
   behind it; the price big in the brand gradient, everything that is included beside it. */
.plan { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); max-width: 1040px; margin: 0 auto; border: 1.5px solid transparent; border-radius: calc(var(--r-lg) + 6px); background: linear-gradient(var(--card), var(--card)) padding-box, conic-gradient(from var(--angle), var(--coral), var(--accent-2) 22%, var(--line) 38%, var(--line) 62%, var(--accent-2) 78%, var(--coral)) border-box; box-shadow: var(--shadow); }
.plan::before { content: ''; position: absolute; inset: 12% 8% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 132 102 / .35), rgb(155 140 255 / .2) 60%, transparent); filter: blur(40px); }
.plan p { margin: 0; }
.plan .label { margin-bottom: 14px; color: var(--accent); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.plan-main { display: grid; justify-items: start; align-content: start; padding: clamp(28px, 4vw, 52px); border-right: 1px solid var(--line); }
.amount { display: flex; align-items: flex-start; gap: 10px; font-size: clamp(5rem, 3rem + 6vw, 8.5rem); font-weight: 900; letter-spacing: -.06em; line-height: .85; padding-right: .1em; background: linear-gradient(120deg, var(--coral), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.amount span { margin-top: .32em; font-size: .24em; letter-spacing: 0; }
.per { margin-top: 14px !important; color: var(--muted); }
.plan-main .btn { margin-top: 30px; }
.note { margin-top: 14px !important; color: var(--muted); font-size: .92rem; }
.plan-list { padding: clamp(28px, 4vw, 52px); }
.ticks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-weight: 600; }
.ticks li::before { content: '✓'; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--coral) 20%, transparent); color: var(--accent); font-size: .78rem; font-weight: 900; }
.plan-after { grid-column: 1 / -1; padding: 18px clamp(28px, 4vw, 52px); border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--r-lg) + 4px) calc(var(--r-lg) + 4px); background: var(--raise); color: var(--muted); }
.plan-after b { margin-right: 6px; color: var(--text); }
@media (max-width: 860px) { .plan { grid-template-columns: 1fr; } .plan-main { border-right: 0; border-bottom: 1px solid var(--line); } }

/* FAQ, after periferi: a numbered list. Side by side (wide screens) the chosen answer stands large
   beside it under its numeral; stacked (phones) it opens under its question; faq.ts chooses. Without
   script every answer stands open under its question. */
.faq-head { margin-bottom: clamp(28px, 4vw, 48px); }
/* A small label above a heading (also inside an intro, whose own text is bigger and muted). */
.kicker, .intro .kicker { margin: 0 0 14px; color: var(--accent); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.intro .kicker { max-width: none; margin-inline: auto; }
.kicker.lone, .vault .kicker { margin-bottom: 22px; text-align: center; }
.faqs { border-bottom: 1px solid var(--line); }
.faq-q { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; width: 100%; margin: 0; padding: 20px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; text-align: left; cursor: pointer; transition: color .25s; }
.faq-q:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }
.faq-no { font-size: .72em; font-variant-numeric: tabular-nums; transition: color .25s; }
.faq-q:hover, .faq-q[aria-expanded=true] { color: var(--text); }
.faq-q:hover .faq-no, .faq-q[aria-expanded=true] .faq-no { color: var(--accent); }
.faq-a { padding: 0 0 22px 44px; }
.faq-a p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 1.05rem; }
.faq-figure { display: none; }
.js .faq-a:not(.shown) { display: none; }
.faq-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 28px 0 0; color: var(--muted); }
.faq-more b { color: var(--text); font-size: 1.15rem; font-weight: 850; }
.faq-more > a { color: var(--text); font-weight: 750; }
/* The same query as faq.ts. Seven questions: seven rows, and a spare one for a long answer. */
@media (min-width: 861px) and (pointer: fine), (min-width: 1367px) {
  .js .faqs { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: repeat(7, auto) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); align-items: start; border: 0; }
  .js .faq-item { display: contents; }
  .js .faq-q { grid-column: 1; }
  .js .faq-item:last-child .faq-q { border-bottom: 1px solid var(--line); }
  .js .faq-a { grid-column: 2; grid-row: 1 / -1; padding: 6px 0 0; }
  .js .faq-figure { display: block; width: fit-content; padding-right: .16em; font-size: clamp(6rem, 3rem + 6vw, 10rem); font-weight: 900; letter-spacing: -.06em; line-height: .85; background: linear-gradient(120deg, var(--coral), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .js .faq-a p { margin-top: 26px; max-width: 30ch; color: var(--text); font-size: clamp(1.35rem, 1rem + .85vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; text-wrap: pretty; }
}

/* The closing: the pilot form under a big statement */
.join { position: relative; isolation: isolate; display: grid; gap: clamp(32px, 5vw, 64px); overflow-x: clip; }
/* Fading out sideways before the section's own edges, which would otherwise cut it straight. */
.join .aurora { inset: 4% 0 auto; height: 70%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.join-copy { display: grid; justify-items: center; max-width: 820px; margin: 0 auto; text-align: center; }
.join .statement { margin: 0; }
.join-lead { max-width: 40ch; margin: 22px 0 0; color: var(--muted); font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); }
.join-copy .ticks { margin-top: 26px; text-align: left; }
.direct { margin: 22px 0 0; color: var(--muted); }
.direct a { color: var(--text); font-weight: 750; }
@media (min-width: 1040px) {
  .join { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; }
  .join-copy { justify-items: start; margin: 0; text-align: left; }
  .join .statement { font-size: clamp(3rem, 1rem + 4.2vw, 5.4rem); text-align: left; }
}
.panel { position: relative; width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); border-radius: calc(var(--r-lg) + 6px); box-shadow: var(--edge), var(--shadow); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px 20px; }
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field legend { margin-bottom: 6px; padding: 0; font-weight: 700; }
/* Team size: four choices as one segmented row; the radio buttons lie over their own labels. */
.choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.choices label { position: relative; display: grid; }
.choices input { position: absolute; inset: 0; width: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.choices span { display: grid; place-items: center; min-height: 42px; border-radius: var(--r-sm); color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s, box-shadow .2s; }
.choices label:hover span { color: var(--text); }
.choices input:checked + span { background: var(--coral); color: var(--ink); box-shadow: 0 6px 18px -8px rgb(255 132 102 / .9); }
.choices input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
.field.wide { grid-column: 1 / -1; }
label { font-weight: 700; }
label small { color: var(--muted); font-weight: 550; }
input, select, textarea { width: 100%; min-height: 54px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s; }
input:hover, textarea:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 22%, transparent); }
:user-invalid { border-color: var(--error); }
.suffix { display: flex; }
.suffix input { border-radius: var(--r-md) 0 0 var(--r-md); }
.suffix span { display: grid; place-items: center; padding: 0 16px; border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--raise); color: var(--muted); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.pilot [type=submit] { gap: 12px; }
.pilot [type=submit] .i { width: 18px; height: 18px; transition: transform .45s var(--spring), opacity .3s; }
/* Sending: the paper plane flies off. */
.pilot [type=submit][disabled] .i { opacity: 0; transform: translate(16px, -16px) rotate(-12deg); }
@media (max-width: 560px) { .pilot [type=submit] { width: 100%; } }
.fine { flex: 1 1 260px; margin: 0; color: var(--muted); font-size: .92rem; }
.error { margin: 20px 0 0; color: var(--error); font-weight: 700; }
.done { display: grid; justify-items: center; padding: 32px 0; text-align: center; }
.done[hidden] { display: none; }
.done:focus { outline: none; }
.done p { color: var(--muted); }
.done .tick-badge { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 0 18px; border-radius: 50%; background: linear-gradient(135deg, var(--coral), var(--accent-2)); box-shadow: 0 0 0 10px var(--glow), 0 20px 50px -16px var(--coral); color: #fff; }
.done .tick-badge .i { width: 36px; height: 36px; stroke-width: 2.6; }

/* Footer: a closing statement (pages without the form), the links, and the name, big */
.foot { overflow: hidden; padding: clamp(72px, 8vw, 120px) 0 24px; }
.closing { display: grid; justify-items: center; gap: 36px; padding-bottom: clamp(64px, 8vw, 112px); text-align: center; }
.closing .statement { margin: 0; }
[data-page=index] .closing { display: none; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.foot-row > p { margin: 0; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 48px; }
.foot nav div { display: grid; gap: 6px; align-content: start; }
.foot nav b { font-size: .95rem; }
.foot nav a { color: var(--muted); text-decoration: none; transition: color .2s, transform .2s var(--ease); }
.foot nav a:hover { color: var(--text); }
.word { margin: clamp(48px, 7vw, 96px) 0 0; font-size: clamp(6rem, 1rem + 26vw, 24rem); font-weight: 900; letter-spacing: -.07em; line-height: .8; padding-bottom: .08em; text-align: center; user-select: none; }
.word span { display: inline-block; padding-bottom: .1em; background: linear-gradient(180deg, var(--text) 10%, transparent 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.copy { margin: 18px 0 0; color: var(--muted); text-align: center; }

/* Legal pages, 404 */
.legal { max-width: 760px; padding: 72px 0 0; }
.legal h1 { margin-bottom: 28px; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.8rem); hyphens: auto; }
.legal h2 { margin: 40px 0 12px; font-size: 1.45rem; letter-spacing: -.02em; }
.legal blockquote { margin: 0 0 32px; padding: 12px 18px; border-radius: var(--r-md); background: var(--raise); color: var(--muted); font-size: .92rem; }
.lost { padding: 96px 0 0; text-align: center; }
.lost p { color: var(--muted); }
.lost h1 { margin-bottom: 16px; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); }
.lost .huge { margin: 0; color: var(--coral); font-size: clamp(6rem, 4rem + 10vw, 11rem); font-weight: 900; line-height: 1; }

/* Motion, only for those who want it. Classes from src/components: .pre/.in (reveal.ts), .held/.live
   and --q/--dx/--dy (a feature box, bento.ts), .living/.shown/.bump (the hero, hero-chat.ts), --p and
   .moving (scroll-progress.ts), --x/--y (pointer-effects.ts). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .pre { opacity: 0; filter: blur(14px); transform: translateY(44px) scale(.96); }
  .pre.in { opacity: 1; filter: none; transform: none; transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }

  .held:not(.live) :is(.pane > *, .chips > *, .cams > *, .controls > *, .stack > *) { opacity: 0; }
  .live :is(.pane > *, .chips > *, .cams > *, .controls > *, .stack > *) { animation: pop .6s var(--spring) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  /* The call: the word passes from one to the next every 2.5 s; the one speaking nods a little. */
  .t-calls:is(.live, :not(.held)) :is(.s1, .s2, .s3) :is(.wave, .face), .t-calls:is(.live, :not(.held)) :is(.s1, .s2, .s3)::after { animation: speak 7.5s ease-in-out var(--at, 0s) infinite; }
  .t-calls:is(.live, :not(.held)) :is(.s1, .s2, .s3) .face { animation-name: nod; }
  .s2 { --at: -5s; }
  .s3 { --at: -2.5s; }
  .wave i { animation: eq .5s ease-in-out infinite alternate; }
  .wave i + i { animation-delay: -.2s; animation-duration: .4s; }
  .wave i + i + i { animation-delay: -.35s; animation-duration: .55s; }
  .typing i { animation: blink 1.2s infinite; }
  .typing i + i { animation-delay: .2s; }
  .typing i + i + i { animation-delay: .4s; }
  .live-call i { animation: blink 1.6s ease-in-out infinite; }

  .aurora i { animation: drift 16s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation-duration: 20s; animation-delay: -6s; animation-direction: alternate-reverse; }
  .aurora i:nth-child(3) { animation-duration: 24s; animation-delay: -12s; }
  .btn.glow { animation: turn 5s linear infinite; }
  .float { animation: bob 7s ease-in-out infinite; }
  .f2 { animation-delay: -3.5s; }

  .living [data-live] { transition: opacity .3s ease, transform .55s var(--spring); }
  .living [data-live]:not(.shown) { opacity: 0; transform: translateY(12px) scale(.94); }
  .living .bump { animation: bump .5s var(--spring); }
  .app .typing { transition: opacity .2s, transform .45s var(--spring); }
  .app .typing:not(.shown) { transform: translateY(6px) scale(.9); }
  /* A new message arrives at the bottom: the ones above slide up (--drop, hero-chat.ts), it springs in
     and glows; the notification of a reaction slides in beside the window; between loops the chat
     fades out and back. */
  .living :is(.msg, .day) { translate: 0 var(--drop, 0px); transition: translate .7s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, transform .55s var(--spring); }
  .living .msg.shown::before { animation: fresh 1.8s ease-out; }
  .living .f2[data-live]:not(.shown) { transform: translateZ(130px) translateX(36px) scale(.9); }
  .living .chat.rewind > :not(.compose) { opacity: 0; transition: opacity .4s ease; }
  /* Mia's pointer glides on a curve (across and down on different easings) and clicks with a ripple;
     the call's dot sends out rings; a light runs over the encryption badge now and then. */
  @media (min-width: 761px) { .living .cursor { display: block; } }
  .cursor { opacity: 0; translate: var(--cx, 0) 0; transform: translateY(var(--cy, 0)); transition: translate .85s cubic-bezier(.6, 0, .25, 1), transform .85s cubic-bezier(.25, .8, .3, 1), opacity .35s ease; }
  .cursor.on { opacity: 1; }
  .cursor.press svg { animation: press .35s ease; }
  .cursor.press::before { animation: ripple .6s ease-out; }
  /* The privacy statement lights up word by word as it rises; unlit words keep enough contrast to read. */
  .split.moving .w { opacity: clamp(.4, calc(var(--p) * var(--n) * 1.15 - var(--i)), 1); }
  /* The direct message: locked on Mia's phone, across the servers as churning ciphertext, unlocked on
     Lea's laptop; again and again while the figure is on screen (cipher.ts sets .on). */
  .cipher.on .packet { animation: travel 4.2s cubic-bezier(.65, 0, .35, 1) infinite; }
  .cipher.on .end:last-of-type .bubble { animation: arrive 4.2s var(--ease) infinite; }
  .cipher.on .end:first-of-type .bubble { animation: depart 4.2s var(--ease) infinite; }
  @media (max-width: 760px) { .cipher.on .packet { animation-name: travel-down; } }
  .plan { animation: turn 10s linear infinite; }
  .nav-mark { transition: transform .55s var(--spring), opacity .3s; }
  /* The finale: the name rises letter by letter as the page ends (wordmark.ts). */
  .word.waiting:not(.up) span { opacity: 0; transform: translateY(45%); }
  .word.up span { transition: transform 1s var(--spring), opacity .6s ease; }
  .word.up span:nth-child(2) { transition-delay: .08s; }
  .word.up span:nth-child(3) { transition-delay: .16s; }
  .word.up span:nth-child(4) { transition-delay: .24s; }
  .word.up span:nth-child(5) { transition-delay: .32s; }
  .done:not([hidden]) .tick-badge { animation: badge .7s var(--spring) both; }
  .live-call i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: ring 1.8s ease-out infinite; }
  .f1::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .5) 50%, transparent 65%); transform: translateX(-120%); animation: shine 5.5s ease-in-out 1.2s infinite; pointer-events: none; }

  /* The headline gains weight as it arrives (wide screens, where its lines never wrap). */
  @media (min-width: 761px) { h1 span { white-space: nowrap; } h1 { animation: weight 1.8s var(--ease) both; } }
  /* The window straightens as it scrolls up; tilt.ts does the same where scroll timelines are missing. */
  @supports (animation-timeline: view()) { .tilt { animation: tilt ease-out both; animation-timeline: view(); animation-range: cover 0% cover 42%; } }
  @supports not (animation-timeline: view()) { .tilt.moving { transform: rotateX(calc((1 - var(--p)) * 20deg)) scale(calc(.92 + var(--p) * .08)); } }

  /* The logo appears as the section rises: from small, turned and clear to its place. */
  .mark.moving img { opacity: calc(var(--p) * 2); scale: calc(.4 + var(--p) * .6); rotate: calc((1 - var(--p)) * -14deg); }
  /* The boxes come out of desyr: from under the logo, or from under the box above, to their place;
     solid early, so one box never shows through another (bento.ts stacks them in reading order). */
  .tile.moving { translate: calc((1 - var(--q, 1)) * var(--dx, 0px)) calc((1 - var(--q, 1)) * var(--dy, 0px)); scale: calc(.2 + var(--q, 1) * .8); opacity: calc(var(--q, 1) * 4); }
  .faq-a.shown { animation: faq-in .45s cubic-bezier(.16, 1, .3, 1) both; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

  @media (hover: hover) {
    .btn:hover { transform: translateY(-2px); }
    .tile { transition: transform .4s var(--ease); }
    .tile:hover { transform: translateY(-4px); }
    .foot nav a:hover { transform: translateX(3px); }
    /* The spotlight: a glow and a lit border that follow the pointer across a card. */
    .spot::before, .spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; }
    .spot::before { z-index: -1; background: radial-gradient(460px circle at var(--x, 50%) var(--y, 0%), var(--glow), transparent 65%); }
    .spot::after { padding: 1px; background: radial-gradient(280px circle at var(--x, 50%) var(--y, 0%), rgb(255 132 102 / .85), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
    .spot:hover::before, .spot:hover::after { opacity: 1; }
  }
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.92); } }
@keyframes fresh { from { opacity: .75; } }
@keyframes travel { 0%, 12% { transform: translateX(0); opacity: 0; } 20%, 70% { opacity: 1; } 80%, 100% { transform: translateX(calc(100cqi - 100%)); opacity: 0; } }
@keyframes travel-down { 0%, 12% { transform: translateY(0); opacity: 0; } 20%, 70% { opacity: 1; } 80%, 100% { transform: translateY(calc(100cqb - 100%)); opacity: 0; } }
@keyframes depart { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 8%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes arrive { 0%, 78% { opacity: 0; transform: translateY(10px) scale(.96); } 86%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes badge { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
@keyframes press { 40% { transform: scale(.78); } }
@keyframes ripple { from { opacity: .9; transform: scale(.2); } to { opacity: 0; transform: scale(1.4); } }
@keyframes ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
@keyframes shine { 30%, to { transform: translateX(120%); } }
@keyframes faq-in { from { opacity: 0; transform: translateY(.5em); } }
@keyframes bump { 40% { transform: scale(1.3); } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes speak { 0%, 34%, 100% { opacity: 0; } 4%, 30% { opacity: 1; } }
@keyframes nod { 0%, 34%, 100% { transform: none; } 10%, 22% { transform: translateY(-2%) scale(1.03); } 16% { transform: translateY(-1%) scale(1.02) rotate(-1.5deg); } }
@keyframes eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes turn { to { --angle: 1turn; } }
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes drift { 50% { transform: translate(9%, -6%) scale(1.2); } to { transform: translate(-6%, 9%) scale(.95); } }
@keyframes weight { from { font-weight: 560; filter: blur(8px); } }
@keyframes tilt { from { transform: rotateX(20deg) scale(.92); } }