/* getgloop.dev. The world is the app's: "Salvia luminosa" (sage ground, paper cards, thin rules,
   ink for what is in focus), Geist and Geist Mono, colour only for an agent's state (orange works,
   magenta is waiting for you and the only solid one, mint done, blue idle, grey-blue off), violet
   for the Brain, yellow for the Debrief, olive for Scout. The one ink object is the notch. */

@font-face { font-family: "Geist"; src: url("/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ground: #e6e9e1; --ground-2: #dde1d7; --card: #f6f7f3; --card-2: #edefe8; --term: #fbfbf8;
  --text: #1b1c1a; --body: #2f322d; --text-2: #565a52; --text-3: #5d6258;
  --rule: rgb(27 28 26 / 0.13); --rule-2: rgb(27 28 26 / 0.26); --hover: rgb(27 28 26 / 0.06);
  --on: #1b1c1a; --on-text: #f6f7f3;
  --work: #d9520b; --work-soft: #fce6d8; --work-ink: #9c3b08;
  --wait: #c01f78; --wait-soft: #f8dceb; --wait-ink: #8f165a;
  --done: #0b7f5b; --done-soft: #d3f0e3; --done-ink: #075c42;
  --idle: #2c59d6; --idle-soft: #dfe6fb; --idle-ink: #2147ab;
  --off: #4a5878; --off-soft: #e3e5e8;
  --brain: #6247e0; --brain-soft: #e7e1fc;
  --debrief: #7a5800; --debrief-soft: #fbefc4;
  --scout: #56670e; --scout-soft: #e8edc9; --scout-ground: #e4eac2;
  --ink: #111310; --ink-2: #1c1f1a; --ink-3: #2a2e28; --ink-text: #eef1ea; --ink-text-2: #a9b0a2; --ink-rule: rgb(238 241 234 / 0.16);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.18, 0.5, 1);
  --gutter: 56px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0e100d; --ground-2: #121510; --card: #161915; --card-2: #1d211b; --term: #121411;
    --text: #e6ebe0; --body: #cdd3c6; --text-2: #a9b0a2; --text-3: #9aa193;
    --rule: rgb(230 235 224 / 0.12); --rule-2: rgb(230 235 224 / 0.24); --hover: rgb(230 235 224 / 0.06);
    --on: #e6ebe0; --on-text: #161915;
    --work: #f0884f; --work-soft: #3a2416; --work-ink: #f6a576;
    --wait: #e583b8; --wait-soft: #3b1d2d; --wait-ink: #f0a6cd;
    --done: #4fcbb8; --done-soft: #15302b; --done-ink: #7fdccd;
    --idle: #8ea2ea; --idle-soft: #1d2440; --idle-ink: #aebdf0;
    --off: #a5ab9e; --off-soft: #262a23;
    --brain: #a9a4f3; --brain-soft: #26223f;
    --debrief: #e0bf5a; --debrief-soft: #2e2710;
    --scout: #a7d16a; --scout-soft: #232b16; --scout-ground: #161c0e;
    --ink: #050605; --ink-2: #111310; --ink-3: #1d211b;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--ground); color: var(--body); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--wait); color: #fff; }
h1, h2, h3, h4 { margin: 0; color: var(--text); text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
code { font: 0.875em var(--mono); background: var(--card-2); padding: 1px 6px; border-radius: 6px; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 10px; }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.defs { position: absolute; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--text); color: var(--on-text); padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
body[data-beta="open"] .only-closed, body:not([data-beta="open"]) .only-open { display: none !important; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.h1 { font-size: clamp(46px, 6.7vw, 96px); line-height: 0.96; letter-spacing: -0.04em; font-weight: 700; }
.h2 { font-size: clamp(38px, 4.45vw, 64px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
.h1 em, .h2 em { font-style: normal; color: var(--wait); }
.lead { font-size: 20px; line-height: 1.5; color: var(--text-2); max-width: 56ch; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 20px; }
.ink { background: var(--ink); color: var(--ink-text); }

/* buttons and fields: a button is ink, a field is paper with a 26% rule */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--card); color: var(--text); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform 0.2s var(--ease), background 0.2s, box-shadow 0.2s; }
.btn:hover { background: var(--card-2); }
.btn:active { transform: scale(0.97); }
.btn.solid { background: var(--on); color: var(--on-text); border-color: var(--on); }
.btn.solid:hover { box-shadow: 0 8px 20px -10px rgb(17 19 16 / 0.6); background: var(--on); }
.btn.small { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: 0.55; cursor: progress; }
input[type="email"], input[type="text"] { height: 48px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--card); padding: 0 16px; font-size: 16px; color: var(--text); width: 100%; min-width: 0; transition: border-color 0.2s, box-shadow 0.2s; }
input::placeholder { color: var(--text-3); }
input[type="email"]:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 4px var(--hover); }
input[aria-invalid="true"] { border-color: var(--wait); }

.notify-row { display: flex; gap: 10px; }
.notify-msg { min-height: 0; font-size: 14px; color: var(--text-2); }
.notify-msg:not(:empty) { margin-top: 10px; }
.notify-msg.bad { color: var(--wait-ink); }
.notify.sent .notify-row { display: none; }
.notify.sent .notify-msg { margin-top: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); font-weight: 600; }
.notify.sent .notify-msg::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--done); box-shadow: 0 0 0 4px var(--done-soft); flex: none; }
.act-note { margin-top: 14px; font-size: 14px; color: var(--text-2); }
.act-note a, .b-small a { color: var(--text); }

/* ---------- the header and the dev bar ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.top-in { height: 76px; display: flex; align-items: center; gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); font: 600 22px/1 var(--mono); letter-spacing: -0.01em; }
.wm-m { width: 1.3em; height: auto; overflow: visible; }
.links { margin-left: auto; display: flex; gap: 28px; font-size: 15px; }
.links a { color: var(--text-2); text-decoration: none; padding: 6px 0; }
.links a:hover { color: var(--text); }
.lang { display: flex; padding: 3px; border: 1px solid var(--rule); border-radius: 10px; }
.lang a { font: 500 13px var(--mono); padding: 5px 8px; border-radius: 7px; color: var(--text-2); text-decoration: none; }
.lang a[aria-current] { background: var(--on); color: var(--on-text); }
.devbar { position: fixed; left: 12px; bottom: 12px; z-index: 90; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: calc(100vw - 24px); padding: 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--rule-2); font-size: 12px; color: var(--text-2); box-shadow: 0 12px 30px -16px rgb(0 0 0 / 0.4); }
.devbar button { border: 1px solid var(--rule-2); background: var(--card); border-radius: 8px; padding: 3px 8px; font-size: 12px; }
.devbar button[aria-pressed="true"] { background: var(--on); color: var(--on-text); }

/* ---------- the notch: the app's own (Notch.module.css), open in the hero, a pill (and the menu) as you scroll ---------- */
.notch, .rn { --n-bg: #1b1c1a; --n-text: #f6f7f3; --n-muted: #a3aa9c; --n-faint: #6f766a; --n-soft: rgb(246 247 243 / 0.07); --n-rule: rgb(246 247 243 / 0.12); --n-work: #ff8a4c; --n-wait: #ff6fb8; --n-done: #3fd6a0; --n-idle: #7c9eff; }
.notch { position: fixed; left: 50%; top: 0; z-index: 60; translate: -50% 0; pointer-events: none; }
.n-shell { pointer-events: auto; position: relative; background: var(--n-bg); color: var(--n-text); border-radius: 0 0 26px 26px; width: var(--w, 460px); height: var(--h, auto); overflow: hidden; box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); font-size: 12.5px;
  transition: width 0.5s var(--spring), height 0.5s var(--spring), border-radius 0.4s var(--ease), translate 0.9s var(--ease); }
