/* BotChat landing page (2026-10-24, sixth pass). Premium and alive: white
   space, ink headings and one accent blue that only marks what you can press
   or what is picked. The page is plain white; the hero is a film drawn in
   code (real cards beside the headline, each doing its job in turn). Sections:
   the hero and the app at work, one rolling line, what it does, powerful
   enough for work (dark), your people and your Bots, safety,
   the apps, pricing, questions. */
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter-latin-opsz-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter-latin-ext-opsz-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }


:root {
  --ink: #0b1020;
  --ink-2: #4d5568;
  --ink-3: #7a8294;
  --line: rgba(15, 23, 42, .08);
  --bg: #ffffff;
  --alt: #f4f6f9;
  --accent: #0a66ff;
  --accent-soft: #eaf2ff;
  --ok: #18a86b;
  --radius: 26px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 36px rgba(15, 23, 42, .06);
  --shadow-lg: 0 2px 6px rgba(15, 23, 42, .05), 0 30px 80px rgba(23, 40, 90, .13);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1 em, h2 em { font-style: normal; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid rgba(10, 102, 255, .45); outline-offset: 3px; border-radius: 12px; }


/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid transparent; transition: border-color .25s; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-row { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 720; font-size: 19px; letter-spacing: -.03em; }
.brand img { border-radius: 9px; }
.nav-links { display: none; gap: 28px; margin-left: 28px; font-size: 15px; font-weight: 540; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-signin { display: none; font-size: 15px; font-weight: 580; color: var(--ink-2); }
.nav-signin:hover { color: var(--ink); }

/* Download menu */
.dl-menu { position: relative; display: none; }
.nav-dl { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; transition: background .15s; }
.nav-dl::-webkit-details-marker { display: none; }
.nav-dl:hover { background: #fff; }
.nav-dl svg { width: 12px; height: 12px; transition: transform .2s; }
.dl-menu[open] .nav-dl svg { transform: rotate(180deg); }
.dl-pop { position: absolute; right: 0; top: calc(100% + 10px); display: grid; gap: 2px; width: 240px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); animation: pop .2s ease both; }
.dl-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; transition: background .15s; }
.dl-item:hover { background: var(--alt); }
.dl-item .os { width: 22px; height: 22px; flex: none; color: var(--ink); }
.dl-item b { display: block; font-size: 15px; line-height: 1.2; }
.dl-item small { font-size: 12.5px; color: var(--ink-3); }
.dl-item small.is-live { color: var(--ok); font-weight: 600; }

/* Buttons */
.btn { --h: 52px; border: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 26px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 640; font-size: 16px; letter-spacing: -.01em; box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 22px rgba(10, 102, 255, .24); transition: transform .18s ease, box-shadow .18s ease, background .18s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); background: #0a5cf0; box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 14px 30px rgba(10, 102, 255, .3); }
.btn:active { transform: translateY(0); }
.btn-sm { --h: 40px; padding: 0 18px; font-size: 14.5px; box-shadow: none; }
.btn-lg { --h: 58px; padding: 0 28px; font-size: 17.5px; border-radius: 16px; }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .14); }
.btn-ghost:hover { background: var(--alt); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .2); }

