/* TalkRight website · "Midnight Signal" · draft 11 Oct 2026 */

@font-face { font-family: "Grift"; src: url("../assets/fonts/Grift-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Grift"; src: url("../assets/fonts/Grift-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../assets/fonts/InterTight-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --void: #020407;
  --night: #060a10;
  --deep: #0a1520;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #f2f5f4;
  --text-2: #a3adb0;
  --text-3: #68737a;
  --dim: rgba(242, 245, 244, .38);
  --signal: #00e7a4;
  --glow: #7dffd9;
  --silver: #cfd6da;
  --amber: #ffc46b;
  --violet: #b9a6ff;
  --ivory: #f2efe7;
  --ivory-2: #e7e2d6;
  --ink: #0b0f14;
  --ink-2: #4a5158;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-in: cubic-bezier(.6, 0, .8, .3);
  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 1360px;
  --f-display: "Grift", "Inter Tight", system-ui, sans-serif;
  --f-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--void); color: var(--text); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
body::after { /* film grain */
  content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(0, 231, 164, .35); color: #fff; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--ink); font-weight: 600; }
.skip:focus { top: 16px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.mono { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.dim { color: var(--dim); }
svg { width: 1em; height: 1em; }

/* ---------- type ---------- */
.h1 { font: 600 clamp(52px, 8.2vw, 132px)/.94 var(--f-display); letter-spacing: -.038em; }
.h2 { font: 600 clamp(40px, 5.6vw, 88px)/.98 var(--f-display); letter-spacing: -.032em; }
.lead { font-size: clamp(18px, 1.42vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 33em; }
.label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.label::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.label--live::before { display: none; }
.pill { padding: 5px 9px; border-radius: 999px; background: var(--signal); color: #022016; font-size: 10px; letter-spacing: .12em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(0, 231, 164, .55); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 231, 164, .55); } 70% { box-shadow: 0 0 0 10px rgba(0, 231, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 231, 164, 0); } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; font: 600 16px/1 var(--f-body); letter-spacing: -.005em; white-space: nowrap;
  transition: transform .5s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .5s var(--ease); }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: #f3f6f5; color: #04070a; }
.btn--primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255, 255, 255, .14); }
.btn--ghost { color: var(--text); border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.eq { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; }
.eq i { width: 2.5px; height: 6px; border-radius: 2px; background: currentColor; opacity: .85; transition: height .2s; }
.is-playing .eq i { animation: eq .9s ease-in-out infinite; }
.is-playing .eq i:nth-child(2) { animation-delay: -.3s; } .is-playing .eq i:nth-child(3) { animation-delay: -.6s; } .is-playing .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- captions (Eva speaking) ---------- */
.caption { font: 600 clamp(19px, 1.75vw, 27px)/1.32 var(--f-display); letter-spacing: -.012em; color: rgba(255, 255, 255, .28); text-wrap: balance; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.caption.is-live { opacity: 1; }
.caption .w { transition: color .18s, text-shadow .18s; }
.caption .w.on { color: #fff; text-shadow: 0 0 24px rgba(125, 255, 217, .35); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .5s, border-color .5s, -webkit-backdrop-filter .5s, backdrop-filter .5s; border-bottom: 1px solid transparent; }
.nav--solid { background: rgba(2, 4, 7, .64); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: var(--line); }
.nav__inner { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; height: 76px; display: flex; align-items: center; gap: 40px; }
.nav__logo img { height: 26px; width: auto; }
.nav__logo .logo-day { display: none; }
.nav--day .nav__logo .logo-day { display: block; }
.nav--day .nav__logo .logo-night { display: none; }
.nav--day.nav--solid { background: rgba(242, 239, 231, .8); border-bottom-color: rgba(11, 15, 20, .08); }
.nav--day .nav__links, .nav--day .nav__signin { color: var(--ink-2); }
.nav--day .nav__links a:hover, .nav--day .nav__links a.on, .nav--day .nav__signin:hover { color: var(--ink); }
.nav--day .nav__links a::after { background: var(--ink); }
.nav--day .btn--primary { background: var(--ink); color: #f6f4ef; }
.nav--day .nav__burger span { background: var(--ink); }
.nav__links { display: flex; gap: 34px; margin-left: auto; margin-right: auto; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.nav__links a { position: relative; transition: color .3s; }
.nav__links a:hover, .nav__links a.on { color: var(--text); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--signal); transform: scaleX(0); transition: transform .5s var(--ease); }
.nav__links a.on::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 22px; }
.nav__signin { font-size: 14.5px; font-weight: 500; color: var(--text-2); transition: color .3s; }
.nav__signin:hover { color: var(--text); }
.nav__burger { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--text); transition: transform .4s var(--ease); }
.nav__burger span:first-child { top: 18px; } .nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav__mobile { display: flex; flex-direction: column; gap: 6px; padding: 12px var(--gutter) 28px; background: rgba(2, 4, 7, .96); border-bottom: 1px solid var(--line); }
.nav__mobile a:not(.btn) { padding: 14px 0; font: 600 26px/1.1 var(--f-display); border-bottom: 1px solid var(--line); }
.nav__mobile .btn { margin-top: 18px; }
.nav__mobile[hidden] { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 700px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; background: #050b12; }
/* Eva sits on the right like a product on a stage; the left edge melts into the night */
.hero__video, .kbwrap .still, .kbwrap .talk { position: absolute; top: 0; right: 0; left: auto; width: 72%; height: 100%; object-fit: cover; object-position: 26% 40%;
  transform: scale(.94); transform-origin: 100% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.hero__video { opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__video.is-on { opacity: 1; }
.hero__shade { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--void) 0%, rgba(2, 4, 7, .92) 22%, rgba(2, 4, 7, .45) 44%, rgba(2, 4, 7, 0) 64%),
    linear-gradient(0deg, var(--void) 0%, rgba(2, 4, 7, .6) 16%, rgba(2, 4, 7, 0) 38%),
    linear-gradient(180deg, rgba(2, 4, 7, .55) 0%, rgba(2, 4, 7, 0) 16%); }
.hero__hud { position: absolute; inset: 0; pointer-events: none; }
.hud { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(125, 255, 217, .5); }
.hud--tl { left: 28px; top: 96px; border-left-width: 1px; border-top-width: 1px; }
.hud--tr { right: 28px; top: 96px; border-right-width: 1px; border-top-width: 1px; }
.hud--bl { left: 28px; bottom: 28px; border-left-width: 1px; border-bottom-width: 1px; }
.hud--br { right: 28px; bottom: 28px; border-right-width: 1px; border-bottom-width: 1px; }
.hero__telemetry { position: absolute; right: 64px; top: 104px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: var(--glow); font-size: 11px; }
.hero__telemetry .mono { font-size: 11px; }
.hero__content { position: relative; padding-bottom: clamp(120px, 15vh, 168px); }
.hero__title { font: 600 clamp(54px, 7.2vw, 120px)/.92 var(--f-display); letter-spacing: -.04em; margin-bottom: 30px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .line > span { display: inline-block; transform: translateY(108%); transition: transform 1.3s var(--ease); }
.hero__title .line:nth-child(2) > span { transition-delay: .12s; }
.hero__title .line:nth-child(3) > span { transition-delay: .24s; }
.is-loaded .hero__title .line > span { transform: none; }
.hero__lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 31em; margin-bottom: 38px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__caption { position: absolute; right: 7%; bottom: 23%; width: min(520px, 40%); text-align: center; z-index: 2; }
.hero__channels { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.channels { display: flex; gap: 26px; flex-wrap: wrap; color: var(--text-3); font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.channels li { display: inline-flex; align-items: center; gap: 9px; transition: color .4s; }
.channels li svg { width: 17px; height: 17px; }
.channels li.is-hot { color: var(--glow); }
/* 31 Oct 2026: a channel not open yet (TikTok) carries a small "soon" tag */
.channels .soon { padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-3); font-size: 9px; letter-spacing: .1em; }
.scrollcue { display: inline-flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 11px; }
.scrollcue i { width: 1px; height: 34px; background: linear-gradient(var(--text-2), transparent); position: relative; overflow: hidden; }
.scrollcue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--glow); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { to { top: 110%; } }

/* ---------- section heads ---------- */
.sechead { margin-bottom: clamp(44px, 6vw, 72px); }
.sechead--split { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.sechead--split .lead { margin-bottom: 6px; }

/* ---------- tour ---------- */
.tour { position: relative; padding: clamp(120px, 14vw, 180px) 0 clamp(90px, 10vw, 140px); background: linear-gradient(var(--void), var(--night) 40%, var(--void)); }
.tour__fit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 0; margin-bottom: 26px; border-top: 1px solid var(--line); }
.tour__fit > .mono { font-size: 11px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font: 500 14px/1 var(--f-body); transition: background-color .3s, color .3s, border-color .3s; }
.chip:hover { border-color: rgba(255, 255, 255, .4); color: var(--text); }
.chip.on { background: var(--text); color: #04070a; border-color: transparent; }
.player { position: relative; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 50px 140px rgba(0, 0, 0, .65), 0 0 160px rgba(0, 231, 164, .07); }
.player__screen { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player.is-vertical .player__screen { aspect-ratio: 9 / 16; max-height: 78vh; margin-inline: auto; }
.player__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player__start { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 22px; padding: clamp(22px, 3.4vw, 44px); background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 24%, rgba(0, 0, 0, 0) 58%); cursor: pointer; transition: opacity .6s var(--ease); }
.player.is-started .player__start { opacity: 0; pointer-events: none; }
.player__bigplay { width: clamp(64px, 6.4vw, 92px); height: clamp(64px, 6.4vw, 92px); flex: none; border-radius: 50%; background: var(--text); color: #04070a; display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(255, 255, 255, .08); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.player__bigplay svg { width: 34%; height: 34%; margin-left: 5%; }
.player__start:hover .player__bigplay { transform: scale(1.06); box-shadow: 0 0 0 18px rgba(255, 255, 255, .07); }
.player__startcopy strong { display: block; font: 600 clamp(22px, 2.4vw, 34px)/1.05 var(--f-display); letter-spacing: -.02em; margin-bottom: 10px; }
.player__startcopy .mono { font-size: 11px; }
.player__chapterchip { position: absolute; left: 22px; top: 22px; padding: 10px 14px; border-radius: 999px; background: rgba(4, 8, 12, .55); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(-6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.player__chapterchip .mono { font-size: 11px; }
.player.is-started .player__chapterchip { opacity: 1; transform: none; }
.player__hotspots { position: absolute; inset: 0; pointer-events: none; }
.hs { position: absolute; left: var(--x); top: var(--y); width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: auto; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.hs.is-on { opacity: 1; transform: none; }
.hs::before, .hs::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(125, 255, 217, .8); animation: ring 2s var(--ease) infinite; }
.hs::after { animation-delay: 1s; }
.hs i { position: absolute; inset: 15px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 22px rgba(0, 231, 164, .9); }
.hs span { position: absolute; left: 54px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 8px 12px; border-radius: 999px; background: rgba(4, 8, 12, .7); border: 1px solid rgba(125, 255, 217, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); }
@keyframes ring { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.hotcard { position: absolute; right: 20px; top: 20px; width: min(380px, calc(100% - 40px)); padding: 26px; border-radius: 22px; background: rgba(6, 10, 14, .78); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: cardIn .6s var(--ease); }
.hotcard[hidden] { display: none; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.hotcard__x { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.hotcard__x:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.hotcard__x svg { width: 18px; height: 18px; }
.hotcard__k { color: var(--signal); font-size: 11px; margin-bottom: 12px; }
.hotcard__t { font: 600 28px/1.05 var(--f-display); letter-spacing: -.02em; margin-bottom: 12px; }
.hotcard__p { color: var(--text-2); font-size: 15.5px; line-height: 1.55; margin-bottom: 22px; }
.hotcard__a { display: flex; gap: 10px; flex-wrap: wrap; }
.player__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(7, 11, 15, .96); border-top: 1px solid var(--line); }
.pbtn { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: background-color .3s, opacity .3s; }
.pbtn:hover { background: rgba(255, 255, 255, .08); }
.pbtn svg { width: 20px; height: 20px; }
.pbtn[aria-pressed="false"] { opacity: .45; }
.pbtn--day { color: var(--ink); border: 1px solid rgba(11, 15, 20, .18); }
.pbtn--day:hover { background: rgba(11, 15, 20, .06); }
.player__segments { flex: 1; display: flex; gap: 4px; height: 30px; align-items: center; cursor: pointer; }
.seg { flex: var(--w) 1 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); position: relative; overflow: visible; transition: height .25s var(--ease); }
.seg b { position: absolute; inset: 0; border-radius: 4px; background: var(--text); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.seg.is-current b { background: var(--signal); }
.seg.is-rec::after { content: ""; position: absolute; left: 50%; top: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--signal); }
.player__segments:hover .seg { height: 7px; }
.seg em { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: rgba(4, 8, 12, .92); border: 1px solid var(--line-2); font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .2s; }
.seg:hover em { opacity: 1; }
.player__time { min-width: 92px; text-align: right; font-size: 11px; color: var(--text-2); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.rail li { scroll-snap-align: start; }
.rail button { position: relative; width: 100%; height: 100%; min-height: 128px; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .018); text-align: left; overflow: hidden; transition: border-color .35s, background-color .35s, transform .5s var(--ease); }
.rail button:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .035); }
.rail .rn { display: flex; justify-content: space-between; color: var(--text-3); font-size: 11px; }
.rail .rt { font: 600 18px/1.12 var(--f-display); letter-spacing: -.012em; }
.rail .rd { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.rail .rp { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.rail li.is-current button { border-color: rgba(0, 231, 164, .45); background: linear-gradient(180deg, rgba(0, 231, 164, .09), rgba(0, 231, 164, .015)); }
.rail li.is-current .rn { color: var(--signal); }
.rail li.is-rec .rn::after { content: "For you"; color: var(--signal); }
.pip { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 300px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .6); animation: cardIn .5s var(--ease); }
.pip[hidden] { display: none; }
.pip video { width: 100%; height: 100%; object-fit: cover; }
.pip__back { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 55%); text-align: left; }
.pip__back .mono { font-size: 10.5px; color: var(--text); }
.pip__x { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); }
.pip__x svg { width: 15px; height: 15px; }

/* ---------- converge (scroll scene) ---------- */
.converge { position: relative; height: 430vh; background: var(--void); }
.converge__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.converge__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.converge__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 50% 45%, rgba(2, 4, 7, 0) 40%, rgba(2, 4, 7, .7) 100%),
    linear-gradient(0deg, var(--void) 0%, rgba(2, 4, 7, .55) 22%, rgba(2, 4, 7, 0) 45%),
    linear-gradient(180deg, var(--void) 0%, rgba(2, 4, 7, 0) 16%); }
.converge__icons span { position: absolute; left: 50%; top: 45%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 17px; display: grid; place-items: center; color: var(--glow); background: rgba(6, 14, 20, .5); border: 1px solid rgba(125, 255, 217, .34); box-shadow: 0 0 34px rgba(0, 231, 164, .2), inset 0 0 18px rgba(0, 231, 164, .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; will-change: transform, opacity; }
.converge__icons span svg { width: 26px; height: 26px; }
.converge__beats { position: absolute; left: 0; right: 0; bottom: 13vh; }
.converge__beats .beat { position: absolute; left: var(--gutter); bottom: 0; max-width: 13em; font: 600 clamp(36px, 4.8vw, 76px)/1.02 var(--f-display); letter-spacing: -.032em; opacity: 0; will-change: transform, opacity; }
.beat .mono { display: block; margin-bottom: 18px; font-size: 12px; color: var(--signal); letter-spacing: .14em; }
.beat--big { font-size: clamp(60px, 10vw, 168px) !important; letter-spacing: -.045em !important; }
.beat--final em { font-style: normal; background: linear-gradient(90deg, #ffffff, var(--glow) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.converge__eva { position: absolute; right: var(--gutter); bottom: 13vh; margin: 0; background: rgba(4, 8, 12, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.converge__progress { position: absolute; right: calc(var(--gutter) - 4px); top: 50%; width: 1px; height: 180px; margin-top: -90px; background: var(--line-2); }
.converge__progress i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--glow); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); box-shadow: 0 0 10px var(--glow); }

/* ---------- inbox app ---------- */
.inbox { padding: clamp(110px, 12vw, 160px) 0 clamp(100px, 11vw, 150px); }
.evabtn { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 6px 20px 6px 6px; border-radius: 999px; border: 1px solid var(--line-2); transition: border-color .3s, background-color .3s; text-align: left; }
.evabtn:hover { border-color: rgba(125, 255, 217, .5); background: rgba(0, 231, 164, .05); }
.evabtn b { display: block; font-size: 14.5px; font-weight: 600; }
.evabtn .mono { font-size: 10.5px; }
.evabtn__orb { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(125, 255, 217, .5); }
.evabtn__orb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(2.1); }
.evabtn.is-playing .evabtn__orb { box-shadow: 0 0 0 2px var(--signal), 0 0 24px rgba(0, 231, 164, .6); }
.evabtn--day { border-color: rgba(11, 15, 20, .18); }
.evabtn--day:hover { border-color: rgba(11, 15, 20, .45); background: rgba(11, 15, 20, .04); }
.app { border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #0b1118, #070b10); box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 50px 140px rgba(0, 0, 0, .6), 0 0 180px rgba(0, 231, 164, .05); font-size: 14px; }
.app__top { height: 56px; display: flex; align-items: center; gap: 34px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.app__top img { height: 20px; width: auto; }
.app__nav { display: flex; gap: 26px; color: var(--text-3); font-size: 13.5px; font-weight: 500; }
.app__nav .on { color: var(--text); box-shadow: 0 19px 0 -18px var(--signal); }
.app__ws { margin-left: auto; color: var(--text-2); font-size: 10.5px; }
.app__ws i { font-style: normal; }
.app__body { display: grid; grid-template-columns: 330px 1fr 270px; height: 560px; }
.app__list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.app__filters { display: flex; gap: 6px; padding: 14px; }
.app__filters button { height: 30px; padding: 0 12px; border-radius: 8px; font: 500 13px/1 var(--f-body); color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; transition: background-color .3s, color .3s; }
.app__filters button:hover { color: var(--text); }
.app__filters button.on { background: rgba(0, 231, 164, .12); color: var(--glow); }
.app__filters i { font-style: normal; font: 600 10.5px/18px var(--f-body); min-width: 18px; height: 18px; border-radius: 9px; background: var(--amber); color: #2b1d00; text-align: center; }
.app__rows { flex: 1; overflow: hidden; }
.app__rows li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .05); transition: background-color .4s; }
.app__rows li.is-sel { background: rgba(0, 231, 164, .07); box-shadow: inset 2px 0 0 var(--signal); }
.app__rows li.is-new { animation: rowIn .8s var(--ease); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-14px); background: rgba(0, 231, 164, .14); } }
.av { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px/1 var(--f-body); color: #fff; background: hsl(var(--h, 180) 38% 28%); }
.av .ch { position: absolute; right: -5px; bottom: -5px; width: 19px; height: 19px; border-radius: 50%; background: #0b1118; display: grid; place-items: center; color: var(--glow); }
.av .ch svg { width: 12px; height: 12px; }
.rw { flex: 1; min-width: 0; }
.rw b { display: block; font-size: 13.5px; font-weight: 600; }
.rw span { display: block; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.rr .mono { font-size: 10px; color: var(--text-3); letter-spacing: .06em; }
.tag { font: 600 10.5px/1 var(--f-body); padding: 4px 7px; border-radius: 6px; }
.tag--eva { background: rgba(0, 231, 164, .12); color: var(--glow); }
.tag--you { background: rgba(255, 196, 107, .14); color: var(--amber); }
.tag--done { background: rgba(255, 255, 255, .07); color: var(--text-2); }
.app__thread { display: flex; flex-direction: column; min-width: 0; }
.app__thead { height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.app__thead b { display: block; font-size: 15px; }
.app__thead .mono { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .06em; }
.app__thead .mono svg { width: 12px; height: 12px; }
.app__eva { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(0, 231, 164, .1); color: var(--glow); font-size: 12.5px; font-weight: 500; }
.app__eva .dot { width: 6px; height: 6px; }
.app__take { height: 32px; padding: 0 14px; border-radius: 9px; background: var(--text); color: #04070a; font: 600 12.5px/1 var(--f-body); }
.app__msgs { flex: 1; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; }
.msg { max-width: 76%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; animation: msgIn .55s var(--ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }
.msg--in { align-self: flex-start; background: rgba(255, 255, 255, .065); border-bottom-left-radius: 5px; }
.msg--eva { align-self: flex-end; background: rgba(0, 231, 164, .1); border: 1px solid rgba(0, 231, 164, .24); border-bottom-right-radius: 5px; }
.msg__by { display: block; margin-bottom: 4px; font: 500 9.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.msg--voice { display: flex; align-items: center; gap: 10px; }
.msg--voice .vw { display: flex; gap: 2px; align-items: center; height: 20px; }
.msg--voice .vw i { width: 2px; border-radius: 2px; background: var(--text-2); }
.msg--book { display: flex; gap: 12px; align-items: center; }
.msg--book svg { width: 22px; height: 22px; color: var(--signal); flex: none; }
.msg--book b { display: block; font-size: 13.5px; }
.msg--book span { font-size: 12px; color: var(--text-2); }
.typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: rgba(0, 231, 164, .08); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--glow); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.app__compose { height: 50px; margin: 0 14px 14px; border-radius: 12px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 13px; }
.app__compose svg { width: 18px; height: 18px; color: var(--text-3); }
.app__side { border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.app__side > .mono { font-size: 10px; margin-top: 4px; }
.app__card { border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .022); padding: 13px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.45; }
.app__card > b { font-size: 14px; }
.app__kv { display: flex; justify-content: space-between; gap: 10px; }
.app__kv span:last-child { text-align: right; }
.app__card--book { flex-direction: row; align-items: center; gap: 12px; border-color: rgba(0, 231, 164, .35); background: rgba(0, 231, 164, .06); opacity: .28; filter: saturate(0); transition: opacity .8s var(--ease), filter .8s; }
.app__card--book.is-on { opacity: 1; filter: none; }
.app__card--book svg { width: 22px; height: 22px; color: var(--signal); flex: none; }
.app__card--book b { display: block; font-size: 13px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(56px, 7vw, 88px); padding-top: 36px; border-top: 1px solid var(--line); }
.trio .mono { color: var(--signal); font-size: 11px; margin-bottom: 18px; }
.trio h3 { font: 600 clamp(22px, 1.9vw, 27px)/1.12 var(--f-display); letter-spacing: -.016em; margin-bottom: 12px; }
.trio p:not(.mono) { color: var(--text-2); font-size: 15.5px; line-height: 1.55; max-width: 26em; }

/* ---------- eva ---------- */
.eva { padding: clamp(100px, 11vw, 150px) 0; background: radial-gradient(1100px 760px at 22% 50%, rgba(9, 31, 44, .85), rgba(2, 4, 7, 0) 70%), var(--void); }
.eva__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.eva__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden; background: #071420; box-shadow: 0 0 0 1px rgba(125, 255, 217, .16), 0 60px 140px rgba(0, 0, 0, .6); }
.eva__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.eva__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2, 4, 7, .85), rgba(2, 4, 7, 0) 45%); pointer-events: none; }
/* when Eva speaks, the frame's edge glows with her voice */
.eva__ring { position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s;
  box-shadow: inset 0 0 0 1px rgba(125, 255, 217, calc(.25 + var(--lvl, 0) * .6)), inset 0 0 calc(18px + var(--lvl, 0) * 90px) rgba(0, 231, 164, calc(.12 + var(--lvl, 0) * .35)); }
.eva__frame.is-speaking .eva__ring { opacity: 1; }
.eva__tag { position: absolute; left: 22px; top: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: rgba(4, 8, 12, .5); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.eva__tag .mono { font-size: 10.5px; }
.caption--eva { position: absolute; left: 28px; right: 28px; bottom: 30px; z-index: 2; text-align: center; }
.spec { margin-top: 44px; border-top: 1px solid var(--line); }
.spec li { border-bottom: 1px solid var(--line); }
.spec button, .spec__static { width: 100%; display: grid; grid-template-columns: 44px 1fr 44px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 20px 6px; text-align: left; transition: background-color .3s; border-radius: 12px; }
.spec button:hover { background: rgba(255, 255, 255, .025); }
.spec__k { grid-row: 1 / 3; align-self: start; padding-top: 6px; color: var(--text-3); font-size: 11px; }
.spec__t { font: 600 clamp(20px, 1.7vw, 24px)/1.15 var(--f-display); letter-spacing: -.015em; }
.spec__d { grid-column: 2; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.spec__play { grid-column: 3; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: border-color .3s, background-color .3s; }
.spec__play svg { width: 14px; height: 14px; margin-left: 2px; }
.spec button:hover .spec__play { border-color: rgba(125, 255, 217, .6); }
.spec button.is-playing .spec__play { background: var(--signal); border-color: var(--signal); color: #032118; }
.spec button.is-playing .spec__k { color: var(--signal); }

/* ---------- bento ---------- */
.bento { padding: clamp(100px, 11vw, 150px) 0; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 300px; gap: 14px; }
.tile { position: relative; isolation: isolate; display: block; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #0b1118, #06090d); border: 1px solid var(--line); transition: transform .7s var(--ease), border-color .4s; }
.tile:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .2); }
.tile--wide { grid-column: span 2; grid-row: span 2; }
.tiles .tile:last-child { grid-column: span 2; }
.tile video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform 1.2s var(--ease); }
.tile:hover video { transform: scale(1.04); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(2, 4, 7, .94) 0%, rgba(2, 4, 7, .5) 34%, rgba(2, 4, 7, 0) 62%); }
.tile__copy { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.tile__copy .mono { color: var(--signal); font-size: 10.5px; margin-bottom: 10px; }
.tile__copy h3 { font: 600 19px/1.22 var(--f-display); letter-spacing: -.01em; max-width: 19em; }
.tile--wide .tile__copy h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; max-width: 14em; }
.tile__go { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(4, 8, 12, .6); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 10px; opacity: 0; transform: translateY(-4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.tile__go svg { width: 11px; height: 11px; }
.tile:hover .tile__go, .tile:focus-visible .tile__go { opacity: 1; transform: none; }
.tile__viz { position: absolute; left: 24px; right: 24px; top: 24px; height: 150px; }
.tile--wide .tile__viz { height: auto; bottom: 150px; }
.viz-stream__head { display: flex; gap: 8px; margin-bottom: 14px; font-size: 10px; }
.viz-stream__head span { padding: 7px 11px; border-radius: 8px; color: var(--text-3); }
.viz-stream__head span.on { background: rgba(0, 231, 164, .12); color: var(--glow); }
.viz-stream__live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--signal) !important; }
.viz-stream__live .dot { width: 6px; height: 6px; }
.viz-stream__rows { display: flex; flex-direction: column; gap: 8px; overflow: hidden; height: calc(100% - 44px); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.viz-stream__rows li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); flex: none; }
.viz-stream__rows li.is-new { animation: rowIn .9s var(--ease); border-color: rgba(0, 231, 164, .3); }
.viz-stream__rows .av { width: 40px; height: 40px; }
.viz-stream__rows .rw b { font-size: 14.5px; }
.viz-stream__rows .rw span { font-size: 13px; }
.viz-call { display: flex; flex-direction: column; gap: 16px; }
.viz-call__top { display: flex; align-items: center; gap: 12px; }
.viz-call__ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 231, 164, .16); color: var(--glow); box-shadow: 0 0 0 0 rgba(0, 231, 164, .5); animation: pulse 1.8s infinite; flex: none; }
.viz-call__ic svg { width: 18px; height: 18px; }
.viz-call__top b { display: block; font-size: 13.5px; font-weight: 600; }
.viz-call__top em { display: block; font-style: normal; font-size: 9.5px; color: var(--text-3); margin-top: 3px; }
.viz-call__t { margin-left: auto; font-size: 10.5px; color: var(--glow); }
.viz-call__wave { display: flex; align-items: center; gap: 3px; height: 40px; }
.viz-call__wave i { flex: 1; height: 30%; border-radius: 3px; background: linear-gradient(180deg, var(--glow), rgba(0, 231, 164, .35)); animation: wave 1.1s ease-in-out infinite; }
.viz-call__wave i:nth-child(3n) { animation-delay: -.35s; } .viz-call__wave i:nth-child(3n+1) { animation-delay: -.7s; } .viz-call__wave i:nth-child(4n) { animation-duration: .8s; } .viz-call__wave i:nth-child(5n) { animation-duration: 1.4s; }
@keyframes wave { 0%, 100% { height: 18%; } 50% { height: 100%; } }
.viz-call__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(0, 231, 164, .45); background: rgba(0, 231, 164, .08); color: var(--glow); font-size: 10px; animation: chipIn 4.5s var(--ease) infinite; }
.viz-call__chip svg { width: 13px; height: 13px; }
@keyframes chipIn { 0%, 30% { opacity: 0; transform: translateY(6px); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.viz-cal__h { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; font-size: 9.5px; color: var(--text-3); margin-bottom: 8px; }
.viz-cal__g { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 20px); gap: 6px; }
.viz-cal__g i { grid-column: var(--c); grid-row: var(--r) / span var(--s); border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .06); }
.viz-cal__g i.new { background: rgba(0, 231, 164, .22); border-color: rgba(0, 231, 164, .6); box-shadow: 0 0 22px rgba(0, 231, 164, .3); animation: calNew 3.6s var(--ease) infinite; }
@keyframes calNew { 0%, 12% { opacity: 0; transform: scale(.7); } 26%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.viz-hand { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 18px; padding-top: 18px; }
.viz-hand__a, .viz-hand__b { padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); }
.viz-hand__a { color: var(--glow); border-color: rgba(0, 231, 164, .4); }
.viz-hand__b em { display: block; font-size: 9px; font-style: normal; color: var(--amber); margin-top: 4px; }
.viz-hand__line { position: relative; height: 1px; background: var(--line-2); }
.viz-hand__line i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal); animation: handoff 2.6s var(--ease) infinite; }
@keyframes handoff { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.viz-hand__note { grid-column: 1 / -1; font-size: 10px; color: var(--text-2); letter-spacing: .04em; text-transform: none; padding: 10px 12px; border-left: 2px solid var(--signal); background: rgba(0, 231, 164, .05); border-radius: 0 8px 8px 0; }
.viz-map svg { width: 100%; height: 140px; overflow: visible; }
.viz-map svg path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.viz-map svg .viz-map__p { stroke-dasharray: 8 300; stroke: var(--signal); animation: wire 3s linear infinite; filter: drop-shadow(0 0 4px rgba(0, 231, 164, .8)); }
.viz-map svg circle, .viz-map svg rect { fill: #0d151d; stroke: rgba(255, 255, 255, .3); stroke-width: 1.2; }
.viz-map svg .viz-map__end { fill: rgba(0, 231, 164, .25); stroke: var(--signal); }
@keyframes wire { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
.viz-camp { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.viz-camp__row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.viz-camp__row b { color: var(--text); font-weight: 600; }
.viz-camp__row b.sig { color: var(--glow); font-weight: 500; }
.viz-camp__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.viz-camp__bar i { display: block; height: 100%; width: 0; background: var(--signal); animation: campBar 3.6s var(--ease) infinite; }
@keyframes campBar { 0% { width: 0; } 70%, 100% { width: 94%; } }
.viz-rep__bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.viz-rep__bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(0, 231, 164, .7), rgba(0, 231, 164, .08)); height: calc(var(--v) * 100%); transform-origin: 50% 100%; animation: bar 4s var(--ease) infinite; }
.viz-rep__bars i:nth-child(odd) { background: linear-gradient(180deg, rgba(207, 214, 218, .5), rgba(207, 214, 218, .05)); }
@keyframes bar { 0% { transform: scaleY(.1); } 30%, 100% { transform: none; } }
.viz-rep__k { display: flex; justify-content: space-between; margin-top: 10px; font-size: 9.5px; color: var(--text-3); }
.viz-contact__c { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); max-width: 320px; }
.viz-contact__c b { display: block; font-size: 14px; }
.viz-contact__c span:not(.av) { font-size: 12px; }
.viz-contact__t { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 9.5px; }
.viz-contact__t span { padding: 6px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }

/* ---------- workflow maps ---------- */
.maps { padding: clamp(100px, 11vw, 150px) 0; background: linear-gradient(var(--void), var(--night) 50%, var(--void)); }
.label .pill { margin-right: 2px; }
.mapdemo { display: grid; grid-template-columns: 1fr 330px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background-color: #060a0e; background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.2px); background-size: 22px 22px; box-shadow: 0 40px 120px rgba(0, 0, 0, .5); }
.mapdemo__canvas { position: relative; height: 460px; }
.mapdemo__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapdemo__wires path { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: stroke .5s; }
.mapdemo__wires path.dash { stroke-dasharray: 4 6; }
.mapdemo__wires path.lit { stroke: var(--signal); filter: drop-shadow(0 0 5px rgba(0, 231, 164, .7)); stroke-dasharray: 10 6; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.node { position: absolute; left: calc(var(--x) / 1000 * 100%); top: calc(var(--y) / 460 * 100%); transform: translate(-50%, -50%); width: 168px; padding: 12px 14px; border-radius: 14px; background: rgba(11, 17, 23, .94); border: 1px solid rgba(255, 255, 255, .13); transition: border-color .5s, box-shadow .5s, transform .5s var(--ease); }
.node .mono { display: block; font-size: 9.5px; margin-bottom: 6px; color: var(--text-3); }
.node b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.node em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--text-3); line-height: 1.35; }
.node--eva .mono, .node--end .mono { color: var(--signal); }
.node--team .mono { color: var(--amber); }
.node--dec .mono { color: var(--violet); }
.node--dec { width: 140px; }
.node--end { width: 116px; }
.node.lit { border-color: var(--signal); box-shadow: 0 0 0 4px rgba(0, 231, 164, .1), 0 0 44px rgba(0, 231, 164, .22); transform: translate(-50%, -50%) scale(1.03); }
.node--team.lit { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 196, 107, .1), 0 0 44px rgba(255, 196, 107, .18); }
.mapdemo__note { position: absolute; transform: translateY(-50%); font-size: 9.5px; color: var(--amber); white-space: nowrap; opacity: .85; }
.mapdemo__chat { border-left: 1px solid var(--line); background: rgba(3, 6, 9, .75); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mapdemo__chat > .mono { font-size: 10px; }
.mapdemo__msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; overflow: hidden; }
.mapdemo__msgs .msg { max-width: 88%; font-size: 13px; }
.trio--maps { margin-top: 56px; }

/* ---------- daylight sections ---------- */
.day { background: var(--ivory); color: var(--ink); }
.day .dim { color: rgba(11, 15, 20, .36); }
.day .lead { color: var(--ink-2); }
.day .label { color: #5b6268; }
.day .mono.dim { color: rgba(11, 15, 20, .45); }

/* ---------- industries ---------- */
.industries { padding: clamp(100px, 11vw, 150px) 0 clamp(80px, 9vw, 120px); }
.ind__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); padding: 4px max(var(--gutter), calc((100vw - var(--maxw)) / 2)) 10px; scrollbar-width: none; }
.ind__track::-webkit-scrollbar { display: none; }
.icard { position: relative; flex: 0 0 auto; width: clamp(280px, 29vw, 420px); aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: #c9c3b6; scroll-snap-align: start; isolation: isolate; color: #fff; }
.icard video, .icard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.icard--still img { object-position: 50% 20%; }
.icard:hover video, .icard:hover img { transform: scale(1.04); }
.icard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 6, 9, .88) 0%, rgba(3, 6, 9, .35) 36%, rgba(3, 6, 9, 0) 60%); }
.icard__copy { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.icard__copy .mono { font-size: 10.5px; color: rgba(255, 255, 255, .75); margin-bottom: 12px; }
.icard__copy h3 { font: 600 clamp(20px, 1.7vw, 25px)/1.18 var(--f-display); letter-spacing: -.012em; margin-bottom: 16px; }
.booked { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(3, 8, 12, .55); border: 1px solid rgba(125, 255, 217, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--glow); }
.booked svg { width: 13px; height: 13px; }
.ind__nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.ind__nav .mono { margin-left: auto; font-size: 10.5px; }

/* ---------- night ---------- */
.night { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(120px, 12vw, 160px) 0 clamp(60px, 7vw, 90px); overflow: hidden; isolation: isolate; }
.night__media { position: absolute; inset: 0; z-index: -1; background: #071224; }
.kbwrap { position: absolute; inset: 0; animation: kb 28s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }
.kbwrap .still, .kbwrap .talk { object-position: 25% 34%; }
.kbwrap .talk { opacity: 0; transition: opacity .7s var(--ease); }
.is-talking .kbwrap .talk { opacity: 1; }
.night__shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--void) 0%, rgba(2, 4, 7, .88) 24%, rgba(2, 4, 7, .3) 50%, rgba(2, 4, 7, 0) 68%), linear-gradient(0deg, var(--void) 0%, rgba(2, 4, 7, 0) 34%), linear-gradient(180deg, var(--void) 0%, rgba(2, 4, 7, 0) 22%); }
.night__content { position: relative; }
.night .h2 { font-size: clamp(40px, 5.1vw, 80px); }
.night__content .lead { margin: 26px 0 34px; max-width: 28em; }
.caption--night { margin-top: 26px; max-width: 24em; text-align: left; }
.night__log { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(56px, 8vw, 110px); }
.night__log li { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 16px 18px; border-radius: 16px; background: rgba(4, 8, 12, .55); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.night__log .mono { grid-column: 1 / -1; color: var(--signal); font-size: 10.5px; }
.night__log svg { width: 18px; height: 18px; color: var(--glow); }

/* ---------- control ---------- */
.control { padding: clamp(100px, 11vw, 150px) 0; }
.cells { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cell { padding: 34px 32px 42px; min-height: 230px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .4s; }
.cell:hover { background: rgba(255, 255, 255, .018); }
.cell .mono { color: var(--signal); font-size: 11px; margin-bottom: 30px; }
.cell h3 { font: 600 clamp(21px, 1.8vw, 25px)/1.15 var(--f-display); letter-spacing: -.014em; margin-bottom: 12px; }
.cell p:not(.mono) { color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.proof { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 34px; color: var(--text-2); font-size: 14.5px; }
.proof span { display: inline-flex; align-items: center; gap: 10px; }
.proof svg { width: 18px; height: 18px; color: var(--glow); }

/* ---------- setup ---------- */
.setup { padding: clamp(100px, 11vw, 150px) 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(11, 15, 20, .14); }
.steps li { position: relative; padding: 34px 32px 10px 0; }
.steps li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--ink); transition: width 1.4s var(--ease) calc(var(--d, 0s) + .2s); }
.steps li.is-in::before { width: 100%; }
.steps__n { display: block; margin-bottom: 30px; font-size: 11px; color: #5b6268; }
.steps h3 { font: 600 clamp(22px, 1.9vw, 27px)/1.12 var(--f-display); letter-spacing: -.016em; margin-bottom: 12px; }
.steps p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; max-width: 18em; }

/* ---------- final ---------- */
.final { position: relative; min-height: 100vh; display: flex; align-items: center; padding: clamp(120px, 12vw, 160px) 0; overflow: hidden; isolation: isolate; }
.final__media { position: absolute; inset: 0; z-index: -1; background: #061420; }
.final__shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--void) 0%, rgba(2, 4, 7, .9) 26%, rgba(2, 4, 7, .35) 50%, rgba(2, 4, 7, 0) 66%), linear-gradient(0deg, var(--void) 0%, rgba(2, 4, 7, 0) 30%), linear-gradient(180deg, var(--void) 0%, rgba(2, 4, 7, 0) 25%); }
.final__content { position: relative; }
.final__content .h1 { max-width: 7.5em; margin-bottom: 30px; }
.final__content .lead { margin-bottom: 38px; max-width: 28em; }
.final__hear { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; color: var(--text-2); font-size: 11px; transition: color .3s; }
.final__hear:hover, .final__hear.is-playing { color: var(--glow); }
.final__hear svg { width: 18px; height: 18px; }
.caption--final { margin-top: 18px; max-width: 22em; }