.js .notch .n-shell { translate: 0 -110%; }
.js .notch.ready .n-shell { translate: 0 0; }
.n-full, .n-pill, .n-menu { position: absolute; left: 0; top: 0; transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), translate 0.5s var(--ease); }
.n-full { width: 460px; padding-bottom: 10px; }
.n-head { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 10px; }
.n-line { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-dots { display: flex; gap: 4px; flex: none; }
.n-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--n-idle); }
.n-dots i[data-state="work"], .n-agents [data-state="work"] { --c: var(--n-work); }
.n-dots i[data-state="wait"], .n-agents [data-state="wait"] { --c: var(--n-wait); }
.n-dots i[data-state="done"], .n-agents [data-state="done"] { --c: var(--n-done); }
.n-agents [data-state="idle"] { --c: var(--n-idle); }
.n-dots i[data-state] { background: var(--c); }
.n-dots i[data-state="wait"] { box-shadow: 0 0 0 3px rgb(255 111 184 / 0.25); }
.n-body { padding: 0 10px; }
/* what an agent asks: the app's card, rimmed in its magenta */
.n-ask { margin-top: 2px; padding: 14px 14px 12px; border: 1px solid color-mix(in srgb, var(--n-wait) 55%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--n-wait) 7%, transparent); animation: n-in 0.45s var(--ease) both; }
.n-ask header { color: var(--n-muted); font-size: 13px; }
.n-ask header b { color: var(--n-text); font-weight: 600; }
.n-qt { margin-top: 10px; font-size: 14px; color: var(--n-text); }
.n-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.n-opt { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--n-rule); background: transparent; color: var(--n-text); font-size: 13px; transition: background 0.2s, color 0.2s, transform 0.2s var(--ease); }
.n-opt:hover { background: var(--n-soft); }
.n-opt[aria-pressed="true"] { background: var(--n-text); color: var(--n-bg); border-color: var(--n-text); }
.n-opt:active, .n-primary:active, .n-secondary:active { transform: scale(0.96); }
.n-row { display: flex; gap: 6px; margin-top: 12px; }
.n-primary, .n-secondary { height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid transparent; transition: background 0.2s, opacity 0.2s, transform 0.2s var(--ease); }
.n-primary { background: var(--n-text); color: var(--n-bg); }
.n-primary:disabled { opacity: 0.35; cursor: default; }
.n-secondary { background: transparent; border-color: var(--n-rule); color: var(--n-text); }
.n-secondary:hover { background: var(--n-soft); }
.n-ask footer { display: flex; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--n-muted); }
.n-plan { margin-top: 10px; padding: 10px 12px 10px 30px; border-radius: 12px; background: var(--n-soft); list-style: decimal; font-size: 12.5px; line-height: 1.7; color: var(--n-text); }
.n-note { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px; color: var(--n-text); font-size: 13px; animation: n-in 0.4s var(--ease) both; }
.n-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--n-done); }
.n-agents { display: grid; gap: 2px; margin-top: 2px; }
.n-agents li { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 12px; animation: n-in 0.4s var(--ease) both; }
.n-agents li > i { width: 6px; height: 26px; border-radius: 3px; background: var(--c); flex: none; }
.n-agents .who { flex: 1; min-width: 0; display: grid; }
.n-agents .who b { font-weight: 500; font-size: 13px; color: var(--n-text); }
.n-agents .who small { font-size: 11px; color: var(--n-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-agents .st, .n-agents .st [data-state] { font-size: 11.5px; color: var(--c); white-space: nowrap; }
@keyframes n-in { from { opacity: 0; translate: 0 -4px; filter: blur(2px); } }
.n-pill { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 10px; border: 0; background: transparent; color: var(--n-text); white-space: nowrap; font-size: 12.5px; }
.n-pc { margin-left: 2px; display: flex; color: var(--n-muted); transition: rotate 0.3s var(--ease); }
.n-menu { width: 300px; padding: 48px 10px 10px; display: grid; gap: 2px; }
.n-menu a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--n-text); text-decoration: none; font-size: 15px; }
.n-menu a:hover, .n-menu a:focus-visible { background: var(--n-soft); outline-offset: -2px; }
.n-menu i { width: 8px; height: 8px; border-radius: 50%; background: rgb(238 241 234 / 0.25); }
.n-menu a[data-st="work"] i { background: var(--n-work); box-shadow: 0 0 0 4px rgb(255 138 76 / 0.2); }
.n-menu a[data-st="done"] i { background: var(--n-done); }
.n-menu a[data-st="work"]::after { content: attr(data-here); margin-left: auto; font-size: 12px; color: var(--n-muted); }
.n-menu-foot { display: flex; gap: 4px; padding: 8px 12px 4px; margin-top: 6px; border-top: 1px solid var(--n-rule); }
.n-menu-foot a { height: 30px; padding: 0 10px; font: 500 13px var(--mono); color: var(--n-muted); }
.n-menu-foot a[aria-current] { background: var(--n-text); color: var(--n-bg); }
.notch[data-mode="full"] .n-pill, .notch[data-mode="full"] .n-menu, .notch[data-mode="pill"] .n-full, .notch[data-mode="pill"] .n-menu, .notch[data-mode="menu"] .n-full { opacity: 0; filter: blur(6px); pointer-events: none; visibility: hidden; transition: opacity 0.25s, filter 0.25s, visibility 0s 0.35s; }
.notch[data-mode="pill"] .n-shell, .notch[data-mode="menu"] .n-shell { border-radius: 0 0 20px 20px; }
.notch[data-mode="menu"] .n-pc { rotate: 180deg; }
.notch[data-mode="menu"] .n-menu { translate: 0 0; }
.notch[data-mode="pill"] .n-menu { translate: 0 -8px; }
.notch .gm-compact { font-size: inherit; }
.n-ask button:focus-visible, .n-pill:focus-visible { outline: 2px solid var(--n-text); outline-offset: 2px; }

