/* The product-style panels the home page and the Korium page share: the
   example question and its answer (.demo), and the home page's chat, tiles
   and memory-with-two-readers panels (.mock). Plain markup, no script, in the
   site's own colors, so they read as text in the markdown copies too.
   Stamped with ?v= by scripts/generate-brand-chrome.mjs. */
/* The example on the right: the question Jane types and the answer Korium
   gives her. Static markup, no script; every word is site copy. */
.demo{display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.45}
.demo-label{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-light)}
.demo-lead{margin:0 0 4px;font:400 22px/1.3 var(--font-display);color:var(--white);text-wrap:balance}
.demo-prompt{display:flex;gap:10px;align-items:baseline;padding:14px 18px;border-radius:var(--radius-sm);background:#2c2622;border:1px solid var(--midnight-50);color:var(--white);font-size:16px}
.demo-cursor{color:var(--coral-light);font-weight:700}
/* In an example that switches (.demo-switch, the Korium page), one answer
   shows from the first paint and the chips wait for the script, which marks
   the example live and switches the answer on. Hidden by class, never by the
   hidden attribute: the markdown copy drops that attribute and ignores
   styles, so it carries every answer under its question. The home page's
   example has one answer and never switches, so the rule does not reach it. */
.demo-chips{display:none;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.demo-live .demo-chips{display:flex}
.demo-chip{padding:6px 12px;border-radius:var(--radius-full);border:1px solid var(--midnight-50);color:rgba(255,255,255,.7);font-size:13px}
.demo-chip{font:inherit;font-size:13px;background:transparent;cursor:pointer;line-height:1.3}
.demo-chip:hover{border-color:var(--white);color:var(--white)}
.demo-chip[aria-pressed="true"]{background:var(--coral-deep);border-color:var(--coral-deep);color:var(--white);font-weight:700}
.demo-chip:focus-visible{outline:2px solid var(--teal-light);outline-offset:2px}
.demo-switch .demo-answer:not(.demo-on){display:none}
.demo-q{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--teal-ink)}
.demo-q::before{content:"› "}
.demo-live .demo-q{display:none}
.demo-answer{background:var(--white);color:var(--midnight);border-radius:var(--radius-sm);padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.demo-head{margin:0 0 4px;display:flex;flex-direction:column;gap:2px}
.demo-head strong{font:400 22px/1.2 var(--font-display)}
.demo-head span{font-size:13px;color:var(--midnight-50)}
.demo-section{margin:8px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);border-top:1px solid var(--midnight-15);padding-top:10px}
.demo-section-coral{color:var(--coral-deep)}
.demo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.demo-list li{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:2px solid var(--midnight-15)}
.demo-section-coral+.demo-list li{border-left-color:var(--coral)}
.demo-list span{color:var(--midnight)}
.demo-list small{font-size:12px;color:var(--midnight-50)}
.demo-owners{margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--midnight-50)}
.demo-owners strong{color:var(--midnight);margin-left:6px}
.demo-foot{margin:6px 0 0;font-size:12px;color:var(--midnight-50);border-top:1px solid var(--midnight-15);padding-top:10px}
.demo-coming{margin:0;font-size:13px;color:rgba(255,255,255,.7)}
.demo-coming strong{color:var(--coral-light)}
.demo-home .demo-answer{box-shadow:0 18px 50px rgba(0,0,0,.45)}

.mock{font-size:14px;line-height:1.45;color:var(--midnight)}
/* Jane: two chats side by side. */
.mock-chat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.chat{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--midnight-15)}
.chat-after{border-color:var(--coral);box-shadow:0 12px 36px rgba(31,26,23,.12)}
.chat-label{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--midnight-50)}
.chat-after .chat-label{color:var(--coral-deep)}
.msg{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--midnight-05)}
.msg b{font-size:12px;color:var(--midnight-50)}
.msg span{color:var(--midnight)}
.msg small{font-size:12px;color:var(--teal-ink);font-weight:700}
.msg time{font-size:11px;color:var(--midnight-50)}
.msg-ring{background:var(--coral-wash);border:1px solid var(--coral)}
.msg-ring span{color:var(--coral-deep);font-weight:700}
.msg-korium{background:var(--teal-wash);border:1px solid var(--teal)}
.msg-korium b{color:var(--teal-ink)}
.msg-quiet{background:transparent;border:1px dashed var(--midnight-15)}
.msg-quiet span{color:var(--midnight-50)}
/* The real problem: four tiles. */
.mock-tiles{display:flex;flex-direction:column;gap:14px}
.tiles-title{margin:0;padding:12px 16px;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--midnight);font:400 20px/1.3 var(--font-display)}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tiles li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--midnight-15);min-height:84px}
.tiles b{font-size:16px}
.tiles span{color:var(--midnight-50)}
.tiles .tile-agent{background:var(--teal-wash);border-color:var(--teal)}
.tiles .tile-agent b{color:var(--teal-ink)}
.tiles-foot{margin:0;font-size:13px;color:var(--midnight-50)}
/* People first: one memory, two readers. */
.mock-readers{display:flex;flex-direction:column;gap:14px}
.memory-card{padding:18px 20px;border-radius:var(--radius-sm);background:var(--coral-wash);border:2px solid var(--coral);display:flex;flex-direction:column;gap:6px}
.memory-kind{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep)}
.memory-text{margin:0;font:400 20px/1.3 var(--font-display);color:var(--midnight)}
.memory-meta{margin:0;font-size:13px;color:var(--midnight-50)}
.readers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reader{padding:14px 16px;border-radius:var(--radius-sm);background:var(--white);border:1px solid var(--midnight-15);display:flex;flex-direction:column;gap:6px}
.reader p{margin:0}
.reader-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--midnight)}
.reader-agent{background:var(--teal-wash);border-color:var(--teal)}
.reader-agent .reader-label{color:var(--teal-ink)}
@media(max-width:1023px){.demo{max-width:640px}.mock{max-width:640px}}
@media(max-width:560px){.mock-chat,.tiles,.readers{grid-template-columns:minmax(0,1fr)}}