/* ---------- hero: Eva's own controls ---------- */
.hero__eva { position: absolute; right: 5%; bottom: 15%; width: min(500px, 40%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.hearpill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(4, 8, 12, .45); border: 1px solid rgba(125, 255, 217, .38); color: var(--text); font: 600 14px/1 var(--f-body); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: border-color .3s, background-color .3s, transform .5s var(--ease); }
.hearpill:hover { border-color: rgba(125, 255, 217, .75); transform: translateY(-2px); }
.hearpill.is-playing { background: rgba(0, 231, 164, .16); border-color: var(--signal); }
.hero__fine { margin-top: 24px; font-size: 11px; color: var(--text-3); }
.hero__fine i { font-style: normal; margin: 0 8px; color: var(--signal); }
.converge__chapter { position: absolute; left: var(--gutter); top: 108px; font-size: 11px; color: var(--text-3); }

/* daylight versions of shared controls */
.day .btn--primary, .btn--dark { background: var(--ink); color: #f6f4ef; }
.day .btn--primary:hover, .btn--dark:hover { background: #000; box-shadow: 0 14px 40px rgba(11, 15, 20, .18); transform: translateY(-2px); }
.day .btn--ghost { color: var(--ink); border-color: rgba(11, 15, 20, .25); background: transparent; }
.day .btn--ghost:hover { border-color: rgba(11, 15, 20, .55); background: rgba(11, 15, 20, .04); }

/* ---------- the demo (tutorial) ---------- */
.learn { padding: clamp(100px, 11vw, 150px) 0 clamp(90px, 10vw, 130px); }
.learn__progress { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.learn__progress .mono { font-size: 11px; color: var(--ink-2); }
.learn__progress .mono b { color: var(--ink); }
.learn__progress i { display: block; height: 3px; border-radius: 3px; background: rgba(11, 15, 20, .1); overflow: hidden; }
.learn__progress i b { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ink); transition: width .7s var(--ease); }
.learn__box { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.learn__side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 116px); }
.learn__intro { display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; background: #fff; border: 1px solid rgba(11, 15, 20, .08); text-align: left; box-shadow: 0 10px 30px rgba(11, 15, 20, .05); transition: border-color .3s, box-shadow .3s; }
.learn__intro:hover { border-color: rgba(11, 15, 20, .25); }
.learn__intro.is-active { border-color: var(--ink); box-shadow: 0 14px 40px rgba(11, 15, 20, .1); }
.learn__introthumb { position: relative; width: 92px; aspect-ratio: 16 / 10; flex: none; border-radius: 10px; overflow: hidden; background: #0b0f14; }
.learn__introthumb img { width: 100%; height: 100%; object-fit: cover; }
.learn__introthumb svg { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); }
.learn__intro b { display: block; font-size: 14px; line-height: 1.3; font-weight: 600; margin-bottom: 4px; }
.learn__intro .mono { font-size: 10px; color: var(--ink-2); }
.learn__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(11, 15, 20, .06); }
.learn__tabs button { flex: 1; height: 36px; border-radius: 9px; font: 600 13px/1 var(--f-body); color: var(--ink-2); transition: background-color .3s, color .3s, box-shadow .3s; }
.learn__tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(11, 15, 20, .08); }
.learn__list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 2px 0; scrollbar-width: thin; scrollbar-color: rgba(11, 15, 20, .2) transparent; }
.lesson > button { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 4px 10px; align-items: start; padding: 12px; border-radius: 14px; text-align: left; transition: background-color .3s, box-shadow .3s; }
.lesson > button:hover { background: rgba(255, 255, 255, .55); }
.lesson.is-active > button { background: #fff; box-shadow: 0 10px 30px rgba(11, 15, 20, .07); }
.lesson__n { grid-row: 1 / 3; padding-top: 3px; font: 500 11px/1 var(--f-mono); color: #8a8f94; }
.lesson.is-watched .lesson__n { color: #0a8a5c; }
.lesson__t { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.lesson__d { grid-column: 2; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.lesson__k { grid-row: 1; grid-column: 3; padding: 4px 7px; border-radius: 999px; font: 500 9px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #6c7177; background: rgba(11, 15, 20, .06); }
.lesson__k--live { color: #076e4b; background: rgba(0, 231, 164, .18); }
.lesson__k--coming { color: #8a5a00; background: rgba(255, 196, 107, .22); }
.lesson__steps { display: none; padding: 2px 12px 12px 52px; }
.lesson.is-active .lesson__steps { display: block; }
.lesson__steps button { position: relative; display: block; width: 100%; padding: 6px 0 6px 18px; text-align: left; font-size: 13px; line-height: 1.4; color: var(--ink-2); transition: color .25s; }
.lesson__steps button::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(11, 15, 20, .3); background: transparent; transition: background-color .25s, border-color .25s; }
.lesson__steps button:hover { color: var(--ink); }
.lesson__steps button.is-done::before { background: rgba(11, 15, 20, .55); border-color: transparent; }
.lesson__steps button.is-current { color: var(--ink); font-weight: 600; }
.lesson__steps button.is-current::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(0, 231, 164, .2); }
.learn__main { min-width: 0; }
.browser { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(11, 15, 20, .08), 0 40px 100px rgba(11, 15, 20, .14); }
.browser__bar { height: 42px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #f6f5f1; border-bottom: 1px solid rgba(11, 15, 20, .07); }
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2ded4; }
.browser__url { flex: 1; max-width: 380px; margin: 0 auto; height: 26px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; background: #fff; border: 1px solid rgba(11, 15, 20, .07); font-size: 10.5px; letter-spacing: .04em; text-transform: none; color: var(--ink-2); }
.browser__url svg { width: 12px; height: 12px; }
.browser__kind { padding: 6px 10px; border-radius: 999px; font-size: 9.5px; color: #076e4b; background: rgba(0, 231, 164, .16); white-space: nowrap; }
.browser__kind.is-preview { color: #6c7177; background: rgba(11, 15, 20, .06); }
.browser__kind.is-coming { color: #8a5a00; background: rgba(255, 196, 107, .22); }
.browser__screen { position: relative; aspect-ratio: 16 / 10; background: #0b0f14; overflow: hidden; }
.learn__video, .learn__screens, .learn__sim, .learn__coming { position: absolute; inset: 0; display: none; }
.learn__video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.learn__screens { background: #fff; overflow: hidden; }
.learn__stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.learn__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; opacity: 0; transition: opacity .45s ease; }
.learn__img.is-on { opacity: 1; }
.learn__cursor { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -3px 0 0 -4px; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); z-index: 3; }
.learn__cursor svg { width: 100%; height: 100%; }
.learn__cursor i { position: absolute; left: -12px; top: -12px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--signal); opacity: 0; }
.learn__cursor.click i { animation: clickRing .7s ease-out; }
@keyframes clickRing { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.learn__sim { background: #060a0e; }
.learn__sim .mapdemo { height: 100%; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: 1fr 300px; }
.learn__sim .mapdemo__canvas { height: 100%; }
.learn__coming { flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; text-align: center; color: var(--text); background: radial-gradient(700px 400px at 50% 30%, rgba(0, 231, 164, .14), transparent 70%), linear-gradient(180deg, #0b1118, #05080b); }
.learn__coming .mono { padding: 7px 12px; border-radius: 999px; font-size: 10px; color: var(--amber); border: 1px solid rgba(255, 196, 107, .4); }
.learn__coming strong { font: 600 clamp(26px, 2.6vw, 38px)/1.05 var(--f-display); letter-spacing: -.02em; }
.learn__coming p { max-width: 30em; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.is-screens .learn__screens, .is-video .learn__video, .is-sim .learn__sim { display: block; }
.is-coming .learn__coming { display: flex; }
.learn__caption { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 4; width: fit-content; max-width: 84%; margin: 0 auto; transform: translateY(8px); padding: 10px 16px; border-radius: 18px; background: rgba(11, 15, 20, .84); color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.35; text-align: center; opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.learn__caption.is-on { opacity: 1; transform: none; }
.learn__caption.is-top { bottom: auto; top: 16px; }
.is-video:not(.is-live) .learn__caption, .is-coming .learn__caption { display: none; }
.learn__note { position: absolute; left: 14px; bottom: 14px; z-index: 4; padding: 6px 10px; border-radius: 8px; font-size: 9.5px; color: #3b4148; background: rgba(255, 255, 255, .88); border: 1px solid rgba(11, 15, 20, .1); }
.learn__note[hidden] { display: none; }
.is-live .learn__caption:not(.is-top) { bottom: 48px; }
.learn__start { position: absolute; left: 50%; top: 50%; z-index: 5; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 0 0 12px rgba(11, 15, 20, .14), 0 20px 50px rgba(0, 0, 0, .3); transition: transform .5s var(--ease), opacity .4s; }
.learn__start:hover { transform: scale(1.06); }
.learn__start svg { width: 30px; height: 30px; margin-left: 4px; }
.is-playing .learn__start, .is-coming .learn__start { opacity: 0; pointer-events: none; }
.learn__done { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; background: rgba(246, 245, 241, .93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); }
.learn__done[hidden] { display: none; }
.learn__done .mono { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: #076e4b; }
.learn__done .mono svg { width: 16px; height: 16px; }
.learn__done strong { font: 600 clamp(22px, 2.2vw, 30px)/1.1 var(--f-display); letter-spacing: -.015em; }
.learn__done div { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.learn__done .btn--primary { background: var(--ink); color: #f6f4ef; }
.learn__done .btn--ghost { color: var(--ink); border-color: rgba(11, 15, 20, .25); background: transparent; }
.learn__bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.learn__track { position: relative; flex: 1; height: 28px; cursor: pointer; }
.learn__track::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 4px; background: rgba(11, 15, 20, .12); }
.learn__track > b { position: absolute; left: 0; top: 12px; height: 4px; border-radius: 4px; background: var(--ink); width: calc(var(--p, 0) * 100%); }
.learn__track .tick { position: absolute; top: 8px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: rgba(11, 15, 20, .3); }
.learn__time { min-width: 84px; text-align: right; font-size: 11px; color: var(--ink-2); }
.learn__speed { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(11, 15, 20, .15); font-size: 11px; color: var(--ink); }
.learn__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; padding-top: 18px; border-top: 1px solid rgba(11, 15, 20, .1); }
.learn__foot .mono { display: block; margin-bottom: 6px; font-size: 10.5px; color: var(--ink-2); }
.learn__foot strong { font: 600 clamp(20px, 1.8vw, 24px)/1.15 var(--f-display); letter-spacing: -.012em; }

/* ---------- get started (self-serve steps) ---------- */
.start { padding: clamp(100px, 11vw, 150px) 0; }
.steps__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-bottom: 3px; font-size: 10.5px; color: var(--ink); border-bottom: 1px solid rgba(11, 15, 20, .25); transition: border-color .3s; }
.steps__link:hover { border-color: var(--ink); }
.steps__link svg { width: 11px; height: 11px; }
.start__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 52px; }
.start__cta .mono { font-size: 11px; }

/* ---------- pricing ---------- */
.pricing { padding: clamp(100px, 11vw, 150px) 0; }
.plans { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, #0b1118, #070a0e); }
.plan--main { border-color: rgba(0, 231, 164, .3); background: radial-gradient(640px 320px at 18% 0%, rgba(0, 231, 164, .13), transparent 70%), linear-gradient(180deg, #0c141b, #070a0e); box-shadow: 0 40px 120px rgba(0, 0, 0, .5); }
.plan__k { margin-bottom: 18px; font-size: 11px; color: var(--signal); }
.plan__price { display: flex; align-items: baseline; gap: 10px; }
.plan__price b { font: 600 clamp(52px, 5.2vw, 76px)/1 var(--f-display); letter-spacing: -.035em; }
.plan__price span { font-size: 18px; color: var(--text-2); }
.plan__vat { margin-top: 12px; font-size: 10.5px; color: var(--text-3); }
.plan__list { flex: 1; display: flex; flex-direction: column; gap: 12px; margin: 30px 0 32px; }
.plan__list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.plan__list svg { width: 18px; height: 18px; margin-top: 2px; color: var(--signal); }
.plan .btn { align-self: flex-start; }
.plan__fine { margin-top: 14px; font-size: 10.5px; color: var(--text-3); }
.plan__lede { max-width: 16em; margin-bottom: 24px; font: 600 clamp(20px, 1.8vw, 24px)/1.25 var(--f-display); letter-spacing: -.012em; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.packs li { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); }
.packs b { font: 600 clamp(24px, 2.2vw, 30px)/1 var(--f-display); letter-spacing: -.02em; }
.packs span { font-size: 12px; color: var(--text-3); }
.packs em { margin-top: 12px; font-style: normal; font-weight: 600; color: var(--glow); }
.rates { flex: 1; display: flex; flex-direction: column; gap: 11px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.rates .mono { margin-bottom: 4px; font-size: 10.5px; color: var(--text-3); }
.rates div { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; color: var(--text-2); }
.rates b { font-weight: 600; color: var(--text); white-space: nowrap; }

/* ---------- questions ---------- */
.faq { padding: clamp(90px, 10vw, 130px) 0 clamp(100px, 11vw, 150px); }
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; list-style: none; cursor: pointer; font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--f-display); letter-spacing: -.01em; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary svg { width: 20px; height: 20px; flex: none; color: var(--text-2); transition: transform .45s var(--ease); }
.faq__list details[open] summary svg { transform: rotate(45deg); color: var(--signal); }
.faq__list details p { max-width: 40em; padding: 0 4px 24px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }

/* ---------- "Eva is speaking" bar ---------- */
.speak { position: fixed; left: 50%; bottom: 22px; z-index: 70; display: flex; align-items: center; gap: 14px; width: min(640px, calc(100% - 24px)); padding: 10px 12px 10px 10px; border-radius: 22px; background: rgba(5, 9, 13, .8); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); opacity: 0; transform: translate(-50%, 18px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.speak.is-on { opacity: 1; transform: translate(-50%, 0); }
.speak[hidden] { display: none; }
.speak__orb { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--signal), 0 0 calc(8px + var(--lvl, 0) * 42px) rgba(0, 231, 164, .65); }
.speak__orb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(2.1); }
.speak__body { flex: 1; min-width: 0; }
.speak__body .mono { font-size: 10px; color: var(--signal); }
.speak__cap { margin-top: 5px; font: 600 17px/1.35 var(--f-display); letter-spacing: -.01em; color: rgba(255, 255, 255, .3); }
.speak__cap .w { transition: color .18s; }
.speak__cap .w.on { color: #fff; }
.speak__x { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.speak__x:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.speak__x svg { width: 18px; height: 18px; }

/* ---------- footer ---------- */
.foot { padding: 80px 0 34px; border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
.foot__brand img { height: 26px; width: auto; margin-bottom: 20px; }
.foot__brand p { font-size: 15px; margin-bottom: 10px; }
.foot__brand .mono { font-size: 10.5px; }
.foot__social { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.foot__social a { font-size: 14px; color: var(--text-2); transition: color .3s; }
.foot__social a:hover { color: var(--text); }
.foot__grid > div:not(.foot__brand) { display: flex; flex-direction: column; gap: 12px; }
.foot__grid > div > .mono { font-size: 10.5px; color: var(--text-3); margin-bottom: 8px; }
.foot__grid a { font-size: 15px; color: var(--text-2); transition: color .3s; }
.foot__grid a:hover { color: var(--text); }
.foot__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot__base .mono { font-size: 10.5px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .app__body { grid-template-columns: 300px 1fr; }
  .app__side { display: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles .tile:last-child { grid-column: span 2; }
  .night__log { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .sechead--split { grid-template-columns: 1fr; align-items: start; }
  .eva__grid { grid-template-columns: 1fr; }
  .eva__frame { aspect-ratio: 4 / 3.6; }
  .cells { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .trio { grid-template-columns: 1fr; gap: 30px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .hero__telemetry { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  /* phones: Eva owns the top of the screen, the words sit underneath on the night */
  .hero { min-height: 700px; }
  .hero__media { bottom: auto; height: 60%; }
  .night__media, .final__media { bottom: auto; height: 58vh; height: 58svh; }
  .hero__video, .kbwrap .still, .kbwrap .talk { width: 100%; object-position: 50% 30%; transform: none; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .hero__shade { background: linear-gradient(180deg, rgba(2, 4, 7, .5) 0%, rgba(2, 4, 7, 0) 22%), linear-gradient(0deg, var(--void) 0%, rgba(2, 4, 7, 0) 30%); }
  .hero__content { padding-bottom: 92px; }
  .hero__title { font-size: clamp(40px, 11.4vw, 60px); margin-bottom: 18px; }
  .hero__lead { margin-bottom: 26px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__caption { left: 20px; right: 20px; width: auto; bottom: auto; top: 42%; }
  .hero__channels { bottom: 22px; }
  .channels { gap: 14px; flex-wrap: nowrap; overflow: hidden; }
  .channels li { font-size: 0; gap: 0; }
  .channels li svg { width: 19px; height: 19px; }
  .scrollcue span { display: none; }
  .hud { display: none; }
  .tour__fit { align-items: flex-start; flex-direction: column; gap: 12px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .chip { flex: none; }
  .player { border-radius: 22px; }
  .player__bar { gap: 2px; padding: 8px 10px; }
  .player__time { min-width: 0; display: none; }
  [data-fs] { display: none; }
  .rail { grid-auto-columns: 72%; }
  .hs span { display: none; }
  .hotcard { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; padding: 20px; }
  .converge { height: 360vh; }
  .converge__beats { bottom: 12vh; }
  .converge__icons span { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 14px; }
  .converge__icons span svg { width: 21px; height: 21px; }
  .converge__progress { display: none; }
  .converge__eva { top: 88px; bottom: auto; right: 14px; padding-right: 14px; }
  .converge__eva .mono { display: none; }
  .app__top nav, .app__ws { display: none; }
  .app__body { grid-template-columns: 1fr; height: auto; }
  .app__list { border-right: 0; border-bottom: 1px solid var(--line); }
  .app__rows { max-height: 260px; }
  .app__thread { height: 420px; }
  .app__take { display: none; }
  .tiles { grid-template-columns: 1fr; grid-auto-rows: 270px; }
  .tile--wide { grid-column: auto; grid-row: span 1; }
  .tiles .tile--wide { height: 360px; }
  .tiles .tile:last-child { grid-column: auto; }
  .tile__go { opacity: 1; transform: none; }
  .icard { width: 78vw; }
  .night__shade, .final__shade { background: linear-gradient(180deg, var(--void) 0%, rgba(2, 4, 7, 0) 20%), linear-gradient(0deg, var(--void) 0%, rgba(2, 4, 7, 0) 30%); }
  .night { justify-content: flex-end; padding-top: 52vh; }
  .final { align-items: flex-end; padding-top: 52vh; }
  .tile__go { display: none; }
  .app__thead .num { display: none; }
  .night__log { grid-template-columns: 1fr; }
  .cells { grid-template-columns: 1fr; }
  .cell { min-height: 0; padding: 28px 24px 32px; }
  .steps { grid-template-columns: 1fr; }
  .pip { width: 210px; right: 12px; bottom: 12px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__title .line > span { transform: none; transition: none; }
  .kbwrap, .dot, .scrollcue i::after, .hs::before, .hs::after, .viz-map__p, .viz-hand__line i, .viz-cal__g i.new, .viz-camp__bar i, .viz-rep__bars i, .mapdemo__wires path.lit { animation: none !important; }
  .converge { height: auto; }
  .converge__sticky { position: relative; height: auto; min-height: 100vh; }
  .converge__beats { position: relative; bottom: auto; padding: 0 var(--gutter) 12vh; display: flex; flex-direction: column; gap: 18px; justify-content: flex-end; min-height: 100vh; }
  .converge__beats .beat { position: relative; left: 0; opacity: 1 !important; transform: none !important; font-size: clamp(28px, 3.6vw, 48px) !important; }
  .converge__icons, .converge__progress { display: none; }
}

/* ---------- narrated guide (lessons still to be recorded) ---------- */
.guide { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 32px); align-items: start; width: min(760px, 100%); text-align: left; }
.guide__eva { position: relative; width: clamp(64px, 7vw, 92px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(125, 255, 217, .5); }
.guide__eva img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(2.1); }
.guide__eva i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--signal); opacity: 0; }
.guide__eva.is-speaking i { animation: speakRing 1.1s ease-in-out infinite; }
@keyframes speakRing { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.guide__chip { display: inline-block; margin-bottom: 14px; padding: 7px 12px; border-radius: 999px; font-size: 10px; color: var(--amber); border: 1px solid rgba(255, 196, 107, .4); }
.guide__body strong { display: block; margin-bottom: 18px; font: 600 clamp(24px, 2.4vw, 34px)/1.05 var(--f-display); letter-spacing: -.02em; }
.guide__steps { display: flex; flex-direction: column; gap: 10px; counter-reset: g; }
.guide__steps li { position: relative; padding-left: 38px; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.4; color: var(--text-3); transition: color .35s; counter-increment: g; }
.guide__steps li::before { content: counter(g, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 500 11px/1.6 var(--f-mono); color: var(--text-3); }
.guide__steps li.is-done { color: var(--text-2); }
.guide__steps li.is-current { color: var(--text); font-weight: 600; }
.guide__steps li.is-current::before { color: var(--signal); }
.has-voice.is-coming .learn__start { opacity: 1; pointer-events: auto; }
.is-coming.is-playing .learn__start { opacity: 0; pointer-events: none; }
.learn__sound { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; color: var(--ink); border: 1px solid rgba(11, 15, 20, .15); }
.learn__sound svg { width: 16px; height: 16px; }
.learn__sound span { display: none; font-size: 10px; }
.learn__sound.is-off { background: var(--ink); color: #f6f4ef; border-color: transparent; }
.learn__sound.is-off span { display: inline; }
.learn__caption .w { color: rgba(255, 255, 255, .45); transition: color .15s; }
.learn__caption .w.on { color: #fff; }

/* ---------- get started: Eva in daylight ---------- */
.start__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 6vw, 72px); }
.start__copy .lead { margin-bottom: 4px; }
.start__eva { justify-self: end; width: min(100%, 400px); aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; background: #e3ddd1; box-shadow: 0 40px 90px rgba(11, 15, 20, .12); }
.start__eva video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- responsive: demo, pricing, questions ---------- */
@media (max-width: 1100px) {
  .learn__box { grid-template-columns: 1fr; }
  .learn__side { position: static; max-height: none; order: 2; }
  .learn__main { order: 1; }
  .learn__list { overflow: visible; }
  .plans { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .hero__eva { left: 16px; right: 16px; width: auto; top: 86px; bottom: auto; gap: 10px; align-items: flex-end; }
  .hero__eva .caption { order: 2; align-self: stretch; text-align: center; font-size: 19px; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
  .hearpill { height: 38px; padding: 0 14px; font-size: 13px; }
  .hero__actions { flex-wrap: nowrap; gap: 10px; }
  .hero__actions .btn { flex: 1 1 0; padding: 0 12px; font-size: 15px; height: 50px; }
  .learn__caption, .learn__caption.is-top { top: 8px; bottom: auto; max-width: 94%; padding: 6px 10px; border-radius: 10px; font-size: 11.5px; }
  .is-live .learn__caption:not(.is-top) { top: 8px; bottom: auto; }
  .is-live .browser__screen { aspect-ratio: 16 / 10; }
  .is-live .learn__caption { font-size: 10.5px; padding: 5px 9px; }
  .learn__note { left: 8px; bottom: 8px; font-size: 8.5px; padding: 4px 7px; }
  .hero__fine { font-size: 10px; letter-spacing: .08em; }
  .hero__fine i { margin: 0 5px; }
  .browser__kind, .browser__dots { display: none; }
  .browser__url { max-width: none; }
  .browser__screen { aspect-ratio: 4 / 3; }
  .learn__start { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .learn__foot { flex-direction: column; align-items: flex-start; }
  .learn__time { min-width: 0; }
  .plan { padding: 26px 22px; }
  .packs { gap: 8px; }
  .packs li { padding: 14px 10px; }
  .rates div { font-size: 13.5px; }
  .start__grid { grid-template-columns: 1fr; }
  .start__eva { justify-self: center; width: min(100%, 360px); }
  .guide { grid-template-columns: 1fr; gap: 14px; }
  .guide__eva { width: 56px; }
  .guide__body strong { margin-bottom: 12px; }
  .guide__steps { gap: 6px; }
  .learn__sound span { display: none !important; }
}
/* the map simulation is drawn at a fixed size and scaled to fit the lesson screen */
.learn__sim .mapdemo { position: absolute; left: 0; top: 0; width: 1300px; height: 812px; transform-origin: 0 0; transform: scale(var(--k, 1)); }

/* ---------- trust pages (31 Oct 2026): privacy, terms, security, data residency and subprocessors, kept at their talkright.net
   addresses with their words; long-form text on the night background, easy to read ---------- */
.legal { padding: 150px 0 110px; }
.legal__body { max-width: 74ch; margin-inline: auto; color: var(--text-2); font-size: 16.5px; line-height: 1.7; }
.legal__body h1 { margin-bottom: 26px; color: var(--text); font: 600 clamp(36px, 5vw, 56px)/1.05 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.legal__body h2 { margin: 46px 0 14px; padding-top: 30px; border-top: 1px solid var(--line); color: var(--text); font: 600 23px/1.25 var(--f-display); text-wrap: balance; }
.legal__body h3 { margin: 28px 0 10px; color: var(--text); font: 600 18px/1.3 var(--f-body); }
.legal__body p { margin-bottom: 16px; }
.legal__body strong { color: var(--text); font-weight: 600; }
.legal__body ul, .legal__body ol { margin: 0 0 18px; padding-left: 22px; }
.legal__body ul { list-style: disc; }
.legal__body ol { list-style: decimal; }
.legal__body li { margin-bottom: 8px; padding-left: 4px; }
.legal__body li::marker { color: var(--signal); }
.legal__body a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal__body a:hover { color: var(--glow); }
.legal__table { margin: 6px 0 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.legal__body table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.legal__body th, .legal__body td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal__body th { color: var(--text); font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .03); }
.legal__body tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) { .legal { padding: 120px 0 80px; } .legal__body { font-size: 16px; } }

/* ======================================================================================================================
   1 Nov 2026: the sales page (Yusuf: no grey headings, Eva only in the hero, her own section and the close,
   and the workflow builder, campaigns and reports as sales points; "Who it's for" with far more businesses)
   ====================================================================================================================== */

/* ---------- headings: the second line is the signal colour, never grey ---------- */
.h1 .dim, .h2 .dim, .hero__title .dim { color: var(--signal); }
.day .h1 .dim, .day .h2 .dim { color: #007f5a; }
.lead { color: #c3ccd0; }
.h2 + .lead { margin-top: 26px; }
.camp__copy .h2 { font-size: clamp(40px, 4.6vw, 72px); }
.converge__progress { display: none; }
.cell a, .faq__list details p a { color: var(--glow); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- nav: eight links, so the menu folds earlier ---------- */
.nav__links { gap: 26px; }
@media (max-width: 1240px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
}

/* ---------- 01 why: the channels fly into one inbox ---------- */
.converge { height: 250vh; }
.converge__sticky { background: radial-gradient(900px 640px at 74% 46%, rgba(9, 31, 44, .9), rgba(2, 4, 7, 0) 70%), var(--void); }
.converge__shade { background: linear-gradient(0deg, var(--void) 0%, rgba(2, 4, 7, 0) 30%), linear-gradient(180deg, var(--void) 0%, rgba(2, 4, 7, 0) 16%); }
.converge__beats .beat { max-width: 11.5em; }
.converge__box { position: absolute; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); top: 50%; transform: translateY(-50%); width: min(430px, 33vw); }
.cbox { position: relative; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #0b1118, #070b10); border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 140px rgba(0, 231, 164, calc(var(--on, 0) * .18)); opacity: calc(.5 + var(--on, 0) * .5); }
.cbox__top { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); }
.cbox__top img { height: 18px; width: auto; }
.cbox__count { font-size: 10px; color: var(--text-3); }
.cbox__count b { color: var(--glow); font-weight: 600; }
.cbox__empty { position: absolute; left: 0; right: 0; top: 50%; padding: 0 24px; text-align: center; font-size: 10.5px; color: var(--text-3); transition: opacity .4s; }
.cbox.has-rows .cbox__empty { opacity: 0; }
.cbox__rows { min-height: 372px; padding: 6px 0 8px; }
.cbox__rows li { display: flex; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid rgba(255, 255, 255, .05); opacity: 0; transform: translateY(-10px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.cbox__rows li:last-child { border-bottom: 0; }
.cbox__rows li.is-in { opacity: 1; transform: none; }
.cbox .tag { flex: none; }

/* ---------- 02 everything in one plan ---------- */
.feat { padding: clamp(100px, 11vw, 150px) 0 clamp(90px, 10vw, 130px); background: linear-gradient(var(--void), var(--night) 50%, var(--void)); }
.feat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feat__grid a { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 24px 28px; border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)); transition: border-color .35s, background-color .35s, transform .6s var(--ease); }
.feat__grid a:hover { border-color: rgba(0, 231, 164, .45); transform: translateY(-3px); background: linear-gradient(180deg, rgba(0, 231, 164, .07), rgba(0, 231, 164, .01)); }
.feat__ic { width: 46px; height: 46px; margin-bottom: 8px; border-radius: 14px; display: grid; place-items: center; color: var(--glow); background: rgba(0, 231, 164, .08); border: 1px solid rgba(0, 231, 164, .28); }
.feat__ic svg { width: 22px; height: 22px; }
.feat__grid b { font: 600 clamp(19px, 1.5vw, 22px)/1.2 var(--f-display); letter-spacing: -.012em; }
.feat__grid a > span:not(.feat__ic) { color: var(--text-2); font-size: 15px; line-height: 1.5; }
.feat__go { position: absolute; right: 20px; top: 26px; color: var(--text-3); transition: color .3s, transform .4s var(--ease); }
.feat__go svg { width: 18px; height: 18px; }
.feat__grid a:hover .feat__go { color: var(--glow); transform: translateX(3px); }

/* ---------- 05 after hours: the overnight log is the picture ---------- */
.night { min-height: 0; padding: clamp(110px, 12vw, 160px) 0; }
.night__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(900px 600px at 78% 28%, rgba(40, 90, 160, .26), transparent 70%), radial-gradient(700px 500px at 18% 92%, rgba(0, 231, 164, .07), transparent 70%), linear-gradient(180deg, #030812, #050c18 55%, var(--void)); }
.night__sky::before { content: ""; position: absolute; inset: 0; opacity: .55;
  background-image: radial-gradient(1px 1px at 8% 14%, #fff, transparent), radial-gradient(1px 1px at 22% 32%, #fff, transparent), radial-gradient(1.5px 1.5px at 36% 9%, #fff, transparent), radial-gradient(1px 1px at 48% 26%, #fff, transparent),
    radial-gradient(1px 1px at 61% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 38%, #fff, transparent), radial-gradient(1px 1px at 86% 18%, #fff, transparent), radial-gradient(1px 1px at 94% 44%, #fff, transparent),
    radial-gradient(1px 1px at 15% 52%, #fff, transparent), radial-gradient(1px 1px at 55% 48%, #fff, transparent), radial-gradient(1px 1px at 30% 66%, #fff, transparent), radial-gradient(1px 1px at 80% 62%, #fff, transparent); }
.night__moon { position: absolute; right: 9%; top: 11%; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #f6f3ea, #d4dadd 58%, #9aa5ab); box-shadow: 0 0 90px rgba(207, 214, 218, .32); opacity: .85; }
.night__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.overnight { border-radius: 24px; padding: 22px; background: rgba(6, 12, 20, .74); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 50px 120px rgba(0, 0, 0, .55); }
.overnight__head { display: flex; flex-direction: column; gap: 8px; padding: 4px 6px 18px; border-bottom: 1px solid var(--line); }
.overnight__head .mono { font-size: 10.5px; color: var(--signal); }
.overnight__head b { font: 600 clamp(18px, 1.5vw, 21px)/1.2 var(--f-display); letter-spacing: -.01em; }
.overnight__log li { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 16px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.overnight.is-in li { opacity: 1; transform: none; }
.overnight.is-in li:nth-child(2) { transition-delay: .25s; } .overnight.is-in li:nth-child(3) { transition-delay: .5s; } .overnight.is-in li:nth-child(4) { transition-delay: .75s; }
.overnight__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 231, 164, .08); color: var(--glow); }
.overnight__ic svg { width: 19px; height: 19px; }
.overnight__t { font-size: 14.5px; line-height: 1.45; }
.overnight__t .mono { display: block; margin-bottom: 4px; font-size: 10px; color: var(--text-3); }
.overnight__foot { display: flex; gap: 10px; align-items: center; padding: 16px 6px 2px; font-size: 14px; color: var(--text-2); }
.overnight__foot svg { width: 18px; height: 18px; color: var(--signal); flex: none; }

/* ---------- 06 workflow builder ---------- */
.wf { padding: clamp(100px, 11vw, 150px) 0; background: linear-gradient(var(--void), var(--night) 50%, var(--void)); }
.wfmap { border-radius: 24px; overflow: hidden; border: 1px solid var(--line-2); background: #060a0e; box-shadow: 0 50px 140px rgba(0, 0, 0, .55), 0 0 160px rgba(0, 231, 164, .05); }
.wfmap__bar { height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.wfmap__bar > .mono { font-size: 10px; color: var(--text-3); }
.wfmap__bar b { font-weight: 600; }
.wfmap__pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 231, 164, .1); color: var(--glow); font-size: 9.5px; }
.wfmap__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.wfmap__tested { margin-left: auto; font-size: 9.5px; color: var(--text-3); }
.wfmap__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.wfmap__scroll { min-width: 0; overflow: hidden; }
.wfmap__canvas { position: relative; aspect-ratio: 1000 / 440; background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.2px); background-size: 22px 22px; }
.wfmap__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wfmap__wires path { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: stroke .5s; }
.wfmap__wires path.lit { stroke: var(--signal); filter: drop-shadow(0 0 5px rgba(0, 231, 164, .7)); stroke-dasharray: 10 6; animation: flow 1s linear infinite; }
.wnode { position: absolute; left: calc(var(--x) / 1000 * 100%); top: calc(var(--y) / 440 * 100%); transform: translate(-50%, -50%); width: 15.5%; padding: 10px 12px; border-radius: 12px;
  background: rgba(11, 17, 23, .96); border: 1px solid rgba(255, 255, 255, .13); transition: border-color .5s, box-shadow .5s, transform .5s var(--ease); }
.wnode .mono { display: block; margin-bottom: 5px; font-size: 8.5px; color: var(--text-3); }
.wnode b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.wnode em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; line-height: 1.3; color: var(--text-3); }
.wnode--eva .mono, .wnode--end .mono { color: var(--signal); }
.wnode--team .mono { color: var(--amber); }
.wnode--dec .mono { color: var(--violet); }
.wnode--start .mono { color: var(--text-2); }
.wnode--start, .wnode--end { width: 12%; }
.wnode.lit { border-color: var(--signal); box-shadow: 0 0 0 4px rgba(0, 231, 164, .1), 0 0 40px rgba(0, 231, 164, .22); transform: translate(-50%, -50%) scale(1.04); }
.wnode--team.lit { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 196, 107, .1), 0 0 40px rgba(255, 196, 107, .18); }
.wfmap__safety { position: absolute; left: 2.5%; bottom: 4%; font-size: 9px; color: var(--amber); opacity: .85; }
.wfmap__chat { border-left: 1px solid var(--line); background: rgba(3, 6, 9, .75); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wfmap__chat > .mono { font-size: 10px; color: var(--text-3); }
.wfmap__msgs { flex: 1; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; overflow: hidden; }
.wfmap__msgs .msg { max-width: 92%; font-size: 13px; }
.wfmap__result { min-height: 30px; display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--glow); }
.wfmap__result svg { width: 14px; height: 14px; flex: none; }
.wfmap__result.is-team { color: var(--amber); }
.points { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.points li { padding: 28px 28px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .4s; }
.points li:hover { background: rgba(255, 255, 255, .018); }
.points .mono { display: block; margin-bottom: 18px; font-size: 11px; color: var(--signal); }
.points h3 { margin-bottom: 10px; font: 600 clamp(20px, 1.6vw, 23px)/1.18 var(--f-display); letter-spacing: -.012em; }
.points p { color: var(--text-2); font-size: 15px; line-height: 1.55; }

/* ---------- 07 campaigns ---------- */
.camp { padding: clamp(100px, 11vw, 150px) 0; background: radial-gradient(1000px 700px at 82% 45%, rgba(9, 31, 44, .8), rgba(2, 4, 7, 0) 70%), var(--void); }
.camp__grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.ticks { display: flex; flex-direction: column; gap: 16px; margin-top: 36px; }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.ticks svg { width: 20px; height: 20px; margin-top: 2px; color: var(--signal); }
.ticks b { color: var(--text); font-weight: 600; }
.cmock { border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #0b1118, #070b10); border: 1px solid var(--line-2); box-shadow: 0 50px 140px rgba(0, 0, 0, .6), 0 0 160px rgba(0, 231, 164, .06); font-size: 14px; }
.cmock__top { height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.cmock__top .mono { font-size: 10px; color: var(--text-3); }
.cmock__top b { font-weight: 600; }
.cmock__ch { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); }
.cmock__ch svg { width: 14px; height: 14px; color: var(--glow); }
.cmock__steps { display: flex; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line); counter-reset: cs; }
.cmock__steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); counter-increment: cs; transition: color .4s; }
.cmock__steps li::before { content: counter(cs); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); font: 600 10.5px/1 var(--f-body); transition: background-color .4s, border-color .4s, color .4s; }
.cmock__steps li.is-done { color: var(--text-2); }
.cmock__steps li.is-done::before { content: "\2713"; background: rgba(0, 231, 164, .14); border-color: rgba(0, 231, 164, .4); color: var(--glow); }
.cmock__steps li.is-on { color: var(--text); }
.cmock__steps li.is-on::before { border-color: var(--signal); color: var(--glow); }
.cmock__body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 20px; }
.cmock__aud, .cmock__msg { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); padding: 16px; min-width: 0; }
.cmock__aud > .mono, .cmock__msg > .mono { margin-bottom: 12px; font-size: 9.5px; color: var(--text-3); }
.cmock__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cmock__nums span { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.25; color: var(--text-3); }
.cmock__nums b { font: 600 24px/1 var(--f-display); letter-spacing: -.02em; color: var(--text); }
.cmock__nums .ok b { color: var(--glow); }
.cmock__why li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 12px; color: var(--text-2); }
.cmock__why b { color: var(--text); font-weight: 600; }
.cmock__bubble { padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: rgba(0, 231, 164, .09); border: 1px solid rgba(0, 231, 164, .22); font-size: 13px; line-height: 1.5; }
.cmock__cost { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 14px 20px; border-top: 1px solid var(--line); }
.cmock__cost > span:not(.cmock__note) { display: flex; flex-direction: column; gap: 4px; }
.cmock__cost .mono { font-size: 9px; color: var(--text-3); }
.cmock__cost b { font-size: 15px; font-weight: 600; }
.cmock__note { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.cmock__go { position: relative; height: 72px; padding: 14px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; }
.cmock__btn { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 10px; background: var(--text); color: #04070a; font-size: 14px; font-weight: 600; transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .4s; }
.cmock__btn.is-ok { background: var(--signal); color: #032118; }
.cmock__res { position: absolute; left: 20px; right: 20px; top: 14px; bottom: 14px; display: flex; gap: 26px; align-items: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.cmock__res span { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.cmock__res b { font: 600 24px/1 var(--f-display); color: var(--text); }
.cmock.is-sent .cmock__btn { opacity: 0; transform: translateY(-8px); }
.cmock.is-sent .cmock__res { opacity: 1; transform: none; }

/* ---------- 08 reports ---------- */
.rep { padding: clamp(100px, 11vw, 150px) 0; }
.dash { border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #0b1118, #070b10); border: 1px solid var(--line-2); box-shadow: 0 50px 140px rgba(0, 0, 0, .6), 0 0 160px rgba(0, 231, 164, .05); }
.dash__top { height: 58px; display: flex; align-items: center; gap: 26px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.dash__top b { font: 600 16px/1 var(--f-display); }
.dash__tabs { display: flex; gap: 6px; font-size: 10px; }
.dash__tabs span { padding: 7px 11px; border-radius: 8px; color: var(--text-3); }
.dash__tabs .on { background: rgba(0, 231, 164, .12); color: var(--glow); }
.dash__range { margin-left: auto; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 10px; color: var(--text-2); }
.dash__kpis { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.dash__kpis > div { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; border-right: 1px solid var(--line); min-width: 0; }
.dash__kpis > div:last-child { border-right: 0; }
.dash__kpis .mono { font-size: 9.5px; line-height: 1.35; color: var(--text-3); }
.dash__kpis b { font: 600 clamp(26px, 2.4vw, 36px)/1 var(--f-display); letter-spacing: -.025em; }
.dash__kpis em { font-style: normal; font-size: 12px; color: var(--text-3); }
.dash__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.dash__card { padding: 20px 22px 24px; border-right: 1px solid var(--line); min-width: 0; }
.dash__card:last-child { border-right: 0; }
.dash__card > .mono { margin-bottom: 16px; font-size: 9.5px; color: var(--text-3); }
.dash__bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.dash__bars i { flex: 1; height: calc(var(--v) * 100%); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, rgba(0, 231, 164, .75), rgba(0, 231, 164, .12)); transform-origin: 50% 100%; transform: scaleY(.06); transition: transform .9s var(--ease) calc(var(--i) * 18ms); }
.dash.is-on .dash__bars i { transform: none; }
.dash__funnel li, .dash__src li { position: relative; display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text-2); isolation: isolate; }
.dash__funnel li::before, .dash__src li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; width: calc(var(--v) * 100%); border-radius: 8px; background: rgba(0, 231, 164, .14); transform-origin: 0 50%; transform: scaleX(.02); transition: transform 1.1s var(--ease); }
.dash__src li::before { background: rgba(207, 214, 218, .1); }
.dash.is-on .dash__funnel li::before, .dash.is-on .dash__src li::before { transform: none; }
.dash__funnel b, .dash__src b { color: var(--text); font-weight: 600; }
.dash__team li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 12.5px; color: var(--text-2); }
.dash__team .av { width: 30px; height: 30px; font-size: 10.5px; }
.dash__team b { margin-left: auto; color: var(--text); font-weight: 600; }
.dash__ok { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 9.5px; color: var(--glow); }
.dash__ok svg { width: 14px; height: 14px; }
.trio--rep { margin-top: clamp(48px, 6vw, 72px); }

/* ---------- 10 who it's for: six kinds of business, what TalkRight does for each ---------- */
.biz__tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
.biz__tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); text-align: left;
  font: 600 15px/1.2 var(--f-body); color: var(--text-2); transition: border-color .3s, background-color .3s, color .3s; }
.biz__tabs button svg { width: 22px; height: 22px; color: var(--text-3); transition: color .3s; }
.biz__tabs button:hover { border-color: rgba(255, 255, 255, .22); color: var(--text); }
.biz__tabs button[aria-selected="true"] { border-color: rgba(0, 231, 164, .5); background: linear-gradient(180deg, rgba(0, 231, 164, .12), rgba(0, 231, 164, .02)); color: var(--text); }
.biz__tabs button[aria-selected="true"] svg { color: var(--glow); }
.biz__panel { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 26px; overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(180deg, #0b1118, #070a0e); animation: cardIn .5s var(--ease); }
.biz__panel[hidden] { display: none; }
.biz__media { position: relative; min-height: 460px; background: #0b1118; isolation: isolate; }
.biz__media video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.biz__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 6, 9, .75), rgba(3, 6, 9, 0) 55%); }
.biz__chat { position: absolute; left: 22px; bottom: 22px; width: min(360px, calc(100% - 44px)); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 18px;
  background: rgba(4, 8, 12, .74); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 14.5px; line-height: 1.45; }
.biz__chat .mono { display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px; color: var(--text-3); }
.biz__chat .mono svg { width: 13px; height: 13px; color: var(--glow); }
.biz__chat b { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--glow); }
.biz__chat b svg { width: 13px; height: 13px; flex: none; }
.biz__ar { font-size: 16px; text-align: right; }
.biz__copy { display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 48px); }
.biz__copy > .mono { margin-bottom: 18px; font-size: 10.5px; line-height: 1.6; color: var(--signal); }
.biz__copy h3 { margin-bottom: 22px; font: 600 clamp(26px, 2.4vw, 36px)/1.08 var(--f-display); letter-spacing: -.022em; }
.biz__copy ul { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.biz__copy li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.biz__copy li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 12px; height: 6px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg); }
.biz__uses { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.biz__uses span { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); }
.biz__go { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--text); color: #04070a; font-size: 14.5px; font-weight: 600; transition: transform .5s var(--ease), background-color .3s; }
.biz__go:hover { background: #fff; transform: translateY(-2px); }
.biz__go svg { width: 14px; height: 14px; }
.biz__more { margin-top: 16px; font-size: 14px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.biz__more:hover { color: var(--text); }
.industries .ind { margin-top: clamp(56px, 7vw, 88px); }
.more { margin-top: clamp(48px, 6vw, 72px); padding-top: 30px; border-top: 1px solid var(--line); }
.more > .mono { margin-bottom: 18px; font-size: 11px; color: var(--text-3); }
.more__list { display: flex; flex-wrap: wrap; gap: 8px; }
.more__list li { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font-size: 14px; color: var(--text-2); }

/* ---------- responsive (1 Nov) ---------- */
@media (max-width: 1180px) {
  .feat__grid { grid-template-columns: repeat(2, 1fr); }
  .dash__kpis { grid-template-columns: repeat(3, 1fr); }
  .dash__kpis > div:nth-child(3) { border-right: 0; }
  .dash__kpis > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .dash__grid { grid-template-columns: 1fr 1fr; }
  .dash__card:nth-child(2) { border-right: 0; }
  .dash__card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .biz__tabs { grid-template-columns: repeat(3, 1fr); }
  .biz__panel { grid-template-columns: 1fr; }
  .biz__media { min-height: 360px; }
}
@media (max-width: 1100px) {
  .wfmap__body { grid-template-columns: 1fr; }
  .wfmap__chat { border-left: 0; border-top: 1px solid var(--line); }
  .wfmap__msgs { min-height: 0; }
  .camp__grid { grid-template-columns: 1fr; }
  .night__grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .points { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .converge { height: 230vh; }
  .converge__box { left: 50%; right: auto; top: 136px; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); }
  .beat--final br:first-of-type { display: none; }
  .cbox__rows { min-height: 0; }
  .cbox__rows li { padding: 9px 14px; }
  .cbox .rw span { font-size: 12px; }
  .converge__beats { bottom: 8vh; }
  .converge__beats .beat { max-width: 10em; font-size: clamp(30px, 8.6vw, 40px); }
  .beat--big { font-size: clamp(52px, 15vw, 72px) !important; }
  .feat__grid { grid-template-columns: 1fr; gap: 10px; }
  .feat__grid a { display: grid; grid-template-columns: 46px 1fr; gap: 4px 16px; padding: 20px 44px 20px 18px; }
  .feat__ic { grid-row: 1 / 3; margin-bottom: 0; }
  .feat__go { top: 50%; right: 16px; margin-top: -9px; }
  .night { padding: 96px 0 90px; justify-content: flex-start; }
  .night__moon { width: 56px; height: 56px; right: 7%; top: 5%; }
  .overnight { padding: 16px; }
  .overnight__log li { grid-template-columns: 36px 1fr; gap: 6px 12px; }
  .overnight__log .tag { grid-column: 2; justify-self: start; }
  .overnight__ic { width: 36px; height: 36px; }
  .wfmap__bar { gap: 10px; padding: 0 14px; }
  .wfmap__tested { display: none; }
  .wfmap__scroll { overflow-x: auto; scrollbar-width: thin; }
  .wfmap__canvas { width: 880px; }
  .points { grid-template-columns: 1fr; }
  .points li { padding: 24px 22px 26px; }
  .cmock__body { grid-template-columns: 1fr; }
  .cmock__steps li { font-size: 0; gap: 0; flex: none; }
  .cmock__steps li.is-on { font-size: 12px; gap: 8px; }
  .cmock__note { margin-left: 0; }
  .cmock__res { gap: 16px; }
  .cmock__res b { font-size: 20px; }
  .dash__top { gap: 14px; padding: 0 16px; }
  .dash__tabs { display: none; }
  .dash__kpis { grid-template-columns: repeat(2, 1fr); }
  .dash__kpis > div { padding: 16px; border-bottom: 1px solid var(--line); }
  .dash__kpis > div:nth-child(3) { border-right: 1px solid var(--line); }
  .dash__kpis > div:nth-child(2n) { border-right: 0; }
  .dash__kpis > div:nth-last-child(-n+2) { border-bottom: 0; }
  .dash__grid { grid-template-columns: 1fr; }
  .dash__card { border-right: 0; border-bottom: 1px solid var(--line); }
  .dash__card:last-child { border-bottom: 0; }
  .biz__tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .biz__tabs::-webkit-scrollbar { display: none; }
  .biz__tabs button { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14px; white-space: nowrap; }
  .biz__tabs button svg { width: 18px; height: 18px; }
  .biz__media { min-height: 300px; }
  .biz__chat { left: 14px; bottom: 14px; width: calc(100% - 28px); font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .converge__box { position: relative; left: auto; right: auto; top: auto; transform: none; margin: 0 auto; padding-top: 110px; width: min(430px, calc(100vw - 32px)); }
  .cbox { opacity: 1; }
  .cbox__rows li, .overnight__log li { opacity: 1; transform: none; transition: none; }
  .dash__bars i, .dash__funnel li::before, .dash__src li::before { transform: none; transition: none; }
}

/* ======================================================================================================================
   1 Nov 2026 (later): "a day at your business". Yusuf: the site read as a standard AI website (black, neon, glows,
   numbered sections). The home page now tells one day: the story sections sit on daylight tones that move from morning
   to dusk, product views look like the real (light) Inbox, time stamps replace the 01-13 numbering, each heading carries
   a short Arabic line, and a small clock follows the time of day. Night (Eva after hours, the close) stays dark navy.
   ====================================================================================================================== */
:root {
  --void: #050913;              /* navy instead of pure black */
  --night: #08101c;
  --t-morning: #f6f1e8;
  --t-noon: #fbfaf6;
  --t-afternoon: #f5e9d6;
  --t-dusk: #f2ddcf;
  --t-night: #060a14;
  --green-deep: #0b7a57;        /* TalkRight green on daylight */
  --sun: #ec9a34;
  --paper-line: rgba(18, 20, 23, .1);
}
body::after { opacity: .03; }

/* ---------- the day's tones ---------- */
.tone { --bg: var(--t-noon); position: relative; color: var(--ink);
  background: linear-gradient(180deg, var(--bg) 0, var(--bg) calc(100% - 170px), var(--bg-next, var(--bg)) 100%); }
.tone--morning { --bg: var(--t-morning); }
.tone--noon { --bg: var(--t-noon); }
.tone--afternoon { --bg: var(--t-afternoon); }
.tone--dusk { --bg: var(--t-dusk); padding-bottom: calc(clamp(100px, 11vw, 150px) + 230px);
  background: linear-gradient(180deg, var(--t-dusk) 0, var(--t-dusk) calc(100% - 360px), #e7b49b calc(100% - 250px), #9a6a78 calc(100% - 150px), #2c2440 calc(100% - 70px), var(--t-night) 100%); }
.tone .lead { color: #4a5058; }
.tone .h1 .dim, .tone .h2 .dim { color: var(--green-deep); }
.tone .dim { color: rgba(18, 20, 23, .45); }
.tone .label { color: #5b6268; }

/* time stamps instead of section numbers, and an Arabic line under each heading */
.when { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 24px; }
.when__t { font: 500 clamp(26px, 2.4vw, 38px)/1 var(--f-mono); letter-spacing: -.03em; color: var(--green-deep); }
.when__c { font: 500 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #6b7178; }
.when--night { align-items: center; }
.when--night .when__t { color: var(--signal); }
.when--night .when__c { color: var(--text-2); }
.ar { margin-top: 16px; text-align: left; font: 500 clamp(20px, 1.7vw, 27px)/1.45 "IBM Plex Sans Arabic", var(--f-body); color: #858b91; }
.night .ar { color: rgba(242, 245, 244, .55); }
.ar + .lead { margin-top: 22px; }

/* text pieces on daylight */
.tone .evabtn { border-color: rgba(18, 20, 23, .18); }
.tone .evabtn:hover { border-color: rgba(11, 122, 87, .5); background: rgba(11, 122, 87, .05); }
.tone .evabtn .mono { color: #6b7178; }
.tone .trio { border-top-color: var(--paper-line); }
.tone .trio .mono { color: var(--green-deep); }
.tone .trio p:not(.mono) { color: #4a5058; }
.tone .spec, .tone .spec li { border-color: var(--paper-line); }
.tone .spec__k { color: #8a9096; }
.tone .spec__d { color: #4a5058; }
.tone .spec button:hover { background: rgba(18, 20, 23, .03); }
.tone .spec__play { border-color: rgba(18, 20, 23, .2); }
.tone .spec button:hover .spec__play { border-color: var(--green-deep); }
.tone .spec button.is-playing .spec__play { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.tone .spec button.is-playing .spec__k { color: var(--green-deep); }
.tone .points { border-color: var(--paper-line); }
.tone .points li { border-color: var(--paper-line); }
.tone .points li:hover { background: rgba(255, 255, 255, .55); }
.tone .points .mono { color: var(--green-deep); }
.tone .points p { color: #4a5058; }
.tone .ticks li { color: #4a5058; }
.tone .ticks b { color: var(--ink); }
.tone .ticks svg { color: var(--green-deep); }
.tone .eva__frame { box-shadow: 0 0 0 1px rgba(18, 20, 23, .08), 0 40px 90px rgba(40, 30, 10, .18); }

/* ---------- product views look like the real, light Inbox ---------- */
.tone .app, .tone .wfmap, .tone .cmock, .tone .dash { background: #fff; color: var(--ink); border: 1px solid #e6e1d8;
  box-shadow: 0 2px 6px rgba(60, 45, 20, .05), 0 34px 90px rgba(60, 45, 20, .14); }
.tone .app .dim, .tone .app__side > .mono, .tone .app__ws { color: #8a9096; }
.tone .app__top, .tone .app__thead { border-bottom-color: #ece8e0; }
.tone .app__nav { color: #8a9096; }
.tone .app__nav .on { color: var(--ink); box-shadow: 0 19px 0 -18px var(--green-deep); }
.tone .app__list { border-right-color: #ece8e0; }
.tone .app__side { border-left-color: #ece8e0; }
.tone .app__filters button { color: #6b7178; }
.tone .app__filters button:hover { color: var(--ink); }
.tone .app__filters button.on { background: #e3f4ed; color: var(--green-deep); }
.tone .app__rows li { border-bottom-color: #f1eee8; }
.tone .app__rows li.is-sel { background: #eef8f3; box-shadow: inset 2px 0 0 var(--green-deep); }
.tone .rw span { color: #7a8087; }
.tone .rr .mono, .tone .app__thead .mono { color: #9aa0a6; }
.tone .av, .converge.is-dawn .av { background: hsl(var(--h, 180) 42% 40%); }
.tone .av .ch, .converge.is-dawn .av .ch { background: #fff; color: var(--green-deep); box-shadow: 0 0 0 1px #e6e1d8; }
.tone .tag--eva, .converge.is-dawn .tag--eva { background: #e3f4ed; color: #0b6b4c; }
.tone .tag--you, .converge.is-dawn .tag--you { background: #fdeed6; color: #8a5300; }
.tone .tag--done, .converge.is-dawn .tag--done { background: #f0efec; color: #5b6168; }
.tone .app__eva { background: #e3f4ed; color: #0b6b4c; }
.tone .app__eva .dot { background: var(--green-deep); }
.tone .app__take { background: var(--ink); color: #fff; }
.tone .msg--in { background: #f1f0ec; }
.tone .msg--eva { background: #e6f5ee; border-color: #c4e6d7; }
.tone .msg__by { color: var(--green-deep); }
.tone .msg--voice .vw i { background: #8a9096; }
.tone .msg--book svg { color: var(--green-deep); }
.tone .msg--book span { color: #6b7178; }
.tone .typing { background: #e6f5ee; }
.tone .typing i { background: var(--green-deep); }
.tone .app__compose { border-color: #e6e1d8; color: #8a9096; }
.tone .app__compose svg { color: #9aa0a6; }
.tone .app__card { border-color: #ece8e0; background: #faf9f6; }
.tone .app__card--book { border-color: #bfe3d3; background: #eef8f3; }
.tone .app__card--book svg { color: var(--green-deep); }

.tone .wfmap__bar, .tone .cmock__top, .tone .cmock__steps, .tone .cmock__cost, .tone .cmock__go, .tone .dash__top, .tone .dash__kpis { border-color: #ece8e0; }
.tone .wfmap__bar > .mono, .tone .wfmap__tested, .tone .cmock__top .mono { color: #8a9096; }
.tone .wfmap__pill { background: #e3f4ed; color: #0b6b4c; }
.tone .wfmap__pill i { background: var(--green-deep); }
.tone .wfmap__canvas { background-color: #fbfaf7; background-image: radial-gradient(rgba(18, 20, 23, .13) 1px, transparent 1.2px); }
.tone .wfmap__wires path { stroke: #cfc9bf; }
.tone .wfmap__wires path.lit { stroke: var(--green-deep); filter: drop-shadow(0 0 4px rgba(11, 122, 87, .35)); }
.tone .wnode { background: #fff; border-color: #e3ded5; box-shadow: 0 2px 6px rgba(60, 45, 20, .06); }
.tone .wnode .mono { color: #8a9096; }
.tone .wnode--eva .mono, .tone .wnode--end .mono { color: var(--green-deep); }
.tone .wnode--team .mono { color: #b06a00; }
.tone .wnode--dec .mono { color: #6b5bd2; }
.tone .wnode em { color: #7a8087; }
.tone .wnode.lit { border-color: var(--green-deep); box-shadow: 0 0 0 4px rgba(11, 122, 87, .1), 0 10px 26px rgba(11, 122, 87, .16); }
.tone .wnode--team.lit { border-color: #e0a040; box-shadow: 0 0 0 4px rgba(224, 160, 64, .14), 0 10px 26px rgba(224, 160, 64, .18); }
.tone .wfmap__safety { color: #b06a00; }
.tone .wfmap__chat { border-left-color: #ece8e0; border-top-color: #ece8e0; background: #faf9f6; }
.tone .wfmap__chat > .mono { color: #8a9096; }
.tone .wfmap__result { color: var(--green-deep); }
.tone .wfmap__result.is-team { color: #b06a00; }

.tone .cmock__ch { border-color: #e3ded5; color: #5b6168; }
.tone .cmock__ch svg { color: var(--green-deep); }
.tone .cmock__steps li { color: #9aa0a6; }
.tone .cmock__steps li::before { border-color: #ddd8cf; }
.tone .cmock__steps li.is-done { color: #5b6168; }
.tone .cmock__steps li.is-done::before { background: #e3f4ed; border-color: #bfe3d3; color: var(--green-deep); }
.tone .cmock__steps li.is-on { color: var(--ink); }
.tone .cmock__steps li.is-on::before { border-color: var(--green-deep); color: var(--green-deep); }
.tone .cmock__aud, .tone .cmock__msg { border-color: #ece8e0; background: #faf9f6; }
.tone .cmock__aud > .mono, .tone .cmock__msg > .mono, .tone .cmock__cost .mono { color: #8a9096; }
.tone .cmock__nums span { color: #8a9096; }
.tone .cmock__nums b { color: var(--ink); }
.tone .cmock__nums .ok b { color: var(--green-deep); }
.tone .cmock__why li { border-top-color: #ece8e0; color: #5b6168; }
.tone .cmock__why b { color: var(--ink); }
.tone .cmock__bubble { background: #e6f5ee; border-color: #c4e6d7; }
.tone .cmock__note { color: #8a9096; }
.tone .cmock__btn { background: var(--ink); color: #fff; }
.tone .cmock__btn.is-ok { background: var(--green-deep); color: #fff; }
.tone .cmock__res span { color: #5b6168; }
.tone .cmock__res b { color: var(--ink); }

.tone .dash__tabs span { color: #9aa0a6; }
.tone .dash__tabs .on { background: #e3f4ed; color: var(--green-deep); }
.tone .dash__range { border-color: #e3ded5; color: #5b6168; }
.tone .dash__kpis > div, .tone .dash__card { border-color: #ece8e0; }
.tone .dash__kpis .mono, .tone .dash__kpis em, .tone .dash__card > .mono { color: #8a9096; }
.tone .dash__bars i { background: linear-gradient(180deg, rgba(11, 122, 87, .85), rgba(11, 122, 87, .16)); }
.tone .dash__funnel li, .tone .dash__src li, .tone .dash__team li { color: #5b6168; }
.tone .dash__funnel li::before { background: rgba(11, 122, 87, .12); }
.tone .dash__src li::before { background: rgba(18, 20, 23, .06); }
.tone .dash__funnel b, .tone .dash__src b, .tone .dash__team b { color: var(--ink); }
.tone .dash__team li { border-bottom-color: #f1eee8; }
.tone .dash__ok { color: var(--green-deep); }

/* ---------- 07:58: the night before turns into morning as the messages land ---------- */
.converge__dawn { position: absolute; inset: 0; pointer-events: none; opacity: var(--dawn, 0);
  background: radial-gradient(1300px 560px at 50% 112%, rgba(244, 164, 88, .5), rgba(244, 164, 88, 0) 70%), linear-gradient(180deg, #efe6d8 0%, var(--t-morning) 100%); }
.converge__shade { opacity: calc(1 - var(--dawn, 0)); }
.converge__chapter { transition: color .6s; }
.converge.is-dawn .converge__chapter { color: #6b7178; }
.converge__beats .beat { transition: color .7s; }
.converge.is-dawn .beat--final { color: var(--ink); }
.converge.is-dawn .beat--final em { background: linear-gradient(90deg, var(--green-deep), #12a079 70%); -webkit-background-clip: text; background-clip: text; }
.converge.is-dawn .beat .mono { color: var(--green-deep); }
.cbox, .cbox__top, .cbox__rows li, .cbox .rw b, .cbox .rw span, .cbox__count { transition: background-color .6s, border-color .6s, color .6s, box-shadow .6s; }
.cbox__logo { position: relative; display: block; width: 92px; height: 18px; }
.cbox__logo img { position: absolute; left: 0; top: 0; height: 18px; width: auto; transition: opacity .6s; }
.cbox__logo--day { opacity: 0; }
.converge.is-dawn .cbox__logo--day { opacity: 1; }
.converge.is-dawn .cbox__logo--night { opacity: 0; }
.converge.is-dawn .cbox { background: #fff; border-color: #e6e1d8; box-shadow: 0 2px 6px rgba(60, 45, 20, .05), 0 34px 90px rgba(60, 45, 20, .16); }
.converge.is-dawn .cbox__top { border-bottom-color: #ece8e0; }
.converge.is-dawn .cbox__rows li { border-bottom-color: #f1eee8; }
.converge.is-dawn .cbox .rw b { color: var(--ink); }
.converge.is-dawn .cbox .rw span, .converge.is-dawn .cbox__count { color: #7a8087; }
.converge.is-dawn .cbox__count b { color: var(--green-deep); }

/* ---------- the clock that follows the day ---------- */
.dayclock { position: fixed; left: 22px; bottom: 22px; z-index: 55; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); color: var(--ink); border: 1px solid rgba(18, 20, 23, .1); box-shadow: 0 12px 30px rgba(40, 30, 10, .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .6s, color .6s, border-color .6s; }
.dayclock.is-on { opacity: 1; transform: none; }
.dayclock.is-night { background: rgba(8, 14, 26, .82); color: #eef2f6; border-color: rgba(255, 255, 255, .14); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.dayclock__ic { width: 26px; height: 26px; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #ffd88a, var(--sun) 62%, #dc841c);
  box-shadow: 0 0 16px rgba(236, 154, 52, .55); transition: background .6s, box-shadow .6s; }
.dayclock.is-dawn .dayclock__ic { background: radial-gradient(circle at 40% 38%, #ffe3b0, #f2b25e 62%, #e0893a); }
.dayclock.is-night .dayclock__ic { background: radial-gradient(circle at 36% 34%, #f6f3ea, #cfd6da 60%, #97a2a8); box-shadow: 0 0 14px rgba(207, 214, 218, .4); }
.dayclock__t { font: 600 15px/1 var(--f-mono); letter-spacing: .02em; }
.dayclock__c { font-size: 13px; opacity: .72; white-space: nowrap; }

@media (max-width: 720px) {
  .tone--dusk { padding-bottom: calc(96px + 200px); }
  .when__t { font-size: 26px; }
  .ar { font-size: 19px; margin-top: 12px; }
  .dayclock { left: 12px; bottom: 12px; height: 38px; padding: 0 12px 0 7px; gap: 8px; }
  .dayclock__ic { width: 22px; height: 22px; }
  .dayclock__t { font-size: 13px; }
  .dayclock__c { font-size: 12px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .converge__dawn { opacity: 1; }
  .converge__shade { opacity: 0; }
}

/* the sun goes down at the bottom of 18:30, before the night */
.sunset { position: absolute; left: 50%; bottom: 128px; width: 220px; height: 64px; margin-left: -110px; overflow: hidden; pointer-events: none; }
.sunset i { position: absolute; left: 30px; top: 0; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffd9a0, #f4a25a 55%, #e0763e); box-shadow: 0 0 70px rgba(244, 162, 90, .6);
  transform: translateY(calc(var(--sink, 0) * 64px)); }
.sunset::after { content: ""; position: absolute; left: -40px; right: -40px; bottom: 0; height: 1px; background: rgba(255, 220, 190, .45); }
@media (max-width: 720px) { .sunset { bottom: 104px; transform: scale(.8); } }

/* ======================================================================================================================
   1 Nov 2026 (late): the simpler home page and the separate pages (Yusuf agreed the plan after the competitor study).
   Real screens from the platform instead of drawn boxes; menus for Product and Industries; "Book a demo".
   ====================================================================================================================== */

/* ---------- header: menus ---------- */
.nav__links { align-items: center; gap: 30px; }
.nav__menu { position: relative; }
.nav__mbtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; transition: color .3s; }
.nav__mbtn:hover, .nav__menu:focus-within .nav__mbtn, .nav__menu.is-open .nav__mbtn { color: var(--text); }
.nav__mbtn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav__menu.is-open .nav__mbtn svg, .nav__menu:hover .nav__mbtn svg { transform: rotate(180deg); }
.nav__drop { position: absolute; left: -18px; top: calc(100% + 14px); min-width: 300px; padding: 8px; border-radius: 18px; display: flex; flex-direction: column;
  background: rgba(8, 14, 26, .97); border: 1px solid var(--line-2); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s; }
.nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__menu:hover .nav__drop, .nav__menu:focus-within .nav__drop, .nav__menu.is-open .nav__drop { opacity: 1; visibility: visible; transform: none; }
.nav__drop a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; transition: background-color .25s; }
.nav__drop a:hover { background: rgba(255, 255, 255, .06); }
.nav__drop a::after { display: none; }
.nav__drop b { font-weight: 600; font-size: 14.5px; color: var(--text); }
.nav__drop span { font-size: 13px; color: var(--text-3); }
.nav__drop .nav__all { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; font-weight: 600; color: var(--glow); }
.nav--day .nav__drop { background: rgba(255, 255, 255, .98); border-color: rgba(18, 20, 23, .1); box-shadow: 0 30px 70px rgba(40, 30, 10, .16); }
.nav--day .nav__drop a:hover { background: rgba(18, 20, 23, .04); }
.nav--day .nav__drop b { color: var(--ink); }
.nav--day .nav__drop span { color: #7a8087; }
.nav--day .nav__drop .nav__all { color: var(--green-deep); border-top-color: rgba(18, 20, 23, .08); }
.nav--day .nav__mbtn:hover { color: var(--ink); }
.nav__cta { gap: 14px; }
.nav--day .btn--ghost { color: var(--ink); border-color: rgba(18, 20, 23, .2); background: transparent; }
.nav__mobile .mono { margin-top: 14px; font-size: 10.5px; color: var(--text-3); }
@media (max-width: 1240px) { .nav__links, .nav__cta { display: flex; } .nav__burger { display: none; } }
@media (max-width: 1060px) { .nav__links, .nav__cta { display: none; } .nav__burger { display: block; } }

/* ---------- proof: only what's true today ---------- */
.proofbar { padding: 26px 0; background: var(--t-morning); color: var(--ink); border-bottom: 1px solid var(--paper-line); }
.proofbar__list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; }
.proofbar__list li { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: #3d434a; }
.proofbar__list svg { width: 20px; height: 20px; color: var(--green-deep); flex: none; }

/* ---------- the day: one moment per screen, with a real screen ---------- */
.stop { padding: clamp(90px, 10vw, 140px) 0; }
.stop__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.stop--flip .stop__copy { order: 2; }
.stop__copy .lead { margin-top: 22px; max-width: 30em; }
.stop__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 600; font-size: 15.5px; color: var(--green-deep); border-bottom: 1px solid rgba(11, 122, 87, .3); padding-bottom: 3px; transition: gap .3s var(--ease), border-color .3s; }
.stop__more:hover { gap: 12px; border-color: var(--green-deep); }
.stop__more svg { width: 16px; height: 16px; }
.night .stop__more, .eva .stop__more, .industries .stop__more, .teaser .stop__more, .ptease .stop__more, .faq .stop__more { color: var(--glow); border-color: rgba(125, 255, 217, .3); }
.shot { position: relative; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e3ded5;
  box-shadow: 0 2px 6px rgba(60, 45, 20, .05), 0 40px 100px rgba(60, 45, 20, .16); }
.shot__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #f6f4ef; border-bottom: 1px solid #ebe7df; }
.shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ddd8cf; }
.shot__bar span { margin-left: 14px; font: 500 11px/1 var(--f-mono); letter-spacing: .04em; color: #8a9096; }
.shot img { width: 100%; height: auto; }
.stop__also { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(56px, 6vw, 80px); }
.also { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .7);
  border: 1px solid #e6e1d8; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.also:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(60, 45, 20, .12); }
.also img { width: 180px; height: 112px; object-fit: cover; object-position: 0 0; border-radius: 10px; border: 1px solid #ebe7df; }
.also > span { display: flex; flex-direction: column; gap: 5px; }
.also .when__t { font-size: 15px; }
.also b { font: 600 18px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.also > span > span:last-child { font-size: 14px; line-height: 1.45; color: #5b6168; }

/* ---------- Eva at night ---------- */
.eva .ar { color: rgba(242, 245, 244, .55); }

/* ---------- who it's for: link to all industries ---------- */
.biz__all { margin-top: 30px; }

/* ---------- the demo teaser ---------- */
.teaser { padding: clamp(100px, 11vw, 150px) 0; }
.teaser__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.teaser .hero__actions { margin-top: 30px; }
.teaser__shot { position: relative; display: block; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 110px rgba(0, 0, 0, .5); }
.teaser__shot img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.teaser__shot:hover img { transform: scale(1.03); }
.teaser__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--text); color: #04070a; box-shadow: 0 0 0 12px rgba(255, 255, 255, .14); transition: transform .5s var(--ease); }
.teaser__play svg { width: 30px; height: 30px; margin-left: 4px; }
.teaser__shot:hover .teaser__play { transform: scale(1.07); }
.teaser__cap { position: absolute; left: 16px; bottom: 14px; padding: 7px 11px; border-radius: 999px; background: rgba(4, 8, 12, .7); color: var(--text); font-size: 10px; }

/* ---------- pricing: one card ---------- */
.ptease { padding: clamp(100px, 11vw, 150px) 0 clamp(70px, 8vw, 110px); }
.ptease__card { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 3.4vw, 44px); border-radius: 26px;
  border: 1px solid rgba(0, 231, 164, .3); background: radial-gradient(640px 320px at 12% 0%, rgba(0, 231, 164, .12), transparent 70%), linear-gradient(180deg, #0c141b, #070a0e); }
.ptease__price .mono { font-size: 11px; color: var(--signal); }
.ptease__price p:nth-child(2) { display: flex; align-items: baseline; gap: 10px; margin: 12px 0; }
.ptease__price b { font: 600 clamp(48px, 4.6vw, 68px)/1 var(--f-display); letter-spacing: -.035em; }
.ptease__price p:nth-child(2) span { font-size: 18px; color: var(--text-2); }
.ptease__fine { color: var(--text-3) !important; font-size: 10.5px !important; }
.ptease__list { display: flex; flex-direction: column; gap: 12px; }
.ptease__list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; color: var(--text-2); }
.ptease__list svg { width: 18px; height: 18px; margin-top: 2px; color: var(--signal); }
.ptease__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ptease__cta .stop__more { margin-top: 0; }
.faq__more { margin-top: 26px; }

@media (max-width: 1100px) {
  .stop__grid, .teaser__grid { grid-template-columns: 1fr; }
  .stop--flip .stop__copy { order: 0; }
  .ptease__card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .proofbar { padding: 18px 0; }
  .proofbar__list { flex-direction: column; gap: 10px; }
  .proofbar__list li { font-size: 14px; }
  .stop { padding: 80px 0; }
  .stop__also { grid-template-columns: 1fr; }
  .also { grid-template-columns: 110px 1fr; gap: 14px; }
  .also img { width: 110px; height: 72px; }
  .also b { font-size: 16px; }
  .shot__bar { height: 26px; }
  .shot__bar span { display: none; }
  .teaser__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}
.stop.tone--dusk { padding-bottom: calc(clamp(90px, 10vw, 140px) + 300px); }
.stop .sunset { bottom: 150px; }

/* ---------- the separate pages (1 Nov 2026): page heads, rows with real screens, the closing band ---------- */
.page--dark { background: var(--void); }
.phead { padding: clamp(150px, 15vw, 210px) 0 clamp(40px, 5vw, 70px); }
.phead .lead { margin-top: 22px; max-width: 38em; }
.phead .hero__actions { margin-top: 32px; }
.phead--biz { padding-bottom: clamp(80px, 9vw, 120px); }
.phead--biz .biz__panel { margin-top: clamp(48px, 6vw, 72px); }
.phead--demo { padding-top: clamp(140px, 14vw, 190px); }
.phead--price { padding-top: clamp(150px, 15vw, 210px); }
.h3x { font: 600 clamp(30px, 3vw, 46px)/1.06 var(--f-display); letter-spacing: -.025em; }
.stop__copy .h3x + .lead { margin-top: 18px; }
.pts { padding: 0 0 clamp(90px, 10vw, 130px); }
.pts .points { margin-top: 0; }
.cband { padding: clamp(90px, 10vw, 130px) 0; background: radial-gradient(900px 500px at 80% 50%, rgba(0, 231, 164, .1), transparent 70%), var(--void); }
.cband__in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.cband .lead { margin-top: 18px; }
.biz__copy > .mono { margin-top: 6px; }
.biz__lessons { display: flex; flex-wrap: wrap; gap: 8px; }
.biz__lessons a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; color: var(--text); transition: border-color .3s, background-color .3s; }
.biz__lessons a:hover { border-color: rgba(125, 255, 217, .5); background: rgba(0, 231, 164, .06); }
.biz__lessons svg { width: 12px; height: 12px; color: var(--glow); }
.bizgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(48px, 6vw, 72px); }
.bizcard { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; isolation: isolate; border: 1px solid var(--line); transition: transform .6s var(--ease); }
.bizcard:hover { transform: translateY(-4px); }
.bizcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.bizcard:hover img { transform: scale(1.05); }
.bizcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 6, 9, .9), rgba(3, 6, 9, .1) 60%); }
.bizcard > span { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.bizcard b { font: 600 22px/1.15 var(--f-display); color: #fff; }
.bizcard > span > span { font-size: 13px; color: rgba(255, 255, 255, .72); }
.industries--all { padding-top: 0; }
.shot--card { background: #fff; padding: 0; }
.page .tone .label { color: #5b6268; }
@media (max-width: 980px) { .bizgrid { grid-template-columns: repeat(2, 1fr); } .cband__in { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 720px) { .bizgrid { grid-template-columns: 1fr; } .phead { padding-top: 120px; } }
/* buttons on daylight */
.tone .btn--primary { background: var(--ink); color: #f6f4ef; }
.tone .btn--primary:hover { background: #000; box-shadow: 0 14px 40px rgba(11, 15, 20, .18); }
.tone .btn--ghost { color: var(--ink); border-color: rgba(18, 20, 23, .25); background: transparent; }
.tone .btn--ghost:hover { border-color: rgba(18, 20, 23, .55); background: rgba(18, 20, 23, .04); }

/* ======================================================================================================================
   1 Nov 2026 (evening): the demo's business stories (storyboard v1.2). Six kinds of business above the player; picking
   one plays its story, and the sidebar shows the story's chapters and the lessons that matter most for it.
   ====================================================================================================================== */
.bizpick { margin-bottom: 22px; }
.bizpick__label { margin-bottom: 14px; font-size: 10.5px; color: var(--ink-2); }
.bizpick__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.bizpick__b { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 116px; padding: 14px 14px 16px; border-radius: 16px; text-align: left;
  background: #fff; border: 1px solid rgba(11, 15, 20, .08); box-shadow: 0 10px 30px rgba(11, 15, 20, .05);
  transition: border-color .3s, box-shadow .3s, background-color .3s, transform .4s var(--ease); }
.bizpick__b:hover { border-color: rgba(11, 15, 20, .25); transform: translateY(-2px); }
.bizpick__b svg { width: 20px; height: 20px; margin-bottom: 6px; color: var(--green-deep); }
.bizpick__b b { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.bizpick__b span { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.bizpick__b.on { background: var(--ink); border-color: var(--ink); box-shadow: 0 16px 40px rgba(11, 15, 20, .18); }
.bizpick__b.on b { color: #fff; }
.bizpick__b.on span { color: rgba(255, 255, 255, .68); }
.bizpick__b.on svg { color: var(--signal); }
.learn__story { display: none; flex: 1; min-height: 0; overflow: auto; padding: 16px 16px 14px; border-radius: 16px; background: #fff;
  border: 1px solid rgba(11, 15, 20, .08); box-shadow: 0 10px 30px rgba(11, 15, 20, .05); scrollbar-width: thin; scrollbar-color: rgba(11, 15, 20, .2) transparent; }
.learn__box.show-story .learn__story { display: block; }
.learn__box.show-story .learn__list, .learn__box.show-story .learn__intro { display: none; }
.learn__story > .mono { font-size: 10.5px; color: var(--green-deep); }
.learn__story > p.mono:not(:first-child) { margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(11, 15, 20, .08); color: var(--ink-2); }
.learn__story > strong { display: block; margin: 8px 0 10px; font: 600 18px/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.learn__story .lesson__steps { display: block; padding: 0 0 6px; }
.learn__story .lesson__steps .mono { display: inline-block; min-width: 40px; font-size: 10.5px; letter-spacing: .04em; color: #8a8f94; }
.learn__foryou { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.learn__foryou button { padding: 7px 11px; border-radius: 999px; background: rgba(11, 15, 20, .05); font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--ink); text-align: left; transition: background-color .3s; }
.learn__foryou button:hover { background: rgba(11, 15, 20, .1); }
.learn__map { position: relative; display: block; margin: 4px 0 8px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(11, 15, 20, .08); }
.learn__map img { width: 100%; height: 150px; object-fit: cover; object-position: 50% 0; }
.learn__map span { position: absolute; left: 10px; bottom: 10px; padding: 6px 9px; border-radius: 8px; background: rgba(11, 15, 20, .85); color: #fff; font-size: 9.5px; }
.learn__any { margin-top: 22px; font-size: 14.5px; color: var(--ink-2); }
.learn__any button { font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.biz__lessons .biz__story { color: var(--text); background: rgba(0, 231, 164, .14); border-color: rgba(0, 231, 164, .4); }
@media (max-width: 1100px) {
  .bizpick__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .learn__story { overflow: visible; }
}
@media (max-width: 720px) {
  .bizpick__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .bizpick__row::-webkit-scrollbar { display: none; }
  .bizpick__b { flex: 0 0 58%; min-height: 0; scroll-snap-align: start; }
}

/* 1 Nov 2026: "Watch the story" beside "More for …" in Who it's for (the business stories on /demo) */
.biz__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.biz__go--story { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.biz__go--story:hover { background: rgba(255, 255, 255, .08); }