/* The ISAI website (isai.daetalabs.com): the home page, Install and Privacy. DESIGN.md, "Website" and "Names".
   Black and white surfaces, ISAI blue as the only accent, liquid glass where something floats, the system theme (light
   or dark). Every colour is a token below. Icons are Lucide line icons in currentColor; only the ISAI mark keeps its own. */

@font-face { font-family:"Geist"; src:url("/site/Geist-1.7.2.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
/* the wordmark: ISAI in Space Grotesk Bold (SIL Open Font License: SpaceGrotesk-OFL.txt), Basic Latin only */
@font-face { font-family:"Space Grotesk"; src:url("/site/SpaceGrotesk-Bold-1.2.3.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  color-scheme:light;
  /* Graphite, the look of the ISAI app and ISA (DESIGN.md, "Theme"): tonal neutrals with a cool tint, thin lines, and ISAI blue as the one colour.
     The names below are the ones the rest of this file uses. */
  --n-bg:#F2F2F0; --n-panel:#FFFFFF; --n-panel2:#F6F6F4; --n-ink:#111214; --n-ink2:#5B5E65; --n-line:#E0E0DD; --tint-c:#7C8AA3; --tint-amt:6%;
  --canvas:color-mix(in oklab, var(--n-bg), var(--tint-c) var(--tint-amt));
  --panel:color-mix(in oklab, var(--n-panel), var(--tint-c) calc(var(--tint-amt) / 3));
  --panel2:color-mix(in oklab, var(--n-panel2), var(--tint-c) var(--tint-amt));
  --page:var(--canvas); --raised:var(--panel); --tint:var(--panel2);
  --surface2:color-mix(in oklab, var(--panel2), var(--n-ink) 3%);
  --text:var(--n-ink); --muted:var(--n-ink2); --faint:color-mix(in oklab, var(--n-ink2), var(--n-panel) 14%);
  --line:color-mix(in oklab, var(--n-line), var(--tint-c) var(--tint-amt)); --line-strong:color-mix(in oklab, var(--n-line), var(--n-ink) 14%);
  --hover:color-mix(in oklab, var(--text) 8%, transparent);
  --primary:var(--n-ink); --on-primary:var(--panel);
  --accent:#5B64E0; --accent-hover:#4b54d4; --accent-soft:color-mix(in oklab, var(--accent) 12%, transparent); --sel:color-mix(in oklab, var(--accent) 24%, transparent);
  --on-accent:#ffffff; --accent-ink:#4650D6;
  --good:var(--accent-ink); --warn:var(--text); --amber:var(--text); /* ISAI colours only: blue, ink, white, grey */
  --shadow-sm:0 1px 2px rgba(20,22,28,.05);
  --card:0 1px 2px rgba(20,22,28,.04), 0 8px 24px rgba(20,22,28,.06);
  --shadow-xl:0 2px 6px rgba(20,22,28,.05), 0 30px 80px -20px rgba(20,22,28,.28);
  /* surfaces that float: solid, with one thin line (no glass) */
  --glass:var(--panel); --glass-strong:var(--panel); --glass-line:var(--line); --glass-edge:transparent;
  --solid:var(--panel); --pop-shadow:0 0 0 1px rgba(20,22,28,.04), 0 8px 24px rgba(20,22,28,.12);
  --blob1:transparent; --blob2:transparent; --blob3:transparent; --blob4:transparent;
  --sheet:var(--panel); --chip:var(--panel); --chip-line:var(--line-strong);
  /* ISA (the bubble next to the person's AI) and its count, as in the extension */
  --mark-disc:#FFFFFF; --mark-ring:#5B64E0; --mark-ring-o:.38;
  --disc:var(--mark-disc); --ring:color-mix(in oklab, var(--mark-ring) calc(var(--mark-ring-o) * 100%), transparent); --count-bg:var(--text); --count-fg:var(--panel);
  /* the liquid mark (the logo keeps these in both themes) */
  --liq-1:#C9D2FF; --liq-2:#7C86F2; --liq-3:#4046C9; --liq-edge:rgba(64,70,201,.18);
  --grad-1:var(--text); --grad-2:var(--text);
  /* the steps of How it works */
  --step-bg:var(--panel); --step-ring:var(--line-strong); --step-done-bg:var(--accent-soft); --step-done-ink:var(--accent-ink);
  --step-line:var(--line); --step-line-done:var(--line-strong);
  --font:"Geist", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:20px; --nav-h:60px; --pad:clamp(20px, 4.6vw, 56px); --gap:12px; --claude:#C15F3C;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme:dark;
    --n-bg:#0B0C0E; --n-panel:#131417; --n-panel2:#181A1E; --n-ink:#F2F3F4; --n-ink2:#9A9EA7; --n-line:#25272C;
    --accent:#7C86F2; --accent-hover:#8e97f6; --on-accent:#0B0E14; --accent-ink:#9AA2F7;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --card:0 0 0 .5px rgba(255,255,255,.05);
    --shadow-xl:0 0 0 .5px rgba(255,255,255,.07), 0 40px 100px -24px rgba(0,0,0,.85);
    --pop-shadow:inset 0 0 1px rgba(255,255,255,.16), 0 10px 30px rgba(0,0,0,.55);
    --mark-disc:#0a0a0a; --mark-ring:#7C86F2; --mark-ring-o:.45;
    --liq-edge:rgba(255,255,255,.18);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body { margin:0; min-height:100vh; background:var(--page); color:var(--text); font:17px/1.55 var(--font); letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
h1, h2, h3, h4, p, figure { margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
strong, b { font-weight:600; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
.lead a, .faq a, .page-body a:not(.btn), .page-note a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent); }
.lead a:hover, .faq a:hover, .page-body a:not(.btn):hover, .page-note a:hover { text-decoration-color:currentColor; }
button { font:inherit; color:inherit; }
svg { display:block; flex:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
::selection { background:var(--accent-soft); }
.defs { position:absolute; width:0; height:0; overflow:hidden; }
.skip { position:fixed; left:16px; top:-64px; z-index:100; padding:10px 16px; border-radius:12px; background:var(--text); color:var(--page); font-weight:500; transition:top .2s var(--ease); }
.skip:focus { top:12px; text-decoration:none; }

/* the ISAI mark: liquid gradient body and a soft highlight */
.mark { overflow:visible; }
.mark .body { fill:url(#dl-liquid); stroke:var(--liq-edge); stroke-width:8; stroke-linejoin:round; }
.mark .sheen { fill:url(#dl-sheen); opacity:.55; }
/* The logo sits in its circle (white, a soft blue ring), as on the icon. */
.mark .disc { fill:#fff; } .mark .ring { fill:none; stroke:#5B64E0; stroke-opacity:.38; stroke-width:12; }
.liq-1 { stop-color:var(--liq-1); } .liq-2 { stop-color:var(--liq-2); } .liq-3 { stop-color:var(--liq-3); }
.sheen-0 { stop-color:#ffffff; stop-opacity:.9; } .sheen-1 { stop-color:#ffffff; stop-opacity:0; }

/* ---------- type ---------- */
.display { font-size:clamp(44px, 6.6vw, 88px); line-height:1.02; letter-spacing:-.048em; font-weight:650; text-wrap:balance; }
.h1 { font-size:clamp(40px, 6vw, 68px); line-height:1.04; letter-spacing:-.045em; font-weight:650; text-wrap:balance; }
.h2 { font-size:clamp(34px, 5.2vw, 64px); line-height:1.05; letter-spacing:-.045em; font-weight:650; text-wrap:balance; }
.eyebrow { margin-bottom:16px; font-size:clamp(15px, 1.25vw, 17px); font-weight:600; letter-spacing:-.012em; color:var(--accent-ink); }
.lead { margin-top:22px; font-size:clamp(18px, 1.55vw, 21px); line-height:1.48; letter-spacing:-.016em; color:var(--muted); text-wrap:pretty; }
.lead strong { color:var(--text); font-weight:550; }
.grad { background:linear-gradient(95deg, var(--grad-1), var(--grad-2)); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.fine { margin-top:18px; font-size:14px; line-height:1.5; color:var(--muted); }
.muted { color:var(--muted); }
.small { font-size:13px; color:var(--muted); }

/* ---------- layout ---------- */
.wrap { width:min(1080px, calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.wrap.wide { width:min(1240px, calc(100% - 2 * var(--gutter))); }
.wrap.narrow { width:min(820px, calc(100% - 2 * var(--gutter))); }
.center { text-align:center; }
.section { position:relative; padding-block:clamp(96px, 12.5vw, 176px); }
.tint { background:var(--tint); }
.section-head { max-width:880px; margin:0 auto clamp(52px, 7vw, 92px); }
.section-head.center .lead, .center > .lead { max-width:700px; margin-inline:auto; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px; border:0; border-radius:999px;
  font-size:17px; font-weight:500; letter-spacing:-.012em; line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { text-decoration:none; }
.btn:active { transform:scale(.97); }
.btn .i { width:18px; height:18px; }
.btn-primary { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-link { min-height:44px; padding:0 4px; background:none; color:var(--accent-ink); }
.btn-link:hover { text-decoration:underline; text-underline-offset:4px; }
.btn-link .i { margin-left:-3px; transition:transform .25s var(--ease); }
.btn-link:hover .i { transform:translateX(3px); }
.btn-sm { min-height:34px; padding:0 15px; font-size:14px; }
.btn-quiet { background:var(--surface2); color:var(--text); cursor:default; }
.cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 26px; margin-top:38px; }

/* ---------- header ---------- */
.nav { position:fixed; inset:0 0 auto; z-index:50; }
.nav::before { content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb, var(--page) 74%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid var(--line); }
.nav-in { display:flex; align-items:center; gap:28px; height:var(--nav-h); }
.brand { display:inline-flex; align-items:center; gap:8px; flex:none; color:var(--text); }
.brand:hover { text-decoration:none; }
.brand .mark { width:24px; height:24px; transition:transform .7s var(--spring); }
.brand:hover .mark { transform:rotate(45deg); }
.brand .word { width:auto; height:19px; }
.links { display:flex; gap:28px; margin-left:auto; }
.links a { color:var(--muted); font-size:14px; letter-spacing:-.005em; transition:color .2s; }
.links a:hover, .links a[aria-current] { color:var(--text); text-decoration:none; }
.nav-cta { flex:none; display:flex; align-items:center; gap:20px; }
.nav-signin { color:var(--muted); font-size:14px; letter-spacing:-.005em; transition:color .2s; }
.nav-signin:hover { color:var(--text); text-decoration:none; }
.menu-btn { display:none; }
.menu { display:none; }
@media (max-width: 880px) {
  .links { display:none; }
  .nav-cta { margin-left:auto; }
  .menu-btn { display:inline-grid; place-items:center; width:40px; height:40px; margin-right:-8px; padding:0; border:0; border-radius:12px; background:none; color:var(--text); cursor:pointer; }
  .menu-btn .i { grid-area:1 / 1; width:22px; height:22px; transition:opacity .2s, transform .3s var(--ease); }
  .menu-btn .i:last-child { opacity:0; transform:rotate(-45deg); }
  .menu-btn[aria-expanded="true"] .i:first-child { opacity:0; transform:rotate(45deg); }
  .menu-btn[aria-expanded="true"] .i:last-child { opacity:1; transform:none; }
  .menu { display:block; position:absolute; top:var(--nav-h); left:0; right:0; max-height:calc(100dvh - var(--nav-h)); overflow:auto; padding:4px 0 28px;
    background:color-mix(in srgb, var(--page) 94%, transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    border-bottom:.5px solid var(--line); animation:drop .35s var(--ease); }
  .menu .wrap { display:flex; flex-direction:column; }
  .menu a:not(.btn) { padding:14px 0; border-bottom:.5px solid var(--line); color:var(--text); font-size:24px; font-weight:600; letter-spacing:-.03em; }
  .menu a:not(.btn):hover { text-decoration:none; color:var(--accent-ink); }
  .menu .btn { align-self:flex-start; margin-top:24px; }
}
@keyframes drop { from { opacity:0; transform:translateY(-8px); } }

/* ---------- footer ---------- */
.footer { padding:56px 0 32px; background:var(--tint); border-top:.5px solid var(--line); font-size:14px; }
.foot-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px 64px; }
.foot-brand p { max-width:300px; margin-top:14px; color:var(--muted); }
/* "ISAI by Daeta Labs": the endorsement after a thin line, about a third of the name's height */
.foot-brand .brandrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.endorse { display:inline-flex; align-items:center; gap:7px; padding-left:14px; border-left:1px solid var(--line-strong); color:var(--muted); font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; }
.endorse svg { flex:none; color:var(--text); }
.endorse:hover { color:var(--text); }
.foot-links { display:grid; grid-template-columns:repeat(4, minmax(120px, auto)); gap:32px 56px; }
.foot-links h2 { margin-bottom:10px; font-size:13px; font-weight:600; letter-spacing:0; color:var(--text); }
.foot-links a { display:block; padding:5px 0; color:var(--muted); }
.foot-links a:hover { color:var(--text); text-decoration:none; }
.foot-cookies { display:block; padding:5px 0; border:0; background:none; color:var(--muted); font:inherit; cursor:pointer; text-align:left; }
.foot-cookies:hover { color:var(--text); }
.foot-base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:48px; padding-top:20px; border-top:.5px solid var(--line); color:var(--muted); font-size:13px; }
@media (max-width: 640px) { .foot-links { grid-template-columns:repeat(2, minmax(0, 1fr)); width:100%; } }

/* ---------- the soft colour field ---------- */
.field { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.field i { position:absolute; border-radius:50%; background:radial-gradient(closest-side, var(--c), transparent); }
.field .b1 { --c:var(--blob1); width:64vw; height:64vw; left:-18vw; top:-16vw; }
.field .b2 { --c:var(--blob2); width:52vw; height:52vw; right:-14vw; top:-6vw; }
.field .b3 { --c:var(--blob3); width:58vw; height:58vw; right:4vw; bottom:-24vw; }
.field .b4 { --c:var(--blob4); width:48vw; height:48vw; left:0; bottom:-18vw; }
.hero > :not(.field), .final > :not(.field) { position:relative; }

/* ---------- hero ---------- */
.hero { position:relative; overflow:clip; padding:calc(var(--nav-h) + clamp(64px, 9vw, 120px)) 0 clamp(72px, 9vw, 128px); }
.hero .field { opacity:.85; }
.hero-copy { text-align:center; }
.hero .display { max-width:13.2em; margin-inline:auto; }
.hero .display .sub { display:block; margin-top:.2em; font-size:.6em; line-height:1.08; letter-spacing:-.04em; }
.hero .lead { max-width:640px; margin-inline:auto; }
.hero-copy .fine { max-width:600px; margin-inline:auto; }

/* ---------- the hero: a recreation of the ISAI app (mirrors backend/src/web/team.*) ---------- */
.tab-mark { display:inline-flex; }
.tab-mark .mark { width:15px; height:15px; }
.app { display:grid; grid-template-columns:232px minmax(0, 1fr); height:clamp(560px, 46vw, 630px); text-align:left; }
.app-side { display:flex; flex-direction:column; gap:2px; min-width:0; padding:14px 10px; background:var(--tint); border-right:.5px solid var(--line); font-size:13px; }
.app-brand { display:flex; align-items:center; gap:8px; padding:4px 8px 14px; font-size:16px; }
.app-brand .mark { width:22px; height:22px; }
.app-brand b { font-weight:650; letter-spacing:-.02em; }
.app-row { display:flex; align-items:center; gap:9px; min-height:32px; padding:0 10px; border-radius:9px; }
.app-row .i { width:16px; height:16px; color:var(--muted); }
.app-task { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:32px; color:var(--muted); }
.app-task.on { background:var(--hover); color:var(--text); }
.app-label { margin:14px 10px 4px; color:var(--faint); font-size:11.5px; font-weight:600; }
.app-ais { margin-top:auto; }
.app-main { display:flex; flex-direction:column; min-width:0; min-height:0; padding:0 clamp(14px, 3vw, 36px) 18px; }
.app-thread { display:flex; flex-direction:column; justify-content:flex-end; gap:18px; flex:1; min-height:0; width:100%; max-width:640px; margin:0 auto; padding-bottom:3px; overflow:hidden;
  font-size:14px; line-height:1.5; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 48px); mask-image:linear-gradient(to bottom, transparent, #000 48px); }
.app-you { align-self:flex-end; max-width:min(82%, 440px); padding:10px 16px; border-radius:20px 20px 6px 20px; background:var(--surface2); }
.app-msg { display:flex; align-items:flex-start; gap:12px; }
.app-av { display:inline-flex; flex:none; }
.app-av .mark { width:26px; height:26px; }
.app-body { display:grid; gap:10px; flex:1; min-width:0; }
.app-h { display:flex; align-items:center; gap:10px; min-height:26px; }
.app-h b { font-weight:600; }
.app-mode { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px 0 7px; border-radius:11px; background:var(--accent-soft); color:var(--accent-ink); font-size:12px; font-weight:500; }
.app-mode .i { width:13px; height:13px; }
.app-steps { display:grid; gap:6px; }
.app-steps li { display:flex; align-items:center; gap:10px; padding:8px 10px 8px 12px; border-radius:12px; background:var(--raised); box-shadow:0 0 0 .5px var(--line-strong); }
.app-ai { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--surface2); color:var(--text); font-size:12px; font-weight:600; }
.app-what { display:grid; flex:1; min-width:0; }
.app-what b, .app-what small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.app-what b { font-weight:550; }
.app-what small { color:var(--faint); font-size:12px; }
/* the status words, as in the app: done = blue, working = soft blue, waiting = grey */
.app-st { display:inline-flex; align-items:center; gap:6px; flex:none; height:22px; padding:0 9px; border-radius:11px; background:var(--surface2); color:var(--muted); font-size:12px; font-weight:500; }
.app-st[data-st="working"] { background:var(--accent-soft); color:var(--accent-ink); }
.app-st[data-st="working"]::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1s ease-in-out infinite; }
.app-st[data-st="done"] { background:var(--accent); color:var(--on-accent); }
@keyframes pulse { 50% { opacity:.25; } }
.app-report .app-body { padding:14px 16px; border-radius:16px; background:var(--raised); box-shadow:0 0 0 .5px var(--line-strong), var(--shadow-sm); }
.app-headline { font-size:15px; font-weight:550; }
.app-points { display:grid; gap:6px; color:var(--muted); }
.app-points li { display:flex; gap:8px; }
.app-points .i { width:15px; height:15px; margin-top:3px; color:var(--accent-ink); }
.app-better { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:10px; border-top:.5px solid var(--line); color:var(--muted); font-size:12.5px; }
.app-better span { padding:2px 11px; border-radius:11px; box-shadow:inset 0 0 0 .5px var(--line-strong); color:var(--text); }
.app-composer { display:flex; align-items:center; gap:10px; width:100%; max-width:640px; height:50px; margin:14px auto 0; padding:0 8px 0 18px; border-radius:25px;
  background:var(--raised); border:.5px solid var(--line-strong); box-shadow:0 2px 12px rgba(0,0,0,.05); color:var(--faint); font-size:14px; }
/* the run (site.js): steps wait, work and finish, then the result arrives (only with the script and motion) */
.appdemo[data-ready] .app-report:not([hidden]) { animation:rise .45s var(--ease); }
@container demo (max-width: 760px) {
  .app { grid-template-columns:minmax(0, 1fr); }
  .app-side, .app-better { display:none; }
}

/* ---------- ISA: an AI chat with ISA beside it (mirrors extension/content.js) ---------- */
.demo { margin-top:clamp(56px, 8vw, 96px); }
.browser { position:relative; overflow:hidden; border-radius:clamp(16px, 2vw, 24px); background:var(--raised); border:.5px solid var(--line-strong);
  box-shadow:var(--shadow-xl); container:demo / inline-size; }
.bar { display:flex; align-items:center; gap:18px; height:46px; padding:0 18px; background:var(--tint); border-bottom:.5px solid var(--line); }
.dots { display:flex; gap:8px; }
.dots i { width:12px; height:12px; border-radius:50%; background:var(--line-strong); }
.tab { display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 14px; border-radius:9px; background:var(--raised); color:var(--muted); font-size:13px;
  box-shadow:0 0 0 .5px var(--line), var(--shadow-sm); }
.tab .i { width:15px; height:15px; }
.chat { position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:clamp(440px, 34vw, 470px); padding:24px clamp(14px, 3.4vw, 40px) 26px; }
.thread { display:flex; flex-direction:column; justify-content:flex-end; gap:22px; flex:1; min-height:0; width:100%; max-width:620px; margin:0 auto; overflow:hidden;
  font-size:15px; line-height:1.6; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 64px); mask-image:linear-gradient(to bottom, transparent, #000 64px); }
.msg.user { align-self:flex-end; max-width:min(80%, 440px); padding:10px 16px; border-radius:20px 20px 6px 20px; background:var(--surface2); }
.msg.ai { display:flex; align-items:flex-start; gap:12px; }
.ai-icon { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:.5px solid var(--line-strong); color:var(--text); }
.ai-icon .i { width:15px; height:15px; }
.ai-text ol { display:grid; gap:6px; margin-top:8px; padding-left:20px; list-style:decimal; }
.ai-text li::marker { color:var(--muted); }
.composer-row { position:relative; width:100%; max-width:620px; margin:18px auto 0; }
.composer { display:flex; align-items:center; gap:10px; height:54px; padding:0 9px 0 20px; border-radius:27px; background:var(--raised); border:.5px solid var(--line-strong);
  box-shadow:0 2px 12px rgba(0,0,0,.05); font-size:15px; }
.typed { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.typed:empty { display:none; }
.typed:not(:empty) + .placeholder { display:none; }
.typed.caret::after { content:""; display:inline-block; width:1.5px; height:1.05em; margin-left:1px; vertical-align:-.15em; background:var(--accent); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.placeholder { color:var(--faint); }
.send { display:grid; place-items:center; flex:none; width:36px; height:36px; margin-left:auto; border-radius:50%; background:var(--text); color:var(--page); opacity:.18; transition:opacity .2s; }
.send .i { width:18px; height:18px; }
.composer.typing .send { opacity:1; }

/* ISA: the bubble in the margin beside the message box; finds peek above it, its window opens above it */
.dela { position:absolute; left:calc(100% + 18px); bottom:7px; width:40px; height:40px; }
.ball { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; padding:0; cursor:pointer;
  border-radius:50%; border:1.5px solid var(--ring); background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), transparent 55%), var(--disc);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 .5px 0 var(--glass-edge), 0 4px 16px rgba(0,0,0,.16);
  transition:transform .35s var(--spring), box-shadow .25s var(--ease); }
.ball .mark { width:54%; height:54%; transition:transform .7s var(--spring); }
.ball:hover { transform:scale(1.06); box-shadow:inset 0 .5px 0 var(--glass-edge), 0 6px 20px rgba(0,0,0,.2); }
.ball:hover .mark { transform:rotate(45deg); }
.ball:active { transform:scale(.94); transition-duration:.12s; }
.ball[data-loading] .mark { animation:spin 1.2s linear infinite; }
.ball[data-new] { animation:pop .6s var(--spring); }
.ball[data-count="0"] .count { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pop { 35% { transform:scale(1.14); } }
.count { position:absolute; top:-4px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--count-bg); color:var(--count-fg);
  font-size:10.5px; font-weight:600; line-height:16px; text-align:center; font-variant-numeric:tabular-nums; box-shadow:0 1px 3px rgba(0,0,0,.28); }

.peek, .panel { position:absolute; right:0; bottom:calc(100% + 12px); color:var(--text); background:var(--solid); border:.5px solid var(--glass-line);
  box-shadow:inset 0 .5px 0 var(--glass-edge), var(--pop-shadow); font-size:13px; line-height:1.45; letter-spacing:-.005em; transform-origin:100% 100%; }
.peek { left:0; right:auto; width:min(300px, calc(50cqi - 346px)); padding:10px 12px; border-radius:16px; transform-origin:0 100%; transition:opacity .3s var(--ease), transform .45s var(--ease); }
.peek[data-state="hidden"] { opacity:0; transform:translateY(8px) scale(.97); pointer-events:none; }
.peek .note { display:none; align-items:center; min-height:46px; color:var(--muted); }
.peek[data-state="loading"] .note { display:flex; }
.peek[data-state="loading"] .ticker { display:none; }
.note span { background:linear-gradient(90deg, var(--muted) 30%, var(--text) 50%, var(--muted) 70%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }
.ticker { position:relative; height:68px; overflow:hidden; }
.slide { position:absolute; inset:0; opacity:0; transform:translateY(40%); transition:transform .6s var(--ease), opacity .35s var(--ease); }
.slide.on { opacity:1; transform:none; }
.slide.out { opacity:0; transform:translateY(-40%); }
.slide.jump { transition:none; }
.slide-top { display:flex; align-items:center; gap:6px; height:26px; margin-bottom:2px; }
.slide .text, .row .text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fmt { display:inline-flex; align-items:center; gap:4px; flex:none; height:22px; padding:0 8px 0 6px; border-radius:11px; background:var(--surface2); color:var(--text);
  font-size:12px; font-weight:500; line-height:1; }
.fmt .i { width:13px; height:13px; }
.v { display:inline-flex; color:var(--muted); }
.v .i { width:14px; height:14px; }
.n { margin-left:auto; color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; }
.rate { display:inline-flex; gap:2px; flex:none; }
.rate > * { display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:13px; background:none; color:var(--muted); }
.rate .i { width:15px; height:15px; }
.rate button { cursor:pointer; transition:background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.rate button:hover { background:var(--surface2); color:var(--text); }
.rate button:active { transform:scale(.9); }
.rate button[aria-pressed="true"], .rate .on { color:var(--accent-ink); background:var(--accent-soft); }

.panel { z-index:2; width:min(360px, 92cqi); border-radius:20px; overflow:hidden; animation:rise .32s var(--ease); }
@keyframes rise { from { opacity:0; transform:translateY(8px) scale(.97); } }
.head { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 8px 4px 16px; }
.head strong { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.hmark .mark { width:18px; height:18px; }
.x { display:grid; place-items:center; flex:none; width:28px; height:28px; padding:0; border:0; border-radius:14px; background:none; color:var(--muted); }
.x .i { width:16px; height:16px; }
button.x { cursor:pointer; }
button.x:hover { background:var(--surface2); color:var(--text); }
.rows { display:grid; grid-template-columns:minmax(0, 1fr); gap:2px; padding:0 8px 8px; }
.row { position:relative; padding:8px 66px 8px 8px; border-radius:12px; transition:background-color .2s var(--ease); }
.row:hover { background:var(--surface2); }
.row .top { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0; margin-bottom:4px; }
.row .rate { position:absolute; top:5px; right:4px; }
.src { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--faint); font-size:12px; }
.lane { display:inline-flex; align-items:center; flex:none; height:18px; padding:0 7px; border-radius:9px; background:var(--accent-soft); color:var(--accent-ink); font-size:10.5px; font-weight:500; line-height:1; }
.lane.explore { background:transparent; color:var(--muted); box-shadow:inset 0 0 0 .5px var(--line-strong); }
.foot { display:flex; align-items:center; gap:2px; padding:8px 8px 8px 10px; border-top:.5px solid var(--line); }
.foot .mode { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 9px 0 10px; border-radius:15px; background:var(--surface2); font-size:13px; font-weight:500; }
.foot .mode .i { width:12px; height:12px; margin-left:-2px; color:var(--muted); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.foot .grow { flex:1; }
.ibtn { display:grid; place-items:center; width:32px; height:32px; border-radius:16px; color:var(--muted); }
.ibtn .i { width:18px; height:18px; }
.ibtn.doc { color:var(--accent); }

/* narrower windows: the banner reaches over the chat, and the bubble moves beside the message box (after the rules above) */
@container demo (max-width: 1150px) {
  .peek { left:auto; right:0; width:min(320px, 82cqi); transform-origin:100% 100%; }
}
@container demo (max-width: 900px) {
  .composer-row { padding-right:54px; }
  .dela { left:auto; right:0; }
}
.demo figcaption { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px; color:var(--muted); font-size:14px; text-align:center; }
.demo-ctl { display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0; border:.5px solid var(--line-strong); border-radius:50%; background:var(--raised); color:var(--text); cursor:pointer; }
.demo-ctl .i { grid-area:1 / 1; width:13px; height:13px; }
.demo-ctl .i:last-child, .demo-ctl[data-paused] .i:first-child { display:none; }
.demo-ctl[data-paused] .i:last-child { display:block; }
/* the run: hidden until each part arrives (only with the script and motion; otherwise everything shows at once) */
.demo[data-ready] .msg { opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.demo[data-ready] .msg.on { opacity:1; transform:none; }
.demo[data-ready] .ai-text > p, .demo[data-ready] .ai-text li { opacity:0; transform:translateY(4px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.demo[data-ready] .ai-text .on { opacity:1; transform:none; }

/* ---------- numbers and small labels (Install, Ask ISAI) ---------- */
.num { display:grid; place-items:center; flex:none; width:26px; height:26px; margin-top:-1px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-size:14px; font-weight:600; letter-spacing:0; }
.label { display:inline-flex; align-items:center; gap:5px; margin-right:2px; font-size:12px; font-weight:600; color:var(--text); }
.label .i { width:14px; height:14px; }
/* ---------- tiles ---------- */
.tiles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.tiles.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.tile { padding:28px 26px 30px; border-radius:24px; background:var(--tint); }
.tint .tile { background:var(--raised); box-shadow:var(--card); }
.ico { display:grid; place-items:center; flex:none; }
.tile .ico { width:46px; height:46px; margin-bottom:22px; border-radius:14px; background:var(--accent-soft); color:var(--accent); }
.tile .ico .i { width:22px; height:22px; }
.tile h3 { font-size:19px; font-weight:600; line-height:1.25; letter-spacing:-.02em; }
.tile p { margin-top:8px; color:var(--muted); font-size:15.5px; line-height:1.5; }
.more { margin-top:36px; text-align:center; }

/* ---------- a split section: words on one side, a window on the other (Your AIs) ---------- */
.split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.split .h2 { font-size:clamp(34px, 4.4vw, 54px); }
.visual { position:relative; padding:clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px); overflow:hidden; border-radius:32px; background:var(--page); }
.visual .field { opacity:.9; }
.visual .win { position:relative; }
.points { display:grid; gap:28px; margin-top:44px; }
.points li { display:flex; gap:16px; }
.points .ico { width:42px; height:42px; border-radius:13px; background:var(--raised); color:var(--accent); box-shadow:var(--card); }
.points .ico .i { width:21px; height:21px; }
.points h3 { font-size:18px; font-weight:600; letter-spacing:-.016em; }
.points p { margin-top:4px; color:var(--muted); font-size:16px; line-height:1.55; }
.points p strong { color:var(--text); font-weight:550; }
.win { width:min(400px, 100%); margin-inline:auto; overflow:hidden; border-radius:22px; background:var(--solid); border:.5px solid var(--glass-line);
  box-shadow:inset 0 .5px 0 var(--glass-edge), var(--shadow-xl); font-size:13px; line-height:1.45; }
.acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.btn-mini { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 12px; border-radius:14px; border:.5px solid var(--line-strong); font-size:12px; font-weight:500; white-space:nowrap; }
.btn-mini .i { width:14px; height:14px; }
.btn-mini.primary { border-color:transparent; background:var(--text); color:var(--page); }
.btn-mini.on { border-color:transparent; background:var(--accent-soft); color:var(--accent-ink); }
.helped { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 10px 16px; border-top:.5px solid var(--line); color:var(--muted); font-size:12px; }
/* Your AIs: the app's page of the same name, with one "ISAI needs you" card */
.hico { display:inline-flex; color:var(--accent); }
.hico .i { width:18px; height:18px; }
.ai-rows { display:grid; gap:2px; padding:0 8px 8px; }
.ai-rows li { display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; }
.ai-name { display:grid; flex:1; min-width:0; font-weight:550; }
.ai-name small { color:var(--faint); font-size:12px; font-weight:400; }
.ai-state { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; white-space:nowrap; }
.ai-state .dot { background:var(--faint); }
.ai-state.on { color:var(--accent-ink); }
.ai-state.on .dot { background:var(--accent); }
.needs { margin:0 8px 8px; padding:12px 14px; border-radius:14px; background:var(--surface2); }
.needs-h { display:flex; align-items:center; gap:6px; margin-bottom:4px; font-weight:600; }
.needs-h .i { width:16px; height:16px; }
.needs > p:not(.needs-h) { color:var(--muted); }
.split .copy > .fine { margin-top:32px; }

/* ---------- How it works: five steps on a line, each lights up once (site.js) ---------- */
.pipeline { position:relative; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; margin:0 auto clamp(52px, 6vw, 76px); }
.pipeline::before, .pipeline::after { content:""; position:absolute; z-index:0; top:27px; left:calc(100% / 14); right:calc(100% / 14); height:2px; border-radius:1px; }
.pipeline::before { background:var(--step-line); }
.pipeline::after { background:var(--step-line-done); transform-origin:0 50%; transform:scaleX(var(--p, 1)); transition:transform .5s var(--ease); }
.pipeline[data-ready]::after { transform:scaleX(var(--p, 0)); }
.pipeline li { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; color:var(--text); font-size:14px; font-weight:500; line-height:1.3; }
/* flat discs: no gradient, no shadow, no glow; a finished step simply takes its colours */
.pipeline .ico { width:56px; height:56px; border-radius:50%; background:var(--step-done-bg); color:var(--step-done-ink);
  transition:background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.pipeline .ico .i { width:24px; height:24px; }
.pipeline[data-ready] li { color:var(--muted); transition:color .4s var(--ease); }
.pipeline[data-ready] .ico { background:var(--step-bg); color:var(--muted); box-shadow:0 0 0 1px var(--step-ring); }
.pipeline[data-ready] li.lit { color:var(--text); }
.pipeline[data-ready] li.lit .ico { background:var(--step-done-bg); color:var(--step-done-ink); box-shadow:0 0 0 1px transparent; }
.pipeline.flow { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:20px; margin-bottom:0; }
.pipeline.flow::before, .pipeline.flow::after { left:10%; right:10%; }
.pipeline.flow li > div { display:grid; gap:6px; }
.pipeline.flow h3 { color:inherit; font-size:17px; font-weight:600; line-height:1.3; letter-spacing:-.016em; }
.pipeline.flow p { color:var(--muted); font-size:15px; font-weight:400; line-height:1.5; }

/* ---------- ISA: its features under the demo ---------- */
.dex-demo { margin-top:0; }
.dex-tiles { margin-top:clamp(56px, 7vw, 88px); }

/* ---------- questions ---------- */
.faq summary { list-style:none; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq { border-top:.5px solid var(--line-strong); }
.faq details { border-bottom:.5px solid var(--line-strong); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; font-size:clamp(18px, 1.8vw, 21px); font-weight:600; letter-spacing:-.022em; }
.faq summary:hover { color:var(--accent-ink); }
.faq summary .i { width:20px; height:20px; color:var(--muted); transition:transform .3s var(--ease); }
.faq details[open] summary .i { transform:rotate(180deg); }
.faq details > div { max-width:700px; padding:0 4px 26px; color:var(--muted); font-size:17px; line-height:1.6; }
.faq details > div p + p { margin-top:10px; }

/* ---------- the last word ---------- */
.final { overflow:clip; }
.final .field { opacity:.8; }
.final-mark { display:inline-flex; width:68px; height:68px; margin-bottom:30px; }
.final-mark .mark { width:100%; height:100%; filter:drop-shadow(0 10px 14px rgba(0,0,0,.16)); }
.final .display { max-width:11.5em; margin-inline:auto; font-size:clamp(40px, 6.2vw, 84px); }
.final .display .grad { display:block; }

/* ---------- the other pages: Install, Privacy, Sign in, Docs, Help centre, Resources ----------
   The home page's look (pages.js headOf, cardHead, closing): a head like the hero on the soft colour field, cards like its
   tiles, the questions like its FAQ, and its closing call. More of it at the end of this file (after the small screens). */
.page-head { position:relative; overflow:clip; padding:calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(48px, 6vw, 80px); text-align:center; }
.page-head .field { opacity:.6; }
.page-head > .wrap { position:relative; }
.page-head .lead { max-width:660px; margin-inline:auto; }
.page-body { padding-bottom:clamp(80px, 10vw, 128px); }
.page-body p + p, .page-body p + ol, .page-body p + ul, .page-body ol + p, .page-body ul + p { margin-top:12px; }
.page-body ol, .page-body ul { padding-left:20px; }
.page-body ol { list-style:decimal; }
.page-body ul { list-style:disc; }
.page-body li { margin:0 0 8px; line-height:1.55; }
.page-body li::marker { color:var(--faint); }
.page-body .steps-list { display:grid; gap:16px; padding:0; list-style:none; }
.step-card { display:flex; gap:20px; margin:0; padding:clamp(22px, 3vw, 30px); border-radius:24px; background:var(--tint); }
.step-card > div { min-width:0; flex:1; }
.step-card .num { width:32px; height:32px; font-size:15px; }
.step-card h2, .policy h2 { margin:3px 0 14px; font-size:21px; font-weight:600; letter-spacing:-.022em; }
.step-card .btn { margin:2px 0 6px; }
.policy { padding:clamp(22px, 3vw, 30px); border-radius:24px; background:var(--tint); }
.policy + .policy { margin-top:16px; }
.policies > .small { margin-top:24px; }
code { padding:2px 6px; border:.5px solid var(--line-strong); border-radius:6px; background:var(--surface2); font:13px/1.4 var(--mono); overflow-wrap:anywhere; }
.page-note { display:flex; align-items:flex-start; gap:12px; margin-top:24px; padding:16px 18px; border-radius:16px; background:var(--tint); color:var(--muted); font-size:15px; }

/* ---------- scrolling in (only with the script, and only for what starts below the fold) ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .split { grid-template-columns:minmax(0, 1fr); }
  .split .copy { text-align:center; }
  .split .copy .lead { margin-inline:auto; max-width:640px; }
  .points { max-width:560px; margin-inline:auto; text-align:left; }
  .tiles.three { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pipeline { grid-template-columns:minmax(0, 1fr); gap:14px; max-width:340px; }
  .pipeline::before, .pipeline::after { top:28px; bottom:28px; left:27px; right:auto; width:2px; height:auto; }
  .pipeline::after { transform-origin:50% 0; transform:scaleY(var(--p, 1)); }
  .pipeline[data-ready]::after { transform:scaleY(var(--p, 0)); }
  .pipeline li { flex-direction:row; gap:18px; text-align:left; }
  .pipeline.flow { grid-template-columns:minmax(0, 1fr); gap:28px; max-width:560px; }
  .pipeline.flow::before, .pipeline.flow::after { left:27px; right:auto; }
  .pipeline.flow li { align-items:flex-start; }
  .pipeline.flow li > div { padding-top:4px; }
}
@media (max-width: 640px) {
  :root { --gutter:16px; }
  body { font-size:16px; }
  .btn { font-size:16px; }
  .chat { height:540px; }
  .thread { font-size:14px; gap:16px; }
  /* finds: a row to swipe through instead of a long column */
  .tiles:not(.three) { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:78%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 12px; scroll-padding-inline:var(--gutter); scrollbar-width:none; }
  .tiles:not(.three)::-webkit-scrollbar { display:none; }
  .tiles:not(.three) .tile { scroll-snap-align:start; }
  .tiles.three { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .tiles.three .tile { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:16px; padding:20px; }
  .tiles.three .tile .ico { grid-row:span 2; margin:0; }
  .app { height:680px; }
  .faq summary { padding:20px 2px; }
  .step-card { flex-direction:column; gap:12px; }
}
@media (max-width: 480px) {
  .nav-signin { display:none; }
}

/* ---------- Ask ISAI (site.js): a bubble on every page; you ask on purpose. The messages, finds, rating and code card are
   shared with the demo ---------- */
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ask-form { display:flex; align-items:flex-end; gap:10px; padding:10px 10px 10px 20px; border:1px solid var(--line-strong); border-radius:26px;
  background:var(--raised); box-shadow:var(--card); transition:border-color .15s, box-shadow .15s; }
.ask-form:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), var(--card); }
.ask-form textarea { flex:1; min-width:0; min-height:32px; max-height:160px; padding:6px 0; border:0; outline:0; resize:none; background:none; color:var(--text);
  font:inherit; font-size:17px; line-height:1.45; }
.ask-form textarea::placeholder { color:var(--faint); }
.ask-send { display:grid; place-items:center; flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--accent); color:var(--on-accent); cursor:pointer; }
.ask-send:hover { background:var(--accent-hover); }
.ask-send:disabled { opacity:.5; cursor:default; }
.ask-hint { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; font-size:13px; color:var(--faint); }
.ask-hint .i { width:14px; height:14px; flex:none; }
.ask-hint a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.ask-out { display:grid; gap:14px; margin-top:22px; }
.ask-out:empty { display:none; }
.ask-msg { display:grid; gap:8px; font-size:16px; line-height:1.5; }
.ask-msg p { margin:0; }
.ask-msg.ask-you { justify-self:end; max-width:85%; padding:10px 16px; border-radius:20px 20px 6px 20px; background:var(--surface2); }
.ask-msg.ask-dela { padding:18px 20px; border:1px solid var(--line); border-radius:20px; background:var(--raised); box-shadow:var(--card); }
.ask-msg.ask-error { color:var(--warn); }
.ask-msg.ask-wait { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:15px; }
.ask-strong { display:flex; align-items:center; gap:8px; font-weight:600; }
.ask-strong .i { width:18px; height:18px; color:var(--accent-ink); }
.ask-small { font-size:13px; color:var(--faint); }
.ask-dots { display:inline-flex; gap:4px; }
.ask-dots i { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:askdot 1.2s var(--ease) infinite; }
.ask-dots i:nth-child(2) { animation-delay:.15s; }
.ask-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes askdot { 0%, 80%, 100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
.ask-finds { display:grid; gap:10px; }
.ask-find { display:grid; gap:6px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--page); }
.ask-find-top { display:flex; align-items:center; gap:8px; min-width:0; font-size:12px; color:var(--faint); }
.ask-find-top .fmt { font-weight:600; color:var(--accent-ink); }
.ask-find-top .v .i { width:14px; height:14px; color:var(--accent-ink); }
.ask-find-top .src { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ask-find-text { font-weight:550; }
.ask-find-take { font-size:15px; color:var(--muted); }
.ask-find-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; }
.ask-thumbs { display:inline-flex; gap:2px; margin-left:auto; }
.ask-ic[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-ink); }
.ask-find.dimmed { opacity:.55; }
.ask-find-actions .btn-mini { cursor:pointer; background:none; color:var(--text); }
.ask-find-actions .btn-mini.primary { background:var(--text); color:var(--page); text-decoration:none; }
.ask-mail { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.ask-email { flex:1 1 220px; min-width:0; height:40px; padding:0 14px; border:1px solid var(--line-strong); border-radius:20px; background:var(--page); color:var(--text); font:inherit; font-size:15px; }
.ask-email:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ask-mail .btn-sm { min-height:40px; }
.ask-thanks { display:flex; align-items:center; gap:8px; color:var(--good); font-size:15px; }
.ask-thanks .i { width:18px; height:18px; }
.ask-rate { padding:16px 18px; border:1px dashed var(--line-strong); border-radius:16px; }
.ask-q { display:grid; gap:10px; }
.ask-q p { margin:0; font-weight:550; }
.ask-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ask-chips .chip { display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.ask-chips .chip .i { width:16px; height:16px; }
.ask-chips .chip.quiet { border-color:transparent; background:none; box-shadow:none; color:var(--muted); }
.ask-pop { width:min(420px, calc(100vw - 32px)); padding:28px; border:1px solid var(--glass-line); border-radius:24px; background:var(--glass-strong);
  -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4); color:var(--text); box-shadow:var(--shadow-xl); text-align:center; }
.ask-pop::backdrop { background:rgba(0,0,0,.35); }
.ask-pop:focus { outline:none; }
.ask-pop .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; }
.ask-pop .eyebrow { margin-bottom:8px; }
.ask-pop .h3 { margin:0; font-size:24px; line-height:1.2; letter-spacing:-.02em; font-weight:650; }
.ask-pop-lead { margin:8px 0 18px; color:var(--muted); font-size:16px; }
.ask-pop-x { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.ask-pop-x:hover { background:var(--hover); color:var(--text); }
.ask-code { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border:0; border-radius:14px; background:var(--accent-soft); }
.ask-code .label { font-size:12px; color:var(--muted); }
.ask-code strong { font-family:var(--mono); font-size:18px; letter-spacing:.06em; color:var(--accent-ink); }
.ask-code .btn-mini { cursor:pointer; background:var(--raised); color:var(--text); }
.ask-copied { width:100%; font-size:12px; color:var(--good); }
.ask-copied:empty { display:none; }
.ask-pop-cta { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:20px; }
.ask-pop-fine { margin:12px 0 0; font-size:12px; color:var(--faint); }
@media (max-width: 640px) {
  .ask-form { padding-left:16px; border-radius:22px; }
  .ask-msg.ask-dela { padding:16px; }
  .ask-pop { padding:24px 20px; }
}

/* the share menu (finds on the site): small and quiet, like the one in ISA's window */
.sharepop { position:fixed; z-index:80; min-width:184px; padding:4px; border:1px solid var(--line-strong); border-radius:14px; background:var(--solid); box-shadow:var(--pop-shadow); animation:askin .16s var(--ease); }
.sp-row { display:flex; align-items:center; gap:10px; width:100%; height:36px; padding:0 10px; border:0; border-radius:9px; background:none; color:var(--text); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.sp-row:hover, .sp-row:focus-visible { background:var(--hover); outline:none; }
.sp-row > span:not(.sp-gap) { flex:1; }
.sp-row .i { width:16px; height:16px; flex:none; color:var(--muted); }
.sp-row .i:last-child:not(:first-child) { width:13px; height:13px; color:var(--faint); }
.sp-gap { width:16px; flex:none; }
.sp-done { display:block; padding:2px 10px 4px; font-size:12px; color:var(--good); }
.sp-done:empty { display:none; }

/* Ask ISAI's bubble and window: bottom right, floating in glass */
.askdock { position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.askbubble { display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 20px 0 8px; border:1.5px solid var(--ring); border-radius:26px; cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), transparent 55%), var(--glass-strong); color:var(--text); font:inherit; font-size:15px; font-weight:600;
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 .5px 0 var(--glass-edge), 0 8px 28px rgba(0,0,0,.18);
  transition:transform .35s var(--spring), box-shadow .25s var(--ease); }
.askbubble .mark { width:34px; height:34px; transition:transform .7s var(--spring); }
.askbubble:hover { transform:translateY(-2px); }
.askbubble:hover .mark { transform:rotate(45deg); }
.askdock.open .askbubble { padding-right:8px; }
.askdock.open .askbubble span { display:none; }
.askpanel { display:flex; flex-direction:column; width:min(400px, calc(100vw - 32px)); height:min(600px, calc(100vh - 120px)); border:1px solid var(--glass-line); border-radius:24px;
  background:var(--glass-strong); -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5); box-shadow:var(--shadow-xl); overflow:hidden;
  animation:askin .3s var(--ease); }
@keyframes askin { from { opacity:0; transform:translateY(10px) scale(.98); } }
.askpanel-head { display:flex; align-items:center; gap:10px; padding:14px 14px 12px 16px; border-bottom:1px solid var(--line); }
.askpanel-head > div { display:grid; flex:1; line-height:1.2; }
.askpanel-head strong { font-size:16px; }
.askpanel-head span { font-size:12px; color:var(--faint); }
.askpanel-mark .mark { display:block; width:28px; height:28px; }
.askpanel-x { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.askpanel-x:hover { background:var(--hover); color:var(--text); }
.askpanel .askbox { display:flex; flex-direction:column; flex:1; min-height:0; }
.askpanel .ask-out { flex:1; min-height:0; align-content:start; margin:0; padding:18px 18px 12px; overflow-y:auto; overscroll-behavior:contain; }
.askpanel .ask-out:empty { display:grid; }
.askpanel .ask-form { margin:0 12px; padding:6px 6px 6px 16px; border-radius:22px; box-shadow:none; }
.askpanel .ask-form textarea { font-size:15px; }
.askpanel .ask-send { width:36px; height:36px; }
.askpanel .ask-hint { margin:8px 12px 12px; font-size:12px; }
.askpanel .ask-msg { font-size:15px; }
.askpanel .ask-msg.ask-dela { padding:0; border:0; background:none; box-shadow:none; }
.askpanel .ask-msg.ask-you { max-width:80%; }
.askpanel .ask-form { margin-bottom:14px; }
.askpanel .ask-find { padding:12px 14px; }
/* Ask ISAI: first-time card, suggestions, answers */
.ask-meet { display:grid; gap:12px; align-content:start; flex:1; padding:22px 20px; overflow-y:auto; }
.ask-meet .eyebrow { margin:0; font-size:13px; }
.ask-meet h2 { margin:0; font-size:20px; line-height:1.25; letter-spacing:-.02em; font-weight:650; }
.ask-two { display:grid; gap:10px; margin:4px 0 6px; }
.ask-two > div { padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--page); }
.ask-two strong { display:flex; align-items:center; gap:8px; font-size:14px; }
.ask-two strong .i { width:16px; height:16px; color:var(--accent-ink); }
.ask-two p { margin:4px 0 0; font-size:13px; color:var(--muted); line-height:1.45; }
.ask-meet .btn { justify-self:start; }
.ask-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ask-chip { padding:6px 12px; border:1px solid var(--chip-line); border-radius:16px; background:var(--chip); color:var(--text); font:inherit; font-size:13px; cursor:pointer; text-align:left; }
.ask-chip:hover { border-color:var(--accent); }
.ask-li { position:relative; padding-left:14px; }
.ask-li::before { content:""; position:absolute; left:2px; top:.7em; width:4px; height:4px; border-radius:50%; background:var(--muted); }
.ask-src { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:13px; color:var(--faint); }
.ask-src .i { width:14px; height:14px; margin-right:2px; }
.ask-src a { color:var(--accent-ink); }
.ask-help { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--faint); }
.ask-ic { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.ask-ic:hover { background:var(--hover); color:var(--text); }
.ask-ic .i { width:15px; height:15px; }
@media (max-width: 640px) {
  .askdock { right:12px; bottom:12px; left:12px; align-items:flex-end; }
  .askpanel { width:100%; height:min(640px, calc(100vh - 96px)); }
}

/* ---------- the demo page (/demo): one chat, three looks; ISA is the same in all three ---------- */
.dm-page { position:relative; padding:calc(var(--nav-h) + 48px) 0 clamp(72px, 9vw, 120px); overflow:hidden; }
.dm-head { max-width:760px; margin:0 auto 32px; }
.dm-head .lead { margin-top:14px; }
.dm { position:relative; max-width:1080px; margin:0 auto; }
.dm-tabs { display:flex; justify-content:center; gap:6px; margin-bottom:16px; }
.dm-tab { height:40px; padding:0 20px; border:1px solid var(--chip-line); border-radius:20px; background:var(--chip); color:var(--text); font:inherit; font-size:15px; font-weight:550; cursor:pointer; }
.dm-tab[aria-selected="true"] { border-color:transparent; background:var(--text); color:var(--page); }
.dm-app { --ai-bg:#ffffff; --ai-side:#f9f9f9; --ai-text:#0d0d0d; --ai-muted:#6b6b6b; --ai-line:rgba(0,0,0,.08); --ai-bubble:#f1f1f1; --ai-composer:#ffffff; --ai-send:#0d0d0d; --ai-on-send:#ffffff; --ai-font:var(--font); --ai-head:var(--font);
  display:grid; grid-template-columns:220px 1fr; height:min(680px, calc(100vh - 140px)); min-height:520px; border:1px solid var(--line-strong); border-radius:22px; overflow:hidden;
  background:var(--ai-bg); color:var(--ai-text); font-family:var(--ai-font); box-shadow:var(--shadow-xl); }
.dm-app[data-ai="gemini"] { --ai-bg:#ffffff; --ai-side:#f0f4f9; --ai-text:#1f1f1f; --ai-muted:#5f6368; --ai-bubble:#e9eef6; --ai-composer:#f0f4f9; --ai-send:#1f1f1f; --ai-on-send:#ffffff; }
.dm-app[data-ai="claude"] { --ai-bg:#faf9f5; --ai-side:#f3f1ea; --ai-text:#1f1e1d; --ai-muted:#73726c; --ai-bubble:#f0eee6; --ai-composer:#ffffff; --ai-send:#c96442; --ai-on-send:#ffffff;
  --ai-head:ui-serif, Georgia, "Times New Roman", serif; }
@media (prefers-color-scheme: dark) {
  .dm-app { --ai-bg:#212121; --ai-side:#181818; --ai-text:#ececec; --ai-muted:#a0a0a0; --ai-line:rgba(255,255,255,.08); --ai-bubble:#303030; --ai-composer:#303030; --ai-send:#ececec; --ai-on-send:#0d0d0d; }
  .dm-app[data-ai="gemini"] { --ai-bg:#131314; --ai-side:#1e1f20; --ai-text:#e3e3e3; --ai-muted:#9aa0a6; --ai-bubble:#282a2c; --ai-composer:#1e1f20; --ai-send:#e3e3e3; --ai-on-send:#131314; }
  .dm-app[data-ai="claude"] { --ai-bg:#262624; --ai-side:#1f1e1d; --ai-text:#f5f4ef; --ai-muted:#a6a39a; --ai-bubble:#30302e; --ai-composer:#30302e; --ai-send:#c96442; --ai-on-send:#ffffff; }
}
.dm-side { display:flex; flex-direction:column; gap:12px; padding:14px; background:var(--ai-side); border-right:1px solid var(--ai-line); }
.dm-new { display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border:0; border-radius:10px; background:none; color:var(--ai-text); font:inherit; font-size:14px; cursor:pointer; text-align:left; }
.dm-new:hover { background:var(--ai-bubble); }
.dm-new .i { width:18px; height:18px; }
.dm-left { margin:0 12px; font-size:12px; color:var(--ai-muted); }
.dm-label { margin:auto 12px 4px; font-size:12px; color:var(--ai-muted); }
.dm-main { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; }
.dm-top { display:flex; align-items:center; gap:10px; padding:12px 16px; }
.dm-picker { position:relative; }
.dm-model { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px; border:0; border-radius:10px; background:none; color:var(--ai-text); font:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.dm-model:hover { background:var(--ai-bubble); }
.dm-model .i { width:16px; height:16px; color:var(--ai-muted); }
.dm-tag { margin-left:auto; padding:3px 10px; border:1px solid var(--ai-line); border-radius:999px; font-size:12px; color:var(--ai-muted); }
.dm-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:5; width:280px; padding:6px; border:1px solid var(--ai-line); border-radius:16px; background:var(--ai-bg); box-shadow:var(--pop-shadow); }
.dm-item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:none; color:var(--ai-text); font:inherit; text-align:left; cursor:pointer; }
.dm-item:hover { background:var(--ai-bubble); }
.dm-item > span { display:grid; flex:1; }
.dm-item strong { font-size:14px; font-weight:600; }
.dm-item small { font-size:12px; color:var(--ai-muted); }
.dm-item .i { width:16px; height:16px; color:var(--ai-muted); }
.dm-item.locked strong { color:var(--ai-muted); }
.dm-locked { display:grid; gap:10px; padding:10px 12px; font-size:14px; }
.dm-locked p { margin:0; }
.dm-locked .btn-link { justify-self:start; min-height:30px; color:var(--ai-muted); }
.dm-thread { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:18px; padding:8px max(24px, calc((100% - 720px) / 2)) 24px; }
.dm-empty { margin:auto; text-align:center; }
.dm-empty h2 { margin:0; font-family:var(--ai-head); font-size:clamp(24px, 3vw, 32px); font-weight:500; letter-spacing:-.02em; }
.dm-app[data-ai="gemini"] .dm-empty h2 { background:linear-gradient(90deg, #4285f4, #9b72cb, #d96570); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dm-msg { font-size:16px; line-height:1.6; }
.dm-msg p { margin:0 0 10px; }
.dm-msg p:last-child { margin-bottom:0; }
.dm-msg ul, .dm-msg ol { margin:0 0 10px; padding-left:22px; }
.dm-msg.you { align-self:flex-end; max-width:75%; padding:10px 16px; border-radius:20px; background:var(--ai-bubble); }
.dm-app[data-ai="gemini"] .dm-msg.you { border-radius:20px 4px 20px 20px; }
.dm-msg.ai { align-self:stretch; }
.dm-msg.ai.error { color:var(--warn); }
.dm-msg.typing { display:flex; align-items:center; height:24px; }
.dm-full { display:grid; justify-items:center; gap:10px; padding:16px; border:1px dashed var(--ai-line); border-radius:16px; color:var(--ai-muted); text-align:center; }
.dm-full p { margin:0; }
.dm-bottom { position:relative; display:flex; align-items:flex-end; gap:14px; padding:0 max(24px, calc((100% - 720px) / 2)); }
.dm-composer { flex:1; display:flex; align-items:flex-end; gap:8px; min-width:0; padding:10px 10px 10px 18px; border:1px solid var(--ai-line); border-radius:28px; background:var(--ai-composer);
  box-shadow:0 2px 10px rgba(0,0,0,.05); }
.dm-app[data-ai="claude"] .dm-composer { border-radius:18px; }
.dm-composer textarea { flex:1; min-width:0; min-height:28px; max-height:140px; padding:4px 0; border:0; outline:0; resize:none; background:none; color:var(--ai-text); font:inherit; font-size:16px; line-height:1.45; }
.dm-composer textarea::placeholder { color:var(--ai-muted); }
.dm-send { display:grid; place-items:center; flex:none; width:36px; height:36px; border:0; border-radius:50%; background:var(--ai-send); color:var(--ai-on-send); cursor:pointer; }
.dm-app[data-ai="claude"] .dm-send { border-radius:10px; }
.dm-send:disabled { opacity:.35; cursor:default; }
.dm-send .i { width:18px; height:18px; }
.dm-fine { margin:10px auto 14px; padding:0 24px; max-width:720px; font-size:12px; color:var(--ai-muted); text-align:center; }
/* ISA, beside the message box: the same in every view */
.dm-dela { position:relative; flex:none; width:44px; height:44px; margin-bottom:4px; }
.dm-bubble { position:absolute; inset:0; display:grid; place-items:center; padding:0; border-radius:50%; border:1.5px solid var(--ring); cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), transparent 55%), var(--disc); color:var(--text);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 .5px 0 var(--glass-edge), 0 4px 16px rgba(0,0,0,.16);
  transition:transform .35s var(--spring); }
.dm-bubble .mark { width:54%; height:54%; transition:transform .7s var(--spring); }
.dm-bubble .mark .disc, .dm-bubble .mark .ring { display:none; } .dm-bubble .mark .pin { transform:none; }
.dm-bubble:hover { transform:scale(1.06); }
.dm-bubble[data-loading] .mark { animation:spin 1.2s linear infinite; }
.dm-bubble[data-loading]::before { content:""; position:absolute; inset:-4px; border-radius:50%; padding:2px; background:conic-gradient(from 0deg, var(--liq-1), var(--liq-2), var(--liq-3), var(--liq-1));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation:spin 1.6s linear infinite; }
.dm-peek { position:absolute; right:0; bottom:calc(100% + 10px); width:min(320px, 70vw); }
.dm-peek-in { display:grid; gap:6px; width:100%; padding:12px 14px; border:1px solid var(--glass-line); border-radius:16px; background:var(--glass-strong); color:var(--text);
  -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4); box-shadow:var(--pop-shadow); font:inherit; text-align:left; cursor:pointer; animation:askin .3s var(--ease); }
.dm-peek-top { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--faint); }
.dm-peek-top .fmt { font-weight:600; color:var(--accent-ink); }
.dm-peek-top .i { width:14px; height:14px; color:var(--accent-ink); }
.dm-peek-top .n { margin-left:auto; }
.dm-peek-text { font-size:14px; line-height:1.45; font-weight:500; }
.dm-panel { position:absolute; right:0; bottom:calc(100% + 10px); z-index:6; display:flex; flex-direction:column; width:min(380px, 80vw); max-height:min(480px, 60vh);
  border:1px solid var(--glass-line); border-radius:20px; background:var(--glass-strong); color:var(--text); -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:var(--shadow-xl); overflow:hidden; font-family:var(--font); animation:askin .3s var(--ease); }
.dm-panel-head { display:flex; align-items:center; gap:10px; padding:12px 12px 10px 16px; border-bottom:1px solid var(--line); font-size:14px; }
.dm-panel-head strong { flex:1; }
.dm-panel-x { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.dm-panel-x:hover { background:var(--hover); }
.dm-panel-body { display:grid; gap:10px; padding:12px; overflow-y:auto; }
.dm-panel .ask-find { padding:12px 14px; }
@media (max-width: 860px) {
  .dm-app { grid-template-columns:1fr; grid-template-rows:auto minmax(0, 1fr); height:calc(100vh - 120px); min-height:480px; }
  .dm-side { flex-direction:row; align-items:center; padding:8px 10px; border-right:0; border-bottom:1px solid var(--ai-line); }
  .dm-label { display:none; }
  .dm-left { margin:0 0 0 auto; }
  .dm-thread, .dm-bottom { padding-left:14px; padding-right:14px; }
  .dm-tab { padding:0 14px; }
}

/* ---------- less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* the demo's pause button stops its motion too */
.demo[data-paused] *, .demo[data-paused] *::after { animation-play-state:paused !important; }

/* ---------- Sign in (/signin): the Google button, the invite code, who is signed in ---------- */
.signin { display:grid; gap:18px; justify-items:start; }
.signin-google { min-height:44px; width:100%; max-width:320px; }
.signin-msg { min-height:1.4em; font-size:15px; color:var(--muted); }
.signin-msg:empty { display:none; }
.signin-invite { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.signin-invite label { width:100%; font-size:14px; font-weight:500; }
.signin-invite input { height:40px; min-width:0; flex:1 1 200px; max-width:260px; padding:0 12px; border:1px solid var(--line-strong); border-radius:10px;
  background:transparent; color:var(--text); font:inherit; }
.signin-who { font-size:18px; font-weight:500; }
.signin-next { color:var(--muted); }
.signin-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }

/* ---------- Edit the website (/admin/edit, web/site/edit.js): only for a Dashboard owner ---------- */
.dela-edit body { padding-bottom:112px; }
.dela-edit .askdock { display:none; }
.dela-edit [data-cms] { border-radius:6px; outline:1.5px dashed transparent; outline-offset:3px; cursor:text; transition:outline-color .15s var(--ease), background-color .15s var(--ease); }
.dela-edit [data-cms]:hover { outline-color:color-mix(in oklab, var(--accent) 70%, transparent); }
.dela-edit [data-cms].cms-changed { outline-color:color-mix(in oklab, var(--accent) 38%, transparent); outline-style:solid; outline-width:1px; }
.dela-edit [data-cms]:focus { outline:2px solid var(--accent); background:var(--accent-soft); caret-color:var(--accent); }
.dela-edit [data-cms-run] { display:inline; }
.dela-edit [data-cms-block]:hover { box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 35%, transparent); }
.dela-edit [data-cms-item]:hover { outline:1.5px dashed color-mix(in oklab, var(--accent) 55%, transparent); outline-offset:3px; }
.dela-edit [data-cms-added] { outline:1.5px solid color-mix(in oklab, var(--accent) 45%, transparent); outline-offset:3px; }
.dela-edit [data-cms-hidden] { opacity:.36; outline:1.5px dashed var(--line-strong); outline-offset:-1.5px; }
.dela-edit [data-cms-hidden]:hover { opacity:.6; }
.cms-bar, .cms-pop, .cms-fmt, .cms-tools { font-size:14px; line-height:1.4; letter-spacing:-.006em; color:var(--text); }
.cms-bar [hidden], .cms-pop[hidden], .cms-fmt[hidden], .cms-fmt [hidden], .cms-tools[hidden], .cms-tools [hidden] { display:none !important; }
.cms-bar { position:fixed; left:0; right:0; bottom:12px; z-index:90; width:min(1100px, calc(100% - 24px)); margin:0 auto; padding:10px 12px 10px 14px; border-radius:18px;
  background:var(--raised); border:1px solid var(--line-strong); box-shadow:0 14px 44px rgba(0,0,0,.16);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.cms-what { display:flex; align-items:center; gap:10px; min-width:0; }
.cms-what div { display:grid; }
.cms-ico { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--accent-soft); color:var(--accent); flex:none; }
.cms-ico .i { width:18px; height:18px; }
.cms-pick { appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px; padding:0 14px 0 0; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-size:4px 4px, 4px 4px;
  background-position:calc(100% - 6px) 55%, calc(100% - 2px) 55%; background-repeat:no-repeat; max-width:200px; }
.cms-pick:hover { color:var(--text); }
.cms-status { flex:1 1 200px; min-width:0; color:var(--muted); font-size:13px; }
.cms-status[data-kind="ok"] { color:var(--accent-ink, var(--accent)); font-weight:500; }
.cms-status[data-kind="error"] { color:var(--text); font-weight:600; }
.cms-act { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.cms-btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px; border:1px solid var(--line); border-radius:11px; background:var(--raised);
  color:var(--text); font:inherit; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none; }
.cms-btn:hover { background:var(--hover); text-decoration:none; }
.cms-btn:disabled { opacity:.45; cursor:default; background:var(--raised); }
.cms-btn .i { width:16px; height:16px; }
.cms-primary { background:var(--primary); border-color:transparent; color:var(--on-primary); }
.cms-primary:hover { background:var(--primary); opacity:.88; }
.cms-primary:disabled { background:var(--primary); }
.cms-pop { position:fixed; z-index:95; left:50%; bottom:88px; transform:translateX(-50%); width:min(420px, calc(100% - 24px)); padding:16px; border-radius:18px;
  background:var(--raised); border:1px solid var(--line-strong); box-shadow:0 18px 50px rgba(0,0,0,.2); display:grid; gap:12px; }
.cms-pop p { margin:0; color:var(--muted); font-size:14px; }
.cms-pop input { height:40px; padding:0 12px; border:1px solid var(--line-strong); border-radius:11px; background:var(--panel2); color:var(--text); font:inherit; }
.cms-pop input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.cms-pop-act { display:flex; justify-content:flex-end; gap:8px; }
.cms-fmt, .cms-tools { position:fixed; z-index:92; display:flex; align-items:center; gap:2px; padding:4px; border-radius:13px; background:var(--raised); border:1px solid var(--line-strong); box-shadow:0 8px 28px rgba(0,0,0,.14); }
.cms-fmt { flex-direction:column; align-items:stretch; }
.cms-fmt-row { display:flex; align-items:center; gap:2px; }
.cms-tool { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:9px; background:transparent; color:var(--text); cursor:pointer; }
.cms-tool:hover { background:var(--hover); }
.cms-tool:disabled { opacity:.35; cursor:default; background:transparent; }
.cms-tool .i { width:17px; height:17px; }
.cms-link { width:210px; height:32px; padding:0 10px; border:1px solid var(--line-strong); border-radius:9px; background:var(--panel2); color:var(--text); font:inherit; font-size:13px; }
.cms-link:focus { outline:2px solid var(--accent); outline-offset:1px; }
.cms-tools-label { max-width:170px; padding:0 8px 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.02em; }
@media (max-width: 720px) {
  .dela-edit body { padding-bottom:220px; }
  .cms-status { order:3; flex-basis:100%; }
  .cms-act { order:4; width:100%; margin-left:0; display:grid; grid-template-columns:1fr 1fr; }
  .cms-btn { justify-content:center; padding:0 10px; }
  .cms-pop { bottom:200px; }
}
}

/* ---------- the other pages, continued (after the small screens, so these win over .tiles.three there) ---------- */
.page-band { padding-block:clamp(48px, 6vw, 80px); }
.page-band + .page-body { padding-top:clamp(48px, 6vw, 80px); }
.page-final { padding-block:clamp(72px, 9vw, 136px); }
.card-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.card-head .ico { width:40px; height:40px; margin:0; border-radius:12px; background:var(--accent-soft); color:var(--accent); }
.card-head .ico .i { width:20px; height:20px; }
.card-head h2 { margin:0; font-size:21px; font-weight:600; line-height:1.25; letter-spacing:-.022em; }
/* Docs: what is on the page, as tiles */
.tiles.toc { padding:0; list-style:none; }
.tiles.toc .tile { position:relative; display:flex; align-items:center; gap:14px; padding:18px 20px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.tiles.toc .tile .ico { width:40px; height:40px; margin:0; border-radius:12px; }
.tiles.toc .tile .ico .i { width:20px; height:20px; }
.tiles.toc h3 { font-size:17px; }
.tiles.toc a { color:var(--text); }
.tiles.toc a::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.tiles.toc a:hover { text-decoration:none; }
.tiles.toc .tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-xl); }
.tiles.toc a:focus-visible { outline:none; }
.tiles.toc .tile:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
/* Help centre: the topics, then each topic's questions */
.topics { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:clamp(40px, 5vw, 64px); }
.page-body .topics a { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; background:var(--tint); color:var(--text); font-size:15px; text-decoration:none; transition:background .2s; }
.page-body .topics a:hover { background:var(--hover); }
.help-group + .help-group { margin-top:clamp(48px, 6vw, 72px); }
.help-group .card-head { margin-bottom:8px; }
.help-group .faq summary { padding:20px 4px; font-size:clamp(17px, 1.6vw, 19px); }
.help-group .faq details > div { font-size:16px; }
/* Resources: four cards */
.res-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.page-body .res-grid { padding:0; list-style:none; }
.page-body .res-grid > li { margin:0; }
.res-grid .tile ul { padding:0; list-style:none; }
.res-grid .tile li { margin:0; padding:10px 0; border-top:.5px solid var(--line); color:var(--muted); }
.res-grid .tile li:first-child { padding-top:2px; border-top:0; }
.page-body .res-grid .tile a { color:var(--text); font-weight:500; }
@media (max-width: 640px) {
  .res-grid { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .res-grid .tile { padding:22px 20px; }
  .tiles.toc .tile { padding:14px 16px; }
  .tiles.toc .tile .ico { width:36px; height:36px; }
  .help-group .faq summary { padding:18px 2px; }
}

/* ================= Graphite (DESIGN.md, "Website"): a graphite canvas with white sheets =================
   The same look as the ISAI app and ISA: tonal neutrals, one colour (ISAI blue), the main button in ink, one grey hover, one blue
   selected look, Lucide icons in soft chips, thin lines. Each part of a page is one sheet; its title is on the left, its words on
   the right. This block comes after the rules above, so it wins over them. */
html { scroll-padding-top:calc(var(--nav-h) + 28px); }
body { font-size:16px; line-height:1.55; }
.field { display:none; }
.mark .disc { fill:var(--mark-disc); } .mark .ring { fill:none; stroke:var(--mark-ring); stroke-opacity:var(--mark-ring-o); stroke-width:12; }
.grad { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--accent-ink); }
.sheen-0, .sheen-1 { stop-color:#fff; }

/* the canvas and its sheets */
main, .nav, .footer { width:min(1320px, calc(100% - 24px)); margin-inline:auto; }
main { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--gap); margin-top:var(--gap); }
.section, .hero, .page-final { position:relative; border:1px solid var(--line); border-radius:28px; background:var(--raised); padding-block:clamp(32px, 5vw, 64px); overflow:clip; }
.tint { background:var(--raised); }
.section .wrap, .section .wrap.wide, .section .wrap.narrow, .hero > .wrap, .hero > .wrap.wide, .page-final .wrap { width:auto; max-width:none; margin:0; padding-inline:var(--pad); }
.section[id] { scroll-margin-top:calc(var(--nav-h) + 28px); }
#isa > .wrap:first-child { width:auto; }

/* type */
.display { font-size:clamp(36px, 5.2vw, 64px); line-height:1.03; letter-spacing:-.04em; font-weight:600; }
.h1 { font-size:clamp(36px, 5.6vw, 64px); line-height:1.04; letter-spacing:-.04em; font-weight:600; }
.h2 { font-size:clamp(28px, 3.8vw, 42px); line-height:1.08; letter-spacing:-.032em; font-weight:600; }
.eyebrow { margin-bottom:0; font:500 11px/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.lead { margin-top:18px; font-size:clamp(16px, 1.5vw, 19px); line-height:1.55; letter-spacing:-.01em; color:var(--muted); max-width:62ch; }
.fine { font-size:13.5px; color:var(--muted); }
a { color:var(--accent-ink); }

/* buttons: rounded squares; the main one in ink */
.btn { min-height:40px; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:var(--raised); color:var(--text); font-size:14px; font-weight:500; letter-spacing:-.005em; }
.btn:hover { background:var(--hover); }
.btn-primary { background:var(--primary); color:var(--on-primary); border-color:transparent; }
.btn-primary:hover { background:color-mix(in oklab, var(--primary) 86%, var(--raised)); opacity:1; }
.btn-link { min-height:40px; padding:0 14px; border-color:transparent; background:none; color:var(--text); }
.btn-link:hover { background:var(--hover); text-decoration:none; }
.btn-sm { min-height:34px; padding:0 13px; border-radius:10px; font-size:13px; }
.cta { justify-content:flex-start; margin-top:28px; gap:10px; }
.btn-quiet { background:var(--surface2); }

/* the header: a floating bar */
.nav { position:sticky; inset:auto; top:12px; z-index:50; margin-top:var(--gap); }
.nav::before { display:none; }
/* The page scrolls under the floating bar: the 12 px above it stay canvas, so no words show over the bar. */
body::before { content:""; position:fixed; z-index:49; top:0; left:0; right:0; height:12px; background:var(--canvas); pointer-events:none; }
.nav-in, .nav-in.wrap, .nav-in.wrap.wide { width:auto; max-width:none; margin:0; height:auto; min-height:var(--nav-h); padding:8px 8px 8px 16px; gap:8px;
  background:var(--raised); border:1px solid var(--line); border-radius:18px; box-shadow:var(--card); }
.brand .mark { width:28px; height:28px; }
.links { gap:2px; margin-left:12px; }
.links a { height:34px; padding:0 12px; border-radius:10px; color:var(--muted); font-size:14px; line-height:34px; transition:background-color .2s var(--ease), color .2s var(--ease); }
.links a:hover { background:var(--hover); color:var(--text); }
.links a[aria-current] { background:var(--sel); color:var(--text); }
.nav-cta { gap:4px; margin-left:auto; }
.nav-signin { height:34px; padding:0 12px; border-radius:10px; line-height:34px; }
.nav-signin:hover { background:var(--hover); }
.wordtext { font-size:20px; }
@media (max-width: 880px) {
  .menu { top:calc(100% + 8px); border:1px solid var(--line); border-radius:18px; background:var(--raised); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--card); padding:8px 8px 14px; }
  .menu .wrap { width:auto; padding:0 8px; }
  .menu a:not(.btn) { padding:12px 8px; border-bottom:1px solid var(--line); font-size:18px; font-weight:500; letter-spacing:-.015em; color:var(--text); }
  .menu a:not(.btn):hover { background:var(--hover); color:var(--text); }
}

/* the footer, on the canvas */
.footer { padding:28px 20px 20px; background:none; border-top:0; }
.footer .wrap, .footer .wrap.wide { width:auto; max-width:none; margin:0; padding:0; }
.foot-links h2 { font:500 11px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.foot-links a { color:var(--text); }
.foot-links a:hover { color:var(--accent-ink); }
.foot-base { border-top:1px solid var(--line); }

/* a part of the home page: the title on the left, its words on the right */
.section-head, .section-head.center { max-width:none; margin:0 0 clamp(24px, 3.4vw, 40px); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px 56px; align-items:end; text-align:left; }
.section-head > .eyebrow { grid-column:1 / -1; }
.section-head .lead, .section-head.center .lead { margin:0; max-width:none; justify-self:start; }
.section-head:not(:has(.lead)) { grid-template-columns:minmax(0, 1fr); }
.more { margin-top:20px; text-align:left; }
@media (max-width: 860px) { .section-head, .section-head.center { grid-template-columns:minmax(0, 1fr); gap:12px; } }

/* the hero: the words on the left, the app on the right, faint doodles behind */
.hero { padding-block:clamp(28px, 4vw, 56px); display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(24px, 4vw, 48px); align-items:center; }
.hero > .wrap, .hero > .wrap.wide { position:relative; z-index:1; }
.hero-copy { text-align:left; }
.hero .display, .hero .lead, .hero-copy .fine { margin-inline:0; max-width:none; }
.hero .display { font-size:clamp(34px, 4.4vw, 56px); }
.hero .display .sub { display:inline; margin:0; font-size:1em; line-height:inherit; letter-spacing:inherit; color:var(--accent-ink); }
.hero .lead { max-width:52ch; }
.hero .fine { margin-top:18px; max-width:56ch; }
.hero .cta { justify-content:flex-start; }
@media (min-width: 1000px) {
  .hero { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); width:auto; padding-top:clamp(28px, 4vw, 56px); }
  .hero > .wrap, .hero > .wrap.wide { padding-inline:var(--pad) 0; }
  .hero > .wrap.wide { padding-inline:0 var(--pad); }
  .hero .display { max-width:none; font-size:clamp(34px, 4.1vw, 54px); }
  .hero .app-side { display:flex; }
}
.hero > .doodles, .doodles { position:absolute; inset:0; pointer-events:none; color:var(--text); opacity:.05; z-index:0; }
.doodles i { position:absolute; display:block; }
.doodles .i { width:28px; height:28px; }
.doodles i:nth-child(1) { left:3%; top:6%; transform:rotate(-12deg); } .doodles i:nth-child(2) { left:20%; top:4%; transform:rotate(8deg); }
.doodles i:nth-child(3) { left:38%; top:5%; transform:rotate(-6deg); } .doodles i:nth-child(4) { left:56%; top:4%; transform:rotate(14deg); }
.doodles i:nth-child(5) { left:74%; top:6%; transform:rotate(-10deg); } .doodles i:nth-child(6) { left:93%; top:5%; transform:rotate(10deg); }
.doodles i:nth-child(7) { left:96%; top:24%; transform:rotate(-14deg); } .doodles i:nth-child(8) { left:95%; top:46%; transform:rotate(6deg); }
.doodles i:nth-child(9) { left:96%; top:70%; transform:rotate(-8deg); } .doodles i:nth-child(10) { left:4%; top:92%; transform:rotate(12deg); }
.doodles i:nth-child(11) { left:22%; top:94%; transform:rotate(-5deg); } .doodles i:nth-child(12) { left:40%; top:93%; transform:rotate(9deg); }
.doodles i:nth-child(13) { left:58%; top:94%; transform:rotate(-12deg); } .doodles i:nth-child(14) { left:76%; top:92%; transform:rotate(7deg); }
.doodles i:nth-child(15) { left:93%; top:92%; transform:rotate(-9deg); } .doodles i:nth-child(16) { left:2%; top:30%; transform:rotate(11deg); }
.doodles i:nth-child(17) { left:2%; top:60%; transform:rotate(-7deg); }

/* the app, drawn small (the hero) */
.demo { margin-top:0; }
.hero .demo { margin-top:0; }
.browser { border-radius:18px; background:var(--canvas); border:1px solid var(--line); box-shadow:var(--shadow-xl); }
.bar { height:36px; gap:12px; padding:0 14px; background:var(--panel2); border-bottom:1px solid var(--line); }
.dots i { width:9px; height:9px; background:var(--line-strong); }
.tab { height:26px; padding:0 10px; border-radius:8px; background:var(--raised); box-shadow:none; border:1px solid var(--line); font-size:12px; }
.app-shelf { display:flex; align-items:flex-end; gap:6px; height:44px; padding:8px 12px 0; background:var(--canvas); border-bottom:1px solid var(--line); }
.app-book { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; height:34px; min-width:28px; padding:0 8px; border:1px solid var(--line); border-bottom:0; border-radius:9px 9px 0 0;
  background:var(--panel2); color:var(--muted); font-size:11px; font-weight:600; }
.app-book::before { content:""; position:absolute; left:7px; right:7px; top:5px; height:1px; background:var(--line); box-shadow:0 3px 0 var(--line); }
.app-book.open { padding:0 12px 0 10px; border-top:2px solid var(--accent); background:var(--raised); color:var(--text); font-size:12px; font-weight:500; max-width:230px; }
.app-book.open::before { display:none; }
.app-book .mark { width:15px; height:15px; }
.app-book span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.app { height:clamp(540px, 45vw, 610px); grid-template-columns:200px minmax(0, 1fr); }
.app-side { background:var(--canvas); border-right:1px solid var(--line); padding:12px 8px; }
.app-brand { padding:2px 8px 10px; }
.app-brand b { font:700 15px "Space Grotesk", var(--font); letter-spacing:.03em; }
.app-row { min-height:30px; border-radius:8px; font-size:12.5px; }
.app-task.on { background:var(--sel); color:var(--text); }
.app-label { margin:10px 8px 2px; font:500 10px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.app-main { padding:0; background:var(--raised); }
.app-top { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:13px; }
.app-top b { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:500; }
.app-top .app-mode { flex:none; }
.app-members { display:flex; flex:none; }
.app-members .av { margin-left:-7px; }
.av { display:inline-grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:var(--raised); border:1px solid var(--line); color:var(--text); }
.av svg { width:15px; height:15px; }
.app-thread { max-width:none; margin:0; padding:14px 16px 4px; gap:12px; font-size:13px; -webkit-mask-image:none; mask-image:none; }
.app-you { border-radius:14px; background:var(--panel2); }
.app-av .mark { width:26px; height:26px; }
.app-mode { background:var(--panel2); color:var(--text); border:1px solid var(--line); }
.app-steps li { border-radius:0; background:none; box-shadow:none; border-top:1px solid var(--line); padding:8px 0; }
.app-steps li:first-child { border-top:0; }
.app-steps { gap:0; }
.app-body { border:1px solid var(--line); border-radius:14px; padding:10px 12px; gap:6px; }
.app-ai { background:var(--raised); border:1px solid var(--line); }
.app-ai svg { width:15px; height:15px; }
.app-st { background:var(--panel2); color:var(--muted); }
.app-st[data-st="working"] { background:var(--sel); color:var(--text); }
.app-st[data-st="done"] { background:var(--accent-soft); color:var(--text); }
.app-report .app-body { border-radius:14px; background:var(--raised); box-shadow:none; }
.app-better span { box-shadow:inset 0 0 0 1px var(--line-strong); }
.app-composer { margin:8px 16px 14px; width:auto; max-width:none; height:46px; border-radius:14px; background:var(--raised); border:1px solid var(--line); box-shadow:none; }
.app-composer .send { width:30px; height:30px; background:var(--text); color:var(--raised); opacity:1; }

/* ISA beside an AI chat: the real look of the extension (a solid disc with a ring, flat windows, one hover) */
.ball { border:1.5px solid var(--ring); background:var(--disc); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--card); }
.ball:hover { box-shadow:var(--pop-shadow); }
.ball .mark .disc, .ball .mark .ring { display:none; } .ball .mark .pin { transform:none; }
.peek, .panel { background:var(--raised); border:1px solid var(--line); box-shadow:var(--pop-shadow); }
.peek { border-radius:16px; }
.panel { border-radius:20px; }
.row:hover { background:var(--hover); }
.fmt { background:var(--panel2); }
.lane { background:var(--soft, var(--accent-soft)); }
.foot .mode { background:none; border:1px solid var(--line); }
.rate button:hover { background:var(--hover); }
.chat { background:var(--raised); }
.msg.user { background:var(--panel2); }
.composer { background:var(--raised); border:1px solid var(--line); box-shadow:none; }
.send { background:var(--text); color:var(--raised); }

/* tiles, with the icon in a soft chip */
.tiles { gap:10px; }
.tile { padding:20px; border-radius:20px; background:var(--panel2); transition:background-color .2s var(--ease); }
.tint .tile { background:var(--panel2); box-shadow:none; }
.tile:hover { background:var(--hover); }
.tile .ico, .points .ico, .card-head .ico { width:36px; height:36px; margin-bottom:14px; border-radius:12px; background:var(--accent-soft); color:var(--text); box-shadow:none; }
.tile .ico .i, .points .ico .i, .card-head .ico .i { width:18px; height:18px; }
.tile h3 { font-size:17px; letter-spacing:-.012em; }
.tile p { margin-top:6px; font-size:14.5px; line-height:1.5; }

/* How it works: five steps on a thin line */
.pipeline.flow::before, .pipeline.flow::after { display:none; }
.pipeline.flow { counter-reset:none; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0; border-top:1px solid var(--line); margin:0; }
.pipeline.flow > li { display:grid; gap:10px; align-content:start; padding:20px 18px 6px 0; border-top:0; text-align:left; }
.pipeline.flow > li + li { padding-left:18px; border-left:1px solid var(--line); }
.pipeline.flow > li::before { display:none; }
.pipeline.flow .ico { display:grid; width:36px; height:36px; border-radius:12px; background:var(--accent-soft); color:var(--text); box-shadow:none; transition:background-color .4s var(--ease), color .4s var(--ease); }
.pipeline.flow .ico .i { width:18px; height:18px; }
.pipeline.flow[data-ready] .ico { background:var(--panel2); color:var(--muted); box-shadow:none; }
.pipeline.flow[data-ready] li.lit .ico { background:var(--accent-soft); color:var(--text); }
.pipeline.flow > li:last-child .ico { background:var(--accent); color:var(--on-accent); }
.pipeline.flow h3 { font-size:16px; }
@media (max-width: 960px) {
  .pipeline.flow { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:none; gap:0; }
  .pipeline.flow > li { padding:18px 16px 10px 0; border-top:1px solid var(--line); }
  .pipeline.flow > li + li { padding-left:0; border-left:0; }
  .pipeline.flow > li:nth-child(even) { padding-left:16px; border-left:1px solid var(--line); }
  .pipeline.flow > li:first-child, .pipeline.flow > li:nth-child(2) { border-top:0; }
}
@media (max-width: 620px) {
  .pipeline.flow { grid-template-columns:minmax(0, 1fr); }
  .pipeline.flow > li, .pipeline.flow > li:nth-child(even) { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .pipeline.flow > li:first-child { border-top:0; }
}

/* the modes: tabs, and the open mode with its example */
.modetabs { gap:2px; padding:4px; width:max-content; max-width:100%; overflow-x:auto; border-radius:14px; background:var(--panel2); scrollbar-width:none; }
.modetabs button { height:36px; padding:0 14px; border:0; border-radius:10px; background:none; color:var(--muted); font-size:14px; font-weight:500; white-space:nowrap; }
.modetabs button:hover { background:var(--hover); color:var(--text); }
.modetabs button[aria-selected="true"] { border:0; background:var(--sel); color:var(--text); font-weight:500; }
.tiles.modes.tabbed > li { margin-top:16px; padding:24px; border:0; border-radius:20px; background:var(--panel2); column-gap:20px; }
.tiles.modes.tabbed h3 { font-size:20px; }
.tiles.modes .exq { padding:12px 14px; background:var(--raised); border:1px solid var(--line); border-radius:14px; font-size:15px; }
.tiles.modes .exa { padding:12px 14px; background:var(--accent-soft); color:var(--text); border-radius:14px; font-size:15px; }
.tiles.modes .ex span { display:block; }

/* Your AIs */
.split { gap:clamp(24px, 4vw, 56px); }
.split .h2 { font-size:clamp(28px, 3.8vw, 42px); }
.visual { padding:0; background:none; border-radius:0; overflow:visible; }
.win { width:100%; border-radius:20px; border:1px solid var(--line); background:var(--raised); box-shadow:var(--card); }
.points { margin-top:24px; gap:14px; }
.points .ico { margin-bottom:0; }
.points p { font-size:14.5px; }
.ai-rows li { border-top:1px solid var(--line); border-radius:0; padding:10px 8px; }
.ai-rows li:first-child { border-top:0; }
.ai-name { font-weight:500; }
.needs { border-radius:14px; background:var(--accent-soft); }
.btn-mini { border:1px solid var(--line); border-radius:10px; }
.btn-mini.primary { background:var(--primary); color:var(--on-primary); border-color:transparent; }
.btn-mini.on { background:var(--accent-soft); color:var(--text); }

/* ISA: a dark sheet in both themes */
#isa { --raised:#16181C; --tint:#1B1E23; --panel:#16181C; --panel2:#1B1E23; --surface2:#1F2227; --hover:rgba(255,255,255,.08); --sel:rgba(124,134,242,.30); --accent-soft:rgba(124,134,242,.18);
  --line:#2A2D33; --line-strong:#3A3E46; --text:#F2F3F4; --muted:#9AA0AA; --faint:#8A909A; --accent:#7C86F2; --accent-ink:#A5ACF8; --primary:#F2F3F4; --on-primary:#0E0F12; --on-accent:#0B0E14;
  --mark-disc:#0a0a0a; --mark-ring:#7C86F2; --mark-ring-o:.45; --pop-shadow:0 20px 50px rgba(0,0,0,.5); --card:none;
  --disc:#0a0a0a; --ring:rgba(124,134,242,.45); --count-bg:#F2F3F4; --count-fg:#111214;
  background:#0E0F12; color:var(--text); border-color:#25272C; }
#isa .dex-demo { --raised:#1A1C20; --panel:#1A1C20; --tint:#14161A; --panel2:#14161A; --surface2:#2A2D33; --text:#E7E8EA; --muted:#9AA0AA; --line:#2A2D33; }
#isa .browser { background:#14161A; border-color:#2A2D33; }
#isa .bar { background:#14161A; border-color:#2A2D33; }
#isa .peek, #isa .panel { background:#16181C; border-color:#2A2D33; --raised:#16181C; --text:#F2F3F4; --panel2:#1B1E23; --surface2:#1F2227; }
#isa .dex-demo figcaption, #isa .dex-demo figcaption a { color:#9AA0AA; }
#isa .dex-demo figcaption a { color:#A5ACF8; }
.dex-tiles { margin-top:20px; }

/* questions */
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { margin-inline:-8px; padding:18px 8px; border-radius:12px; font-size:clamp(16px, 1.5vw, 18px); font-weight:500; letter-spacing:-.012em; }
.faq summary:hover { background:var(--hover); color:var(--text); }
.faq details > div { padding:0 8px 18px 0; font-size:15.5px; }

/* the last call */
.final .wrap.center, .page-final .wrap.center { display:grid; justify-items:start; gap:20px; padding:0 var(--pad); background:none; border-radius:0; text-align:left; }
.final .final-mark, .page-final .final-mark { display:inline-flex; width:56px; height:56px; margin:0; }
.final .final-mark .mark, .page-final .final-mark .mark { filter:none; }
.final .display, .page-final .display { margin:0; max-width:none; font-size:clamp(34px, 5vw, 60px); }
.final .display .grad, .page-final .display .grad { display:inline; color:var(--accent-ink); }
.final .cta, .page-final .cta { margin-top:0; }
.final .fine { flex-basis:auto; }

/* the other pages: a left-aligned head on the canvas, then sheets */
.page-head { overflow:visible; padding:clamp(32px, 5vw, 64px) var(--pad) clamp(16px, 2.4vw, 28px); text-align:left; }
.page-head > .wrap, .page-head > .wrap.narrow { width:auto; max-width:none; margin:0; padding:0; display:grid; gap:14px; }
.page-head .lead { margin:0; max-width:56ch; }
.page-head .eyebrow { margin:0; }
.page-body, .page-band { padding:0; margin:0; }
.page-body > .wrap, .page-body > .wrap.narrow, .page-band > .wrap { width:auto; max-width:none; margin:0; padding:0; }
.page-body .policies { display:grid; gap:var(--gap); }
.policy, .step-card, .card.policy { margin:0; padding:clamp(20px, 3vw, 36px); border:1px solid var(--line); border-radius:28px; background:var(--raised); }
.policy + .policy { margin-top:0; }
.policy h2, .step-card h2 { font-size:22px; letter-spacing:-.022em; }
.card-head { margin-bottom:16px; }
.card-head .ico { margin-bottom:0; }
.card-head h2 { font-size:22px; }
.page-body .policy ul { display:grid; gap:10px; list-style:none; padding:0; }
.page-body .policy li { position:relative; margin:0; padding-left:18px; color:var(--muted); text-wrap:pretty; }
.page-body .policy li::before { content:""; position:absolute; left:2px; top:.7em; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.page-body .policy li strong { color:var(--text); font-weight:600; }
.page-body .policy ol { display:grid; gap:10px; padding-left:20px; color:var(--muted); }
.page-body .policy p { color:var(--muted); }
.page-body .policy p + p { margin-top:12px; }
.page-note { border:0; border-radius:20px; background:var(--panel2); padding:14px 18px; margin-top:0; }
.num { width:36px; height:36px; margin:0; border-radius:12px; background:var(--accent-soft); color:var(--text); font-size:14px; }
.step-card .num { width:36px; height:36px; font-size:14px; }
.steps-list > .step-card:first-child .num { background:var(--accent); color:var(--on-accent); }
.step-card { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:16px; }
.page-body .steps-list { gap:var(--gap); }
code { border:0; background:var(--panel2); border-radius:6px; font-size:12.5px; }

/* a long page: a short list of its parts on the left that follows you, the parts on the right */
.docs-layout { display:grid; grid-template-columns:230px minmax(0, 1fr); gap:var(--gap); align-items:start; }
.docs-layout > .policies, .docs-layout > .steps-wrap { min-width:0; }
.toc-list { position:sticky; top:calc(var(--nav-h) + 40px); display:grid; gap:2px; padding:8px; border:1px solid var(--line); border-radius:20px; background:var(--raised); }
.toc-list .eyebrow { padding:8px 10px 6px; }
.toc-list a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; color:var(--muted); font-size:14px; }
.toc-list a:hover { background:var(--hover); color:var(--text); text-decoration:none; }
.toc-list a[aria-current] { background:var(--sel); color:var(--text); }
.toc-list a .nn { width:16px; font:500 11px var(--mono); color:var(--muted); }
.glance { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom:var(--gap); }
.glance .tile { display:grid; gap:6px; }
.glance .tile .ico { margin-bottom:6px; }
.glance .tile b { font-size:15px; font-weight:600; }
.glance .tile p { margin:0; font-size:14px; }
@media (max-width: 900px) {
  .docs-layout { grid-template-columns:minmax(0, 1fr); }
  .toc-list { position:static; display:flex; overflow-x:auto; padding:6px; scrollbar-width:none; }
  .toc-list .eyebrow { display:none; }
  .toc-list a { white-space:nowrap; }
  .glance { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .step-card { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 560px) { .glance { grid-template-columns:minmax(0, 1fr); } }

/* Docs, Help centre, Resources */
.tiles.toc { display:none; }
.topics { justify-content:flex-start; margin-bottom:24px; }
.page-body .topics a { gap:8px; height:36px; min-height:0; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:var(--raised); font-size:14px; font-weight:500; }
.page-body .topics a:hover { background:var(--hover); }
.topics a .i { width:16px; height:16px; }
.help-search { display:flex; align-items:center; gap:10px; width:min(640px, 100%); height:52px; margin-top:6px; padding:0 8px 0 18px; border:1px solid var(--line); border-radius:16px; background:var(--raised); box-shadow:var(--card);
  color:var(--muted); font:inherit; font-size:15px; text-align:left; cursor:pointer; }
.help-search .i { width:18px; height:18px; }
.help-search span { flex:1; }
.help-search b { display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:10px; background:var(--primary); color:var(--on-primary); font-size:13px; font-weight:500; }
.help-group { padding:clamp(20px, 3vw, 36px); border:1px solid var(--line); border-radius:28px; background:var(--raised); }
.help-group + .help-group { margin-top:var(--gap); }
.res-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--gap); }
.res-grid > li.tile { padding:clamp(20px, 3vw, 36px); border:1px solid var(--line); border-radius:28px; background:var(--raised); }
.res-grid .tile li { padding:0; border-top:0; }
.res-grid .tile li { padding:11px 0; border-top:1px solid var(--line); color:var(--muted); }
.res-grid .tile li:first-child { border-top:0; padding-top:0; }
.res-grid .tile li a { color:var(--text); font-weight:500; }

/* Sign in: one sheet in two halves */
.signin-split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0; width:min(1000px, 100%); margin:0 auto; border:1px solid var(--line); border-radius:28px; overflow:clip; background:var(--raised); }
.signin-side { padding:clamp(24px, 4.4vw, 52px); border-radius:0; background:#0E0F12; color:#F2F3F4; display:grid; gap:24px; align-content:center; }
.signin-side ul { display:grid; gap:12px; color:#C9CBD0; list-style:none; padding:0; }
.signin-side li { display:flex; gap:10px; }
.signin-side li .i { flex:none; width:18px; height:18px; margin-top:3px; color:#A5ACF8; }
.signin-side h2 { font-size:clamp(28px, 3.4vw, 40px); font-weight:600; letter-spacing:-.04em; }
.signin-side h2 span { color:#A5ACF8; }
.signin-side ul { margin:0; }
.signin-split .signin, .signin-split .wrap.narrow.signin { width:auto; max-width:none; margin:0; padding:clamp(24px, 4.4vw, 52px); align-content:center; }
.signin-google { max-width:none; }
.signin-invite input { border-radius:12px; background:var(--raised); }
.page-head.center-head { text-align:center; }
.page-head.center-head > .wrap { justify-items:center; }
.page-head.center-head .lead { margin-inline:auto; }
@media (max-width: 860px) { .signin-split { grid-template-columns:minmax(0, 1fr); } }
/* Sign in: Google, then email and password */
.signin-main, .signin-done { display:grid; gap:14px; width:100%; justify-items:stretch; align-content:start; }
.signin-main[hidden], .signin-done[hidden], .signin-form [hidden], .signin-or[hidden], .signin-form[hidden] { display:none !important; }
.signin-or { display:flex; align-items:center; gap:12px; margin:2px 0; color:var(--muted); font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.signin-or::before, .signin-or::after { content:""; flex:1; height:1px; background:var(--line-strong); }
.signin-form { display:grid; gap:8px; }
.signin-form label { margin-top:6px; font-size:14px; font-weight:600; letter-spacing:-.005em; }
.signin-form input { width:100%; height:52px; padding:0 18px; border:1px solid var(--line-strong); border-radius:16px; background:var(--panel2); color:var(--text); font:inherit; font-size:16px; }
.signin-form input::placeholder { color:var(--faint); }
.signin-form input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.signin-form .btn { width:100%; height:52px; margin-top:12px; border-radius:16px; justify-content:center; font-size:16px; }
.signin-form .btn:disabled { opacity:.6; cursor:progress; }
.signin-err { margin:0; color:var(--text); font-size:14px; font-weight:500; }
.signin-err:empty { display:none; }
.signin-switch { margin:4px 0 0; }
.signin-switch .link { border:0; background:none; padding:0; color:var(--accent-ink); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.signin-main > .btn { justify-self:start; }
/* /signin?popup=1: the small window a guest's card opens (team.js googleWindow): only the form */
.signin-popup .nav, .signin-popup .footer, .signin-popup .signin-side, .signin-popup .askdock, .signin-popup .page-head .eyebrow, .signin-popup .page-head .lead { display:none !important; }
.signin-popup .page-head { padding:20px 0 0; }
.signin-popup .page-head .h1 { font-size:28px; }
.signin-popup .signin-split { grid-template-columns:minmax(0, 1fr); width:100%; border:0; border-radius:0; background:none; }
.signin-popup main { padding-top:12px; }

/* the demo page */
.dm-page { padding:0; margin:0; overflow:visible; }
.dm-page > .wrap, .dm-page > .wrap.wide { width:auto; max-width:none; margin:0; padding:0; }
.dm-head { max-width:none; margin:0; padding:clamp(32px, 5vw, 64px) var(--pad) clamp(16px, 2.4vw, 28px); text-align:center; }
.dm-head .lead { margin-inline:auto; }
.dm-tabs { gap:2px; padding:4px; border-radius:14px; background:var(--panel2); width:max-content; margin-inline:auto; }
.dm-tab { height:36px; padding:0 16px; border:0; border-radius:10px; background:none; color:var(--muted); font-size:14px; font-weight:500; }
.dm-tab:hover { background:var(--hover); color:var(--text); }
.dm-tab[aria-selected="true"] { background:var(--sel); color:var(--text); }
.dm { max-width:none; padding:clamp(12px, 2.4vw, 24px); border:1px solid var(--line); border-radius:28px; background:var(--raised); }
.dm-app { border-radius:20px; box-shadow:none; border-color:var(--line); }
.dm-bubble { border:1.5px solid var(--ring); background:var(--disc); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--card); }
.dm-peek-in, .dm-panel { background:var(--raised); border:1px solid var(--line); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--pop-shadow); }

/* Investor sources */
.inv .wrap { gap:var(--gap); }
/* The page has room on the left and right, in line with the title above it (the other pages set theirs inside their cards). */
.page-body.inv { padding-inline:var(--pad); }
.inv-legend, .inv-item, .mk-card, .mk-fold, .mk-wrap { border-color:var(--line); }
.inv-item { border-radius:20px; }
.inv-kind.k-published { background:var(--accent-soft); color:var(--text); }
.inv-kind.k-assumption { background:var(--panel2); color:var(--muted); }
.inv-kind.k-target { background:var(--primary); color:var(--on-primary); box-shadow:none; }
.inv .inv-toc a { border-radius:12px; }

/* Ask ISAI: a flat panel, like a chat */
.askbubble { border:1.5px solid var(--ring); background:var(--raised); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--card); }
.askpanel { border:1px solid var(--line); border-radius:22px; background:var(--raised); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--shadow-xl); }
.ask-form { border-radius:16px; border:1px solid var(--line); box-shadow:none; }
.ask-send { background:var(--primary); color:var(--on-primary); }
.ask-send:hover { background:var(--primary); opacity:.88; }
.ask-msg.ask-you { background:var(--sel); }
.ask-msg.ask-dela { border-radius:16px; box-shadow:none; }
.ask-chip { border-radius:12px; background:var(--raised); border-color:var(--line); }
.ask-chip:hover { background:var(--hover); border-color:var(--line); }
.ask-two > div, .ask-find { background:var(--panel2); border-color:transparent; border-radius:14px; }
.sharepop, .sp-row { border-radius:12px; }
.ask-pop { border-radius:22px; background:var(--raised); -webkit-backdrop-filter:none; backdrop-filter:none; }


@media (max-width: 640px) {
  .section, .hero, .page-final, .policy, .step-card, .help-group { border-radius:22px; }
  .app { height:auto; min-height:360px; grid-template-columns:minmax(0, 1fr); }
  .app-side { display:none; }
  .tiles.three .tile { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:14px; }
  .res-grid { grid-template-columns:minmax(0, 1fr); }
}

/* the open mode: its words and its example side by side */
.tiles.modes .ex { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.tiles.modes.tabbed { display:block; }
.tiles.modes.tabbed > li { display:grid; grid-template-columns:auto minmax(0, 1fr) minmax(0, 1.3fr); align-items:start; }
.tiles.modes.tabbed > li[hidden] { display:none; }
.tiles.modes.tabbed .ico { margin:0; }
.tiles.modes.tabbed > li > p:not(.ex), .tiles.modes.tabbed > li > h3 { grid-column:2; }
.tiles.modes.tabbed .ex { grid-column:3; grid-row:1 / span 2; margin-top:0; }
@media (max-width: 860px) { .tiles.modes.tabbed > li { grid-template-columns:minmax(0, 1fr); } .tiles.modes.tabbed > li > * { grid-column:1 !important; grid-row:auto !important; } }
.split .copy { text-align:left; }
.split .copy .lead, .points { margin-inline:0; }
#modes .more { text-align:left; }

/* ---------- cookie choices: CookieConsent v3 (cookieconsent.css, MIT, by Orest Bida), started by site.js. Its look
   changes here only: ISAI's font, tokens and shapes (a 20px card with 10px buttons; main buttons black, white in dark),
   so it follows light and dark like the rest of the site. ---------- */
#cc-main {
  --cc-font-family:var(--font); --cc-modal-border-radius:20px; --cc-btn-border-radius:10px; --cc-pm-toggle-border-radius:999px;
  --cc-modal-margin:16px; --cc-z-index:95; --cc-link-color:var(--accent-ink); --cc-modal-transition-duration:.2s;
  --cc-bg:var(--raised); --cc-primary-color:var(--text); --cc-secondary-color:var(--muted);
  --cc-btn-primary-bg:var(--primary); --cc-btn-primary-color:var(--on-primary); --cc-btn-primary-border-color:var(--primary);
  --cc-btn-primary-hover-bg:var(--primary); --cc-btn-primary-hover-color:var(--on-primary); --cc-btn-primary-hover-border-color:var(--primary);
  --cc-btn-secondary-bg:var(--surface2); --cc-btn-secondary-color:var(--text); --cc-btn-secondary-border-color:var(--line-strong);
  --cc-btn-secondary-hover-bg:var(--hover); --cc-btn-secondary-hover-color:var(--text); --cc-btn-secondary-hover-border-color:var(--line-strong);
  --cc-separator-border-color:var(--line); --cc-overlay-bg:rgba(0,0,0,.5);
  --cc-toggle-on-bg:var(--accent); --cc-toggle-off-bg:var(--faint); --cc-toggle-on-knob-bg:#fff; --cc-toggle-off-knob-bg:#fff;
  --cc-toggle-readonly-bg:var(--accent-soft); --cc-toggle-readonly-knob-bg:#fff;
  --cc-section-category-border:var(--line); --cc-cookie-category-block-bg:var(--surface2); --cc-cookie-category-block-border:var(--line);
  --cc-cookie-category-block-hover-bg:var(--hover); --cc-cookie-category-block-hover-border:var(--line-strong);
  --cc-cookie-category-expanded-block-bg:var(--surface2); --cc-cookie-category-expanded-block-hover-bg:var(--hover);
  --cc-footer-bg:var(--tint); --cc-footer-color:var(--muted); --cc-footer-border-color:var(--line);
  --cc-webkit-scrollbar-bg:var(--line-strong); --cc-webkit-scrollbar-hover-bg:var(--muted);
  letter-spacing:-.011em;
}
#cc-main .cm, #cc-main .pm { border:1px solid var(--line); box-shadow:var(--pop-shadow); }
/* the small card, bottom right above the Ask ISAI bubble (the hero's buttons are on the left): the words, then Accept all
   and Only needed side by side (the same weight), then Cookie settings as a quiet button */
#cc-main .cm--box { max-width:400px; }
#cc-main .cm--bottom.cm--right { right:max(20px, env(safe-area-inset-right)); bottom:calc(max(20px, env(safe-area-inset-bottom)) + 64px); }
#cc-main .cm__texts { padding-top:0; }
#cc-main .cm__title { padding-top:20px; font-size:17px; font-weight:600; letter-spacing:-.015em; }
#cc-main .cm__title + .cm__desc { margin-top:8px; }
#cc-main .cm__desc { font-size:14px; line-height:1.55; padding-bottom:4px; }
#cc-main .cm__desc, #cc-main .cm__title { padding-left:20px; padding-right:20px; }
#cc-main .cm__btns { border-top:0; padding:12px 20px 16px; }
#cc-main .cm__btn, #cc-main .pm__btn { min-height:40px; font-size:14px; font-weight:500; transition:opacity .15s var(--ease), background-color .15s var(--ease); }
#cc-main .cm__btn:not(.cm__btn--secondary):hover { opacity:.88; }
#cc-main .cm__btn--secondary { background:transparent; border-color:transparent; color:var(--muted); }
#cc-main .cm__btn--secondary:hover { background:var(--hover); border-color:transparent; color:var(--text); }
/* links in the text: underlined, as everywhere on the site (colour alone does not show a link) */
#cc-main a { color:var(--accent-ink); font-weight:500; }
#cc-main a:hover { color:var(--accent-ink); }
#cc-main .cm__desc a, #cc-main .pm__section-desc a { background-size:100% 1px; }
#cc-main :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* CookieConsent moves focus to an empty div at the top of each window: no ring there, only on the controls */
#cc-main [tabindex="-1"]:focus-visible { outline:none; }
/* one window at a time: the card hides while Cookie settings or Ask ISAI is open, and comes back after it closes */
html.show--preferences #cc-main .cc--anim .cm, html.ask-open #cc-main .cc--anim .cm { opacity:0 !important; visibility:hidden !important; }
/* the card comes back at once (only its opacity fades), so CookieConsent can give focus back to its button */
html.show--consent:not(.show--preferences) #cc-main .cc--anim .cm { transition:opacity var(--cc-modal-transition-duration) ease, transform var(--cc-modal-transition-duration) ease; }
/* Cookie settings: as tall as its content, the categories as soft cards */
#cc-main .pm--box { height:auto; max-height:min(600px, calc(100% - 32px)); max-width:560px; }
#cc-main .pm__header, #cc-main .pm__body, #cc-main .pm__footer { padding-left:20px; padding-right:20px; }
#cc-main .pm__title { font-size:17px; font-weight:600; letter-spacing:-.015em; }
#cc-main .pm__close-btn { border-color:transparent; background:var(--surface2); }
#cc-main .pm__close-btn:hover { background:var(--hover); }
#cc-main .pm__section-desc { color:var(--muted); font-size:14px; line-height:1.55; }
#cc-main .pm__section--toggle, #cc-main .pm__section--toggle .pm__section-title { border-radius:12px; }
#cc-main .pm__section-title { font-size:15px; font-weight:500; }
#cc-main .pm__section--toggle .pm__section-desc-wrapper { border-radius:0 0 12px 12px; }
#cc-main .pm__section--toggle.is-expanded .pm__section-title { border-radius:12px 12px 0 0; }
#cc-main .pm__section--expandable .pm__section-arrow { background:var(--hover); }
/* Save my choice keeps the switches, so it is the main button; Accept all and Only needed stay equal to each other */
#cc-main .pm__btn[data-role="save"] { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
#cc-main .pm__btn[data-role="save"]:hover { background:var(--primary); color:var(--on-primary); border-color:var(--primary); opacity:.88; }
#cc-main .pm__btn[data-role="all"], #cc-main .pm__btn[data-role="necessary"] { background:var(--surface2); color:var(--text); border-color:var(--line-strong); }
#cc-main .pm__btn[data-role="all"]:hover, #cc-main .pm__btn[data-role="necessary"]:hover { background:var(--hover); color:var(--text); border-color:var(--line-strong); }
/* icons: Lucide on its 24px grid with a 1.75 stroke (site.js puts them in place of CookieConsent's own drawings); the
   switches have no icon on the knob, like ISAI's other switches */
#cc-main .pm__close-btn svg, #cc-main .pm__section-arrow svg { fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
#cc-main .pm__close-btn span { align-items:center; justify-content:center; }
#cc-main .pm__close-btn svg { width:20px; height:20px; margin:auto; transform:none; }
#cc-main .pm__section--expandable .pm__section-arrow { align-items:center; color:var(--text); }
#cc-main .pm__section--expandable .pm__section-arrow svg { width:16px; height:16px; transform:none; stroke:currentColor; }
#cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg { transform:rotate(180deg); }
#cc-main .toggle__icon-on, #cc-main .toggle__icon-off { display:none; }
/* switches: a 58x41 tap area around the 50x23 drawing, and the focus ring on the drawing */
#cc-main .section__toggle:not(:disabled) { top:-9px; left:-4px; width:58px; height:41px; border-radius:12px; }
#cc-main .section__toggle:focus-visible { outline:none; }
#cc-main .section__toggle:focus-visible ~ .toggle__icon { outline:2px solid var(--accent); outline-offset:2px; }
@media screen and (max-width: 640px) {
  /* phones: Cookie settings is a sheet from the bottom, not a full screen; the card spans the width at the bottom, so the
     Ask ISAI bubble waits until the person chooses */
  #cc-main .pm { top:auto; bottom:0; height:auto; max-height:calc(100% - 24px); border-radius:20px 20px 0 0; border-bottom:0; }
  #cc-main .pm__footer { padding-bottom:max(16px, env(safe-area-inset-bottom)) !important; }
  #cc-main .cm, #cc-main .cm--bottom.cm--right { left:16px; right:16px; margin:0; bottom:max(16px, env(safe-area-inset-bottom)); }
  html.show--consent:not(.ask-open) .askdock { visibility:hidden; }
  /* cookieconsent.css sets these with !important on phones: keep ISAI's card the same as on a computer */
  #cc-main .cm__btns { border-top:0 !important; }
  #cc-main .cm__title, #cc-main .cm__desc, #cc-main .cm__btns, #cc-main .pm__header, #cc-main .pm__body, #cc-main .pm__footer { padding-left:20px !important; padding-right:20px !important; }
}
/* less motion: no transitions in the cookie windows, so CookieConsent's focus steps land (and its own setting stays) */
@media (prefers-reduced-motion: reduce) {
  #cc-main { --cc-modal-transition-duration:0s; }
  #cc-main *, #cc-main *::before, #cc-main *::after { transition:none !important; }
}
.foot-cookies:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.signin-terms { max-width:420px; }

/* the wordmark: the name in text */
.wordtext { display:inline-block; height:auto; width:auto; font:700 17px/1 "Space Grotesk", var(--font); letter-spacing:.03em; color:var(--text); white-space:nowrap; }

/* Investor sources (/investor-sources): sections of sources, each with its kind first, what ISAI uses, then the report. */
.inv .wrap { display:flex; flex-direction:column; gap:28px; }
.inv-preview { position:sticky; top:var(--nav-h); z-index:5; margin:0; padding:10px 16px; text-align:center; font-size:13.5px; background:var(--accent-soft); color:var(--text); }
.inv-legend { list-style:none; margin:0; padding:16px 18px; display:flex; flex-wrap:wrap; gap:10px 22px; border:1px solid var(--line); border-radius:16px; background:var(--raised); font-size:13.5px; color:var(--muted); }
.inv-legend li { display:flex; align-items:center; gap:8px; }
.inv-kind { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:11px; font-size:12px; font-weight:600; white-space:nowrap; }
.inv-kind.k-published { background:var(--primary); color:var(--on-primary); }
.inv-kind.k-assumption { background:var(--accent-soft); color:var(--accent); }
.inv-kind.k-target { background:transparent; color:var(--text); box-shadow:inset 0 0 0 1.5px var(--line-strong); }
.inv-toc { display:flex; flex-wrap:wrap; gap:8px; }
.inv .inv-toc a { padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--text); text-decoration:none; font-size:13.5px; }
.inv-toc a:hover { background:var(--hover); }
.inv-sec { display:flex; flex-direction:column; gap:12px; scroll-margin-top:calc(var(--nav-h) + 16px); }
.inv-sec h2 { margin:0; font-size:22px; letter-spacing:-.01em; text-wrap:balance; }
.inv-secnote { margin:0; color:var(--muted); }
.inv-list { list-style:none; margin:0; padding:0 !important; display:flex; flex-direction:column; gap:12px; }
.inv-item { padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--raised); display:flex; flex-direction:column; gap:8px; scroll-margin-top:calc(var(--nav-h) + 16px); }
.inv-item:target { box-shadow:0 0 0 2px var(--accent); }
.inv-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.inv-meta { color:var(--muted); font-size:13px; }
.inv-item h3 { margin:0; font-size:17px; line-height:1.35; }
.inv-item p { margin:0 !important; }
.inv .inv-uses { padding:10px 12px; border-radius:10px; background:var(--surface2); font-size:15px; }
.inv-note { color:var(--muted); font-size:14px; }
.inv-links { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:14px; }
.inv .inv-links a { display:inline-flex; align-items:center; gap:6px; color:var(--text); font-weight:500; text-decoration:none; overflow-wrap:anywhere; }
.inv-links a:hover { text-decoration:underline; }
.inv-links svg { width:16px; height:16px; flex:none; }
.inv-size { color:var(--faint); font-weight:400; }
.inv-updated { margin:0; color:var(--faint); font-size:13px; }
@media (max-width: 560px) { .inv-item { padding:16px; } .inv-legend { flex-direction:column; } }

/* Investor sources: the market calculation (investor-market.js, market.js). Result cards, the method, the inputs as a
   calculator, the steps, the sensitivity, the limits and the sources. Numbers line up (tabular). */
.mk h3 { margin:14px 0 0; font-size:18px; letter-spacing:-.01em; scroll-margin-top:calc(var(--nav-h) + 16px); }
.mk h4 { margin:6px 0 0; font-size:15px; }
.mk p { margin:0; }
.mk-doc { align-items:center; }
.mk-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.mk-card { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--raised); min-width:0; }
.mk-l { color:var(--muted); font-size:13px; font-weight:500; }
.mk-v { font-size:22px; font-weight:650; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.mk-p { color:var(--muted); font-size:13.5px; font-variant-numeric:tabular-nums; }
.mk-slide { align-self:flex-start; margin-top:2px; padding:1px 8px; border-radius:9px; background:var(--accent-soft); color:var(--accent-ink); font-size:11.5px; font-weight:600; }
.mk-note { color:var(--muted); font-size:14.5px; }
.mk-sub { color:var(--muted); font-size:14px; }
.mk-fold { border:1px solid var(--line); border-radius:14px; background:var(--raised); }
.mk-fold > summary { display:flex; align-items:center; gap:8px; padding:12px 16px; cursor:pointer; font-weight:550; list-style:none; }
.mk-fold > summary::-webkit-details-marker { display:none; }
.mk-fold > summary svg { width:18px; height:18px; color:var(--accent); flex:none; }
.mk-fold[open] > summary { border-bottom:1px solid var(--line); }
.mk-fold > :not(summary) { margin:12px 16px; }
.mk-list { margin:0; padding-left:22px !important; display:flex; flex-direction:column; gap:6px; }
.mk-tags { list-style:none; margin:12px 16px; padding:0 !important; display:flex; flex-direction:column; gap:8px; font-size:14.5px; }
.mk-tags li { display:flex; align-items:center; gap:10px; }
.mk-defs { margin:0; display:grid; gap:8px; }
.mk-defs div { display:grid; grid-template-columns:56px 1fr; gap:10px; align-items:baseline; }
.mk-defs dt { font-weight:700; }
.mk-defs dd { margin:0; }
.mk-formula { padding:10px 14px; border-radius:10px; background:var(--surface2); font-weight:600; font-variant-numeric:tabular-nums; }
.mk-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--raised); }
.mk-table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.mk-table th, .mk-table td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.mk-table thead th { background:var(--tint); color:var(--muted); font-weight:500; white-space:nowrap; }
.mk-table tbody th { font-weight:500; }
.mk-table tbody tr:last-child > * { border-bottom:0; }
.mk-table .mk-total > * { font-weight:650; background:var(--tint); }
.mk-inputs .mk-no { color:var(--faint); width:44px; }
.mk-inputs .mk-src { color:var(--muted); font-size:13.5px; min-width:220px; }
.mk-inputs tr.changed > * { background:var(--accent-soft); }
.mk-field { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.mk-field input { width:96px; height:34px; padding:0 8px; border:1px solid var(--line-strong); border-radius:8px; background:var(--page); color:var(--text); font:inherit; font-variant-numeric:tabular-nums; }
.mk-field input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.mk-pre, .mk-unit { color:var(--muted); font-size:13px; }
.mk-refs a, .mk-links a { color:var(--text); font-weight:500; }
.mk-refs { white-space:nowrap; }
.mk-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:36px; }
.mk-bar [data-market-changed] { color:var(--accent-ink); font-size:14px; font-weight:500; }
.mk-reset { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border:1px solid var(--line-strong); border-radius:999px; background:var(--raised); color:var(--text); font:inherit; font-size:14px; font-weight:500; cursor:pointer; }
.mk-reset:hover { background:var(--hover); }
.mk-reset svg { width:16px; height:16px; }
.mk-limits li strong { font-weight:650; }
.mk-sources td { min-width:220px; }
.mk-links { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:4px; }
.mk-links a { display:inline-flex; align-items:center; gap:4px; text-decoration:none; overflow-wrap:anywhere; }
.mk-links a:hover { text-decoration:underline; }
.mk-links svg { width:14px; height:14px; flex:none; }
.mk-sources tr:target > * { background:var(--accent-soft); }
@media (max-width: 560px) { .mk-v { font-size:19px; } .mk-defs div { grid-template-columns:1fr; gap:2px; } .mk-table th, .mk-table td { padding:8px 10px; } }
.mk-inputs tbody th { min-width:170px; }
/* A phone: each input is a small card (number and label, then the box and its tag, then the source), not a wide table. */
@media (max-width: 640px) {
  .mk-inputs thead { display:none; }
  .mk-inputs, .mk-inputs tbody { display:block; }
  .mk-inputs tr { display:grid; grid-template-columns:auto 1fr auto; gap:8px 10px; padding:14px; border-bottom:1px solid var(--line); }
  .mk-inputs tr:last-child { border-bottom:0; }
  .mk-inputs tr > * { display:block; padding:0; border:0 !important; min-width:0; }
  .mk-inputs .mk-no { grid-column:1; width:auto; }
  .mk-inputs tbody th { grid-column:2 / 4; min-width:0; }
  .mk-inputs .mk-in { grid-column:1 / 3; }
  .mk-inputs tr > td:nth-child(4) { grid-column:3; align-self:center; }
  .mk-inputs .mk-src { grid-column:1 / 4; min-width:0; }
}
.mk-ink { fill:currentColor; } .mk-claude { fill:var(--claude); }
.lg { display:block; width:16px; height:16px; flex:none; }
.toc-list a, .topics a, .res-grid a, .help-search, .page-body .toc-list a { text-decoration:none; }
.page-body .policy ol > li { padding-left:4px; }
.page-body .policy ol > li::before { display:none; }
.page-body .toc-list a:not(.btn), .page-body .topics a:not(.btn), .page-body .res-grid a:not(.btn), .page-body .help-search { text-decoration:none; }
.page-body .res-grid a:not(.btn):hover { text-decoration:underline; text-underline-offset:3px; }