/* ---------- the hero ---------- */
.hero { position: relative; overflow: hidden; --p: 0; }
.hero-in { padding-top: 300px; }
.hero .h1 { max-width: 1060px; transform: translateY(calc(var(--p) * -50px)); opacity: calc(1 - var(--p) * 0.6); }
.h1 .ln { display: block; }
.h1 .w { display: inline-block; white-space: pre; }
.js .h1 .w { opacity: 0; translate: 0 0.4em; filter: blur(10px); transition: opacity 0.9s var(--ease), translate 1.1s var(--ease), filter 0.9s var(--ease); transition-delay: calc(0.35s + var(--k) * 45ms); }
.js .loaded .h1 .w, .js.loaded .h1 .w { opacity: 1; translate: 0 0; filter: none; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; margin-top: 40px; align-items: start; }
.hero-lead { font-size: 19px; max-width: 520px; }

/* ---------- sections ---------- */
.sec { position: relative; padding: 140px 0 0; }
.hero + .sec { padding-top: 120px; }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: end; margin-bottom: 48px; }
.head-wide { grid-template-columns: 1fr; gap: 24px; }
.head-wide .h2 { font-size: clamp(38px, 5vw, 72px); max-width: 15em; }
.h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }

/* reveals: on when the element comes into view (IntersectionObserver), with a small stagger */
.js [data-rv] { opacity: 0; translate: 0 28px; filter: blur(6px); transition: opacity 0.9s var(--ease), translate 1s var(--ease), filter 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-rv].in { opacity: 1; translate: 0 0; filter: none; }

/* a view of the real app: the window with its own edge, the only shadow besides the notch */
.frame { position: relative; border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -30px rgb(17 19 16 / 0.45), 0 12px 24px -16px rgb(17 19 16 / 0.25); }
.frame img, .crop img { display: block; width: 100%; height: auto; }

/* the tour: the window lands as you reach it, then the page goes close to one part at a time */
.tour { position: relative; height: 420vh; }
.tour-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.tour-in { width: 100%; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: center; }
.tour-steps { display: grid; counter-reset: s; }
.tour-steps li { position: relative; padding: 16px 0 16px 24px; border-top: 1px solid var(--rule); color: var(--text-3); transition: color 0.4s; }
.tour-steps li::before { content: ""; position: absolute; left: 0; top: 23px; width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); transition: background 0.4s, box-shadow 0.4s; }
.tour-steps li b { display: block; font-size: 17px; font-weight: 600; color: inherit; }
.tour-steps li p { font-size: 15px; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s var(--ease), opacity 0.4s, margin 0.4s; }
.tour-steps li.on { color: var(--text); }
.tour-steps li.on p { max-height: 8em; opacity: 1; margin-top: 6px; color: var(--text-2); }
.tour-steps li.on::before { background: var(--work); box-shadow: 0 0 0 4px var(--work-soft); }
.tour-steps li.past::before { background: var(--done); }
.tour-stage { --p: 1; aspect-ratio: 16 / 10; max-height: calc(100vh - 120px); justify-self: center; width: min(100%, calc((100vh - 120px) * 1.6)); transform: perspective(1800px) rotateX(calc((1 - var(--p)) * 16deg)) translateY(calc((1 - var(--p)) * 60px)) scale(calc(0.92 + var(--p) * 0.08)); transform-origin: 50% 0; }
.tour-win { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.1s var(--ease); will-change: transform; }
.crop { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, var(--idle)); }
[data-state="work"] { --c: var(--work); }
[data-state="wait"] { --c: var(--wait); }
[data-state="done"] { --c: var(--done); }
[data-state="idle"] { --c: var(--idle); }
[data-state="off"] { --c: var(--off); }
.legend { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; font-size: 15px; color: var(--text-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.legend b { color: var(--text); font-weight: 600; }
@keyframes line-in { from { opacity: 0; translate: 0 6px; } }

/* ---------- answer from wherever you are: the real notch opens as you scroll ---------- */
.call-track { position: relative; height: 260vh; }
.call-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.call-in { width: 100%; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: center; }
.call-text .lead { font-size: 18px; margin-top: 20px; }
.steps { margin-top: 32px; display: grid; gap: 4px; }
.steps li { position: relative; padding: 12px 0 12px 22px; color: var(--text-3); font-size: 16px; border-top: 1px solid var(--rule); transition: color 0.4s; }
.steps li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); transition: background 0.4s, box-shadow 0.4s; }
.steps li.on { color: var(--text); }
.steps li.on::before { background: var(--work); box-shadow: 0 0 0 4px var(--work-soft); }
.steps li.past::before { background: var(--done); }
/* the top of a screen, and the notch hanging from its edge */
.screen { position: relative; height: 600px; border-radius: 22px; overflow: hidden; background: linear-gradient(var(--card), color-mix(in srgb, var(--card) 0%, transparent) 85%); box-shadow: inset 0 0 0 1px var(--rule); }
.screen-cap { position: absolute; left: 24px; bottom: 24px; font-size: 14px; color: var(--text-3); }
.rn { position: absolute; left: 50%; top: 0; translate: -50% 0; width: 300px; background: var(--n-bg); color: var(--n-text); border-radius: 0 0 20px 20px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); font-size: 12.5px; overflow: hidden; transition: width 0.55s var(--spring), border-radius 0.4s var(--ease); }
.rn[data-step="1"], .rn[data-step="2"] { width: 460px; border-radius: 0 0 26px 26px; }
.rn-head { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 10px; }
.rn-line { flex: 1; min-width: 0; display: grid; }
.rn-line > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 0.3s; }
.rn .l2, .rn[data-step="2"] .l0 { opacity: 0; }
.rn[data-step="2"] .l2 { opacity: 1; }
.rn small > span, .rn .st > span { display: none; }
.rn small > .l0, .rn .st > .l0, .rn[data-step="2"] small > .l2, .rn[data-step="2"] .st > .l2 { display: inline; }
.rn[data-step="2"] small > .l0, .rn[data-step="2"] .st > .l0 { display: none; }
.rn[data-step="2"] .d-a { display: none; }
.rn-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--spring); }
.rn[data-step="1"] .rn-drawer, .rn[data-step="2"] .rn-drawer { grid-template-rows: 1fr; }
.rn-in { min-height: 0; overflow: hidden; padding: 0 10px; }
.rn[data-step="1"] .rn-in, .rn[data-step="2"] .rn-in { padding-bottom: 10px; }
.rn-tabs { display: flex; gap: 2px; padding: 3px; margin-bottom: 10px; border-radius: 999px; background: var(--n-soft); font-size: 11.5px; color: var(--n-muted); }
.rn-tabs span { flex: 1; text-align: center; padding: 6px 0; border-radius: 999px; white-space: nowrap; }
.rn-tabs span:first-child { background: rgb(246 247 243 / 0.14); color: var(--n-text); }
.rn .n-ask { animation: none; transition: opacity 0.35s, max-height 0.5s var(--ease), padding 0.5s var(--ease), margin 0.5s var(--ease); max-height: 260px; }
.rn .n-opt, .rn .n-primary { display: inline-flex; align-items: center; }
.rn[data-step="2"] .o1, .rn[data-step="2"] .o2 { background: var(--n-text); color: var(--n-bg); }
.rn[data-step="2"] .rn-ask { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
.rn-sent { height: 0; opacity: 0; overflow: hidden; animation: none; transition: height 0.4s var(--ease), opacity 0.4s; }
.rn[data-step="2"] .rn-sent { height: 36px; opacity: 1; }
.rn .n-agents { margin-top: 6px; }
.rn .n-agents li { animation: none; }
.rn-aliq > i { transition: background 0.4s; }
.rn[data-step="2"] .rn-aliq > i { --c: var(--n-work); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
.facts p, .extra p { font-size: 16px; color: var(--text-2); }
.facts b, .extra b { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.agenda { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 120px; }
.agenda .lead { font-size: 18px; margin-top: 16px; }

/* ---------- memory: two tabs over the real views ---------- */
.mem { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
.mem-tabs { display: grid; gap: 10px; }
.mem-tabs button { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 18px; border-radius: 20px; border: 1px solid var(--rule); background: transparent; color: var(--text-2); transition: background 0.3s, border-color 0.3s; }
.mem-tabs button:hover { background: var(--hover); }
.mem-tabs button[aria-selected="true"] { background: var(--card); border-color: var(--rule-2); color: var(--text-2); }
.mem-tabs b { display: block; font-size: 18px; color: var(--text); margin-bottom: 4px; }
.mem-tabs small { display: block; font-size: 15px; line-height: 1.5; }
.mem-tabs button[aria-selected="false"] small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 9px; }
.mark svg { width: 18px; height: 18px; }
.mk-brain { background: var(--brain-soft); color: var(--brain); }
.mk-debrief { background: var(--debrief-soft); color: var(--debrief); }
.mem-stage { display: grid; }
.mem-p { grid-area: 1 / 1; transition: opacity 0.5s var(--ease), translate 0.6s var(--ease), filter 0.5s; }
.mem-p[data-off] { opacity: 0; translate: 0 12px; filter: blur(4px); pointer-events: none; visibility: hidden; transition: opacity 0.3s, translate 0.3s, filter 0.3s, visibility 0s 0.3s; }

/* ---------- Scout: the second act, on olive ---------- */
.scout { background: var(--scout-ground); margin-top: 140px; padding-bottom: 120px; }
.sc { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
.mail { padding: 24px 26px; margin-top: 44px; }
.mail .from { font-size: 14px; color: var(--text-3); }
.mail .subj { font-size: 18px; font-weight: 600; color: var(--text); margin: 4px 0 16px; }
.mail p { font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
.mail mark { color: inherit; background: linear-gradient(color-mix(in srgb, var(--scout) 22%, transparent), color-mix(in srgb, var(--scout) 22%, transparent)) no-repeat 0 0 / 0 100%; border-radius: 4px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.8s var(--ease); }
.mail mark.on { background-size: 100% 100%; }
.becomes { display: flex; align-items: center; gap: 10px; height: 32px; margin-bottom: 12px; font-size: 15px; color: var(--text-2); }
.becomes .mono { font-size: 13px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--rule-2); color: var(--text); }
.sc-shot figcaption { margin-top: 14px; font-size: 14px; color: var(--text-2); max-width: 70ch; }
.cost { display: flex; align-items: center; gap: 28px; margin-top: 48px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--scout) 35%, transparent); }
.cost .n { font-size: clamp(44px, 5vw, 72px); font-weight: 700; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; min-width: 5ch; }
.cost b { color: var(--text); font-size: 17px; }
.cost p { color: var(--text-2); max-width: 46ch; margin-top: 2px; }
.extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; margin-top: 48px; }

/* ---------- privacy ---------- */
.loc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.loc .lead { font-size: 18px; margin-top: 20px; }
.rows { border-top: 2px solid var(--text); }
.rows div { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 20px 0; font-size: 18px; }
.rows div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-2); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 90ms + 0.2s); }
.rows div.in::after, .rows div:not([data-rv])::after { transform: scaleX(1); }
.rows dt { font-weight: 600; color: var(--text); }
.more { margin-top: 64px; max-width: 920px; font-size: 16px; line-height: 1.9; color: var(--text-2); }
.more b { color: var(--text); font-weight: 600; }

