:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --nav-bg: rgba(255,255,255,.88);
  --heading: #11141b;
  --ink: #0b0d12;
  --ink-2: #3b404b;
  --ink-hover: #242833;
  --on-ink: #ffffff;
  --muted: #6b7180;
  --faint: #878d99;
  --line: #e5e7eb;
  --line-2: #eef0f3;
  --line-strong: #cfd3da;
  --fill: #f4f5f7;
  --fill-2: #fafbfc;
  --fill-hover: #eceef1;
  --disabled: #c9ccd3;
  --blue: #2046f5;
  --blue-ink: #1834c4;
  --blue-soft: #ebf0ff;
  --blue-line: #b7c3f8;
  --blue-fill: #2046f5;
  --blue-fill-hover: #1834c4;
  --on-blue: #ffffff;
  --a: #f0643c;
  --a-soft: #fff0ea;
  --a-line: #fde0d5;
  --a-text: #2a1a14;
  --a-ink: #7c2a12;
  --b: #2046f5;
  --b-soft: #ebf0ff;
  --b-bubble: #2046f5;
  --ok: #138a55;
  --ok-soft: #e8f6ee;
  --ok-line: #bfe6d0;
  --ok-ink: #0f6b43;
  --warn: #b45309;
  --warn-soft: #fff7ed;
  --warn-ink: #92400e;
  --bad: #b91c1c;
  --wire: #c9ccd3;
  --sh-sm: 0 1px 2px rgba(15,20,30,.06);
  --sh-lg: 0 1px 2px rgba(15,20,30,.04), 0 12px 32px -18px rgba(15,20,30,.18);
  --sh-blue: rgba(32,70,245,.5);
  --art: #f5f3ef;
  --c-date: #d2491f;
  --c-meet: #2046f5;
  --c-intro: #12855a;
  --c-guard: #6d3fd1;
  --c-ok: #12855a;
  color-scheme: light;
  --display: "Inter Tight", "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
}

:root[data-theme="dark"] {
  --bg: #0d0f13;
  --surface: #16181d;
  --nav-bg: rgba(13,15,19,.84);
  --heading: #f4f5f7;
  --ink: #e8eaee;
  --ink-2: #c3c7d0;
  --ink-hover: #ffffff;
  --on-ink: #0d0f13;
  --muted: #979ca8;
  --faint: #7d838f;
  --line: #2a2e37;
  --line-2: #1f2229;
  --line-strong: #3d424d;
  --fill: #1b1e24;
  --fill-2: #121419;
  --fill-hover: #242830;
  --disabled: #2a2e37;
  --blue: #7f97ff;
  --blue-ink: #a9b8ff;
  --blue-soft: #1a2140;
  --blue-line: #34427a;
  --blue-fill: #3553f0;
  --blue-fill-hover: #4a66f5;
  --on-blue: #ffffff;
  --a: #f0643c;
  --a-soft: #3a2119;
  --a-line: #58301f;
  --a-text: #ffd9cb;
  --a-ink: #ffb59c;
  --b: #6f8cff;
  --b-soft: #1a2140;
  --b-bubble: #2f4de6;
  --ok: #4cc98a;
  --ok-soft: #13261c;
  --ok-line: #1f4a33;
  --ok-ink: #8fd9b0;
  --warn: #f0a14a;
  --warn-soft: #2e2210;
  --warn-ink: #fbbf77;
  --bad: #f87171;
  --wire: #3e4450;
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-lg: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.7);
  --sh-blue: rgba(79,106,255,.45);
  --art: #17191e;
  --c-date: #f0805c;
  --c-meet: #8aa0ff;
  --c-intro: #4cc98a;
  --c-guard: #b49cff;
  --c-ok: #4cc98a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; padding: 0 28px; background: var(--nav-bg); backdrop-filter: blur(10px); }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 20px/1 var(--display); letter-spacing: -0.03em; }
.logo.small { font-size: 15px; gap: 6px; }
.links { display: flex; gap: 40px; font-size: 15px; color: var(--muted); }
.links a { text-decoration: none; transition: color .15s; }
.links a:hover { color: var(--ink); }
.nav-cta { display: flex; justify-content: flex-end; gap: 8px; }
.pill { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pill.gray { background: var(--fill); color: var(--ink-2); }
.pill.gray:hover { background: var(--fill-hover); }
.pill.black { background: var(--ink); color: var(--on-ink); }
.pill.black:hover { background: var(--ink-hover); }

main { overflow-x: clip; }

.hero { position: relative; text-align: center; padding: 120px 20px 40px; }
.hero h1 { font: 500 clamp(40px, 6.4vw, 92px)/1.04 var(--display); letter-spacing: -0.03em; margin: 0 auto; color: var(--heading); text-wrap: balance; }
.sub { max-width: 620px; margin: 26px auto 0; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.45; color: var(--muted); letter-spacing: -0.01em; }
.agent-hint { margin: 14px 0 0; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.agent-hint a { color: inherit; }
.agent-hint code { font: 400 12px/1 var(--mono); }
.cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 34px; height: 50px; padding: 0 24px; background: var(--ink); color: var(--on-ink); border: 0; border-radius: 6px; font: 500 17px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .15s; }
.cta:hover { background: var(--ink-hover); }
.cta:disabled { background: var(--disabled); cursor: not-allowed; }

.demo { position: relative; max-width: 1040px; margin: 64px auto 0; text-align: left; }
.prompt { position: relative; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 14px 12px 20px; box-shadow: var(--sh-lg); }
.ask { font-size: 21px; letter-spacing: -0.01em; min-height: 30px; padding-right: 8px; }
.caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; background: var(--ink); vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ask-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.spacer { flex: 1; }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--fill); border: 1px solid var(--line-2); border-radius: 8px; }
.seg button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 0; background: transparent; border-radius: 6px; color: var(--muted); font-size: 15px; cursor: pointer; white-space: nowrap; }
.seg button svg { color: var(--blue); }
.seg button[aria-checked="true"], .seg button[aria-selected="true"], .seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.seg button:disabled { cursor: not-allowed; opacity: .45; }
.seg button small { font: 400 11px/1 var(--mono); color: var(--faint); }
.seg.wide { display: flex; }
.seg.wide button { flex: 1; justify-content: center; padding: 0 8px; font-size: 14px; }