/* Store buttons: real buttons now; landing.js points them at the stores. */
.store { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 22px 0 18px; border-radius: 16px; background: var(--ink); color: #fff; text-align: left; line-height: 1.1; cursor: pointer; box-shadow: 0 8px 22px rgba(11, 16, 32, .14); transition: transform .18s ease, background .18s; }
.store:hover { transform: translateY(-2px); background: #1b2236; }
.store svg { width: 25px; height: 25px; flex: none; }
.store small { display: block; font-size: 11.5px; font-weight: 550; letter-spacing: .01em; color: rgba(255, 255, 255, .66); }
.store b { display: block; font-size: 17.5px; font-weight: 640; letter-spacing: -.015em; }

/* Hero */
.hero { position: relative; isolation: isolate; padding-top: 64px; text-align: center; }
/* The hero's film, drawn in code: four real cards at two depths beside the
   pill and headline, above the buttons so they never compete with them.
   Each does its job in turn (landing.js) and the layers drift a little with
   the pointer (--px, --py). Only where there is room beside the headline. */
.hero-scene { display: none; position: absolute; left: 0; right: 0; top: 0; height: 430px; z-index: -1; overflow: hidden; pointer-events: none; }
.layer { position: absolute; inset: 0; transform: translate3d(calc(var(--px, 0) * var(--d) * -1px), calc(var(--py, 0) * var(--d) * -1px), 0); }
.layer.far { --d: 7; opacity: .55; }
.layer.near { --d: 16; }
.sc { position: absolute; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid rgba(15, 23, 42, .06); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 22px 48px rgba(20, 40, 90, .1); font-size: 13.5px; line-height: 1.35; text-align: left; animation: sc-in 1.2s cubic-bezier(.2, .7, .2, 1) both, float 9s ease-in-out infinite alternate; }
.far .sc { scale: .86; }
.sc b { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.sc small { display: block; color: var(--ink-3); font-size: 12.5px; }
.sc > img, .sc > svg { width: 30px; height: 30px; flex: none; }
.sc-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--ink-3); }
@keyframes sc-in { from { opacity: 0; translate: 0 34px; } }
@keyframes float { to { transform: translateY(-10px); } }
/* Where each one sits, from the middle of the page out. */
.sc-remind { top: 26px; right: calc(50% + 440px); animation-delay: .7s, -3s; }
.sc-flight { top: 22px; left: calc(50% + 420px); display: grid; gap: 10px; width: 240px; animation-delay: .6s, -5s; }
.sc-chat { top: 150px; right: calc(50% + 384px); display: grid; gap: 8px; width: min(286px, 50vw - 404px); padding: 14px; animation-delay: .3s, -4s; }
.sc-inbox { top: 168px; left: calc(50% + 384px); display: grid; gap: 8px; width: min(262px, 50vw - 404px); padding: 14px; animation-delay: .4s, -7s; }
/* Doing their jobs: landing.js adds is-in and is-done in turn. */
.ring.is-in { animation: ring .9s ease-in-out; }
@keyframes ring { 20%, 60% { transform: rotate(-14deg); } 40%, 80% { transform: rotate(14deg); } }
.fl-top { display: flex; align-items: center; gap: 11px; }
.fl-top img { width: 30px; height: 30px; }
.fl-state { position: relative; display: grid; height: 32px; }
.fl-state > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 10px; font-size: 13px; font-weight: 600; transition: opacity .4s; }
.fs-search { position: relative; overflow: hidden; background: var(--alt); color: var(--ink-2); }
.fs-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ink-3); }
.sc-flight.is-in .fs-bar { width: 100%; transition: width 1.8s linear; }
.fs-done { opacity: 0; background: #e9f6ef; color: #11764a; }
.sc-flight.is-done .fs-done { opacity: 1; }
.sc-flight.is-done .fs-search { opacity: 0; }
.sc-chat .sc-h .face { width: 20px; height: 20px; margin-right: -12px; border: 2px solid #fff; }
.sc-chat .sc-h .face + .face { margin-right: 0; }
.cb { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.cb.is-in { opacity: 1; transform: none; }
.cb-them, .cb-bot { display: flex; align-items: flex-end; gap: 8px; }
.cb .face, .cb img { width: 26px; height: 26px; flex: none; object-fit: contain; }
.cb p { padding: 7px 11px; border-radius: 15px; background: var(--alt); text-wrap: balance; }
.cb-bot p { background: #e4eeff; }
.cb p b { display: block; font-size: 11.5px; font-weight: 650; color: var(--ink-3); }
.cb-typing, .cb-bot { grid-row: 3; grid-column: 1; }
.cb-typing { justify-self: start; align-self: end; display: inline-flex; gap: 4px; margin-left: 34px; padding: 10px 12px; border-radius: 15px; background: #e4eeff; }
.cb-typing i { width: 6px; height: 6px; border-radius: 50%; background: #93a3c2; animation: blink 1.1s infinite; }
.cb-typing i:nth-child(2) { animation-delay: .15s; } .cb-typing i:nth-child(3) { animation-delay: .3s; }
.ib-count { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--alt); color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.ib-row { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
.ib-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ck { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #cfd5df; transition: background .35s, border-color .35s; }
.ib-row.is-done .ck { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ib-row.is-done span { color: var(--ink-3); }
/* Between takes, what the cards did fades out and starts again. */
.hero-scene.is-rewind .sc > * { opacity: 0 !important; transition: opacity .45s; }
.hero-head { display: flex; flex-direction: column; align-items: center; }
/* The Bots' faces above the headline, in a soft arc (owner, 2026-10-25). */
.hero-bots { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 80px; }
.hero-bots img { flex: none; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(30, 50, 120, .14)); animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-bots img:nth-child(1), .hero-bots img:nth-child(5) { width: 44px; height: 44px; margin-bottom: 6px; animation-delay: .16s; }
.hero-bots img:nth-child(2), .hero-bots img:nth-child(4) { width: 58px; height: 58px; margin-bottom: 2px; animation-delay: .08s; }
.hero-bots img:nth-child(3) { width: 76px; height: 76px; margin: 0 4px; }
.hero-bots img:nth-child(4), .hero-bots img:nth-child(5) { scale: -1 1; }
.hero h1 { margin-top: 26px; font-size: clamp(50px, 9.4vw, 100px); line-height: .98; letter-spacing: -.055em; font-weight: 740; animation: rise .9s .06s cubic-bezier(.2, .7, .2, 1) both; }
.lede { margin-top: 26px; max-width: 590px; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--ink-2); letter-spacing: -.008em; text-wrap: balance; animation: rise .9s .12s cubic-bezier(.2, .7, .2, 1) both; }
.lede b { display: block; color: var(--ink); font-weight: 620; }
.get { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; animation: rise .9s .18s cubic-bezier(.2, .7, .2, 1) both; }
.get-sub { font-weight: 500; opacity: .78; }
.cta-note { margin-top: 18px; font-size: 14.5px; color: var(--ink-3); animation: rise .9s .22s cubic-bezier(.2, .7, .2, 1) both; }
.cta-note b { color: var(--ink); font-weight: 640; }
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

/* "Coming soon" note for an app that isn't out yet */
.soon-toast { position: fixed; left: 50%; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 14px; width: min(560px, calc(100% - 24px)); padding: 14px 14px 14px 18px; border-radius: 18px; background: var(--ink); color: rgba(255, 255, 255, .86); font-size: 15px; line-height: 1.4; text-align: left; box-shadow: 0 20px 50px rgba(10, 16, 32, .3); transform: translate(-50%, 0); animation: toast-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.soon-toast b { color: #fff; }
.soon-toast a { flex: none; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 650; font-size: 14px; }
.soon-toast.is-out { animation: toast-out .3s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 16px); } }

/* The app at work */
.stage { position: relative; margin-top: 64px; padding-bottom: 20px; }
.scene-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 28px; padding: 2px 0; }
.scene-tabs button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .82); font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.scene-tabs button img { width: 20px; height: 20px; }
.scene-tabs button:hover { color: var(--ink); background: #fff; }
.scene-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.scene-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(255, 255, 255, .5); transform: scaleX(var(--p, 0)); transform-origin: left; }
.app-wrap { position: relative; max-width: 1080px; margin: 0 auto; isolation: isolate; }
.app-wrap::before { content: ""; position: absolute; inset: 10% 6% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 50, 100, .1), transparent); filter: blur(24px); }
/* Two of the Bots, beside the window on wide screens */
/* Two Bots hop out of the window's sides, partly over its edge, so no screen
   width cuts them off (owner, 2026-10-26: the pink one was clipped at the
   right, the green one at the left). */
.float-bot { display: none; position: absolute; z-index: 3; filter: drop-shadow(0 14px 20px rgba(30, 50, 120, .16)); animation: bob 8s ease-in-out infinite; }
.float-bot.b1 { right: calc(100% - 34px); top: 60%; width: 84px; height: 84px; }
.float-bot.b2 { left: calc(100% - 30px); top: 13%; width: 74px; height: 74px; scale: -1 1; animation-delay: -3s; }

/* Leans back a little and straightens as you scroll to it (landing.js) */
.app { position: relative; overflow: hidden; border: 1px solid rgba(15, 23, 42, .1); border-radius: 18px; background: #fff; text-align: left; box-shadow: 0 50px 110px rgba(20, 40, 90, .16), 0 10px 28px rgba(20, 40, 90, .06); transform: perspective(1800px) rotateX(var(--tilt, 0deg)); transform-origin: 50% 0; }
.app-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 0 0 14px; border-bottom: 1px solid var(--line); background: #f8f9fb; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.app-bar img { border-radius: 4px; }
.app-bar .win { margin-left: auto; width: 138px; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 138 34' fill='none' stroke='%237a8294' stroke-width='1'%3E%3Cpath d='M18 17h10'/%3E%3Crect x='64.5' y='12.5' width='9' height='9'/%3E%3Cpath d='M110 12.5l9 9M119 12.5l-9 9'/%3E%3C/svg%3E") center / 138px 34px no-repeat; }
.app-body { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); height: 560px; }
.app-rail, .app-list { display: none; }
.app-rail { flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; border-right: 1px solid var(--line); }
.app-rail i { width: 38px; height: 38px; border-radius: 12px; background-position: center; background-size: 20px; background-repeat: no-repeat; }
.app-rail i.is-on { background-color: #eef1f6; }
.r-chat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1020' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 1 3.4 6.5L4 19.5l1-3.3A8 8 0 0 1 4 12Z'/%3E%3C/svg%3E"); }
.r-cal { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/svg%3E"); }
.r-lib { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='14' height='13' rx='2.5'/%3E%3Cpath d='M7 4h12a2 2 0 0 1 2 2v11'/%3E%3Cpath d='m3 17 4-4 4 3 3-2 3 3'/%3E%3C/svg%3E"); }
.r-feed { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M7 4h12a1 1 0 0 1 1 1v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9h3Z'/%3E%3Cpath d='M7 4v14a2 2 0 0 1-2 2M10.5 8h6M10.5 12h6M10.5 16h4'/%3E%3C/svg%3E"); }
.r-apps { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='1.8'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.6'/%3E%3C/svg%3E"); }
.r-menu { margin-top: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 9h14M5 15h14'/%3E%3C/svg%3E"); }
.app-list { flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--line); overflow: hidden; }
.al-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 10px; }
.al-top b { font-size: 17px; letter-spacing: -.02em; }
.al-top span { font-size: 20px; color: var(--ink-2); }
.al-search { height: 34px; margin: 0 4px 10px; padding: 0 12px 0 32px; border-radius: 10px; background: #f1f3f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") 10px center / 15px no-repeat; font-size: 13px; line-height: 34px; color: var(--ink-3); }
.al-tabs { display: flex; gap: 6px; margin: 0 4px 10px; }
.al-tabs span { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.al-tabs span.is-on { background: #eef1f6; color: var(--ink); }
.row { display: flex; align-items: center; gap: 11px; padding: 8px 9px; border-radius: 14px; transition: background .3s; }
.row.is-on { background: #eef3fc; }
.row > img, .row > .face, .row .grp { width: 44px; height: 44px; flex: none; object-fit: contain; }
.row > span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.3; }
.row b { display: block; font-size: 14.5px; font-weight: 640; }
.row small { display: block; overflow: hidden; font-size: 13px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.row em { align-self: flex-start; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
/* Your Bot as a round picture, its Library and side chats under it (the
   app since 2026-10-25). */
/* A Bot is a round picture like a person's photo: the Bot fills it and the
   circle crops its shoulders, on a quiet ground (owner, 2026-10-25). */
.row > .photo { position: relative; display: block; width: 44px; height: 44px; flex: none; overflow: hidden; border-radius: 50%; background: #eef1f5; box-shadow: inset 0 0 0 .5px rgba(15, 23, 42, .08); }
.row > .photo img { position: absolute; left: -12%; top: 2%; width: 124%; height: 124%; object-fit: contain; }
.al-sub { display: flex; flex-direction: column; gap: 1px; margin: -2px 0 8px 52px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sub-row { display: flex; align-items: center; gap: 9px; min-height: 30px; padding: 0 9px; border-radius: 10px; font-size: 13px; color: var(--ink); transition: background .3s; }
.sub-row.is-on { background: #eef3fc; font-weight: 600; }
.sub-head { padding: 6px 9px 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.sub-row i { width: 15px; height: 15px; flex: none; background-position: center; background-size: 15px; background-repeat: no-repeat; opacity: .75; }
.s-lib { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='14' height='13' rx='2.5'/%3E%3Cpath d='M7 4h12a2 2 0 0 1 2 2v11'/%3E%3Cpath d='m3 17 4-4 4 3 3-2 3 3'/%3E%3C/svg%3E"); }
.s-hash { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 9h15M4 15h15M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
.grp { position: relative; }
.grp img { position: absolute; left: 0; top: 0; width: 32px; height: 32px; }
.grp .face { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border: 2px solid #fff; }
.app-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: linear-gradient(180deg, #fafbfd, #f2f4f8); }
.ac-head { display: flex; flex-direction: column; align-items: center; padding: 12px 0 4px; }
.ac-head img { width: 48px; height: 48px; object-fit: contain; }
.ac-head b { margin-top: -4px; padding: 2px 11px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .1); font-size: 12.5px; font-weight: 650; }
.ac-head small { margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
/* Older messages slide up under the header and fade, like a chat scrolling. */
.ac-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 10px 16px; overflow: hidden; font-size: 14.5px; line-height: 1.42; transition: opacity .35s; -webkit-mask-image: linear-gradient(180deg, transparent, #000 44px); mask-image: linear-gradient(180deg, transparent, #000 44px); }
.ac-body > * { flex: none; }
.ac-input { display: flex; align-items: center; gap: 12px; height: 48px; margin: 8px 16px 16px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .07); color: var(--ink-3); }
.ac-input span { font-size: 20px; }
.ac-input em { flex: 1; font-style: normal; font-size: 14.5px; }
.ac-input i { width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8294' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 10v4M9 7v10M13 4v16M17 8v8M21 11v2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Messages in the app window */
.b { max-width: 78%; padding: 9px 14px; border-radius: 18px; animation: pop .38s cubic-bezier(.2, .9, .3, 1.15) both; }
.b-me { align-self: flex-end; background: #d7e8ff; color: var(--ink); }
.b-bot { align-self: flex-start; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.b-from { display: block; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.b-them { align-self: flex-start; display: flex; align-items: flex-end; gap: 8px; max-width: 82%; padding: 0; }
.b-them .face { width: 28px; height: 28px; }
.b-them p { padding: 8px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.b-event { align-self: center; max-width: 92%; padding: 6px 13px; border-radius: 999px; background: #e9f6ef; color: #11764a; font-size: 12.5px; font-weight: 650; }
.b-needs { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: #fff7e6; color: #6a4b00; font-size: 13.5px; font-weight: 600; }
.b-needs::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f5a300; }
.b-card { align-self: flex-start; display: flex; align-items: center; gap: 11px; min-width: 260px; max-width: 86%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); }
.b-card img { width: 34px; height: 34px; flex: none; }
.b-card b { display: block; font-size: 14px; }
.b-card small { display: block; color: var(--ink-3); font-size: 12.5px; }
.b-card em { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--alt); color: var(--ink); font-style: normal; font-size: 12.5px; font-weight: 650; }
.b-steps { align-self: flex-start; display: grid; gap: 7px; min-width: 260px; max-width: 86%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: 13.5px; color: var(--ink-2); }
.b-steps span { display: flex; align-items: center; gap: 9px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.b-steps span.is-in { opacity: 1; transform: none; }
.b-steps span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c9d2e3; border-top-color: var(--accent); animation: spin .8s linear infinite; }
.b-steps span.is-done::before { border: 0; animation: none; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
.b-approve { align-self: flex-start; width: min(340px, 90%); padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .07); }
.b-approve p { font-size: 13.5px; color: var(--ink-2); }
.b-approve p b { color: var(--ink); }
.b-approve div { display: flex; gap: 8px; margin-top: 10px; }
.b-approve span { flex: 1; display: grid; place-items: center; height: 36px; border-radius: 999px; background: var(--alt); font-size: 13.5px; font-weight: 650; transition: transform .2s, box-shadow .2s; }
.b-approve span.yes { background: var(--accent); color: #fff; }
.b-approve span.yes.is-pressed { transform: scale(.94); box-shadow: 0 0 0 5px rgba(10, 102, 255, .16); }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); animation: pop .3s ease both; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa2b3; animation: blink 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* The rolling line (Muse's): one sentence at a time */
/* The line stands alone on the screen, with room above and below it (owner,
   2026-10-26). */
.roll { position: relative; display: flex; align-items: center; justify-content: center; min-height: max(560px, 92svh); padding: 140px 20px; text-align: center; }
.roll-line { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 0 .26em; min-height: 2.5em; font-size: clamp(28px, 4.4vw, 54px); line-height: 1.18; font-weight: 700; letter-spacing: -.04em; }
.roll-icon { width: 1.1em; height: 1.1em; }
.roll-while { color: var(--ink-3); }
.roll-line .swap { display: inline-block; animation: swap-in .55s cubic-bezier(.2, .7, .2, 1) both; }
.roll-line .swap-out { animation: swap-out .3s ease both; }
@keyframes swap-in { from { opacity: 0; transform: translateY(.35em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes swap-out { to { opacity: 0; transform: translateY(-.3em); filter: blur(4px); } }

/* Sections */
.section { padding: 100px 20px; }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.eyebrow { display: inline-block; margin-bottom: 16px; font-size: 13px; font-weight: 680; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
h2 { font-size: clamp(32px, 4.8vw, 56px); line-height: 1.05; letter-spacing: -.045em; font-weight: 730; text-wrap: balance; }
.sub { margin-top: 20px; font-size: clamp(17px, 2vw, 19px); color: var(--ink-2); text-wrap: balance; }

/* What it does: a list that opens one at a time, the product beside it */
.feat { display: grid; gap: 32px; }
.feat-list { display: grid; }
.feat-item { position: relative; display: grid; width: 100%; padding: 22px 2px 24px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.fi-title { font-size: clamp(20px, 2.3vw, 24px); font-weight: 660; letter-spacing: -.025em; color: var(--ink-3); transition: color .25s; }
.feat-item:hover .fi-title, .feat-item.is-open .fi-title { color: var(--ink); }
.fi-text { display: block; max-height: 0; overflow: hidden; font-size: 16.5px; color: var(--ink-2); opacity: 0; transition: max-height .45s ease, opacity .35s ease, margin .35s ease; }
.feat-item.is-open .fi-text { max-height: 160px; margin-top: 10px; opacity: 1; }
.fi-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.feat-item.is-open .fi-bar { transform: scaleX(var(--p, 0)); }
.feat-panel { position: relative; display: grid; align-items: center; min-height: 440px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(160deg, #f6f8fb, #edf0f5); }
.fp { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 28px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.fp.is-on { opacity: 1; transform: none; }
/* Phones and tablets: every feature open, its picture right under it, no
   switching (owner, 2026-10-26). landing.js moves each picture under its
   feature. */
.feat.is-stacked { gap: 0; }
.feat.is-stacked .feat-panel { display: none; }
.feat.is-stacked .feat-item { padding: 30px 2px 16px; border-bottom: 0; cursor: default; }
.feat.is-stacked .fi-title { color: var(--ink); }
.feat.is-stacked .fi-text { max-height: none; margin-top: 10px; opacity: 1; }
.feat.is-stacked .fi-bar { display: none; }
.feat-visual { position: relative; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(160deg, #f6f8fb, #edf0f5); }
.feat-visual .fp { opacity: 1; transform: none; padding: 22px; }
.fp-note { display: flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%; padding: 10px 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); font-size: 14.5px; }
.fp-note img { width: 36px; height: 36px; flex: none; object-fit: contain; }
.mini-btn { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 650; }
.browser { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--shadow-lg); }
.br-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #f8f9fb; font-size: 12.5px; color: var(--ink-3); }
.br-bar i { width: 34px; height: 8px; background: radial-gradient(circle, #d4d9e2 3.4px, transparent 4px) 0 0 / 12px 8px repeat-x; }
.br-bar span { flex: 1; padding: 4px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.br-page { position: relative; display: grid; gap: 8px; padding: 16px; }
.br-h { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.fl { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.fl span { grid-row: 2; color: var(--ink-3); font-size: 12.5px; }
.fl em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-weight: 700; }
.fl.is-pick { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10, 102, 255, .1); }
.cursor { position: absolute; left: 62%; top: 52px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-3 1.4-3.4-6.8L5 20Z' fill='%230b1020' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: point 5s ease-in-out infinite; }
@keyframes point { 0%, 100% { transform: translate(40px, 90px); } 35%, 60% { transform: translate(0, 0); } 45% { transform: translate(0, 0) scale(.88); } }
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.appt { display: grid; justify-items: center; gap: 2px; padding: 16px 8px 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.appt svg, .appt .plus { width: 32px; height: 32px; margin-bottom: 6px; }
.appt .plus { display: grid; place-items: center; border-radius: 10px; background: var(--alt); font-size: 22px; color: var(--ink-2); }
.appt b { font-size: 14px; }
.appt small { font-size: 12px; font-weight: 600; color: var(--ok); }
.appt small.off { color: var(--accent); }
.sched-h { font-size: 14px; font-weight: 700; color: var(--ink-3); }
/* Goals as the app draws them: a coloured label, then rows to tick. */
.gl-label { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; }
.gl-label i { width: 18px; height: 18px; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 5.5px rgb(255 255 255 / 72%); }
.gl-label.is-green { color: #1f9d55; }
.gl-label.is-blue { color: #1a56c4; }
.gl-card { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.gl-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.gl-row + .gl-row { border-top: 1px solid var(--line); }
.gl-row > span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.3; }
.gl-row b { display: block; font-size: 14.5px; font-weight: 600; }
.gl-row b.is-done { color: var(--ink-3); text-decoration: line-through; }
.gl-row small { display: block; font-size: 12.5px; color: var(--ink-3); }
.gl-row em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink); }
.gl-box { width: 20px; height: 20px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1.6px #c5cad3; }
.gl-box.is-done { background: #1f9d55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.fp-goals { gap: 10px; }
.sched { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.sched img { width: 38px; height: 38px; flex: none; object-fit: contain; }
.sched span { flex: 1; min-width: 0; line-height: 1.3; }
.sched b { display: block; font-size: 15px; }
.sched small { color: var(--ink-3); font-size: 13px; }
.sched em { flex: none; padding: 4px 10px; border-radius: 999px; background: #e9f6ef; color: #11764a; font-style: normal; font-size: 12px; font-weight: 650; }
.mem { display: flex; flex-wrap: wrap; gap: 9px; }
.mem span { padding: 9px 14px; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .05); font-size: 14.5px; font-weight: 560; }
.mem-edit { display: flex; gap: 8px; }
.mem-edit span { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 650; }

/* Every leading AI, and powerful enough for work: a dark block for weight.
   Graphite, lit softly from above like a stage, a fine highlight on its top
   edge; no coloured light. The final card is the same. */
.power-wrap { padding-top: 40px; padding-bottom: 40px; }
.power, .final-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 40px; background: linear-gradient(180deg, #17191f, #0e0f13 46%); color: #fff; box-shadow: 0 40px 90px rgba(14, 18, 30, .16), 0 8px 24px rgba(14, 18, 30, .08); }
.power::before, .final-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(56% 34% at 50% 0%, rgba(255, 255, 255, .1), transparent); pointer-events: none; }
.power::after, .final-card::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent); }
.power { padding: 72px 18px 48px; }
.power .eyebrow { color: rgba(255, 255, 255, .5); }
.power h2 { color: #fff; }
.power .sub { color: rgba(255, 255, 255, .66); }
.any-model { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .86); }
.any-model::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.power-grid { display: grid; gap: 16px; }
.pcard { padding: 12px 12px 26px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .045); }
.pc-visual { display: grid; place-items: center; height: 260px; padding: 16px; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); color: var(--ink); }
.pcard h3 { margin: 22px 12px 0; font-size: 20px; letter-spacing: -.02em; }
.pcard > p { margin: 8px 12px 0; color: rgba(255, 255, 255, .64); font-size: 15.5px; }
.report, .sheet, .flow { width: 100%; max-width: 340px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, .3); font-size: 13.5px; text-align: left; }
.rp-q { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.rp-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #11764a; }
.rp-meta::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 9px no-repeat; }
.rp-points { display: grid; gap: 5px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--alt); list-style: none; color: var(--ink-2); line-height: 1.4; }
.rp-points b { color: var(--ink); }
.rp-src { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.rp-src span { padding: 3px 9px; border-radius: 999px; background: var(--alt); color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.sheet-file { display: flex; align-items: center; gap: 10px; }
.ft { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #e6f6ee; color: #11764a; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
.sheet-file b { display: block; font-size: 14px; }
.sheet-file small { color: var(--ink-3); font-size: 12px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; margin-top: 14px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.bars i { flex: 1; height: 8%; border-radius: 6px 6px 0 0; background: #d6e4fb; transition: height 1s cubic-bezier(.2, .7, .2, 1); }
.bars i.is-top { background: var(--accent); }
.power.in .bars i { height: var(--h); }
.bars i:nth-child(2) { transition-delay: .08s; } .bars i:nth-child(3) { transition-delay: .16s; } .bars i:nth-child(4) { transition-delay: .24s; } .bars i:nth-child(5) { transition-delay: .32s; } .bars i:nth-child(6) { transition-delay: .4s; }
.sheet-note { margin-top: 10px; color: var(--ink-2); line-height: 1.4; }
.flow { display: grid; gap: 9px; }
.flow-row { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
.fd { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.flow-ok { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 12px; border-radius: 12px; background: #e9f6ef; color: #11764a; font-weight: 650; }
.flow-ok svg { width: 18px; height: 18px; flex: none; }
.can-do { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 860px; margin: 40px auto 0; padding: 0; list-style: none; }
.can-do li { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; color: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 550; }

/* Your people and your Bots */
.friends { padding-left: 0; padding-right: 0; }
.people { display: flex; gap: 22px; margin: 0 -20px 56px; padding: 6px 20px 8px; overflow-x: auto; list-style: none; scrollbar-width: none; }
.people::-webkit-scrollbar { display: none; }
.people li { flex: none; display: flex; flex-direction: column; align-items: center; width: 74px; text-align: center; }
.people .face, .people img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(20, 40, 90, .12); }
.people img { padding: 6px; object-fit: contain; background: var(--accent-soft); }
.people .is-bot img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(10, 102, 255, .28), 0 10px 24px rgba(20, 40, 90, .12); }
.people b { margin-top: 12px; font-size: 14.5px; }
.people small { font-size: 12.5px; color: var(--ink-3); }
/* A row that drifts sideways by itself on phones (owner, 2026-10-26):
   landing.js doubles its items so the loop has no seam, and a touch holds it. */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee > ul { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; max-width: none; margin: 0; overflow: visible; animation: marquee var(--marquee-time, 30s) linear infinite; }
.marquee > ul > li { margin-right: var(--marquee-gap, 12px); }
.marquee:active > ul { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee.is-people { margin: 0 -20px 56px; --marquee-gap: 26px; --marquee-time: 26s; }
.marquee.is-people > .people { padding: 6px 0 10px; }
.marquee.is-can-do { margin-top: 32px; --marquee-gap: 8px; --marquee-time: 34s; }
.marquee.is-can-do > .can-do { display: flex; padding: 0; }
.duo { display: grid; gap: 28px; align-items: center; margin-top: 18px; padding: 28px 22px; border-radius: 32px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.duo-copy h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.035em; }
.duo-copy p { margin-top: 12px; max-width: 460px; color: var(--ink-2); }
.duo-copy .btn { margin-top: 24px; }
.group-chat { display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: #f3f6fb; font-size: 14.5px; }
.gc-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.gc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.gc-head b { display: block; }
.gc-head small { color: var(--ink-3); font-size: 13px; }
.gc-msg { display: flex; align-items: flex-end; gap: 8px; }
.gc-msg .face, .gc-msg img { width: 30px; height: 30px; flex: none; object-fit: contain; }
.gc-msg p { padding: 8px 13px; border-radius: 18px; background: #fff; line-height: 1.4; }
.gc-msg p b { display: block; font-size: 12px; color: var(--ink-3); }
.gc-msg.is-bot p { background: #e4eeff; }
.meet { display: grid; gap: 12px; padding: 18px; border-radius: 22px; background: #f3f6fb; font-size: 14.5px; }
.pick { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: #fff; }
.pick-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pick-head b { display: block; font-size: 14.5px; }
.pick-head small { color: var(--ink-3); font-size: 13px; }
.slot { padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); font-weight: 600; }
.slot.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.booked { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid rgba(24, 168, 107, .3); box-shadow: 0 10px 24px rgba(24, 168, 107, .08); }
.booked b { display: block; }
.booked small { color: var(--ink-3); font-size: 13px; }
.face { display: inline-grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; container-type: inline-size; background: var(--face-bg, #e9eef6); color: var(--face-ink, #34507a); }
.face::before { content: attr(data-i); font-size: 14px; font-size: 42cqi; font-weight: 650; line-height: 1; letter-spacing: -.01em; }
.face.f0 { --face-bg: #e6eefc; --face-ink: #2a5bb5; } .face.f1 { --face-bg: #e3f3f1; --face-ink: #1d7a70; } .face.f2 { --face-bg: #eeeafb; --face-ink: #5b45a8; } .face.f3 { --face-bg: #fbeee8; --face-ink: #a5502f; } .face.f4 { --face-bg: #e7f3ea; --face-ink: #2f7a4b; } .face.f5 { --face-bg: #f8f0de; --face-ink: #8a6420; } .face.f6 { --face-bg: #eceff3; --face-ink: #4b5768; }
.f0 { background-position: 0 0; } .f1 { background-position: 33.333% 0; } .f2 { background-position: 66.666% 0; } .f3 { background-position: 100% 0; }
.f4 { background-position: 0 100%; } .f5 { background-position: 33.333% 100%; } .f6 { background-position: 66.666% 100%; } .f7 { background-position: 100% 100%; }

/* Safety */
.safety-card { display: grid; gap: 40px; padding: 44px 24px; border-radius: 34px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.safety h2 { font-size: clamp(30px, 4.2vw, 46px); }
.checks { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--ink-2); }
.checks li { position: relative; padding-left: 34px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.checks b { color: var(--ink); }
.approve { align-self: center; padding: 18px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-lg); }
.approve-top { display: flex; align-items: center; gap: 10px; }
.approve-top img { object-fit: contain; }
.approve-top b { display: block; font-size: 15px; }
.approve-top small { color: var(--ink-3); font-size: 13px; }
.approve-mail { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--alt); font-size: 14.5px; }
.approve-mail small { color: var(--ink-3); font-size: 12.5px; }
.approve-mail b { display: block; margin-top: 4px; }
.approve-mail p { margin-top: 6px; color: var(--ink-2); }
.approve-actions { display: flex; gap: 10px; margin-top: 14px; }
.approve-actions span { flex: 1; display: grid; place-items: center; height: 46px; border-radius: 999px; font-weight: 650; }
.a-edit { background: var(--alt); }
.a-send { background: var(--accent); color: #fff; }

/* Devices */
.device-row { display: grid; gap: 16px; }
.device { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.device > b { margin-top: 16px; font-size: 21px; letter-spacing: -.02em; }
.device > small { margin-bottom: 18px; color: var(--ink-2); font-size: 15px; }
.store-wide { margin-top: auto; }
.device .btn { height: 58px; border-radius: 16px; }
.device-art { display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 150px; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, #f6f8fb, #edf0f5); }
.screen { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; background: #fff; box-shadow: 0 14px 30px rgba(20, 40, 100, .12); }
.screen i { display: block; width: 68%; height: 11px; border-radius: 8px; background: #e4e8f1; }
.screen i.me { align-self: flex-end; width: 52%; background: #a9cbff; }
.screen i.short { width: 40%; }
.web .screen { width: 76%; height: 122px; padding: 32px 14px 16px; border-radius: 14px 14px 0 0; }
.web .screen::before { content: ""; position: absolute; top: 12px; left: 14px; width: 60px; height: 9px; border-radius: 6px; background: #eef1f6; }
.android .screen { width: 100px; height: 132px; padding: 24px 9px 14px; border: 5px solid #1c2233; border-bottom: 0; border-radius: 24px 24px 0 0; }
.android .screen::before { content: ""; position: absolute; top: 7px; left: 50%; width: 26px; height: 6px; border-radius: 6px; background: #1c2233; transform: translateX(-50%); }
.android .screen i { height: 9px; }
.windows .screen { width: 66%; height: 98px; margin-bottom: 24px; padding: 12px; border: 5px solid #1c2233; border-radius: 10px; }
.windows .screen::after { content: ""; position: absolute; left: 50%; bottom: -21px; width: 60px; height: 16px; background: #1c2233; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); transform: translateX(-50%); }

/* Pricing */
.plans { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px 26px 28px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.plan b { font-size: 21px; letter-spacing: -.02em; }
.plan .price { color: var(--ink-2); font-size: 16px; }
.plan .price strong { color: var(--ink); font-size: 40px; font-weight: 720; letter-spacing: -.04em; }
.plan ul { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 15.5px; }
.plan li { position: relative; padding-left: 26px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.plan ul { margin-bottom: 22px; }
.plan .btn { align-self: flex-start; margin-top: auto; }
.plan.is-main { border-color: rgba(10, 102, 255, .32); box-shadow: 0 0 0 1px rgba(10, 102, 255, .08), var(--shadow-lg); }
.plan-tag { position: absolute; top: -12px; left: 26px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 650; letter-spacing: .01em; }

/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 4px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 620; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 20px; font-weight: 500; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 24px; color: var(--ink-2); max-width: 680px; }

/* Final: the first thing for your Bot */
.final { padding: 40px 20px 160px; }
.final-card { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; text-align: center; }
.final-bots { display: flex; align-items: flex-end; margin-bottom: 22px; }
.final-bots img { object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35)); animation: bob 8s ease-in-out infinite; }
.final-bots img:nth-child(1) { margin-right: -10px; animation-delay: -2s; } .final-bots img:nth-child(3) { margin-left: -10px; animation-delay: -5s; }
.final-card h2 { color: #fff; max-width: 720px; }
.ask { display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: 620px; margin-top: 32px; padding: 7px 7px 7px 22px; border-radius: 33px; background: #fff; box-shadow: 0 18px 46px rgba(0, 0, 0, .3); }
.ask:focus-within { box-shadow: 0 0 0 5px rgba(120, 170, 255, .35), 0 18px 46px rgba(0, 0, 0, .3); }
.ask textarea { flex: 1; min-width: 0; height: 52px; max-height: 120px; padding: 14px 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; line-height: 24px; color: var(--ink); resize: none; overflow-y: auto; }
.ask textarea:focus-visible { outline: none; }
.ask textarea::placeholder { color: var(--ink-3); opacity: 1; }
.ask .btn { flex: none; box-shadow: none; }
.ask-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin-top: 18px; }
.ask-ideas button { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 14px; font-weight: 550; color: rgba(255, 255, 255, .84); cursor: pointer; transition: background .15s, color .15s; }
.ask-ideas button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.final-note { margin-top: 22px; font-size: 14.5px; color: rgba(255, 255, 255, .62); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 34px 0 44px; background: #fff; }
.foot-row { display: grid; gap: 18px; justify-items: start; color: var(--ink-3); font-size: 14.5px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a:hover { color: var(--ink); }

/* Reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* Tiny touches of life on the white (owner, 2026-10-26: "tiny touches, not
   overwhelming"): a few small chat bubbles in the Bots' colours drift slowly
   in a section's margins, behind everything. */
.has-specks { position: relative; isolation: isolate; }
.specks { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.specks i { position: absolute; left: var(--x); top: var(--y); width: var(--s, 14px); height: calc(var(--s, 14px) * .82); border-radius: 50%; background: var(--c, #d3e3ff); opacity: .75; animation: speck var(--t, 11s) ease-in-out var(--d, 0s) infinite alternate; }
.specks i::after { content: ""; position: absolute; left: 10%; bottom: -12%; width: 38%; height: 40%; border-radius: 0 0 0 100%; background: inherit; }
@keyframes speck { from { transform: translate(0, 0) rotate(-8deg); } to { transform: translate(var(--dx, 6px), -16px) rotate(8deg); } }
@media (min-width: 1000px) { .specks i { width: calc(var(--s, 14px) * 1.3); height: calc(var(--s, 14px) * 1.07); } }

/* Phones: the app window is a phone */
@media (max-width: 719px) {
  .app { max-width: 370px; margin: 0 auto; border: 9px solid #141824; border-radius: 46px; box-shadow: 0 0 0 1px #2c3344, 0 36px 70px rgba(20, 40, 90, .2); }
  .app::before { content: ""; position: absolute; top: 9px; left: 50%; z-index: 2; width: 86px; height: 24px; border-radius: 14px; background: #141824; transform: translateX(-50%); }
  .app-bar { display: none; }
  .ac-head { padding-top: 40px; }
  .app-body { height: 540px; }
  .specks i.lg-only { display: none; }
  /* Every job's pill in view, three on each of two rows (owner, 2026-10-26). */
  .scene-tabs { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; justify-items: center; gap: 8px; margin-bottom: 20px; }
}
@media (max-width: 560px) {
  .hero { padding-top: 44px; }
  .get { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 420px; }
  .get .btn-lg { grid-column: 1 / -1; }
  .store { padding: 0 14px; gap: 10px; }
  .store b { font-size: 16.5px; }
  .stage { margin-top: 52px; }
  .scene-tabs button { height: 38px; gap: 7px; padding: 0 13px 0 10px; font-size: 14.5px; }
  .scene-tabs button img { width: 18px; height: 18px; }
  .ac-body { font-size: 14px; }
  .b { max-width: 88%; }
  .roll { min-height: max(500px, 86svh); padding: 120px 20px; }
  .ask { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; border-radius: 26px; }
  .ask textarea { height: auto; min-height: 76px; max-height: 140px; padding: 12px 14px; font-size: 17px; }
  .ask .btn { width: 100%; }
  .ask-ideas button { font-size: 14.5px; }
  .feat-panel { min-height: 0; }
  .fp { padding: 20px; }
  .power { padding: 52px 0 36px; border-radius: 30px; }
  .power .section-head { padding: 0 18px; margin-bottom: 36px; }
  .power h2 { font-size: 31px; }
  .power .sub { font-size: 16.5px; }
  /* The cards slide by on their own, all the same height, each with its
     words (owner, 2026-10-26); landing.js moves them along. */
  .power-grid { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px 4px; scrollbar-width: none; }
  .power-grid::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 86%; scroll-snap-align: center; padding-bottom: 24px; }
  .pcard > p { font-size: 15px; }
  .hero-bots { height: 66px; }
  .hero-bots img:nth-child(1), .hero-bots img:nth-child(5) { width: 36px; height: 36px; }
  .hero-bots img:nth-child(2), .hero-bots img:nth-child(4) { width: 48px; height: 48px; }
  .hero-bots img:nth-child(3) { width: 62px; height: 62px; }
  .pc-visual { height: 330px; }
  .can-do { flex-wrap: nowrap; justify-content: flex-start; margin-top: 32px; }
  .hide-sm { display: none; }
}
/* The narrowest phones: as many pills to a row as fit. */
@media (max-width: 369px) { .scene-tabs { display: flex; gap: 6px; } }
/* Just too narrow for the six pills at full size on one row. */
@media (min-width: 720px) and (max-width: 799px) {
  .scene-tabs button { height: 38px; gap: 7px; padding: 0 13px 0 10px; font-size: 14.5px; }
  .scene-tabs button img { width: 18px; height: 18px; }
}

/* Wider screens */
@media (min-width: 720px) {
  .wrap { padding: 0 32px; }
  .section { padding: 130px 32px; }
  .power-wrap { padding-top: 40px; padding-bottom: 40px; }
  .roll { min-height: max(640px, 96svh); padding: 160px 32px; }
  .nav-signin { display: inline; }
  .dl-menu { display: block; }
  .app-body { grid-template-columns: 290px 1fr; height: 560px; }
  .app-list { display: flex; }
  .ac-body { padding: 10px 8%; }
  .ac-input { margin: 8px 8% 18px; }
  .people { justify-content: center; gap: 34px; margin: 0 auto 64px; }
  .power { padding: 96px 40px 56px; }
  .power-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .device-row { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .foot-row { grid-template-columns: auto 1fr auto; align-items: center; }
  .foot nav { justify-content: center; }
  .safety-card { padding: 64px; }
  .final-card { padding: 84px 40px; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .power-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (min-width: 1000px) {
  .nav-links { display: flex; }
  .hero { padding-top: 80px; }
  .stage { margin-top: 76px; }
  .app-body { grid-template-columns: 60px 300px 1fr; height: 590px; }
  .app-rail { display: flex; }
  .section { padding: 150px 32px; }
  .section-head { margin-bottom: 68px; }
  .feat { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: center; }
  .feat-panel { min-height: 520px; }
  .fp { padding: 48px; }
  .duo { grid-template-columns: 1fr 1fr; gap: 56px; padding: 52px; }
  .duo.is-flip .duo-copy { order: 2; }
  .safety-card { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 72px; padding: 80px; }
}
@media (min-width: 1280px) {
  .hero-scene { display: block; }
}
@media (min-width: 1200px) {
  .float-bot { display: block; }
}

/* Owner review 2026-10-28.
   The last card kept clear of the footer on wide screens: the wider .wrap
   padding there reset its bottom padding to nothing. */
.final.wrap { padding-bottom: 140px; }
@media (min-width: 720px) { .final.wrap { padding-bottom: 180px; } }
/* "BotChat cancels what you don't use while you cook": the line holds the
   screen on its own and stays put through a good stretch of scrolling, on
   phones too, before the next part comes up. */
.roll.wrap { display: block; min-height: 0; height: 190svh; padding-top: 0; padding-bottom: 0; }
.roll .roll-line { position: sticky; top: 0; height: 100svh; margin: 0; }
@media (max-width: 719px) { .roll.wrap { height: 175svh; } }