/* ToUpper — one page. Ink, paper, one accent; whitespace does the work. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#111418;
  --ink-2:#3C424C;
  --paper:#FFFFFF;
  --bg:#FAF9F7;
  --line:#E5E2DC;
  --line-2:#CDC9C1;
  --muted:#767C86;
  --accent:#1F3BEE;
  --accent-wash:#EFF1FE;
  --lime:#DDF56A;
  --r:8px;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
a,button,summary,input,label{-webkit-tap-highlight-color:rgba(31,59,238,.12)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-0.022em; font-weight:600}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; cursor:pointer}
a{color:var(--accent)}

.wrap{
  max-width:760px; margin:0 auto;
  padding-left:max(24px, env(safe-area-inset-left));
  padding-right:max(24px, env(safe-area-inset-right));
}
.muted{color:var(--muted)}
.small{font-size:14.5px}
.tiny{font-size:12.5px}
.mono{font-family:var(--mono)}
.body{color:var(--ink-2)}
.eyebrow{
  display:block; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.mark{background:linear-gradient(transparent 64%, var(--lime) 64%)}
.hide{display:none !important}

/* ------------------------------------------------------------------ head */
.topbar{
  border-bottom:1px solid var(--line); background:var(--bg);
  display:flex; align-items:center; gap:14px; padding:14px 0;
}
.logo{font-family:var(--mono); font-weight:500; font-size:17px; letter-spacing:-.03em; text-decoration:none; color:var(--ink)}
.logo span{color:var(--muted)}
.topbar .tiny{margin-left:auto; text-align:right}

/* ------------------------------------------------------------------ hero */
.hero{padding:56px 0 40px}
.hero h1{font-size:clamp(30px,4.4vw,42px); line-height:1.12; letter-spacing:-0.03em}
.hero p{margin-top:18px; font-size:18px; color:var(--ink-2); max-width:54ch}

/* ------------------------------------------------------------------ story */
.beats{margin-top:6px}
.beat{
  display:flex; gap:16px; align-items:flex-start; width:100%; text-align:left;
  background:none; border:0; border-top:1px solid var(--line); padding:14px 0;
}
.beat:last-child{border-bottom:1px solid var(--line)}
@media (hover:hover){.beat:hover .bt{color:var(--accent)}}
.beat.on{background:var(--accent-wash)}
.beat.on .bw{color:var(--accent)}
.bw{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  white-space:nowrap; padding-top:3px; width:62px; flex:none;
}
.bt{font-size:15.5px; color:var(--ink-2); line-height:1.55}
.bt b{font-weight:500; color:var(--ink)}
.beat .ba{
  font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:5px; display:block;
}

/* ----------------------------------------------------------------- chips */
.section{padding:36px 0; border-top:1px solid var(--line)}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
.chip{
  border:1px solid var(--line-2); background:var(--paper); border-radius:100px;
  padding:6px 13px; font-size:14px; color:var(--ink-2); transition:.12s ease;
}
@media (hover:hover){.chip:hover{border-color:var(--ink); color:var(--ink)}}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.clear{border:0; background:none; color:var(--accent); font-size:14px; padding:6px 4px}