.sq { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; border: 0; cursor: pointer; }
.sq.ghost { background: var(--fill); color: var(--muted); }
.sq.ghost:hover { color: var(--ink); }
.sq.go { background: var(--blue-fill); color: var(--on-blue); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 6px -2px var(--sh-blue); }
.sq.go:hover { background: var(--blue-fill-hover); }
.sq.go:disabled { background: var(--blue-line); cursor: wait; }

.panel { position: relative; z-index: 1; margin: -12px 12px 0; padding-top: 12px; background: var(--fill-2); border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 14px 14px; display: grid; grid-template-columns: 350px minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "net net" "pair out" "rest out"; }
.opts { padding: 20px 18px 0; border-right: 1px solid var(--line-2); min-width: 0; }
.opts-pair { grid-area: pair; }
.opts-rest { grid-area: rest; padding-bottom: 20px; display: flex; flex-direction: column; }
.out { grid-area: out; padding: 20px 18px 18px; min-width: 0; display: flex; flex-direction: column; }
.lbl { font: 500 13px/1 var(--sans); color: var(--muted); margin: 0 0 10px; }
.opts .lbl:not(:first-child) { margin-top: 22px; }

.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 10px; background: var(--fill); border: 1px solid var(--line-2); border-radius: 6px; color: var(--muted); font-size: 14px; cursor: pointer; text-decoration: none; text-align: left; transition: color .15s, background .15s; }
.chip:hover { color: var(--ink); }
.chip.on { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-sm); }
.chip small { font: 400 11px/1 var(--mono); color: var(--faint); }
.chip .pav { display: inline-flex; }
.chip .pav i { width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
.chip .pav i + i { background: var(--b); margin-left: -2px; }

.rows { display: flex; flex-direction: column; background: var(--fill); border: 1px solid var(--line-2); border-radius: 8px; padding: 3px; gap: 2px; }
.row-i { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 10px; border-radius: 6px; font-size: 14px; color: var(--ink-2); }
.rows.agents .row-i { background: var(--surface); box-shadow: var(--sh-sm); }
.row-i .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.row-i .dot.a { background: var(--a); }
.row-i .dot.b { background: var(--b); }
.row-i .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-i .t em { font-style: normal; color: var(--muted); margin-left: 4px; }
.row-i .t b { font-weight: 500; color: var(--ink); }
.row-i small { font: 400 11px/1.2 var(--mono); color: var(--faint); white-space: nowrap; }
.row-i svg { flex: none; color: var(--blue); }
.row-i.hit small { color: var(--blue); }
.row-i.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { background: var(--blue-soft); } 100% { background: transparent; } }

.prov { margin: auto 0 0; padding-top: 20px; font: 400 12px/1.5 var(--mono); color: var(--faint); }
.prov:empty { display: none; }
.prov b { color: var(--muted); font-weight: 400; }

.out-head .lbl { margin-bottom: 10px; }
.out-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tabs button { height: 30px; padding: 0 12px; }
.tabs button .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); font: 500 13px/1 var(--mono); white-space: nowrap; }
.badge:empty { display: none; }

.view { margin-top: 12px; height: 560px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.feed { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 8px; }

.empty { height: 100%; min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: var(--muted); padding: 20px; }
.empty b { color: var(--ink); font-weight: 500; font-size: 16px; }
.empty p { margin: 0; max-width: 320px; font-size: 14px; }
.empty .ghost-cards { width: min(420px, 100%); display: grid; gap: 8px; margin-bottom: 8px; }
.empty .ghost-cards i { height: 52px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); opacity: .8; }
.empty .ghost-cards i:nth-child(2) { opacity: .55; }
.empty .ghost-cards i:nth-child(3) { opacity: .3; }