/* ---------- beta ---------- */
.beta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: start; }
.wave { display: grid; grid-template-columns: 96px 130px minmax(0, 1fr) 84px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.wave .n { font-weight: 600; color: var(--text); }
.wave .d { color: var(--text-2); }
.bar { height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--idle); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.waves.in .bar i { transform: scaleX(1); }
.waves.in .wave:nth-child(2) .bar i { transition-delay: 0.12s; }
.waves.in .wave:nth-child(3) .bar i { transition-delay: 0.24s; }
.wave .s { font: 14px var(--mono); color: var(--text-2); text-align: right; }
.nowaves { color: var(--text-2); padding: 16px 0; border-bottom: 1px solid var(--rule); }
.give { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.give h3 { font-size: 15px; margin-bottom: 8px; }
.give li { font-size: 15px; color: var(--text-2); margin-bottom: 6px; }
.b-card { padding: 28px; }
.b-top { display: flex; align-items: center; gap: 16px; }
.b-top h3, .form h3 { font-size: 22px; letter-spacing: -0.02em; }
.b-m { display: inline-flex; flex: none; }
.cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 4px; }
.cd span { border-radius: 12px; background: var(--card-2); padding: 12px 6px 10px; text-align: center; }
.cd b { display: block; font: 600 30px/1.1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.cd small { font-size: 12px; color: var(--text-2); }
.b-p { margin: 16px 0 12px; font-size: 15px; color: var(--text-2); }
.b-small { margin-top: 14px; font-size: 14px; color: var(--text-2); }
.form #formFields { display: grid; gap: 20px; }
.fld { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.fld label, .fld legend { font-size: 14px; font-weight: 600; color: var(--text); padding: 0; margin-bottom: 8px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.picks label { position: relative; margin: 0; font-weight: 400; }
.picks input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.picks span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--card); font-size: 14px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.picks.multi span::before { content: ""; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid currentColor; margin-right: 8px; opacity: 0.6; }
.picks input:checked + span { background: var(--on); color: var(--on-text); border-color: var(--on); }
.picks.multi input:checked + span::before { background: currentColor; opacity: 1; box-shadow: inset 0 0 0 2px var(--on); }
.picks input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.err { color: var(--wait-ink); font-size: 14px; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--text-2); }
.thanks { display: grid; gap: 12px; justify-items: start; }
.thanks p { color: var(--text-2); }
.preview-note { font-size: 13px; }

/* ---------- questions and the close ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 600; color: var(--text); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 6px; background: linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat; transition: rotate 0.35s var(--ease); }
.qa details[open] summary::after { rotate: 45deg; }
.qa details p { padding: 0 0 22px; color: var(--text-2); max-width: 62ch; }
.qa details[open] p { animation: line-in 0.5s var(--ease) both; }
.close { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "m h" "m a"; gap: 20px 48px; align-items: center; margin-top: 140px; padding: 72px var(--gutter) 96px; border-top: 1px solid var(--rule); }
.close-m { grid-area: m; display: inline-flex; }
.close .h2 { grid-area: h; font-size: clamp(34px, 3.6vw, 52px); max-width: 16em; }
.close .act { grid-area: a; max-width: 560px; }
.foot { border-top: 1px solid var(--rule); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 28px; padding-bottom: 40px; font-size: 13px; color: var(--text-2); }
.foot .wordmark { font-size: 17px; }
.legal { flex: 1 1 360px; }
.social { display: flex; gap: 6px; }
.social a { display: inline-flex; padding: 8px; border-radius: 10px; color: var(--text-2); }
.social a:hover { color: var(--text); background: var(--hover); }
.foot a.mono { color: var(--text-2); text-decoration: none; padding: 8px 0; }

.notify-consent { margin-top: 10px; font-size: 13px; color: var(--text-2); }
.notify-consent a, .form-foot a { color: var(--text); }
.notify.sent .notify-consent { display: none; }
.foot a.foot-link { color: var(--text-2); text-decoration: none; padding: 8px 0; }
.foot a.foot-link:hover { color: var(--text); }

/* ---------- the privacy policy: one article to read ---------- */
.legal-page .legal-top { position: static; }
.legal { max-width: 780px; padding-top: 56px; padding-bottom: 120px; }
.legal .lead { margin-top: 20px; }
.legal-date { margin-top: 14px; font: 13px var(--mono); color: var(--text-3); }
.legal section { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule); }
.legal h2 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 12px; }
.legal p { font-size: 17px; line-height: 1.65; color: var(--body); max-width: 68ch; }
.legal p + p { margin-top: 12px; }
.legal a { color: var(--text); }