/* ---------------------------------------------------------------- agents */
.mark-sq{
  width:34px; height:34px; border-radius:8px; flex:none; display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; font-weight:500; color:#fff; letter-spacing:.02em;
}
.agent{border-top:1px solid var(--line)}
.agent:last-child{border-bottom:1px solid var(--line)}
.agent.open{background:var(--paper)}
.ahead{
  display:flex; gap:14px; align-items:flex-start; width:100%;
  background:none; border:0; padding:15px 0; text-align:left;
}
.agent.open .ahead{padding-left:14px; padding-right:14px}
@media (hover:hover){.ahead:hover .acode{color:var(--accent)}}
.ab{flex:1; min-width:0; display:block}
.ac-row{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.acode{font-size:15.5px; font-weight:600; letter-spacing:-.012em}
.atitle{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.06em;
  text-transform:uppercase}
.amandate{display:block; font-size:14.5px; color:var(--ink-2); margin-top:3px; line-height:1.5}
.axs{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.ax{font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line);
  border-radius:100px; padding:2px 8px}
.ax.on{border-color:var(--accent); color:var(--accent)}
.agent.open .caret{color:var(--accent)}

.adetail{padding:0 14px 24px 62px}
.aopinion{
  font-size:16px; line-height:1.5; color:var(--ink); border-left:2px solid var(--lime);
  padding-left:14px; margin-bottom:22px; max-width:56ch;
}
.acols{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:22px}
.acols .eyebrow{margin-bottom:9px}
.aqa{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:24px}
.aq,.ah{font-size:14.5px; color:var(--ink-2); margin-top:2px}
.aq{font-weight:500; color:var(--ink)}

.transcript{border:1px solid var(--line); border-radius:10px; padding:16px 18px; background:var(--bg); margin-bottom:20px}
.turns{margin:12px 0 10px}
.agent.open .turn{animation:rise .34s cubic-bezier(.2,.7,.3,1) both}
.agent.open .turn:nth-child(2){animation-delay:.13s}
@keyframes rise{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.turn{display:grid; grid-template-columns:58px 1fr; gap:14px; padding:10px 0}
.turn + .turn{border-top:1px solid var(--line)}
.who{font-family:var(--mono); font-size:11.5px; color:var(--muted); padding-top:3px}
.turn.bot .who{color:var(--accent)}
.said p{font-size:14.5px; line-height:1.6; color:var(--ink-2)}
.said p + p{margin-top:8px}
.turn.you .said p{color:var(--ink); font-weight:500}

@media (max-width:760px){
  .adetail{padding-left:14px}
  .acols,.aqa{grid-template-columns:1fr; gap:18px}
  .turn{grid-template-columns:1fr; gap:4px}
}

/* rules the agent cards depend on */
.caret{color:var(--muted); font-family:var(--mono); font-size:14px; padding-top:8px; flex:none}
.list li{position:relative; padding-left:18px; margin-bottom:11px; color:var(--ink-2);
  line-height:1.55; font-size:14.5px}
.list li:last-child{margin-bottom:0}
.list li:before{content:''; position:absolute; left:1px; top:8px; width:5px; height:5px;
  border-radius:50%; background:var(--accent); opacity:.45}
.facts{font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--muted);
  border-left:2px solid var(--line-2); padding-left:12px; margin:16px 0}
.empty{padding:32px 0; color:var(--muted)}

/* ----------------------------------------------------------------- forms */
.btn{
  display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 18px;
  border-radius:var(--r); font-size:15px; font-weight:500; text-decoration:none;
  border:1px solid transparent; background:var(--accent); color:#fff;
}
@media (hover:hover){.btn:hover{background:#152CBE}}
.btn-sm{height:34px; padding:0 13px; font-size:14px}
.field{display:block; margin-bottom:16px}
.field > span{display:block; font-size:14px; font-weight:500; margin-bottom:6px}
.input{
  width:100%; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--paper); padding:10px 12px; font-size:15px; font-family:inherit;
}
textarea.input{min-height:96px; resize:vertical; line-height:1.6}
.input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.note{font-size:13.5px; color:var(--muted); padding:11px 13px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r); margin-bottom:16px}

.foot{border-top:1px solid var(--line); margin-top:8px; padding:24px 0 48px; font-size:13px; color:var(--muted)}

@media (max-width:640px){
  .hero{padding:40px 0 32px}
  .two{grid-template-columns:1fr}
  .adetail{padding-left:14px}
  .beat{flex-direction:column; gap:4px}
  .bw{width:auto; padding-top:0}
  .topbar .tiny{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-delay:0s !important}}

/* ========================================================== utilities ==== */
/* Named classes rather than style="" so the CSP can refuse
   style-src 'unsafe-inline'. */
.mt-1{margin-top:14px}
.mt-2{margin-top:22px}
.mb-2{margin-bottom:22px}
.lead-gap{margin:8px 0 20px}
.measure{max-width:58ch}
.h-sm{font-size:20px}
.full{width:100%}

/* -------------------------------------------------------- variant switch */
.switch{display:flex; gap:2px; margin-left:auto; align-items:center}
.switch a{
  font-family:var(--mono); font-size:11.5px; text-decoration:none; color:var(--muted);
  padding:4px 8px; border-radius:100px; border:1px solid transparent; white-space:nowrap;
}
@media (hover:hover){.switch a:hover{color:var(--ink)}}
.switch a.on{color:var(--ink); border-color:var(--line-2); background:var(--paper)}
.topbar .tiny.demo{margin-left:0}

/* --------------------------------------------------------------- tracks */
.track{border-top:1px solid var(--line); padding-top:26px; margin-top:34px}
.track h3{font-size:22px; letter-spacing:-.024em; max-width:22ch}
.track .tb{color:var(--ink-2); margin:12px 0 18px; max-width:58ch; font-size:15.5px}
.trow{
  display:grid; grid-template-columns:172px 1fr; gap:16px;
  padding:11px 0; border-top:1px solid var(--line); align-items:baseline;
}
.trow:last-of-type{border-bottom:1px solid var(--line)}
.tk{font-size:14.5px; font-weight:500}
.tv{font-size:14.5px; color:var(--ink-2); line-height:1.55}
.track .cta{margin-top:18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* ================================================= variant B — triage ==== */
body.vb{background:var(--bg)}
.vb .slab{background:var(--ink); color:#EDEEF1; margin-bottom:0; padding:52px 0 44px}
.vb .slab h1{font-size:clamp(28px,4vw,40px); line-height:1.14; letter-spacing:-.03em; max-width:20ch}
.vb .slab p{color:#B3B8C2; margin-top:16px; max-width:52ch; font-size:17px}
.vb .slab .eyebrow{color:#8B93A1}
.vb .slab .stat{display:flex; gap:34px; margin-top:30px; flex-wrap:wrap}
.vb .slab .stat b{display:block; font-family:var(--mono); font-size:24px; font-weight:500; color:#fff}
.vb .slab .stat span{font-size:12.5px; color:#8B93A1}
.vb .twocol{display:grid; grid-template-columns:1fr 1fr; gap:34px}
.vb .twocol .track{margin-top:0}
.vb .trow{grid-template-columns:1fr; gap:2px; padding:10px 0}

/* ================================================== variant C — index ==== */
body.vc .wrap{max-width:900px}
.vc .grid-head{
  display:grid; grid-template-columns:1fr 118px 68px; gap:12px; padding:8px 0;
  border-bottom:1px solid var(--line-2); font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.vc .arow{
  display:grid; grid-template-columns:1fr 118px 68px; gap:12px; width:100%;
  padding:10px 0; border-bottom:1px solid var(--line); background:none; border-left:0;
  border-right:0; border-top:0; text-align:left; align-items:baseline;
}
@media (hover:hover){.vc .arow:hover .an{color:var(--accent)}}
.vc .arow.on{background:var(--accent-wash)}
.vc .an,.vc .ad{display:block}
.vc .an{font-size:15px; font-weight:500}
.vc .ad{font-size:13.5px; color:var(--muted); margin-top:2px}
.vc .ag,.vc .ac{font-family:var(--mono); font-size:12px; color:var(--muted)}
.vc .ac{text-align:right}
.vc .groupbar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px}
.vc details{border-top:1px solid var(--line)}
.vc details:last-of-type{border-bottom:1px solid var(--line)}
.vc summary{
  padding:14px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:500;
  display:flex; gap:12px; align-items:baseline;
}
.vc summary::-webkit-details-marker{display:none}
.vc summary:before{content:'+'; font-family:var(--mono); color:var(--muted)}
.vc details[open] summary:before{content:'–'}
.vc summary .sd{font-size:14px; font-weight:400; color:var(--muted)}
.vc .dbody{padding:0 0 20px 24px}

@media (max-width:760px){
  .vb .twocol{grid-template-columns:1fr; gap:26px}
  .trow{grid-template-columns:1fr; gap:2px}
  .vc .grid-head{display:none}
  .vc .arow{grid-template-columns:1fr auto; gap:4px 12px}
  .vc .ag{display:none}
  .switch{width:100%; margin:8px 0 0}
}

.note.accent{border-color:var(--accent)}

/* =========================================================== capture ==== */
.capture{
  border:1px solid var(--line-2); border-radius:12px; background:var(--paper);
  padding:22px 24px; margin-top:28px;
}
.capture h3{font-size:17px; letter-spacing:-.015em}
.ctext p{font-size:14.5px; color:var(--ink-2); margin-top:6px; max-width:60ch}
.crow{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.crow .input{flex:1; min-width:220px; height:42px}
.crow .btn{flex:none}
.cnote{margin-top:10px}
.cerr{color:var(--warn); display:block; min-height:1em}
.cnote .cerr{display:inline}
.capture.done{border-color:var(--accent); border-left-width:3px}
.cdone{font-size:15px; color:var(--ink)}

/* honeypot: reachable by bots, invisible and unfocusable for people */
.hp{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media (max-width:640px){
  .capture{padding:18px}
  .crow .btn{width:100%}
}

/* ============================================================== focus ==== */
/* Keyboard users need to see where they are. Mouse users never see these. */
/* element+pseudo (0,1,1) so it always beats a bare class rule */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.ahead:focus-visible,.beat:focus-visible{outline-offset:-2px}
.input:focus-visible{outline-offset:-1px}
.skip{
  position:absolute; top:0; left:0; transform:translateY(-110%);
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
  z-index:50; text-decoration:none; font-size:15px;
}
.skip:focus{transform:none}


/* ============================================================== mobile ==== */
/* Touch targets follow the 44px guidance; inputs sit at 16px so iOS Safari
   does not zoom the page when a field takes focus. */
@media (max-width:760px){

  /* The switcher just overflowed 375px sitting beside the logo. Give it a row. */
  .topbar{flex-wrap:wrap; gap:6px 14px; padding:12px 0}
  .switch{margin-left:auto; gap:0}
  .switch a{font-size:12px; padding:10px 10px; min-height:44px; display:flex; align-items:center}
  .logo{min-height:44px; display:flex; align-items:center}
  .topbar .tiny{flex-basis:100%; margin-left:0; text-align:left; order:3}

  /* Fields at 16px, and taller so they are comfortable to hit. */
  .input,.crow .input{font-size:16px; min-height:46px}
  textarea.input{min-height:120px}
  select.input{min-height:46px}

  /* Chips and small buttons reach a real touch target. */
  .chip{min-height:44px; padding:0 15px; display:inline-flex; align-items:center; font-size:14.5px}
  .chips{gap:8px}
  .btn{min-height:46px}
  .btn-sm{min-height:44px; padding:0 16px; font-size:15px}
  .clear{min-height:44px; padding:0 4px}

  /* The disclosure row is the primary control on the page. */
  .ahead{padding:16px 0; gap:12px}
  .agent.open .ahead{padding-left:12px; padding-right:12px}
  .caret{min-width:28px; text-align:right; font-size:16px}
  .adetail{padding:0 12px 22px}

  /* Long agent names should wrap rather than crowd the title row. */
  .ac-row{gap:4px 8px}
  .acode{font-size:16px}
  .amandate{font-size:15px}

  /* Transcript reads as a thread, not a two-column table. */
  .turn{grid-template-columns:1fr; gap:5px; padding:12px 0}
  .who{font-size:11px; letter-spacing:.06em; text-transform:uppercase}
  .said p{font-size:15px}
  .transcript{padding:14px}

  /* Story beats stack; the week label becomes a lead-in. */
  .beat{padding:16px 0}
  .bt{font-size:15px}

  .track h3{font-size:20px}
  .capture{padding:18px}
  .crow{gap:10px}
  .crow .btn{width:100%}
}

@media (max-width:380px){
  .wrap{padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right))}
  .switch a{padding:10px 7px; font-size:11.5px}
  .chip{font-size:14px; padding:0 13px}
  .hero h1{font-size:29px}
}

/* Short viewports in landscape: reclaim vertical space. */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:28px 0 22px}
  .section{padding:26px 0}
}

/* ------------------------------------------------ entry point to the chat */
.askcta{
  display:flex; flex-direction:column; gap:3px; margin:24px 0 4px; padding:14px 16px;
  border:1px solid var(--line-2); border-radius:12px; background:var(--paper); text-decoration:none;
}
.askcta-q{font-size:14.5px; color:var(--ink-2)}
.askcta-a{font-size:15.5px; font-weight:500; color:var(--accent)}
@media (hover:hover){.askcta:hover{border-color:var(--accent)}}
body.vb .askcta{margin-top:20px}

/* ================================================================ ask ==== */
/* "What is this thing?" — a chat that answers from the glossary. The thread
   scrolls with the page rather than inside a box, so answers print and link
   cleanly; the question bar sticks to the bottom of the viewport. */

.toplink{margin-left:auto; font-size:14px; text-decoration:none; color:var(--ink-2); min-height:44px; display:inline-flex; align-items:center}
@media (hover:hover){.toplink:hover{color:var(--accent)}}

.askhead{padding:40px 0 18px}
.askhead h1{font-size:clamp(28px,4.2vw,38px); line-height:1.12; letter-spacing:-.03em; margin-top:2px}
.askhead p{font-size:17px; color:var(--ink-2); margin-top:14px; max-width:58ch}

.thread{display:flex; flex-direction:column; gap:16px; padding:10px 0 24px}
.msg.user{align-self:flex-end; max-width:82%}
.msg.user p{
  background:var(--ink); color:#fff; padding:10px 15px; border-radius:16px 16px 4px 16px;
  font-size:15.5px; line-height:1.45; overflow-wrap:anywhere;
}
.msg.bot{align-self:stretch}
.msg.greet > p,.unk > p{font-size:16px; color:var(--ink-2); max-width:60ch}
.starters{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.unk-l{font-size:14px; color:var(--muted); margin-top:14px}
.unk .capture{margin-top:20px}
.msg.fresh{animation:rise .32s cubic-bezier(.2,.7,.3,1) both}

.typing{display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; background:var(--paper);
  border:1px solid var(--line); border-radius:14px}
.typing-who{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2)}
.typing-who .mark-sq{width:26px; height:26px; font-size:10px; border-radius:6px}
.dots{display:inline-flex; gap:4px}
.dots span{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:blink 1s infinite ease-in-out}
.dots span:nth-child(2){animation-delay:.15s}
.dots span:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25} 40%{opacity:1}}

/* the answer card */
.ans{background:var(--paper); border:1px solid var(--line-2); border-radius:14px; overflow:hidden}
.ans-s{padding:22px 24px; border-bottom:1px solid var(--line)}
.ans-name{font-size:28px; letter-spacing:-.03em; line-height:1.1; margin-top:2px}
.ans-aka{font-size:14.5px; color:var(--muted); margin-top:4px}
.ans-body{font-size:16px; line-height:1.65; color:var(--ink); margin-top:14px; max-width:62ch}
.ans-why{font-size:15px; line-height:1.6; color:var(--ink-2); margin-top:12px; max-width:62ch}
.ans-why b{font-weight:600; color:var(--ink)}

.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:10px; padding:3px; margin:4px 0 16px; background:var(--bg)}
.seg button{border:0; background:transparent; font-size:14px; padding:8px 14px; border-radius:7px; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--paper); color:var(--ink); box-shadow:0 1px 2px rgba(17,20,24,.08), 0 0 0 1px var(--line-2)}

.est-range{font-size:17px; color:var(--ink-2)}
.est-range b{font-family:var(--mono); font-weight:500; font-size:40px; letter-spacing:-.04em; color:var(--ink); margin-right:6px}
.est-sub{font-size:15px; color:var(--ink); margin-top:4px}
.est-scope{font-size:14.5px; color:var(--ink-2); margin-top:10px; max-width:62ch}
.est-extra{font-size:14px; color:var(--ink-2); margin-top:10px; padding:10px 12px; background:var(--bg); border-radius:8px; max-width:62ch}

.drv{border:0; padding:0; margin:18px 0 0}
.drv legend{font-size:13px; font-weight:500; color:var(--muted); margin-bottom:6px; padding:0}
.drv-row{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line); cursor:pointer}
.drv-row input{accent-color:var(--accent); width:18px; height:18px; margin:2px 0 0; flex:none; cursor:pointer}
.drv-l{flex:1; font-size:15px; color:var(--ink); line-height:1.45}
.drv-a{font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap; padding-top:3px}
.drv-row input:checked ~ .drv-a{color:var(--accent)}

