/* 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%; }
html.glide { scroll-behavior: smooth; }   /* set after load by js/site.js: a page opened at #section lands there at once, only clicks glide */
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 { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: rgba(236, 154, 52, .1); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }   /* under the video, never over it (3 Nov 2026) */
.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; }
.rates__note { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }   /* what the rates leave out (3 Nov 2026) */

/* ---------- 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: 1.6fr repeat(5, 1fr); gap: 36px; }
.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.glide { 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 { margin-top: 10px; font-size: 12px; }
  .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; }
@media (min-width: 981px) { .points:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }   /* four points sit two by two, with no lone one on its own row */

/* ---------- 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); }

/* 2 Nov 2026: the legal and technical review fixes */
/* the cookie choice (js/consent.js): both choices look the same */
.consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 600px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 16px 18px; border-radius: 16px; background: #0b0f14; color: #f2f5f4; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); font-size: 14px; line-height: 1.5; }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 280px; margin: 0; }
.consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.consent__acts { display: flex; gap: 10px; }
.consent__b { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .08); color: #f2f5f4; font: inherit; font-weight: 600; cursor: pointer; transition: background-color .2s; }
.consent__b:hover { background: rgba(255, 255, 255, .16); }
.consent__b:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.foot__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot__cookies:hover { color: var(--text); }
@media (min-width: 1181px) { .foot__grid > div:not(.foot__brand) > .mono { min-height: 2.9em; } }   /* links line up when a label wraps */
@media (max-width: 1180px) { .foot__grid { grid-template-columns: repeat(3, 1fr); } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 980px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
/* clinics: TalkRight Enterprise, not the standard plan */
.biz__note { margin: -12px 0 24px; padding-left: 12px; border-left: 2px solid var(--amber); font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.biz__note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.more__note { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.learn__cardnote { margin: 4px 0 12px; padding: 8px 10px; border-radius: 10px; background: rgba(236, 154, 52, .1); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }   /* not .learn__note: that is the lesson's note under the video */
/* the plan's payment terms */
.plan__terms { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.plan__terms a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
/* the legal pages: which document applies (a box under the effective date), and tables that read as cards on a phone */
.legal__box { margin: 6px 0 30px; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(0, 231, 164, .28); background: rgba(0, 231, 164, .06); }
.legal__body .legal__box h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 18px; }
.legal__box p { margin: 0; }
@media (max-width: 720px) {
  .legal__table { overflow: visible; border: 0; border-radius: 0; }
  .legal__body table { min-width: 0; }
  .legal__body thead { display: none; }
  .legal__body table, .legal__body tbody, .legal__body tr, .legal__body td { display: block; }
  .legal__body tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; }
  .legal__body td { border-bottom: 1px solid var(--line); }
  .legal__body tr td:last-child { border-bottom: 0; }
  .legal__body td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-3); font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
}
/* 2 Nov 2026: easier to find your way (Yusuf got lost between pages, and found the lessons only through a story) */
/* the header marks the page you're on: its menu, and its own entry */
.nav__mbtn { position: relative; }
.nav__mbtn.on, .nav__links > a[aria-current="page"] { color: var(--text); }
.nav__mbtn.on::after { content: ""; position: absolute; left: 0; right: 20px; bottom: -8px; height: 1px; background: var(--signal); }
.nav__links > a[aria-current="page"]::after { transform: scaleX(1); }
.nav--day .nav__mbtn.on, .nav--day .nav__links > a[aria-current="page"] { color: var(--ink); }
.nav--day .nav__mbtn.on::after { background: var(--ink); }
.nav__drop a[aria-current="page"] { background: rgba(255, 255, 255, .06); }
.nav--day .nav__drop a[aria-current="page"] { background: rgba(11, 15, 20, .05); }
.nav__mobile a[aria-current="page"] { color: var(--signal); }
/* home: what you get, at a glance (in the morning light, between the proof bar and 08:00) */
.overview { padding: clamp(80px, 9vw, 120px) 0 clamp(70px, 8vw, 110px); }
.overview__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 4vw, 52px); }
.ocard { display: flex; flex-direction: column; gap: 8px; min-height: 176px; padding: 22px 22px 24px; border-radius: 18px; border: 1px solid rgba(11, 15, 20, .1); background: rgba(255, 255, 255, .55); transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.ocard:hover { border-color: rgba(11, 122, 87, .45); background: #fff; transform: translateY(-2px); }
.ocard svg { width: 22px; height: 22px; margin-bottom: 8px; color: var(--green-deep); }
.ocard b { font: 600 19px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.ocard span { font-size: 14.5px; line-height: 1.5; color: #5b6268; }
.ocard--learn { border-style: dashed; border-color: rgba(11, 122, 87, .4); }
@media (max-width: 1100px) { .overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .overview__grid { grid-template-columns: 1fr; } .ocard { min-height: 0; } }
.teaser__more { margin-top: 18px; font-size: 15px; }
.teaser__more a { color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; transition: color .3s; }
.teaser__more a:hover { color: var(--text); }
/* the demo: "Any business" next to the six businesses; a story's way to every lesson */
.bizpick__row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bizpick__b--all { border-style: dashed; border-color: rgba(11, 122, 87, .4); }
@media (max-width: 1100px) { .bizpick__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.learn__storyhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.learn__storyhead span { white-space: nowrap; }
.learn__storyhead button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.learn__box.show-story .learn__tabs { display: none; }
#lessons { scroll-margin-top: 96px; }
/* product pages: the way on */
.explore { padding: clamp(20px, 3vw, 40px) 0 clamp(70px, 8vw, 110px); }
.explore__in { display: grid; gap: clamp(30px, 4vw, 44px); }
.explore .label { margin-bottom: 14px; }
.explore__lessons { display: flex; flex-wrap: wrap; gap: 8px; }
.explore__lessons a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(11, 15, 20, .14); background: rgba(255, 255, 255, .6); font-size: 14.5px; font-weight: 500; color: var(--ink); transition: border-color .3s, background-color .3s; }
.explore__lessons a:hover { border-color: rgba(11, 122, 87, .5); background: #fff; }
.explore__lessons svg { width: 14px; height: 14px; color: var(--green-deep); }
.explore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.explore__grid a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(11, 15, 20, .1); background: rgba(255, 255, 255, .55); transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.explore__grid a:hover { border-color: rgba(11, 122, 87, .45); background: #fff; transform: translateY(-2px); }
.explore__grid b { font: 600 17px/1.25 var(--f-display); color: var(--ink); }
.explore__grid span { font-size: 14px; color: #5b6268; }
@media (max-width: 900px) { .explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .explore__grid { grid-template-columns: 1fr; } }

/* 6 Nov 2026: reminders and ratings, what the customer sees before and after a visit. Real text, in the words the platform sends. */
#reminders { scroll-margin-top: 72px; }
.remind { margin: 0; }
.remind__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.remind__phone { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #efe8dc; border: 1px solid #e3ded5; box-shadow: 0 24px 60px rgba(11, 15, 20, .1); }
.remind__chip { padding: 11px 14px; font-size: 9.5px; color: #5b6268; background: #f6f4ef; border-bottom: 1px solid #ebe7df; }
.remind__chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; }
.remind__msg { padding: 10px 12px 7px; border-radius: 4px 12px 12px 12px; background: #fff; color: #1b2025; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 1px rgba(11, 15, 20, .08); }
.remind__msg time { display: block; margin-top: 3px; text-align: right; font-size: 10.5px; color: #868c92; }
.remind__btns { display: grid; gap: 4px; }
.remind__btns span { padding: 9px 12px; border-radius: 10px; background: #fff; color: var(--green-deep); font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0 1px 1px rgba(11, 15, 20, .08); }
.remind__stars { border-radius: 12px; background: #fff; box-shadow: 0 1px 1px rgba(11, 15, 20, .08); }
.remind__stars li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; color: #1b2025; font-size: 13.5px; border-top: 1px solid #f1ede5; }
.remind__stars li:first-child { border-top: 0; }
.remind__stars b { flex: 0 0 76px; color: #e39a16; font-weight: 400; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.remind__note { margin-top: 12px; color: #5b6268; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 560px) { .remind__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 6 Nov 2026: "your plan pays for the platform, AI credits pay for Eva" ---------- */
/* the longer headline keeps clear of Eva's face */
@media (min-width: 900px) { .hero__title { font-size: clamp(50px, 5.6vw, 96px); } }
.channels .soon { white-space: nowrap; }
/* phone: the strip shows icons only, so an add-on is a small plus */
@media (max-width: 720px) { .channels .soon--add { font-size: 0; } .channels .soon--add::before { content: "+"; font-size: 10px; letter-spacing: 0; } }
/* which side something is on: the same two labels everywhere */
.tag-ai { display: inline-flex; align-items: center; width: fit-content; padding: 4px 10px; border-radius: 999px; font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tag-ai--team { background: rgba(11, 122, 87, .12); color: var(--green-deep); }
.tag-ai--eva { background: #06202a; color: #7dffd9; }
.when .tag-ai { align-self: center; }
.also__top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.phead__side { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 18px; font-size: 15.5px; line-height: 1.45; color: #4a5058; }
.points p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* the header's Product menu, in two groups */
.nav__group { padding: 12px 12px 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.nav--day .nav__group { color: #7a8087; }
/* home: the shared-phone problem */
.pain { padding: clamp(80px, 9vw, 120px) 0 0; }
.pain__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 4vw, 52px); }
.pain__card { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 26px; border-radius: 18px; border: 1px solid rgba(11, 15, 20, .1); background: rgba(255, 255, 255, .55); }
.pain__card b { font: 600 clamp(20px, 1.7vw, 24px)/1.18 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
.pain__card span { font-size: 15.5px; line-height: 1.5; color: #5b6268; }
.pain__fix { max-width: 46em; margin-top: 24px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: #4a5058; }
.pain__fix b { font-weight: 600; color: var(--ink); }
/* home: what you get, in two groups */
.ogroup { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: clamp(36px, 4vw, 52px); }
.ogroup b { font: 600 clamp(22px, 2vw, 28px)/1.1 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.ogroup + .overview__grid { margin-top: 16px; }
.overview__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ocard--eva { border-color: rgba(11, 122, 87, .35); background: linear-gradient(180deg, rgba(0, 231, 164, .12), rgba(255, 255, 255, .55)); }
.overview__lessons { margin-top: 26px; }
.overview__lessons a { color: #4a5058; }
.overview__lessons a:hover { color: var(--ink); }
/* business pages: what works with no AI */
.biz__noai { margin: -6px 0 24px; padding-left: 12px; border-left: 2px solid var(--signal); font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.biz__noai .mono { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.biz__tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* home: the plans at a glance */
.ptease__plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 4vw, 52px); }
.ptease__plans li { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #0c141b, #070a0e); }
.ptease__plans .mono { font-size: 11px; color: var(--text-3); }
.ptease__plans .is-hot { border-color: rgba(0, 231, 164, .5); background: radial-gradient(420px 240px at 20% 0%, rgba(0, 231, 164, .16), transparent 70%), linear-gradient(180deg, #0c141b, #070a0e); }
.ptease__plans .is-hot .mono { color: var(--signal); }
.ptease__amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ptease__amt b { font: 600 clamp(28px, 2.6vw, 38px)/1 var(--f-display); letter-spacing: -.025em; color: var(--text); }
.ptease__amt span { font-size: 15px; color: var(--text-2); }
.ptease__line { font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.ptease__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; margin-top: 24px; }
.ptease__foot .ptease__cta { flex-direction: row; align-items: center; flex-wrap: wrap; }
@media (max-width: 1100px) { .ptease__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .overview__grid--3, .pain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .biz__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .biz__tabs { display: flex; } }
@media (max-width: 560px) { .overview__grid--3, .pain__grid, .ptease__plans { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the pricing page's plans ---------- */
.pz { background: #fbfaf6; color: var(--ink); }
.pz a:not(.pz__cta) { text-decoration: underline; text-underline-offset: 3px; }
.pz__head { padding: clamp(140px, 13vw, 190px) 0 clamp(28px, 3vw, 40px); }
.pz__wrap { width: min(1240px, calc(100% - 2 * var(--gutter, 24px))); margin-inline: auto; }
.pz h1 { font: 600 clamp(44px, 5.2vw, 76px)/1.02 var(--f-display); letter-spacing: -.03em; }
.pz h1 span { color: var(--green-deep); }
.pz__lead { max-width: 46em; margin-top: 18px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: #4a5158; }
.pz__big--phone { display: none; }

/* the columns, with their thin lines from top to bottom */
.pz__row { border-top: 1px solid #e8e3da; }
.pz__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-inline: 1px solid #e8e3da; }
.pz__col { display: flex; flex-direction: column; padding: 16px; border-left: 1px solid #e8e3da; }
.pz__col:first-child { border-left: 0; }

/* the tile: name at the top, price at the bottom */
.tile2 { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 200px; padding: 20px; border-radius: 18px; overflow: hidden; border: 1px solid #e8e3da;
  background-color: #f1eee8; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.38 0 0 0 .14 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"); }
.tile2 b { font: 500 26px/1.1 var(--f-display); letter-spacing: -.015em; }
.tile2 p { font-size: 15px; line-height: 1.35; color: #4a5158; }
.tile2 p strong { font: 600 26px/1 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.tile2 em { display: inline-block; width: fit-content; margin-top: 8px; padding: 2px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .85); font-style: normal; font-size: 12.5px; font-weight: 600; color: #fff; }
/* the one tile in colour: our colours, with the same grain */
.tile2--hot { border: 0; color: #fff; background-color: #06202a; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"), radial-gradient(240px 190px at 88% 8%, #00e7a4 0, rgba(0, 231, 164, 0) 72%), radial-gradient(260px 200px at 12% 96%, #0b7a57 0, rgba(11, 122, 87, 0) 74%), radial-gradient(260px 220px at 92% 100%, #123f73 0, rgba(18, 63, 115, 0) 76%); }
.tile2--hot p, .tile2--hot p strong { color: #fff; }

.pz__cta { display: flex; align-items: center; justify-content: center; height: 46px; margin-top: 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15.5px; font-weight: 600; }
.pz__plus { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-top: 34px; padding-bottom: 10px; border-bottom: 1px dotted #c9c3b8; font-size: 14px; color: #6a7076; }
.pz__plus svg { width: 14px; height: 14px; transform: rotate(90deg); }
.pz__list { flex: 1; }
.pz__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px dotted #c9c3b8; font-size: 15px; line-height: 1.38; color: #2b3036; }
.pz__list li:last-child { border-bottom: 0; }
.pz__list svg { width: 17px; height: 17px; margin-top: 2px; color: #0b7a57; }
.pz__sum { margin-top: 22px; font-size: 15px; line-height: 1.4; color: #6a7076; }
.pz__sum b { display: block; font: 600 21px/1.2 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
.pz__big { font: 600 clamp(34px, 3.2vw, 46px)/1.04 var(--f-display); letter-spacing: -.025em; }
.pz__packs li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dotted #c9c3b8; font-size: 15px; }
.pz__packs li:last-child { border-bottom: 0; }
.pz__packs b { font-weight: 600; }
/* 8 Nov 2026 (decision C32): the one line under the plans for a finance office */
.pz__pay { padding: 20px 0; border-top: 1px solid #e8e3da; font-size: 16px; line-height: 1.4; color: #2b3036; }

/* the two blocks: what the plan pays for, what AI credits pay for */
.pz__two { padding: clamp(44px, 5vw, 72px) 0; border-top: 1px solid #e8e3da; }
.pz__two h2 { font: 600 clamp(30px, 3.4vw, 48px)/1.06 var(--f-display); letter-spacing: -.025em; }
.pz__two h2 span { color: var(--green-deep); }
.pz__twogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(24px, 3vw, 36px); }
.tile2--short { height: 136px; }
.pz__block h3 { margin-top: 26px; padding-bottom: 8px; border-bottom: 1px dotted #c9c3b8; font: 600 17px/1.3 var(--f-display); letter-spacing: -.008em; }
.pz__block .pz__list { flex: none; }

/* what uses credits */
.pz__rates { padding: clamp(44px, 5vw, 72px) 0 clamp(70px, 8vw, 110px); border-top: 1px solid #e8e3da; }
.pz__rgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 80px); }
.pz__rates h2 { font: 600 clamp(30px, 3vw, 44px)/1.05 var(--f-display); letter-spacing: -.025em; }
.pz__rates h2 + p { margin-top: 12px; color: #4a5158; font-size: 16.5px; line-height: 1.5; }
.pz__rate { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px dotted #c9c3b8; font-size: 16px; }
.pz__rate b { font-weight: 600; white-space: nowrap; }
.pz__small { margin-top: 18px; font-size: 13px; line-height: 1.55; color: #6a7076; }

@media (max-width: 760px) {
  .pz__wrap--bleed { width: 100%; }
  /* phone: swipe across the plans, one and a bit in view */
  .pz__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-inline: 0; -webkit-overflow-scrolling: touch; }
  .pz__col { flex: 0 0 82%; scroll-snap-align: start; }
  .pz__col:first-child { padding-left: var(--gutter, 24px); flex-basis: calc(82% + var(--gutter, 24px) - 16px); }
  .pz__rgrid { grid-template-columns: minmax(0, 1fr); }
  .pz__twogrid { grid-template-columns: minmax(0, 1fr); }
  /* phone: the big line goes above the swipe, so nobody swipes past an empty column */
  .pz__col--title { display: none; }
  .pz__big--phone { display: block; padding: 22px var(--gutter, 24px) 0; }
  .pz__col--title + .pz__col { padding-left: var(--gutter, 24px); flex-basis: calc(82% + var(--gutter, 24px) - 16px); }
}
/* tablets and small laptops: two plans across, so the prices don't wrap */
@media (min-width: 761px) and (max-width: 1100px) {
  .pz__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz__col:nth-child(odd) { border-left: 0; }
  .pz__col:nth-child(n+3) { border-top: 1px solid #e8e3da; }
}
.pz__cta--fit { width: fit-content; min-width: 180px; padding: 0 28px; margin-top: 22px; }
.pz__rates .pz__list { flex: none; }
.pz__rates .pz__list li:first-child { padding-top: 13px; }
.pz__col a.pz__cta, a.pz__cta { text-decoration: none; }
.lesson__noai { display: inline-block; margin-right: 2px; padding: 1px 7px; border-radius: 999px; background: rgba(11, 122, 87, .12); color: var(--green-deep); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* 7 Nov 2026 (Yusuf: "complete and utter simplicity"): the short home page: pick your business, then three jobs. */
.biz__tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.biz__tabs button { padding: 14px 14px 16px; gap: 10px; font-size: 14.5px; }
.biz__jobs { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.biz__jobs li { padding-left: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.biz__jobs li::before { display: none; }
.biz__jobs b { display: block; margin-bottom: 2px; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.biz__copy .biz__acts { margin-top: auto; }
.jobs { padding: clamp(90px, 10vw, 140px) 0; }
.jobs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.job { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 22px; border-radius: 20px; border: 1px solid var(--paper-line); background: rgba(255, 255, 255, .6); color: var(--ink); transition: transform .3s, border-color .3s; }
.job:hover { transform: translateY(-3px); border-color: rgba(11, 122, 87, .4); }
.job img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 12px; border: 1px solid var(--paper-line); }
.job b { margin: 8px 10px 0; font: 600 clamp(24px, 2.2vw, 32px)/1.1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.job span { margin: 0 10px; font-size: 16px; line-height: 1.5; color: #4a5058; }
.jobs__you { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(36px, 5vw, 64px); }
.jobs__you img { width: 100%; border-radius: 16px; border: 1px solid var(--paper-line); }
.jobs__you h3 { margin-bottom: 12px; font: 600 clamp(26px, 2.6vw, 38px)/1.08 var(--f-display); letter-spacing: -.022em; color: var(--ink); }
.jobs__you p { font-size: 17px; line-height: 1.55; color: #4a5058; }
.jobs__noai { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--paper-line); font-size: 15.5px !important; }
.jobs__noai b { color: var(--ink); }
.jobs__noai a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .biz__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .jobs__grid, .jobs__you { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .biz__tabs { display: flex; } }

/* 7 Nov 2026: plain home page. Big channel tiles in the hero, six-item trust row, tagged overview cards */
.hero__title.hero__title--home { font-size: clamp(44px, 5vw, 80px); margin-bottom: 22px; }
.chtiles { display: flex; flex-wrap: wrap; gap: 14px clamp(14px, 2vw, 26px); margin: 0 0 28px; padding: 0; list-style: none; }
.chtile { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; font: 500 12px/1.2 var(--f-body); color: var(--text); text-align: center; }
.chtile__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.chtile__icon svg { width: 28px; height: 28px; }
.chtile--wa .chtile__icon { background: #25d366; }
.chtile--ig .chtile__icon { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); }
.chtile--ms .chtile__icon { background: #0a7cff; }
.chtile--mail .chtile__icon { background: #2f6fed; }
.chtile--tt .chtile__icon { background: #111; border: 1px solid var(--line-2); }
.chtile--call .chtile__icon { background: #5b5fef; }
.chtile__tag { margin-top: -4px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.proofbar__list--six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; }
@media (max-width: 900px) { .proofbar__list--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .proofbar__list--six { grid-template-columns: 1fr; } .chtiles { gap: 12px; } .chtile { min-width: 56px; font-size: 11px; } .chtile__icon { width: 50px; height: 50px; } }
.ocard span.tag-ai { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.ocard span.tag-ai--team { color: var(--green-deep); }
.ocard span.tag-ai--eva { color: #7dffd9; }
.ocard .tag-ai { margin-bottom: 4px; }
.overview .pain__fix { margin-top: 32px; }
@media (max-width: 720px) {
  .hero:has(.hero__title--home) { height: auto; min-height: 100svh; }
  .hero:has(.hero__title--home) .hero__content { padding-top: 92px; padding-bottom: 70px; }
  .hero__title.hero__title--home { font-size: clamp(34px, 9.6vw, 48px); }
  .chtiles { flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
  .chtile { min-width: 0; flex: 1 1 0; font-size: 10px; }
  .chtile__icon { width: 46px; height: 46px; border-radius: 13px; }
  .chtile__icon svg { width: 23px; height: 23px; }
}
/* phone refinement: face on top, words underneath */
@media (max-width: 720px) {
  .hero:has(.hero__title--home) .hero__media { height: 330px; }
  .hero:has(.hero__title--home) .hero__content { padding-top: 300px; }
  .hero:has(.hero__title--home) .hero__shade { background: linear-gradient(180deg, rgba(2,4,7,.5) 0%, rgba(2,4,7,0) 20%), linear-gradient(0deg, var(--void) 0%, rgba(2,4,7,0) 100%); }
  .hero__title.hero__title--home { font-size: clamp(30px, 8.2vw, 44px); }
}
@media (min-width: 721px) { .chtile__icon { width: 60px; height: 60px; border-radius: 17px; } .chtile { font-size: 13px; } }
/* ======================================================================================================================
   8 Nov 2026 (Yusuf: "how it could work for your business, and then list these"): more kinds of business on /industries,
   in groups. Each group: a picture the site already has and its name, then one card per business: what a customer asks,
   and the panel's three lines (.biz__jobs). Colours, borders and the card background are the panels' own.
   ====================================================================================================================== */
.phead--biz .stop__more { color: var(--glow); border-color: rgba(125, 255, 217, .3); }
.bizmore { padding: 0 0 clamp(80px, 9vw, 120px); scroll-margin-top: 96px; }
.bizmore__head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.bizmore__head .more__list { margin-top: 30px; }
.bizmore__head .more__list li { padding: 0; }
.bizmore__head .more__list a { display: block; padding: 9px 14px; border-radius: 999px; color: var(--text-2); transition: color .3s; }
.bizmore__head .more__list a:hover { color: var(--text); }
.bizmore__group { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 56px); padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.bizmore__side img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; border-radius: 18px; border: 1px solid var(--line); }
.bizmore__side h3 { font: 600 clamp(22px, 2vw, 28px)/1.15 var(--f-display); letter-spacing: -.015em; }
.bizmore__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.bizmore__card { padding: 24px 24px 26px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, #0b1118, #070a0e); scroll-margin-top: 112px; }
.bizmore__card h4 { margin-bottom: 14px; font: 600 21px/1.2 var(--f-display); letter-spacing: -.01em; }
.bizmore__ask { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); font-size: 14.5px; line-height: 1.45; }
.bizmore__ask .mono { font-size: 9.5px; color: var(--text-3); }
.bizmore__card .biz__jobs { gap: 12px; margin-bottom: 0; }
.bizmore__card .biz__jobs li { font-size: 15px; }
.bizmore__card .biz__note { margin: 18px 0 0; }
@media (max-width: 980px) {
  .bizmore__group { grid-template-columns: 1fr; gap: 20px; }
  .bizmore__side { display: flex; align-items: center; gap: 16px; }
  .bizmore__side img { width: 120px; margin-bottom: 0; border-radius: 14px; }
}
@media (max-width: 720px) {
  .bizmore__cards { grid-template-columns: 1fr; }
  .bizmore__side img { width: 76px; border-radius: 12px; }
  .bizmore__card { padding: 20px 18px 22px; }
}
/* 10 Nov 2026: /faq, one question block per topic, closer together; the topic chips link down the page (tools/build_pages.cjs FAQ) */
.phead--faq { padding-bottom: clamp(24px, 3vw, 40px); }
.phead--faq .lead a { color: var(--glow); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.phead--faq .more__list { margin-top: 30px; }
.phead--faq .more__list li { padding: 0; }
.phead--faq .more__list a { display: block; padding: 9px 14px; border-radius: 999px; color: var(--text-2); transition: color .3s; }
.phead--faq .more__list a:hover { color: var(--signal); }
.faq--group { padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.faq--group .h2 { font-size: clamp(28px, 3vw, 42px); }
.faq--group .sechead { margin-bottom: 0; }
/* the help guides (/help/hubspot, /help/zoho) use the legal page layout; their small label sits above the title */
.legal__body .label { margin-bottom: 18px; color: var(--signal); }
.legal__body ol li { margin-bottom: 12px; }

/* ===== 10 Nov 2026: website review (marketing/website-2026-10/REVIEW-2026-11-10.md) ===== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* change 1: one real screen under the home page's first screen */
.hshot { padding: clamp(72px, 8vw, 112px) 0 0; }
.hshot__cta { margin-top: 22px; }
.hshot .shot { margin-top: clamp(30px, 4vw, 52px); }
.hshot__note { margin-top: 12px; font-size: 11px; color: #6b7178; }
/* the company line in every footer */
.foot__co { margin-top: 18px; padding-bottom: 6px; }
.foot__co p { margin: 0; max-width: none; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
/* change 6: Eva's page shows Eva */
.phead--eva__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.phead--eva .eva__frame { width: 100%; max-width: 440px; margin-left: auto; background: #e8e2d6; box-shadow: 0 0 0 1px rgba(11, 15, 20, .08), 0 40px 90px rgba(11, 15, 20, .16); }
.evahear { cursor: pointer; }
.tone .evahear.is-playing { border-color: var(--green-deep); color: var(--green-deep); }
.evachat { width: 100%; max-width: 480px; margin: 0; justify-self: center; padding: 18px 18px 16px; border-radius: 22px; background: #efeae0; border: 1px solid #e3ded5; }
.evachat__head { margin: 0 0 14px; font-size: 10.5px; color: #6b7178; }
.evachat__body { display: flex; flex-direction: column; gap: 10px; font: 400 17px/1.6 "IBM Plex Sans Arabic", var(--f-body); }
.evachat__body p { margin: 0; max-width: 86%; padding: 10px 14px; border-radius: 16px; }
.evachat__in { align-self: flex-start; background: #fff; color: #1b1f24; border: 1px solid #e3ded5; }
.evachat__out { align-self: flex-end; background: #0b7a57; color: #fff; }
.evachat__out b { display: block; font-size: 12.5px; font-weight: 600; opacity: .85; }
.evachat figcaption { margin-top: 14px; font-size: 13px; line-height: 1.45; color: #5b6268; }
@media (max-width: 980px) {
  .phead--eva__grid { grid-template-columns: 1fr; }
  .phead--eva .eva__visual { order: -1; }
  .phead--eva .eva__frame { max-width: 320px; margin: 0; aspect-ratio: 4 / 3.5; }
}
/* change 5: the first screen on a phone shows the headline, one button and the trial line. Eva's face is shorter, the channel
   icons and the second button sit under the trial line, and the cookie box is slimmer. */
@media (max-width: 720px) {
  .hero:has(.hero__title--home) .hero__media { height: 250px; }
  .hero:has(.hero__title--home) .hero__content { display: flex; flex-direction: column; padding-top: 196px; padding-bottom: 64px; }
  .hero:has(.hero__title--home) .hero__lead { margin-bottom: 20px; font-size: 16px; }
  .hero:has(.hero__title--home) .hero__actions { display: contents; }
  .hero:has(.hero__title--home) .hero__actions .btn--primary { order: 1; flex: 0 0 auto; width: 100%; height: 52px; font-size: 16px; }
  .hero:has(.hero__title--home) .hero__fine { order: 2; margin-top: 14px; font: 400 12.5px/1.5 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text-2); }
  .hero:has(.hero__title--home) .chtiles { order: 3; margin: 28px 0 0; }
  .hero:has(.hero__title--home) .hero__actions .btn--ghost { order: 4; flex: 0 0 auto; width: 100%; margin-top: 22px; }
  .hero:has(.hero__title--home) .hero__eva { top: 74px; }
  .phead--eva .eva__frame { max-width: none; aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) {
  .consent { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; gap: 8px 12px; border-radius: 14px; font-size: 12px; line-height: 1.4; }
  .consent p { flex: 1 1 100%; }
  .consent__acts { width: 100%; }
  .consent__b { flex: 1 1 0; height: 34px; padding: 0 12px; font-size: 12.5px; }
}
/* 10 Nov 2026 (website review, phone craft): footer links big enough for a thumb, labels big enough to read */
@media (max-width: 720px) {
  .foot__grid a { display: block; padding: 7px 0; }
  .foot__social a { display: inline-block; padding: 8px 14px 8px 0; }
  .tag-ai { font-size: 11.5px; }
  .chtile__tag { font-size: 10px; }
  .pain__acts { margin-top: 26px; }
  .pain__acts .btn { flex: 1 1 100%; }
}
.pain__acts { margin-top: 30px; }
.bizmore__side img { height: auto; }   /* 10 Nov 2026: the picture keeps its 4:3 shape now that it has a width and height */