.msg { display: flex; flex-direction: column; max-width: 84%; animation: rise .25s ease-out; }
.msg.a { align-self: flex-start; align-items: flex-start; }
.msg.b { align-self: flex-end; align-items: flex-end; }
.msg .from { font: 400 11px/1 var(--mono); color: var(--faint); margin: 6px 4px 5px; letter-spacing: .02em; }
.bubble { padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.msg.a .bubble { background: var(--a-soft); color: var(--a-text); border: 1px solid var(--a-line); border-bottom-left-radius: 4px; }
.msg.b .bubble { background: var(--b-bubble); color: var(--on-blue); border-bottom-right-radius: 4px; }
.prop { margin-top: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 230px; max-width: 100%; }
.prop .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.prop .v { font-weight: 500; font-size: 14.5px; }
.prop .k { font: 400 11px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.prop .t { color: var(--muted); font-size: 13px; margin-top: 2px; }
.prop .trav { display: flex; gap: 12px; margin-top: 6px; font: 400 12px/1 var(--mono); color: var(--ink-2); flex-wrap: wrap; }
.trav i, .who-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.accepted { margin-top: 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); background: var(--ok-soft); padding: 6px 8px; border-radius: 5px; }

.line { display: flex; align-items: flex-start; gap: 7px; font: 400 12px/1.45 var(--mono); color: var(--muted); padding: 2px 4px; animation: rise .25s ease-out; }
.line.b { align-self: flex-end; text-align: right; flex-direction: row-reverse; }
.line svg { flex: none; margin-top: 2px; }
.line.a svg { color: var(--a); }
.line.b svg { color: var(--b); }
.line.guard { color: var(--warn); }
.line.guard svg { color: var(--warn); }
.line .k { text-transform: uppercase; letter-spacing: .08em; }
.line.sys { align-self: center; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.line.sys button { border: 0; background: none; padding: 0; color: var(--blue); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.line.err { color: var(--bad); }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.typing.a { align-self: flex-start; }
.typing.b { align-self: flex-end; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: dot 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }

.card-r { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.card-r + .card-r { margin-top: 8px; }
.card-r .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-r .title { font-weight: 500; font-size: 15px; }
.card-r .dom { font: 400 12px/1 var(--mono); color: var(--faint); white-space: nowrap; }
.card-r .snip { color: var(--muted); font-size: 13.5px; margin-top: 3px; }

.plan .title { font: 500 22px/1.2 var(--display); letter-spacing: -0.02em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.fact { background: var(--fill); border-radius: 6px; padding: 8px 10px; font-size: 13.5px; }
.fact small { display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }

.consent { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.yes { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 14.5px; font-weight: 500; transition: background .15s, border-color .15s; }
.yes i { width: 8px; height: 8px; border-radius: 50%; }
.yes.a i { background: var(--a); }
.yes.b i { background: var(--b); }
.yes:hover:not(:disabled) { border-color: var(--line-strong); }
.yes.done { cursor: default; background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.yes:disabled:not(.done) { cursor: wait; opacity: .6; }
.lockline { font: 400 12px/1.4 var(--mono); color: var(--faint); margin: 12px 2px 8px; display: flex; gap: 6px; align-items: center; }
.lockline.open { color: var(--ok); }

.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.act { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; text-decoration: none; cursor: pointer; text-align: left; transition: border-color .15s; }
.act small { font: 400 11px/1 var(--mono); color: var(--faint); white-space: nowrap; }
.act:hover { border-color: var(--line-strong); }
.act.hot { border-color: var(--blue); color: var(--blue); }
.acts.locked .act { pointer-events: none; opacity: .45; background: var(--fill); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-top: 8px; }
.stat { background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; }
.stat b { display: block; font: 500 20px/1.1 var(--display); letter-spacing: -0.02em; }
.stat span { font-size: 12px; color: var(--muted); }
.prov-deal { font: 400 12px/1.5 var(--mono); color: var(--faint); margin: 12px 2px 0; }

.rc h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.rc ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.rc li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); padding: 7px 10px; background: var(--fill); border-radius: 6px; }
.rc li svg { flex: none; margin-top: 3px; color: var(--muted); }
.rc .counts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.rc .counts span { font: 400 12px/1 var(--mono); padding: 7px 9px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); }
.rc .counts span.zero { background: var(--fill); color: var(--muted); }
.rc-note { font-size: 13px; color: var(--muted); margin: 12px 2px 0; }

.block { max-width: 1120px; margin: 0 auto; padding: 160px 20px 0; scroll-margin-top: 20px; }
#how { display: block; scroll-margin-top: 20px; }
.kicker { font: 500 15px/1.3 var(--sans); color: var(--blue); margin: 0 0 14px; }
.block > h2 { font: 500 clamp(30px, 3.4vw, 44px)/1.12 var(--display); letter-spacing: -0.03em; margin: 0; color: var(--heading); max-width: 24em; }
.block > h2 span { display: block; color: var(--faint); }
.lede { font-size: 18px; color: var(--muted); max-width: 600px; margin: 18px 0 0; line-height: 1.5; }



.copy { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; font: 400 12px/1 var(--mono); cursor: pointer; letter-spacing: 0; text-transform: none; }
.copy:hover { border-color: var(--line-strong); }

.foot { max-width: 1040px; margin: 140px auto 0; padding: 28px 20px 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 50; animation: rise .2s ease-out; max-width: calc(100vw - 32px); }

.tag { display: inline-block; font: 500 12px/1 var(--sans); color: var(--blue); background: var(--blue-soft); padding: 5px 8px; border-radius: 5px; white-space: nowrap; }
.mode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font: 500 13px/1.3 var(--sans); color: var(--ink); }
.mode-note { font-weight: 400; color: var(--faint); }
.views button { height: 28px; padding: 0 12px; font-size: 14px; }
.demo[data-view="network"] .date-only, .demo[data-view="dating"] .net-only { display: none; }
.asker { display: flex; align-items: center; gap: 2px; margin: 0 0 6px; font: 400 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); }
.ask-tags { flex: 1; min-width: 0; }
.demo[data-view="network"] .ask-row .spacer { display: none; }

.tchips { display: flex; flex-wrap: wrap; gap: 4px; }
.tchip { display: inline-block; padding: 4px 7px; border-radius: 4px; background: var(--fill); color: var(--ink-2); font: 400 12px/1.2 var(--mono); white-space: nowrap; }
.tchip.open { background: var(--a-soft); color: var(--a-ink); }
.tchip.into { background: var(--blue-soft); color: var(--blue-ink); }
.tchip.offers { background: var(--ok-soft); color: var(--ok-ink); }
.tchip.wants { background: var(--warn-soft); color: var(--warn-ink); }
.tmeta { align-self: center; padding: 0 4px; font: 400 12px/1.2 var(--mono); color: var(--faint); }

.net { grid-area: net; padding: 0 18px 16px; border-bottom: 1px solid var(--line-2); min-width: 0; }
.wires { display: block; width: 100%; height: 34px; overflow: visible; }
.wire { fill: none; stroke: var(--wire); stroke-width: 1.5; stroke-dasharray: 3 4; animation: flow 1s linear infinite; transition: stroke .3s, opacity .3s; }
.wire.said-yes { stroke: var(--blue); }
.wire.said-no { stroke: var(--line); animation: none; }
.wire.picked { stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: none; }
.wire.dim { opacity: .3; animation: none; }
@keyframes flow { to { stroke-dashoffset: -14; } }
.net-cards { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 8px; }
.lslot { min-height: 112px; border: 1px dashed var(--line); border-radius: 8px; }
.lcard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; transition: border-color .3s, opacity .3s, background .3s, box-shadow .3s; }
.net .lcard { min-height: 112px; display: flex; flex-direction: column; animation: rise .3s ease-out; }
.lc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.lc-top b { font-weight: 500; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; }
.lc-top small { font: 400 11px/1.2 var(--mono); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-blurb { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.lcard .tchips { margin-top: 8px; }
.lcard .tchip { font-size: 11px; }
.lc-st { margin: auto 0 0; padding-top: 8px; font: 400 11.5px/1.35 var(--mono); color: var(--muted); }
.lc-st b { font-weight: 500; color: var(--ink-2); }
.lcard.said-yes { border-color: var(--blue-line); }
.lcard.said-yes .lc-st b, .lcard.picked .lc-st b { color: var(--blue); }
.lcard.said-no { opacity: .55; }
.lcard.picked { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 8px 20px -12px var(--sh-blue); }
.lcard.dim { opacity: .4; }
.lcard.off { opacity: .6; }
.net-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.tag.illo { background: var(--warn-soft); color: var(--warn); }
.row-i.wait b { color: var(--faint); font-weight: 400; }

.noagent { margin: 16px 2px 0; font-size: 15px; color: var(--muted); }
.noagent a, .hint a, .doc a { color: var(--blue); text-underline-offset: 2px; }

.page { max-width: 1040px; margin: 0 auto; padding: 72px 20px 0; min-height: 60vh; }
.page-head { max-width: 760px; }
.page h1 { font: 500 clamp(34px, 5vw, 60px)/1.05 var(--display); letter-spacing: -0.035em; margin: 0; color: var(--heading); text-wrap: balance; }
.page .sub { margin: 18px 0 0; max-width: 640px; text-align: left; }
.page .kicker { margin-bottom: 18px; }
.hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.hint.bad { color: var(--bad); }
.hint.center { text-align: center; margin-top: 18px; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); margin: 0; font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.link { border: 0; background: none; padding: 0; color: var(--blue); cursor: pointer; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }

.loading { display: flex; gap: 6px; padding: 40px 0; }
.loading i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: dot 1.1s infinite ease-in-out; }
.loading i:nth-child(2) { animation-delay: .15s; }
.loading i:nth-child(3) { animation-delay: .3s; }

.signin { max-width: 640px; }
.contact { display: flex; gap: 8px; margin-top: 30px; max-width: 520px; }
.contact input { flex: 1; min-width: 0; height: 50px; }
.contact .cta { margin: 0; flex: none; }
input, textarea { font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; width: 100%; }
textarea { resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }

.sheet { margin-top: 40px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; box-shadow: var(--sh-lg); }
.cardgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .85fr); }
.ccol { padding: 20px 18px 22px; min-width: 0; }
.ccol + .ccol { border-left: 1px solid var(--line-2); }
.ccol .lbl, .share-strip .lbl, .setup .lbl { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.lbl .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.c-ok { background: var(--ok); }
.dot.c-ask { background: var(--blue); }
.dot.c-never { background: var(--ink); }
.ccol > .hint:first-of-type { margin: 0 0 14px; }
.about { background: var(--fill-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; }
.about p { margin: 0; font-size: 14.5px; }
.about textarea { font-size: 14.5px; }
.about .link { margin-top: 6px; }
.facts-l { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.facts-l li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 7px 6px 7px 10px; background: var(--fill); border-radius: 6px; font-size: 14px; color: var(--ink-2); }
.facts-l li.off span { text-decoration: line-through; color: var(--faint); }
.facts-l li.none { color: var(--muted); }
.x { flex: none; min-width: 26px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; font: 400 12px/1 var(--mono); }
.x:hover { background: var(--surface); color: var(--ink); }
.never-n { margin: 0; font-size: 14px; color: var(--muted); }
.never-n b { display: block; font: 500 44px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin-bottom: 4px; }

.rules { display: grid; gap: 2px; }
.rule { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 5px 0; font-size: 14px; color: var(--ink-2); }
.rule .seg { flex: none; }
.rule .seg button { height: 28px; padding: 0 9px; font-size: 13px; }
.share-strip { border-top: 1px solid var(--line-2); padding: 18px; background: var(--fill-2); }
.rules.share { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 32px; }
.rules.share .rule { justify-content: flex-start; }

.approve { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 28px; }
.approve.row { flex-direction: row; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.approve.row .cta { margin: 0; }
.cta.big { height: 58px; padding: 0 34px; font-size: 18px; margin-top: 0; }
.cta.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.cta.ghost:hover { background: var(--fill); }

.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; margin-top: 48px; align-items: start; }
.dash-main, .dash-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; min-width: 0; }
.sect.wide { margin-top: 48px; scroll-margin-top: 76px; }
.sect-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sect-head .lbl { margin: 0; font-weight: 400; }
.count { font: 400 12px/1 var(--mono); color: var(--faint); }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.box + .box { margin-top: 8px; }
.box.quiet { background: var(--fill-2); border-color: var(--line-2); }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btns button { border: 0; cursor: pointer; }
.btns button:disabled { opacity: .5; cursor: wait; }
.agent-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-top b { font: 500 20px/1.2 var(--display); letter-spacing: -0.02em; }
.status { font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 4px; background: var(--fill); color: var(--muted); }
.status.active { background: var(--ok-soft); color: var(--ok); }
.status.unclaimed { background: var(--blue-soft); color: var(--blue); }
.meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.about-s { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.mini { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mini span { font: 400 12px/1 var(--mono); padding: 6px 8px; border-radius: 5px; background: var(--fill); color: var(--muted); }
.side-note { margin-top: 12px; }
.invite { margin-top: 12px; }
.copyline { display: flex; gap: 6px; }
.copyline input { font: 400 12.5px/1 var(--mono); padding: 8px 10px; background: var(--fill-2); }
.copyline .copy { height: auto; }

.list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.req { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.req.answered { background: var(--fill-2); }
.req-top { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.req-top b { font-weight: 500; color: var(--ink); }
.req-top small { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--faint); white-space: nowrap; }
.req-body { margin: 8px 0 0; padding: 10px 12px; background: var(--fill); border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.done-line { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
.done-line.ok { color: var(--ok); }
.done-line a { color: inherit; }
.list.linked { gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.row-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); text-decoration: none; font-size: 14.5px; transition: background .15s; }
.row-link + .row-link { border-top: 1px solid var(--line-2); }
.row-link:hover { background: var(--fill-2); }
.row-link .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-link .t em { font-style: normal; color: var(--muted); margin-left: 8px; }
.row-link small { font: 400 11px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.row-link small.booked, .row-link small.done { color: var(--ok); }
.row-link svg { flex: none; color: var(--faint); }
.contacts { display: flex; flex-wrap: wrap; gap: 6px; }
.contact-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; background: var(--surface); }
.contact-chip b { font-weight: 500; }
.contact-chip em { font-style: normal; color: var(--muted); font-size: 13px; }

.house { padding: 18px; }
.house > .hint { margin: 0 0 14px; }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; padding: 4px 2px 8px; overscroll-behavior: contain; }
.chat .msg { max-width: 78%; }
.chat .msg.wide { max-width: 100%; width: 100%; }
.prop.setup { width: 100%; padding: 14px 16px; display: grid; gap: 6px; }
.prop.setup .lbl { margin: 8px 0 2px; }
.prop.setup .cta { margin-top: 14px; justify-self: start; }
.composer { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 10px 12px; background: var(--surface); box-shadow: var(--sh-lg); }
.composer textarea { border: 0; padding: 4px 2px; resize: none; outline: none; }
.composer textarea:focus { outline: none; }
.composer-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.composer-row .hint { margin: 0; }
.composer-row .pill { border: 0; cursor: pointer; }

.narrow { max-width: 680px; margin-top: 36px; }
.narrow .plan .title { font: 500 24px/1.2 var(--display); letter-spacing: -0.02em; }
.consent.big { margin-top: 12px; }
.consent.big .cta { margin: 0; width: 100%; }
.lockline { font-size: 13px; }

.room-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: 40px; align-items: start; }
.transcript { padding: 16px; background: var(--fill-2); border-color: var(--line-2); }
.transcript .lbl { margin: 0; }
.transcript .feed { margin-top: 12px; max-height: 680px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.room-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; }
.accepted.no { color: var(--muted); background: var(--fill); }
.acts.one { grid-template-columns: 1fr; margin-top: 12px; }
.proposed { border-color: var(--blue); background: var(--blue-soft); }
.proposed p { margin: 0; font-size: 14px; color: var(--ink-2); }
.room-side .trav { display: flex; gap: 12px; margin-top: 8px; font: 400 12px/1 var(--mono); color: var(--ink-2); flex-wrap: wrap; }

.findable { margin-top: 64px; }
.findable h2 { font: 500 clamp(26px, 3vw, 34px)/1.1 var(--display); letter-spacing: -0.03em; margin: 0; }
.findable .sub { margin-top: 10px; font-size: 16px; }
.findable .sheet { margin-top: 24px; }
.finder { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.f-side { display: grid; gap: 20px; align-content: start; padding: 20px 18px 22px; border-right: 1px solid var(--line-2); background: var(--fill-2); min-width: 0; }
.f-side .lbl { display: block; color: var(--ink-2); }
.f-side input { font-size: 15px; }
.f-side input:disabled { background: var(--fill); color: var(--faint); }
.f-field .hint { margin-top: 6px; }
.f-tags { display: grid; gap: 18px; align-content: start; padding: 20px 18px 22px; min-width: 0; }
.tgroup { border: 0; margin: 0; padding: 0; min-width: 0; }
.tgroup legend { padding: 0; margin-bottom: 10px; color: var(--ink-2); }
.tgroup .count { margin-left: 6px; color: var(--blue); letter-spacing: 0; }
.tpick { display: flex; flex-wrap: wrap; gap: 5px; }
.tbtn { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-2); font-size: 13.5px; cursor: pointer; transition: background .15s, border-color .15s; }
.tbtn:hover { border-color: var(--line-strong); }
.tbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.lwrap + .lwrap { margin-top: 16px; }
.lwrap .hint { margin: 8px 2px 0; }
.lwrap .btns { margin-top: 10px; }
.proposed .lcard { margin-top: 10px; }
.ask-meta { margin: 8px 0 0; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.req > .tchips { margin-top: 10px; }
.req .tmeta { padding: 0 2px; }
.resp { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.resp li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 10px; background: var(--fill); border-radius: 6px; font-size: 14px; color: var(--ink-2); }
.resp b { font-weight: 500; color: var(--ink); }
.resp small { font: 400 11px/1 var(--mono); color: var(--faint); }
.resp .verdict { margin-left: auto; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.resp em { flex-basis: 100%; font-style: normal; font-size: 13px; color: var(--muted); }
.resp .r-yes .verdict { color: var(--blue); }
.resp .r-no { opacity: .7; }
.resp .r-picked { background: var(--blue-soft); }
.resp .r-picked .verdict { color: var(--blue); font-weight: 500; }
.list.linked.after { margin-top: 8px; }
div.row-link:hover { background: var(--surface); }

.doc { max-width: 820px; }
.doc section { margin-top: 56px; scroll-margin-top: 76px; }
.doc h2 { font: 500 28px/1.15 var(--display); letter-spacing: -0.03em; margin: 0 0 14px; }
.doc p, .doc li, .doc dd { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }
.doc code { font: 400 13px/1.4 var(--mono); background: var(--fill); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.doc pre { margin: 12px 0 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--fill-2); font: 400 13px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.invited { margin-top: 24px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 0; }
.quick a { font: 400 13px/1 var(--mono); padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ink); }
.quick a:hover { border-color: var(--line-strong); }
.doc-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.doc-steps li { counter-increment: s; position: relative; padding: 18px 20px 18px 64px; }
.doc-steps li + li { border-top: 1px solid var(--line); }
.doc-steps li::before { content: "0" counter(s); position: absolute; left: 20px; top: 21px; font: 400 12px/1 var(--mono); color: var(--faint); }
.doc-steps b { color: var(--ink); font-weight: 500; }
.warn { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 14px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
th { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--fill-2); }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 500; white-space: nowrap; }
.plat { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.plat dt { padding: 14px 16px 0; font-weight: 500; scroll-margin-top: 76px; }
.plat dd { margin: 4px 0 0; padding: 0 16px 14px; border-bottom: 1px solid var(--line-2); }
.plat dd:last-child { border-bottom: 0; }
.doc-rules { padding-left: 18px; margin: 0; }
.doc-rules li + li { margin-top: 6px; }
.doc-rules b { color: var(--ink); font-weight: 500; }

.theme-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.theme-btn:hover { background: var(--fill); color: var(--ink); }

.replay { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.rp { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--muted); font: 400 12px/1 var(--mono); cursor: pointer; }
.rp:hover { color: var(--ink); border-color: var(--line); }
.rp svg { color: var(--blue); }
.seg.speed { padding: 2px; }
.seg.speed button { height: 22px; padding: 0 8px; font: 400 12px/1 var(--mono); }



@media (max-width: 1280px) {
  .edges { display: none; }
}

@media (max-width: 960px) {
  .panel { grid-template-columns: 1fr; grid-template-areas: "net" "pair" "out" "rest"; }
  .finder { grid-template-columns: minmax(0, 1fr); }
  .f-side { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .opts { border-right: 0; }
  .opts-pair { padding-bottom: 4px; }
  .out { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin-top: 16px; }
  .opts-rest .lbl:first-child { margin-top: 0; }
  .cardgrid { grid-template-columns: minmax(0, 1fr); }
  .ccol + .ccol { border-left: 0; border-top: 1px solid var(--line-2); }
  .rules.share { grid-template-columns: 1fr; }
  .rules.share .rule { justify-content: space-between; }
  .dash, .room-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .nav { grid-template-columns: auto 1fr; padding: 0 16px; }
  .links { display: none; }
  .nav-cta .gray { display: none; }
  .hero { padding: 64px 16px 24px; }
  .demo { margin-top: 44px; }
  .prompt { padding: 14px 10px 10px 14px; }
  .ask { font-size: 17px; }
  .seg button { padding: 0 10px; font-size: 14px; }
  .panel { margin: -12px 6px 0; }
  .opts, .out { padding-left: 12px; padding-right: 12px; }
  .view { height: 480px; }
  .net { padding: 14px 12px 14px; }
  .wires { display: none; }
  .net-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lslot, .net .lcard { min-height: 100px; }
  .f-side, .f-tags { padding: 16px 14px; }
  .msg { max-width: 92%; }
  .prop { min-width: 0; }
  .facts, .acts, .consent { grid-template-columns: 1fr; }
  .tabs button { padding: 0 9px; font-size: 13px; }
  .block { padding: 88px 16px 0; }
  .lede { font-size: 16px; }
  .foot { margin-top: 100px; padding: 24px 16px 32px; }
  .k-lbl { display: block; margin-bottom: 4px; font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 400; }
  .replay { margin-left: 0; }
  .page { padding: 44px 16px 0; }
  .contact { flex-direction: column; }
  .contact .cta { width: 100%; }
  .sheet { margin-top: 28px; }
  .ccol, .share-strip { padding: 16px 14px; }
  .cta.big { width: 100%; padding: 0 20px; }
  .approve.row { flex-direction: column-reverse; align-items: stretch; }
  .approve.row .pill { justify-content: center; }
  .req-top { flex-wrap: wrap; }
  .req-top small { margin-left: 0; }
  .chat .msg { max-width: 92%; }
  .house { padding: 14px 12px; }
  .transcript { padding: 12px 10px; }
  .doc-steps li { padding: 16px 14px 16px 44px; }
  .doc-steps li::before { left: 14px; }
  td:first-child { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; margin-top: 96px; }
.feat.flip .feat-art { order: 2; }
.feat-art { margin: 0; background: var(--art); border-radius: 28px; padding: 48px 32px 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; height: 580px; position: relative; }
.phone { width: 300px; flex: none; border: 9px solid #15171c; border-bottom: 0; border-radius: 46px 46px 0 0; background: var(--surface); padding: 46px 14px 24px; position: relative; min-height: 560px; box-shadow: 0 30px 60px -30px rgba(40,30,20,.35); }
.ph-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; border-radius: 14px; background: #15171c; }
.ph-head { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0 8px; padding: 0 4px 14px; border-bottom: 1px solid var(--line-2); }
.ph-head.solo { grid-template-columns: auto 1fr; }
.ph-head b { font-weight: 500; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-head small { grid-column: -2; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.ph-head .ph-av { grid-row: span 2; }
.ph-head .ph-av.b { margin-left: -14px; }
.ph-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--sans); color: #fff; background: var(--a); border: 2px solid var(--surface); }
.ph-av.b { background: var(--b); }
.ph-av.c { background: #1f9d6b; }
.ph-chat { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.ph-b { margin: 0; max-width: 84%; padding: 9px 13px; border-radius: 18px; background: var(--fill); color: var(--ink); font-size: 13.5px; line-height: 1.38; align-self: flex-start; }
.ph-b.them, .ph-b.me { align-self: flex-end; background: var(--b); color: #fff; }
.ph-b u { text-decoration-color: rgba(32,70,245,.35); text-underline-offset: 2px; color: var(--blue); overflow-wrap: anywhere; }
.ph-b.struck { color: var(--muted); background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ph-b.struck span { background: linear-gradient(var(--bad), var(--bad)) no-repeat 0 55% / 100% 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .6s ease-out; }
.ph-b.striking span { background-size: 0 1.5px; }
.ph-guard { margin: -2px 0 2px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bad); }
.ph-guard svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ph-card { margin-top: 6px; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--surface); box-shadow: var(--sh-sm); }
.ph-k { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.ph-v { margin: 4px 0 8px; font: 500 18px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.ph-row { margin: 6px 0 0; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.ph-row i { font-size: 11.5px; font-style: normal; font-weight: 500; color: var(--muted); padding: 4px 8px; border-radius: 99px; background: var(--fill); transition: background .3s, color .3s; }
.ph-row i.ok { color: var(--ok-ink); background: var(--ok-soft); }
.ph-row b { font: 500 13px/1 var(--sans); color: var(--ink); }
.ph-receipt .ph-row { margin-top: 8px; }
.ph-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ph-facts span { font-size: 12px; padding: 4px 9px; border-radius: 99px; background: var(--fill); color: var(--ink-2); }
.ph-facts .hit { background: var(--ok-soft); color: var(--ok-ink); }
.ph-typing { display: flex; gap: 4px; align-self: flex-start; padding: 12px 13px; border-radius: 18px; background: var(--fill); }
.ph-typing.me { align-self: flex-end; background: var(--b); }
.ph-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: dot 1.1s infinite ease-in-out; }
.ph-typing.me i { background: rgba(255,255,255,.7); }
.ph-typing i:nth-child(2) { animation-delay: .15s; }
.ph-typing i:nth-child(3) { animation-delay: .3s; }
.ph-chat .wait { display: none; }
.ph-chat .shown { animation: rise .3s ease-out; }
.ph-chat .ph-card.shown { animation: pop .45s cubic-bezier(.2, .9, .3, 1.25); transform-origin: 50% 0; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.wk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 10px 0 4px; }
.wk-d { position: relative; height: 70px; border-radius: 6px; background: var(--fill-2); border: 1px solid var(--line-2); font-size: 10px; line-height: 1; color: var(--muted); text-align: center; padding-top: 5px; }
.wk-busy, .wk-pick { position: absolute; left: 3px; right: 3px; border-radius: 3px; top: calc(17px + (100% - 21px) * var(--t) / 100); height: calc((100% - 21px) * var(--h) / 100); }
.wk-busy { background: var(--fill-hover); }
.wk-pick { background: var(--b); }
.tri { display: flex; gap: 10px; margin: 12px 0 6px; }
.tri .ph-av { width: 34px; height: 34px; font-size: 13px; position: relative; }
.tri .ph-av::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; border: 2px solid var(--surface); }
.feat-eye { margin: 0; font: 500 15px/1.3 var(--sans); color: var(--c, var(--blue)); }
.feat-copy h3 { margin: 12px 0 0; font: 500 clamp(32px, 3.6vw, 46px)/1.06 var(--display); letter-spacing: -0.03em; color: var(--heading); text-wrap: balance; max-width: 13em; }
.feat-copy > p:not(.feat-eye) { margin: 18px 0 0; font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 440px; }
.feat-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.feat-list li { display: flex; align-items: center; gap: 12px; font: 500 16px/1.3 var(--sans); color: var(--c, var(--blue)); }
.feat-list svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat-more { margin-top: 24px; font-size: 14px; color: var(--muted); }
.feat-also { margin: 88px auto 0; max-width: 34em; font-size: 17px; color: var(--muted); text-align: center; }
.feat-also b { color: var(--ink); font-weight: 500; }

.join { margin-top: 0; }
.join h2 { font: 500 clamp(34px, 4vw, 52px)/1.04 var(--display); letter-spacing: -0.035em; margin: 0; color: var(--heading); text-wrap: balance; max-width: 11em; }
.desk-art { padding: 48px 40px 0; }
.desk { width: 100%; max-width: 520px; height: 100%; display: flex; flex-direction: column; background: var(--surface); border-radius: 14px 14px 0 0; box-shadow: 0 30px 60px -30px rgba(40,30,20,.35), 0 0 0 1px rgba(40,30,20,.06); overflow: hidden; }
.dk-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); }
.dk-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.dk-bar span { margin-left: 10px; }
.dk-chat { flex: 1; padding: 20px 20px 0; }
.dk-chat .ph-b { font-size: 14px; }
.dk-card { max-width: 290px; }
.dk-who { display: flex; align-items: center; gap: 10px; }
.dk-who p { margin: 0; display: grid; }
.dk-who b { font-weight: 500; font-size: 14px; }
.dk-who small { font-size: 12px; color: var(--muted); }
.dk-line { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.dk-input { display: flex; align-items: center; gap: 8px; margin: 0 20px 28px; height: 46px; padding: 0 6px 0 16px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; color: var(--faint); }
.dk-input.typing { color: var(--ink); }
.dk-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.dk-input.typing .dk-text::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--ink); vertical-align: -3px; animation: blink 1s steps(1) infinite; }
.dk-input b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--fill); color: var(--muted); transition: background .2s, color .2s; }
.dk-input.typing b { background: var(--ink); color: var(--on-ink); }
.dk-input svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.works { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 28px 0 0; padding: 0; font: 500 17px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink-2); }
.works::before { content: "Works with"; color: var(--faint); font-weight: 400; }
.setup { margin-top: 32px; }
.setup p { margin: 0; font-size: 15px; color: var(--muted); }
.cmd { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--fill); }
.cmd code { flex: 1; min-width: 0; font: 400 12.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.cmd .copy { flex: none; border: 0; background: var(--surface); box-shadow: var(--sh-sm); font: 500 13px/1 var(--sans); }
.setup .more { margin-top: 14px; }
.setup .more a { color: var(--ink); text-underline-offset: 3px; }

.wf { position: relative; height: clamp(340px, 46vw, 640px); margin-top: 140px; background: #050505; color: #ece6df; overflow: hidden; }
.wf-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left bottom; display: block; }
.wf-inner { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 44px 40px; }
.wf-pill, .wf-links a { font-size: 12px; line-height: 1; color: #ece6df; }
.wf-pill { display: inline-flex; align-items: center; gap: 12px; padding: 13px 13px 12px; border: 1px solid currentColor; text-decoration: none; }
.wf-pill:hover { background: #ece6df; color: #050505; }
.wf-copy { margin: 14px 0 0; color: rgba(236, 230, 223, .65); font-size: 16px; letter-spacing: .03em; }
.wf-note { margin: 8px 0 0; color: rgba(236, 230, 223, .5); font-size: 13px; }
.wf-note a { color: #ece6df; }
.wf-links { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.wf-links a { text-decoration: none; }
.wf-links a:hover { text-decoration: underline; }
.wf-by { display: inline-flex; align-items: center; gap: 10px; }
.wf-by svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 6; fill: none; }

@media (max-width: 860px) {
  .feat { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 72px; }
  .feat.flip .feat-art { order: 0; }
  .feat-art { height: 580px; padding: 40px 12px 0; border-radius: 22px; }
  .desk-art { padding: 28px 16px 0; height: 540px; }
  .join .feat-art { order: 2; }
}
@media (max-width: 640px) {
  .wf { height: 600px; margin-top: 110px; }
  .wf-inner { flex-direction: column; padding: 28px 16px; }
  .wf-links { align-items: flex-start; }
}
:root[data-theme="dark"] .phone { border-color: #000; }
.demo :is(.asker, .tchip, .tmeta, .row-i small, .net-status, .lc-st, .lc-top small, .rp, .seg.speed button, .badge, .prov, .line, .msg .from, .prop .k, .prop .trav, .fact small, .lockline, .act small, .rc .counts span, .prov-deal) { font-family: var(--sans); letter-spacing: 0; }
.demo :is(.prop .k, .line .k, .fact small, .accepted) { text-transform: none; letter-spacing: 0; }
.demo .accepted { font-family: var(--sans); }

/* claim verification, review of pending changes, reach switch */
.claim-who { margin-top: 22px; }
.claim-who .meta { margin-top: 4px; font-size: 13px; color: var(--muted); }
.signin .warn { margin-top: 14px; }
.whoami { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.facts-l li span { flex: 1; min-width: 0; }
.facts-l li .link { flex: none; align-self: center; }
.facts-l li.editing { padding: 4px 6px; align-items: center; }
.facts-l li.editing input { flex: 1; min-width: 0; height: 32px; font-size: 14px; }
.fact-add { display: flex; gap: 6px; margin-top: 8px; }
.fact-add input { flex: 1; min-width: 0; height: 36px; font-size: 14px; }
.fact-add .pill { border: 0; cursor: pointer; }
.reach { margin: 0 0 4px; }
.reach .seg { flex-wrap: wrap; }
.reach .hint { margin-top: 8px; }
.sheet .reach, .finder + .reach { padding: 18px 18px 14px; border-bottom: 1px solid var(--line-2); margin: 0; }
.sheet .reach .lbl { margin: 0 0 8px; color: var(--ink-2); }
.reach-top { margin-bottom: 0; }
.reach-top .lbl { margin: 0 0 8px; color: var(--ink-2); }
.review { margin-top: 36px; scroll-margin-top: 76px; }
.review-box { padding: 22px 22px 20px; border-radius: 14px; transition: box-shadow .3s, border-color .3s; }
.review.hl .review-box { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.review-box .kicker { margin-bottom: 8px; }
.review-h { margin: 0; font: 500 24px/1.25 var(--display); letter-spacing: -0.01em; }
.review-box .sub { margin-top: 8px; }
.diff { margin-top: 22px; }
.diff > .lbl { margin: 0 0 6px; color: var(--ink-2); }
.diff-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); }
.diff-row .k { color: var(--muted); }
.diff-row .was { color: var(--muted); }
.diff-row .now { color: var(--ink); }
.diff-head { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 0; padding-bottom: 6px; }
.dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dl li { padding-left: 16px; position: relative; }
.dl li::before { position: absolute; left: 0; font: 500 13px/1.5 var(--mono); }
.dl .add::before { content: "+"; color: var(--ok); }
.dl .del { text-decoration: line-through; color: var(--muted); }
.dl .del::before { content: "x"; color: var(--bad); text-decoration: none; }
.tchip.add { box-shadow: inset 0 0 0 1px var(--ok-line); }
.tchip.del { text-decoration: line-through; opacity: .7; }
.diff .btns, .review-box .btns.all { margin-top: 12px; }
.btns.all .cta { margin: 0; height: 44px; font-size: 15px; }
@media (max-width: 640px) {
  .diff-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; }
  .diff-row .k { grid-column: 1 / -1; }
  .diff-head .k { display: none; }
  .review-box { padding: 18px 16px; }
  .review-h { font-size: 21px; }
}

/* agent console: server-rendered, works without JavaScript */
.console { max-width: 860px; padding-top: 40px; }
.console h1 { font-size: clamp(30px, 4.4vw, 48px); }
.cnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 36px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--fill-2); }
.cnav ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.cnav a { display: inline-block; padding: 6px 10px; border-radius: 6px; font-size: 14px; text-decoration: none; color: var(--ink-2); }
.cnav a:hover { background: var(--fill-hover); }
.cnav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); font-weight: 500; }
.cout { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.console .warn { margin: 0 0 20px; }
.result { margin: 0 0 28px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--ok-line); background: var(--ok-soft); color: var(--ok-ink); }
.result.bad { border-color: #f3c4c4; background: #fdf0f0; color: var(--bad); }
.result h2 { margin: 0 0 4px; font: 500 17px/1.3 var(--sans); }
.result p, .result ul { margin: 4px 0 0; font-size: 14.5px; overflow-wrap: anywhere; }
.csec { margin-top: 40px; }
.csec h2 { font: 500 22px/1.2 var(--display); letter-spacing: -0.02em; margin: 0 0 10px; }
.csec h3 { font: 500 16px/1.3 var(--sans); margin: 22px 0 6px; }
.csec p { color: var(--ink-2); font-size: 15px; }
.clist { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.cform { margin-top: 24px; max-width: 640px; }
.cform.inline { margin-top: 8px; }
.cform.inline p { margin: 0; }
.field { margin: 0 0 14px; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.field small { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); }
.cform select { font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; width: 100%; }
.cform fieldset { margin: 0 0 16px; padding: 12px 14px 4px; border: 1px solid var(--line); border-radius: 10px; }
.cform legend { padding: 0 6px; font-size: 14px; font-weight: 500; }
.cform fieldset > label { display: block; margin: 0 0 10px; font-size: 15px; }
.cform input[type="radio"], .cform input[type="checkbox"] { width: auto; margin: 0 6px 0 0; }
.cform fieldset.tags { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 10px; }
.cform fieldset.tags label { margin: 0; font: 400 13px/1.8 var(--mono); }
.cform button.pill { border: 0; cursor: pointer; }
.cdl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 28px 0 0; font-size: 15px; }
.cdl dt { color: var(--muted); }
.cdl dd { margin: 0; color: var(--ink); }
code.tok { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--fill-2); font: 400 13px/1.5 var(--mono); overflow-wrap: anywhere; }
.console .box { margin-top: 12px; }
.console .box p { margin: 4px 0; }
.state { margin: 24px 0 0; font-size: 16px; }
.tx { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tx li { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); max-width: 88%; overflow-wrap: anywhere; }
.tx li.mine { justify-self: end; background: var(--blue-soft); border-color: var(--blue-line); }
.tx li.sys { justify-self: center; max-width: 100%; font: 400 13px/1.5 var(--mono); color: var(--muted); background: var(--fill-2); }
.tx .from { margin: 0; font-size: 13px; font-weight: 500; }
.tx .from small { font-weight: 400; color: var(--faint); }
.tx .said { margin: 4px 0 0; font-size: 15px; }
.tx .prop-line { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.tx blockquote, .msg .quote { margin: 6px 0 0; padding: 4px 10px; border-left: 3px solid var(--line-strong); color: var(--muted); font-size: 13.5px; }
.tx details { margin-top: 6px; font-size: 14px; }
.tx summary { cursor: pointer; color: var(--blue); }
.msg .marks { font: 400 11px/1 var(--mono); color: var(--faint); margin: 4px 4px 0; }
.msg .marks button { border: 0; background: none; padding: 0; color: var(--blue); cursor: pointer; font: inherit; text-decoration: underline; }
.msg .versions { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--muted); }
.msg.gone .bubble { font-style: italic; opacity: .7; }
.rules-warn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 720px) {
  .console { padding-top: 24px; }
  .cnav { margin-bottom: 24px; }
  .cdl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cdl dd { margin-bottom: 8px; }
  .tx li { max-width: 100%; }
}