.q-lede{font-size:14px; color:var(--muted); margin:2px 0 6px}
.qg{margin-top:16px}
.qg-h{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.qg-l{margin-top:6px}
.qg-l li{padding:9px 0 9px 22px; position:relative; border-top:1px solid var(--line)}
.qg-l li:before{content:''; position:absolute; left:3px; top:18px; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.5}
.q-q{display:block; font-size:15.5px; color:var(--ink); line-height:1.45}
.q-why{display:block; font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.5}

.ans-agent{display:flex; gap:12px; align-items:flex-start; padding:18px 24px; border-bottom:1px solid var(--line); background:var(--bg)}
.ans-agent p{font-size:14.5px; color:var(--ink-2); line-height:1.55}
.ans-agent b{color:var(--ink); font-weight:600}
.ans-agent em{color:var(--ink)}
.ans-agent a{white-space:nowrap}

.ans-act{display:flex; flex-wrap:wrap; gap:8px; padding:16px 24px; border-bottom:1px solid var(--line)}
.act{
  font:inherit; font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--line-2);
  border-radius:8px; padding:8px 13px; text-decoration:none; display:inline-flex; align-items:center; cursor:pointer;
}
@media (hover:hover){.act:hover{border-color:var(--ink)}}
.act.ok{border-color:var(--good); color:var(--good)}