/* ---------- the mascot: the app's own (Mascot.module.css), every length in em of its size ---------- */
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #2f6bff; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #5fe6ff; }
@property --c3 { syntax: "<color>"; inherits: true; initial-value: #7a5cff; }
.gm-gel { --c1: #2f6bff; --c2: #5fe6ff; --c3: #7a5cff; --eye: #0c1a44; transition: --c1 0.8s ease, --c2 0.8s ease, --c3 0.8s ease; }
.gm-gel[data-mood="thinking"] { --c1: #ff6a1a; --c2: #ffcd4a; --c3: #ff3b6b; }
.gm-gel[data-mood="happy"] { --c1: #10c98c; --c2: #8dffcf; --c3: #2fb4ff; }
.gm-gel[data-mood="sorry"] { --c1: #48609e; --c2: #93a8d6; --c3: #6a5f9c; }
.gm-gel[data-mood="waiting"] { --c1: #e2329b; --c2: #ff93d3; --c3: #8b4dff; }
.gm { --morph: 12.6s; --ew: 0.072em; --eh: 0.13em; position: relative; display: inline-block; flex: none; width: 1em; height: 1em; line-height: 0; vertical-align: middle; }
.gm[data-mood="thinking"] { --morph: 2.5s; }
.gm[data-mood="happy"] { animation: gm-hop 1.3s cubic-bezier(0.3, 0.8, 0.4, 1) infinite; }
.gm[data-mood="sorry"] { --morph: 20s; }
.gm-goo { position: absolute; inset: 0; filter: var(--goo); }
.gm-body { position: absolute; inset: 0.19em; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--c2), var(--c1) 58%, var(--c3)); animation: gm-morph var(--morph) ease-in-out infinite, gm-breathe 4.6s ease-in-out infinite; }
.gm-gloss { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 30% 20% at 34% 24%, rgb(255 255 255 / 0.5), transparent 72%), radial-gradient(circle at 50% 50%, transparent 64%, rgb(10 20 70 / 0.12) 100%); }
.gm-drop { position: absolute; left: 50%; top: 50%; width: var(--ds); height: var(--ds); margin: calc(var(--ds) / -2) 0 0 calc(var(--ds) / -2); border-radius: 50%; background: var(--c1); will-change: transform; }
.gm-d1 { --ds: 0.15em; }
.gm-d2 { --ds: 0.12em; background: var(--c3); }
.gm-d3 { --ds: 0.1em; background: var(--c2); }
.gm-halo { position: absolute; inset: 0.17em; border-radius: 50%; border: 0.02em solid var(--c2); opacity: 0; }
.gm[data-mood="waiting"] .gm-halo { animation: gm-ripple 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.gm-eyes { position: absolute; left: 50%; top: 0.39em; display: flex; gap: 0.09em; transform: translateX(-50%); transition: transform 0.45s var(--spring); }
.gm-eye { width: var(--ew); height: var(--eh); border-radius: 0.04em; background: radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.9) 0 0.012em, transparent 0.017em), var(--eye); transform-origin: 50% 70%; animation: gm-blink 5.6s infinite, gm-look 11s ease-in-out infinite; transition: height 0.3s, border-radius 0.3s, rotate 0.4s; }
.gm-eye + .gm-eye { animation-delay: 0.04s, 0s; }
.gm[data-mood="thinking"] .gm-eyes { animation: gm-ponder 2.2s ease-in-out infinite; }
.gm[data-mood="thinking"] .gm-eye { animation: gm-blink 3.1s infinite; }
.gm[data-mood="happy"] .gm-eye { height: calc(var(--ew) * 0.95); border-radius: 99px 99px 0 0; background: transparent; border: 0.024em solid var(--eye); border-bottom: 0; animation: none; }
.gm[data-mood="sorry"] .gm-eyes { transform: translate(-50%, 0.06em); }
.gm[data-mood="sorry"] .gm-eye { height: calc(var(--eh) * 0.7); rotate: 14deg; animation: gm-blink 7s infinite; }
.gm[data-mood="sorry"] .gm-eye + .gm-eye { rotate: -14deg; }
.gm[data-mood="waiting"] .gm-eyes { transform: translateX(-50%) scale(1.16); }
.gm[data-mood="waiting"] .gm-eye { animation: gm-blink 2.4s infinite; }
.gm[data-look] .gm-eyes { translate: var(--look-x, 0) var(--look-y, 0); transition: transform 0.45s var(--spring), translate 0.25s ease-out; }
.gm-compact .gm-goo { filter: none; }
.gm-compact .gm-body { inset: 0.04em; animation: none; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c2) 80%, #fff) 0 22%, var(--c2) 42%, var(--c1) 78%, var(--c3)); }
.gm-compact[data-mood="happy"] { animation: none; }
.gm-compact[data-mood] .gm-eyes { --ew: round(max(0.13em, 2px), 1px); --gap: round(max(0.15em, 2px), 1px); left: round(down, calc((1em - 2 * var(--ew) - var(--gap)) / 2), 1px); top: round(0.35em, 1px); gap: var(--gap); transform: none; animation: none; }
.gm-compact[data-mood] .gm-eye { width: var(--ew); height: round(max(0.24em, 4px), 1px); border-radius: var(--ew); background: var(--eye); rotate: 0deg; animation: gm-blink 5.6s infinite; }
.gm-compact[data-mood="happy"] .gm-eye { box-sizing: border-box; width: calc(var(--ew) + 1px); height: round(max(0.12em, 2.5px), 0.5px); margin-top: 1px; background: transparent; border: round(max(0.04em, 1.5px), 0.5px) solid var(--eye); border-bottom: 0; border-radius: 99px 99px 0 0; animation: none; }
@keyframes gm-morph { 0%, 100% { border-radius: 49% 51% 50% 50% / 50% 48% 52% 50%; } 50% { border-radius: 51% 49% 48% 52% / 48% 51% 49% 52%; } }
@keyframes gm-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.02; } }
@keyframes gm-blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 0.1; } }
@keyframes gm-look { 0%, 18%, 50%, 68%, 100% { translate: 0 0; } 24%, 42% { translate: -0.035em 0.005em; } 74%, 92% { translate: 0.035em -0.005em; } }
@keyframes gm-ponder { 0%, 100% { transform: translate(-40%, -0.05em); } 45% { transform: translate(-30%, -0.06em); } 60% { transform: translate(-62%, -0.045em); } }
@keyframes gm-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(-0.08em) scale(0.97, 1.03); } 50% { transform: translateY(0) scale(1.04, 0.96); } 62% { transform: translateY(0) scale(1, 1); } }
@keyframes gm-ripple { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.32); } }

