/* Compact vision page. Built for a two-minute read: no full-screen hero, no
   viewport-height section rhythm, everything above about three screens.
   Loads after site.css (for the :root palette and the iPhone shell) and
   chat.css (for the embedded conversation). Shares nothing with the older
   long-scroll page, so changing one cannot affect the other. */

body.v2{background:var(--ground)}

.v2wrap{max-width:1000px;margin:0 auto;padding:56px 22px 72px}

/* ---------- header ---------- */
.v2head{max-width:780px;margin:0 auto 46px;text-align:center}
.v2head h1{
  font-family:ui-serif,"New York",Georgia,serif;
  font-size:clamp(30px,4.6vw,46px);font-weight:600;line-height:1.1;
  letter-spacing:-.015em;margin:0;text-wrap:balance;
}
.v2head p{
  margin:16px auto 0;max-width:620px;font-size:17px;line-height:1.55;
  color:var(--ink-soft);text-wrap:balance;
}

/* ---------- shared section chrome ---------- */
.v2sec{margin-top:52px}
.v2sec > h2,.v2colhead{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--accent);margin:0 0 18px;
}

/* ---------- the two problems ---------- */
.v2probs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.v2prob{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
}
.v2prob h3{margin:0 0 8px;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.v2prob p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-soft)}

/* ---------- capabilities ---------- */
.v2caps{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media(min-width:720px){.v2caps{grid-template-columns:1fr 1fr}}
.v2cap{background:var(--panel);padding:16px 20px}
.v2cap b{display:block;font-size:14px;margin-bottom:3px}
.v2cap span{font-size:14px;line-height:1.5;color:var(--ink-soft)}
/* Odd count, so the last one spans the full width instead of leaving a hole. */
@media(min-width:720px){.v2cap:last-child{grid-column:1 / -1}}

/* ---------- demos ---------- */
.v2demos{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.v2demo{display:flex;flex-direction:column;align-items:center;gap:14px}
.v2demo .v2demotext{max-width:400px;text-align:center}
.v2demo h3{margin:0 0 5px;font-size:17px;letter-spacing:-.01em}
.v2demo p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
/* Deliberately smaller than the phone on a normal landing page. These are
   here to be glanced at inside a two-minute read, and the frame's fixed
   aspect ratio means every pixel of width costs two of scroll. */
.v2demo .phone{width:min(276px,calc(100vw - 60px));padding:13px;border-radius:46px}

/* The conversation demo swaps between the two people in the thread. */
.v2switch{display:flex;gap:6px;justify-content:center}
.v2switch button{
  border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:6px 14px;font:inherit;font-size:13px;color:var(--ink-soft);cursor:pointer;
}
.v2switch button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- money + order, side by side ---------- */
.v2cols{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:52px}
.v2list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.v2list li{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.v2list b{color:var(--ink);font-weight:600}

.v2steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:11px}
.v2steps li{
  counter-increment:s;position:relative;padding-left:30px;
  font-size:14.5px;line-height:1.5;color:var(--ink-soft);
}
.v2steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;width:20px;height:20px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font:700 11px/20px ui-monospace,Menlo,monospace;text-align:center;
}
.v2steps b{color:var(--ink);font-weight:600}
.v2steps li.first::before{background:var(--accent);color:#fff}

/* ---------- close ---------- */
.v2close{
  margin-top:60px;padding-top:34px;border-top:1px solid var(--line);text-align:center;
}
.v2close p{
  margin:0 auto;max-width:620px;font-family:ui-serif,"New York",Georgia,serif;
  font-size:clamp(19px,2.4vw,25px);line-height:1.35;letter-spacing:-.01em;text-wrap:balance;
}

/* ---------- people-search screen ---------- */
.pshead{padding:48px 13px 8px;background:#f7f7f8;border-bottom:1px solid rgba(0,0,0,.08)}
.psbar{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:#e8e8ea;border-radius:11px;padding:9px 11px;color:#8a8a8e;font-size:15px;
  transition:background .18s ease;
}
.psbar-focused{background:#fff;box-shadow:0 0 0 2px rgba(10,132,255,.35)}
.psbar-agentic{background:#fff;box-shadow:0 0 0 2px rgba(11,138,108,.5);align-items:flex-start;cursor:default}
.psmag,.psglobe{width:19px;height:19px;flex:none;color:#8a8a8e}
.psglobe{border:0;background:none;padding:0;cursor:pointer;color:#0A84FF;animation:psPop .28s ease}
.psglobe.on{color:var(--accent);cursor:default}
.psglobe svg,.psmag svg{width:100%;height:100%;display:block}
@keyframes psPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.psplaceholder{flex:1}
.pstext{flex:1;color:#111;font-size:14px;line-height:1.4;text-align:left}
.pscaret{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:psBlink 1s steps(1) infinite}
@keyframes psBlink{50%{opacity:0}}
.pshint{margin:7px 2px 2px;font-size:11px;color:#8a8a8e}

.psbody{padding:4px 0 12px;overflow-y:auto;background:#fff}
.pssection{padding:11px 15px 5px;font:600 10.5px/1 -apple-system,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8e}
.psrow{display:flex;gap:10px;align-items:flex-start;padding:8px 15px}
.psav{width:36px;height:36px;border-radius:50%;flex:none;object-fit:cover;background:#d7d7db}
.psfallback{display:flex;align-items:center;justify-content:center;font:600 14px/1 system-ui;color:#fff;background:#9aa3a0}
.psmeta{min-width:0;flex:1}
.psname{font-size:14.5px;color:#111}
.pstag{font-size:11px;color:#8a8a8e}
.pssub{font-size:12px;color:#8a8a8e;margin-top:1px}
.pswhy{font-size:12px;line-height:1.4;color:#55605c;margin-top:2px}
.psdisc{border-left:2px solid rgba(11,138,108,.4)}
.pswaiting{padding:26px 15px;font-size:13px;color:#8a8a8e}
.psreset{margin:12px 15px 0;border:1px solid rgba(0,0,0,.14);background:#fff;border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;color:#6d7a75;cursor:pointer}

@media(prefers-reduced-motion:reduce){
  .psglobe,.pscaret{animation:none}
}