.ans .capture{margin:0; border:0; border-radius:0; padding:22px 24px; background:var(--paper)}
.ans .capture.done{border-left:3px solid var(--accent)}
.acap-p{font-size:14.5px; color:var(--ink-2); margin-top:6px; max-width:58ch}
.acap-when{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.acap-when .chip{font-size:13px}

.fu{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px}
.fu-l{font-size:13px; color:var(--muted); margin-right:2px}

.askbar{
  position:sticky; bottom:0; z-index:20; display:flex; gap:8px; align-items:center;
  padding:12px 0 max(12px, env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 78%, rgba(250,249,247,0));
}
.askbar .input{flex:1; font-size:16px; min-height:48px; border-radius:12px}
.askbar .btn{min-height:48px; border-radius:12px; padding:0 20px}
.askfoot{padding:6px 0 40px; max-width:62ch}

@media (max-width:760px){
  .askhead{padding:26px 0 10px}
  .askhead p{font-size:16px}
  .msg.user{max-width:90%}
  .ans-s,.ans-agent,.ans-act,.ans .capture{padding-left:16px; padding-right:16px}
  .ans-name{font-size:25px}
  .est-range b{font-size:34px}
  .seg{display:flex}
  .seg button{flex:1; min-height:44px}
  .drv-row{padding:12px 0}
  .drv-a{font-size:11.5px}
  .ans-act{display:grid; grid-template-columns:1fr 1fr}
  .act{min-height:44px; justify-content:center}
  .acap-when .chip{font-size:14px}
}

/* Save as PDF: one clean answer, no chrome, no forms. */
@media print{
  @page{margin:16mm}
  body{background:#fff}
  .topbar,.askhead,.askbar,.askfoot,.skip,.ans-act,.ans .capture,.fu,.msg.user,.msg.greet,.typing,.drv-row input{display:none !important}
  body.printing .msg.bot:not(:has(.print-target)){display:none !important}
  .ans{border:0; border-radius:0}
  .ans-s,.ans-agent{padding:12px 0; break-inside:avoid}
  .drv-row{border:0; padding:3px 0}
  .drv-row:not(:has(input:checked)){display:none}
  .drv legend{margin-bottom:2px}
  .ans-agent{background:#fff}
  .ans:after{content:"toupper.vercel.app/what"; display:block; margin-top:14px; font-family:var(--mono); font-size:10px; color:#767C86}
}

/* ===================================================== Ask our Agents ==== */
/* The agent who owns the topic signs each answer. */
.ans-by{display:flex; align-items:center; gap:10px; margin:0 0 8px 2px}
.ans-by b{display:block; font-size:14.5px; font-weight:600; line-height:1.2}
.ans-by-t{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.ans-by .mark-sq{width:30px; height:30px; font-size:10.5px}
.q-more{display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font-size:14.5px; font-weight:500; text-decoration:none}
.act-primary{background:var(--ink); color:#fff; border-color:var(--ink)}
@media (hover:hover){.act-primary:hover{background:#000; border-color:#000}}

/* overlapping marks: "these people are here" */
.aoa-faces{display:inline-flex; flex:none}
.aoa-faces .mark-sq{width:26px; height:26px; font-size:0; border-radius:50%; box-shadow:0 0 0 2px var(--paper)}  /* initials clip when overlapped */
.aoa-faces .mark-sq + .mark-sq{margin-left:-8px}
.askhead-faces{margin-bottom:14px}
.askhead-faces .mark-sq{width:32px; height:32px; box-shadow:0 0 0 2px var(--bg)}
.askhead-sub{font-size:19px !important; font-weight:500; color:var(--ink) !important; margin-top:6px !important}

/* launcher */
.aoa-launch{
  position:fixed; z-index:60; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:8px 18px 8px 10px;
  border:0; border-radius:100px; background:var(--ink); color:#fff; font-size:15px; font-weight:500;
  box-shadow:0 8px 24px rgba(17,20,24,.22), 0 2px 6px rgba(17,20,24,.14);
  transition:transform .15s ease;
}
.aoa-launch .aoa-faces .mark-sq{box-shadow:0 0 0 2px var(--ink)}
@media (hover:hover){.aoa-launch:hover{transform:translateY(-2px)}}
.aoa-open .aoa-launch{display:none}

/* panel */
.aoa-panel{
  position:fixed; z-index:70; right:20px; bottom:20px;
  width:min(440px, calc(100vw - 40px)); height:min(740px, calc(100vh - 40px));
  display:flex; flex-direction:column; background:var(--bg);
  border:1px solid var(--line-2); border-radius:18px; overflow:hidden;
  box-shadow:0 24px 64px rgba(17,20,24,.24), 0 4px 14px rgba(17,20,24,.1);
  animation:aoa-in .22s cubic-bezier(.2,.7,.3,1) both;
}
.aoa-panel[hidden]{display:none}
@keyframes aoa-in{from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none}}

.aoa-head{display:flex; align-items:center; gap:12px; padding:12px 12px 12px 16px; border-bottom:1px solid var(--line); background:var(--paper)}
.aoa-title{flex:1; min-width:0}
.aoa-title b{display:block; font-size:16px; letter-spacing:-.015em}
.aoa-title span{display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aoa-close{
  width:44px; height:44px; flex:none; border:0; border-radius:10px; background:transparent;
  font-size:26px; line-height:1; color:var(--ink-2);
}
@media (hover:hover){.aoa-close:hover{background:var(--bg); color:var(--ink)}}

.aoa-body{flex:1; min-height:0; display:flex; flex-direction:column}
.aoa-scroll{position:relative; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 14px 0}
.aoa-panel .thread{padding:12px 0 18px; gap:14px}
.aoa-panel .askbar{position:static; background:var(--bg); border-top:1px solid var(--line); padding:10px 12px}
.aoa-panel .askbar .input,.aoa-panel .askbar .btn{min-height:46px}
.aoa-foot{font-size:11.5px; color:var(--muted); padding:0 14px 10px; line-height:1.45}

/* shorter answers in the panel */
.aoa-panel .msg.greet > p{font-size:15px}
.aoa-panel .ans-s,.aoa-panel .ans-agent,.aoa-panel .ans-act,.aoa-panel .ans .capture{padding:16px}
.aoa-panel .ans-name{font-size:22px}
.aoa-panel .ans-body{font-size:15px}
.aoa-panel .ans-why,.aoa-panel .est-scope{font-size:14px}
.aoa-panel .est-range b{font-size:30px}
.aoa-panel .seg{display:flex}
.aoa-panel .seg button{flex:1}
.aoa-panel .ans-act{display:grid; grid-template-columns:1fr 1fr}
.aoa-panel .act{justify-content:center; min-height:42px}
.aoa-panel .act-primary{grid-column:1 / -1}
.aoa-panel .msg.user{max-width:88%}

@media (max-width:760px){
  .aoa-launch{min-height:50px; padding:6px 16px 6px 8px; font-size:14.5px}
  .aoa-open,.aoa-open body{overflow:hidden}
  .aoa-panel{
    inset:0; right:auto; bottom:auto; width:100%; height:100%; height:100dvh;
    border:0; border-radius:0; animation-name:aoa-up;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  }
  .aoa-panel .askbar .input{font-size:16px}
  .aoa-panel .act{min-height:44px}
}
@keyframes aoa-up{from{transform:translateY(24px); opacity:0} to{transform:none; opacity:1}}

@media print{ .aoa-launch,.aoa-panel{display:none !important} }