/* ---------- narrower ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .links { display: none; }
  .lang { margin-left: auto; }
  .tour-in { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 32px; }
  .call-in { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; }
  .agenda, .mem, .sc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mem-tabs { grid-template-columns: 1fr 1fr; }
  .mail { margin-top: 0; max-width: 560px; }
  .wave { grid-template-columns: 80px 110px minmax(0, 1fr) 70px; }
  .beta { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 32px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  html { scroll-padding-top: 56px; }
  .lead { font-size: 17px; }
  .top { top: 248px; }
  .top-in { height: 56px; }
  .wordmark { font-size: 19px; }
  .notch { left: 8px; right: 8px; translate: none; display: flex; justify-content: center; }
  .n-shell { max-width: 100%; }
  .n-full { width: calc(100vw - 16px); }
  .n-menu { width: min(320px, calc(100vw - 16px)); }
  .hero { padding-bottom: 0; }
  .hero-in { padding-top: 330px; }
  .hero-row { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .notify-row { flex-direction: column; }
  .notify-row .btn { width: 100%; }
  .sec, .hero + .sec { padding-top: 96px; }
  .head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .tour { height: auto; }
  .tour-sticky { position: static; height: auto; display: block; }
  .tour-in { display: flex; flex-direction: column-reverse; gap: 8px; }
  .tour-stage { transform: none; width: 100%; max-height: none; }
  .tour-win { transform: none !important; }
  .tour-steps li, .tour-steps li.on { color: var(--text); padding: 20px 0 4px; border-top: 0; }
  .tour-steps li::before { display: none; }
  .tour-steps li p, .tour-steps li.on p { max-height: none; opacity: 1; margin-top: 4px; color: var(--text-2); }
  .tour-steps li[data-step="0"] { display: none; }
  .crop { display: block; position: relative; overflow: hidden; height: 0; padding-top: calc(var(--h) / var(--w) * 62.5%); margin-top: 14px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
  .crop picture { position: absolute; top: calc(-100% * var(--y) / var(--h)); left: calc(-100% * var(--x) / var(--w)); width: calc(100% / var(--w)); }
  .legend { gap: 10px 20px; font-size: 14px; }
  .call-track { height: auto; }
  .call-sticky { position: static; height: auto; display: block; overflow: visible; }
  .call-in { grid-template-columns: 1fr; gap: 28px; }
  .steps { display: none; }
  .screen { height: 470px; margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
  .rn, .rn[data-step] { width: calc(100% - 16px); max-width: 460px; }
  .facts, .extra { grid-template-columns: 1fr; gap: 20px; }
  .facts { margin-top: 32px; }
  .agenda { margin-top: 72px; }
  .mem-tabs { grid-template-columns: 1fr; }
  .mem-tabs button { padding: 14px; }
  .devbar span { display: none; }
  .scout { margin-top: 96px; padding-bottom: 80px; }
  .cost { flex-direction: column; align-items: flex-start; gap: 8px; }
  .loc { grid-template-columns: 1fr; gap: 28px; }
  .rows div { grid-template-columns: 1fr; gap: 4px; font-size: 16px; }
  .more { margin-top: 40px; }
  .beta { grid-template-columns: 1fr; gap: 32px; }
  .wave { grid-template-columns: 78px minmax(0, 1fr) 70px; }
  .wave .d { display: none; }
  .give { grid-template-columns: 1fr; gap: 16px; }
  .b-card { padding: 22px; }
  .cd b { font-size: 24px; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .faq { grid-template-columns: 1fr; gap: 20px; }
  .close { grid-template-columns: 1fr; grid-template-areas: "m" "h" "a"; margin-top: 96px; padding-top: 56px; padding-bottom: 72px; gap: 20px; }
  .close-m .gm { font-size: 88px !important; }
}

/* ---------- less movement: everything is already where it ends ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .js [data-rv], .js .h1 .w { opacity: 1; translate: none; filter: none; }
  .hero .h1, .tour-stage { transform: none !important; opacity: 1 !important; }
  .tour, .call-track { height: auto; }
  .tour-sticky, .call-sticky { position: static; height: auto; padding: 0 0 40px; }
  .tour-steps li p { max-height: none; opacity: 1; margin-top: 6px; }
  .gm, .gm * { animation: none !important; }
}

/* ---------- support: Discord first (the one ink object of the page), then the form for whoever has a token ---------- */
.legal.support { max-width: 920px; }
.support .lead { max-width: 60ch; text-wrap: balance; }
.foot .legal { max-width: none; padding: 0; }
.support-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-top: 40px; padding: 36px; border-radius: 24px; background: var(--ink); color: var(--ink-text); }
.support-mark { display: inline-flex; width: 76px; }
.support-mark .wm-m { width: 100%; height: auto; overflow: visible; }
.support-hero h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; color: var(--ink-text); }
.legal .support-hero p { margin-top: 10px; color: var(--ink-text-2); font-size: 16px; max-width: 52ch; }
.legal .support-hero .support-note { font-size: 14px; }
.legal .support-hero a { color: var(--ink-text); }
.support-join { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 14px; background: var(--ink-text); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.legal .support-hero a.support-join { color: var(--ink); }
.support-join:hover { box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.7); }
.support-join:active { transform: scale(0.97); }
.support-join svg { flex: none; }
.support-note { font-size: 14px; color: var(--text-2); }
.support-more { margin-top: 16px; border: 1px solid var(--rule-2); border-radius: 20px; background: var(--card); }
.support-more summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; list-style: none; cursor: pointer; border-radius: 20px; }
.support-more summary::-webkit-details-marker { display: none; }
.support-more summary:hover { background: var(--hover); }
.support-more summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.support-more-text { display: grid; gap: 4px; }
.support-more-text strong { font-size: 18px; letter-spacing: -0.01em; color: var(--text); }
.support-more-text small { font-size: 15px; color: var(--text-2); max-width: 62ch; line-height: 1.5; }
.support-chev { flex: none; color: var(--text-2); transition: transform 0.25s var(--ease); }
.support-more[open] .support-chev { transform: rotate(180deg); }
.support-more[open] summary { border-bottom: 1px solid var(--rule); border-radius: 20px 20px 0 0; }
.report-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; padding: 28px; }
.report-form[hidden], .report-locked[hidden], .report-done[hidden] { display: none; }
.rf-wide { grid-column: 1 / -1; }
.rf-license { margin: 0; font-size: 14px; color: var(--text-2); }
.report-locked { margin: 0; padding: 22px 28px; font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 66ch; }
.rf-field { display: grid; gap: 8px; align-content: start; border: 0; padding: 0; margin: 0; min-width: 0; }
.rf-field > span, .rf-kinds legend { font-weight: 600; font-size: 15px; color: var(--text); }
.rf-field small { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.rf-field textarea { width: 100%; min-height: 150px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--ground); padding: 12px 16px; font: inherit; font-size: 16px; color: var(--text); resize: vertical; }
.report-form input[type="text"] { background: var(--ground); }
.rf-field textarea:focus, .rf-field input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 4px var(--hover); }
.rf-kinds { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.rf-kinds legend { width: 100%; padding: 0; margin-bottom: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; height: 48px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 12px; font-weight: 500; font-size: 15px; background: var(--ground); transition: background 0.2s, border-color 0.2s; white-space: nowrap; }
.choice input:checked + span { background: var(--on); border-color: var(--on); color: var(--on-text); }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--hover); }
.rf-attach-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rf-pick { cursor: pointer; flex: none; }
.rf-files { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.rf-files:empty { display: none; }
.rf-files li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--card-2); font-size: 14px; overflow-wrap: anywhere; }
.link-btn { flex: none; background: none; border: 0; padding: 4px; color: var(--text); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
.rf-msg { margin: 0; font-size: 15px; color: var(--text-2); }
.rf-msg[data-bad="1"] { color: var(--wait-ink); font-weight: 500; }
.rf-msg:empty { display: none; }
.rf-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.rf-foot .support-note a { color: var(--text); }
.report-done { padding: 28px; display: grid; gap: 14px; justify-items: start; }
.report-done p { margin: 0; font-size: 17px; }
@media (max-width: 760px) {
  .support-hero { grid-template-columns: auto minmax(0, 1fr); padding: 26px; gap: 18px 20px; }
  .support-mark { width: 56px; }
  .support-join { grid-column: 1 / -1; justify-content: center; }
  .support-more summary { padding: 18px 20px; }
  .report-locked { padding: 18px 20px; }
  .report-form { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 22px; }
  .choice span { padding: 0 12px; font-size: 14px; }
  .rf-foot .btn { width: 100%; }
}

/* ---------- the documentation (/docs/): contents, page, "on this page"; the app's paper and ink, no colour of its own ---------- */
.docs-page { --top: 64px; }
.docs-page .docs-top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.docs-top .top-in { height: var(--top); gap: 18px; }
.docs-top .wordmark { font-size: 19px; }
.docs-home { font-weight: 600; font-size: 15px; color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 9px; }
.docs-home:hover { background: var(--hover); }
.docs-find { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 36px; width: min(320px, 34vw); padding: 0 8px 0 12px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--card); color: var(--text-2); font-size: 14px; text-align: left; }
.docs-find span { flex: 1; }
.docs-find:hover { color: var(--text); }
kbd { font: 500 12px var(--mono); }
.docs-find kbd, .find-field kbd { border: 1px solid var(--rule-2); border-radius: 6px; padding: 1px 6px; color: var(--text-3); background: var(--ground); }

.docs { display: grid; grid-template-columns: 248px minmax(0, 1fr) 216px; gap: 56px; align-items: start; }
.docs-nav { position: sticky; top: var(--top); max-height: calc(100vh - var(--top)); overflow-y: auto; padding: 28px 4px 40px 0; overscroll-behavior: contain; scrollbar-width: thin; }
.docs-menu > summary { display: none; }
.docs-group { margin: 22px 0 6px; font: 500 11.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.docs-menu > .docs-group:first-of-type { margin-top: 0; }
.docs-nav a { display: block; padding: 5px 10px; margin-left: -10px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.docs-nav a:hover { color: var(--text); background: var(--hover); }
.docs-nav a[aria-current] { color: var(--text); font-weight: 600; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }

.docs-main { min-width: 0; padding: 40px 0 96px; }
.doc { max-width: 760px; }
.doc-kicker { font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.doc h1 { margin-top: 10px; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
.doc-lead { margin-top: 14px; font-size: 19px; line-height: 1.5; color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.doc-body { margin-top: 28px; font-size: 16.5px; line-height: 1.7; color: var(--body); }
.doc-body > * + * { margin-top: 16px; }
.doc-body h2 { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); font-size: 26px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 650; position: relative; scroll-margin-top: calc(var(--top) + 16px); }
.doc-body h3 { margin-top: 36px; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 620; position: relative; scroll-margin-top: calc(var(--top) + 16px); }
.doc-body h2 + *, .doc-body h3 + * { margin-top: 12px; }
.doc-body .anchor { position: absolute; left: -1.1em; width: 1em; color: var(--text-3); text-decoration: none; font-weight: 500; opacity: 0; transition: opacity 0.15s; }
.doc-body h2:hover .anchor, .doc-body h3:hover .anchor, .doc-body .anchor:focus-visible { opacity: 1; }
.doc-body p, .doc-body li { text-wrap: pretty; }
.doc-body strong { color: var(--text); font-weight: 620; }
.doc-body a { color: var(--text); text-decoration-color: var(--rule-2); }
.doc-body a:hover { text-decoration-color: currentColor; }
.doc-body ul, .doc-body ol { padding-left: 22px; }
.doc-body ul { list-style: none; }
.doc-body ul > li { position: relative; }
.doc-body ul > li::before { content: ''; position: absolute; left: -15px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.doc-body ol { list-style: decimal; }
.doc-body ol > li::marker { font: 500 0.9em var(--mono); color: var(--text-3); }
.doc-body li + li { margin-top: 8px; }
.doc-body code { font-size: 0.86em; border: 1px solid var(--rule); background: var(--card); }
.doc-body pre { background: var(--ink); color: var(--ink-text); border-radius: 14px; padding: 16px 18px; overflow-x: auto; font: 14px/1.6 var(--mono); }
.doc-body pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.keys { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; white-space: nowrap; }
.keys kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 6px; background: var(--card); color: var(--text); font-size: 12.5px; line-height: 1.5; text-align: center; }
.keys span { color: var(--text-3); font-size: 12px; }

.doc-body .shot { margin: 28px 0 8px; }
.shot-link { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule-2); background: var(--card); box-shadow: 0 18px 40px -28px rgb(17 19 16 / 0.45); cursor: zoom-in; transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
.shot-link:hover { box-shadow: 0 22px 46px -26px rgb(17 19 16 / 0.55); transform: translateY(-1px); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.shot figcaption code { font-size: 0.9em; }

.box { padding: 14px 18px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--rule-2); }
.box[data-kind="tip"] { border-left-color: var(--text-3); }
.box[data-kind="warning"] { border-left-color: var(--text); background: var(--card-2); }
.box-title { font: 600 12px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
.box-title + * { margin-top: 6px; }
.box > * + * { margin-top: 10px; }
.box p, .box li { font-size: 15.5px; line-height: 1.6; }

.table { overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table th { text-align: left; font: 500 12px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); padding: 11px 16px; border-bottom: 1px solid var(--rule); background: var(--card-2); }
.table td { padding: 11px 16px; vertical-align: top; border-top: 1px solid var(--rule); }
.table tr:first-child td { border-top: 0; }
.table td:first-child { white-space: nowrap; }

.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; }
.doc-pager a { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--rule-2); border-radius: 14px; text-decoration: none; background: var(--card); transition: background 0.2s; }
.doc-pager a:hover { background: var(--card-2); }
.doc-pager small { font: 500 12px var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.doc-pager span { color: var(--text); font-weight: 600; }
.doc-pager .pager-next { text-align: right; grid-column: 2; }
.doc-help { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 20px; border-radius: 16px; background: var(--ground-2); }
.doc-help p { flex: 1 1 380px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.doc-help strong { color: var(--text); }

.docs-toc { position: sticky; top: var(--top); max-height: calc(100vh - var(--top)); overflow-y: auto; padding: 44px 0 40px; scrollbar-width: thin; }
.docs-toc-title { font: 500 11.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.docs-toc ul { border-left: 1px solid var(--rule); }
.docs-toc a { display: block; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-2); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.docs-toc li[data-level="3"] a { padding-left: 26px; font-size: 13px; }
.docs-toc a:hover { color: var(--text); }
.docs-toc a[aria-current] { color: var(--text); border-left-color: var(--text); font-weight: 560; }
.docs-top-link { margin-top: 16px; display: inline-block; font-size: 13px; color: var(--text-3); text-decoration: none; }
.docs-top-link:hover { color: var(--text); }

/* the search, over the page */
.viewing { overflow: hidden; }
.find { position: fixed; inset: 0; z-index: 80; background: rgb(14 16 13 / 0.38); backdrop-filter: blur(3px); display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; }
.find-box { width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule-2); border-radius: 18px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.55); overflow: hidden; }
.find-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--rule); color: var(--text-3); }
.find-field input { flex: 1; height: 56px; border: 0; background: none; outline: none; font-size: 17px; color: var(--text); }
.find-field input::-webkit-search-cancel-button { display: none; }
.find-results { overflow-y: auto; padding: 6px; }
.find-results:empty { display: none; }
.find-results a { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text-2); }
.find-results [aria-selected="true"] a, .find-results a:hover { background: var(--card-2); }
.find-results strong { color: var(--text); font-weight: 600; }
.find-page { font: 500 11.5px var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.find-results small { font-size: 13.5px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.find-empty { padding: 18px 12px; color: var(--text-2); font-size: 15px; }
.find-hint { padding: 9px 14px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--text-3); }

/* a view of the app at full size */
.viewer { position: fixed; inset: 0; z-index: 90; background: rgb(14 16 13 / 0.82); display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; cursor: zoom-out; }
.viewer img { max-width: min(100%, 2000px); max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.7); }
.viewer p { max-width: 80ch; color: #eef1ea; font-size: 14.5px; text-align: center; }

@media (max-width: 1240px) {
  .docs { grid-template-columns: 232px minmax(0, 1fr); gap: 44px; }
  .docs-toc { display: none; }
}
@media (max-width: 1000px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-nav { position: static; max-height: none; overflow: visible; padding: 16px 0 0; }
  .docs-menu { border: 1px solid var(--rule-2); border-radius: 14px; background: var(--card); padding: 0 16px; }
  .docs-menu[open] { padding-bottom: 14px; }
  .docs-menu > summary { display: flex; align-items: baseline; gap: 10px; list-style: none; cursor: pointer; padding: 13px 0; font-weight: 600; color: var(--text); }
  .docs-menu > summary::-webkit-details-marker { display: none; }
  .docs-menu > summary span { flex: 1; min-width: 0; text-align: right; font-weight: 400; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .docs-menu > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.6px solid var(--text-2); border-bottom: 1.6px solid var(--text-2); rotate: 45deg; translate: 0 -3px; transition: rotate 0.2s; }
  .docs-menu[open] > summary::after { rotate: -135deg; translate: 0 2px; }
  .docs-menu > .docs-group:first-of-type { margin-top: 6px; }
  .docs-main { padding-top: 28px; }
}
@media (max-width: 760px) {
  .docs-page { --top: 56px; }
  .docs-page .top { top: 0; }
  .docs-top .top-in { gap: 10px; }
  .docs-find { width: auto; flex: 0 0 auto; padding: 0 10px; }
  .docs-find span, .docs-find kbd { display: none; }
  .docs-home { padding: 6px 4px; }
  .doc-body { font-size: 16px; }
  .doc-body h2 { font-size: 23px; margin-top: 44px; }
  .doc-body .anchor { display: none; }
  .doc-pager { grid-template-columns: 1fr; }
  .doc-pager .pager-next { grid-column: 1; }
  .find { padding-top: 10px; }
}
@media print {
  .docs-nav, .docs-toc, .docs-top, .doc-pager, .doc-help, .foot { display: none; }
  .docs { display: block; }
}