/* ============================================================
   TALOS COGNITIVE SYSTEMS — site styles
   Palette: live console. Type: business card.
   Ink #0D0D11 · Signal Red #C13527 · Deep Read Navy #0F1B2E
   Paper #F2F2F4 · Graphite #8A8B96
   Display: Cormorant Garamond · Utility/caps: Archivo
   ============================================================ */

:root{
  --ink:#0D0D11;
  --panel:#16161C;
  --line:#2A2A33;
  --red:#C13527;
  --red-bright:#E04530;
  --navy:#0F1B2E;
  --navy-line:#24354E;
  --paper:#F2F2F4;
  --paper-dim:#C9CAD3;
  --mute:#8A8B96;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  background:var(--ink);
  color:var(--paper-dim);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}

/* ---------- type roles ---------- */
.caps, .eyebrow, .navlinks a, .footer .caps{
  font-family:'Archivo',sans-serif;text-transform:uppercase;
  letter-spacing:.28em;font-weight:500;font-size:.72rem;
}
h1,h2,h3,.serif{
  font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--paper);
  font-weight:600;
  line-height:1.12;
}
h1{font-size:clamp(2.4rem,5.2vw,4.2rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.35rem}
p.lede{font-size:1.12rem;color:var(--paper-dim)}
.red{color:var(--red-bright)}
.dim{color:var(--mute)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:88px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:880px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(13,13,17,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:34px;width:34px}
.brand .name{font-family:'Archivo';letter-spacing:.3em;font-weight:600;font-size:.85rem;color:var(--paper)}
.brand .name span{color:var(--mute);font-weight:400}
.navlinks{display:flex;gap:34px}
.navlinks a{color:var(--mute);transition:color .15s}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--paper)}
.navlinks a[aria-current]{border-bottom:1px solid var(--red)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--paper);
  padding:8px 14px;font-family:'Archivo';letter-spacing:.2em;font-size:.7rem;text-transform:uppercase;cursor:pointer}
@media(max-width:760px){
  .navlinks{display:none;position:absolute;top:68px;left:0;right:0;background:var(--ink);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:12px 24px 20px}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
}

/* ---------- hero ---------- */
.hero{padding:120px 0 96px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-60px;top:-40px;width:560px;height:680px;
  background:url('../img/hero-mark.png') no-repeat center/contain;
  pointer-events:none;
}
@media(max-width:880px){.hero::after{opacity:.5;right:-160px}}
.hero h1{max-width:820px;margin:20px 0 26px}
.hero .lede{max-width:640px}
.hero .cta{margin-top:40px;display:flex;gap:18px;flex-wrap:wrap}

.btn{
  display:inline-block;padding:14px 30px;
  font-family:'Archivo';text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:600;
  border:1px solid var(--red);color:var(--paper);background:var(--red);
  transition:background .15s,color .15s;
}
.btn:hover{background:transparent;color:var(--red-bright)}
.btn.ghost{background:transparent;color:var(--paper-dim);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--paper);color:var(--paper)}

/* ---------- signature: nudge chips (the product's own UI language) ---------- */
.chip{
  background:var(--panel);
  border-left:3px solid var(--red);
  padding:18px 22px;
  margin:14px 0;
  max-width:560px;
}
.chip .tag{
  font-family:'Archivo';text-transform:uppercase;letter-spacing:.26em;
  font-size:.66rem;font-weight:600;color:var(--red-bright);display:block;margin-bottom:6px;
}
.chip p{color:var(--paper);font-size:.98rem;line-height:1.5}
.chip.deep{border-left-color:#4A78B8;background:var(--navy)}
.chip.deep .tag{color:#7FA6D9}

/* typing reveal on hero chips */
.chip.reveal{opacity:0;transform:translateY(8px);animation:chipin .5s ease forwards}
.chip.reveal:nth-of-type(2){animation-delay:.9s}
.chip.reveal:nth-of-type(3){animation-delay:1.8s}
@keyframes chipin{to{opacity:1;transform:none}}

/* ---------- stat band ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0}
.stat .n{font-family:'Cormorant Garamond',serif;font-size:2.9rem;color:var(--paper);line-height:1}
.stat .n em{color:var(--red-bright);font-style:normal}
.stat .l{margin-top:8px;color:var(--mute);font-size:.85rem;max-width:210px}

/* ---------- cards / panels ---------- */
.card{background:var(--panel);border:1px solid var(--line);padding:34px 30px}
.card h3{margin-bottom:12px}
.card p{font-size:.95rem;color:var(--paper-dim)}
.card .eyebrow{color:var(--red-bright);display:block;margin-bottom:14px}

.panel-navy{background:var(--navy);border:1px solid var(--navy-line);padding:44px 40px}

.figure{border:1px solid var(--line);background:var(--panel);padding:10px}
.figure img{width:100%}
.figure figcaption{padding:12px 8px 4px;font-size:.8rem;color:var(--mute);font-style:italic}

/* ---------- rules & misc ---------- */
.rule{height:1px;background:var(--line);border:0;margin:0}
.kicker{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.kicker .eyebrow{color:var(--red-bright)}
.kicker::after{content:"";flex:1;height:1px;background:var(--line)}
.list{list-style:none}
.list li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
.list li::before{content:"";width:8px;height:8px;background:var(--red);flex:none;transform:translateY(-1px)}
.list b{color:var(--paper);font-weight:600}

blockquote{
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--paper);
  border-left:3px solid var(--red);padding-left:26px;line-height:1.4;
}
blockquote cite{display:block;margin-top:14px;font-family:'Archivo';font-style:normal;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}

/* live dot */
.live{display:inline-flex;align-items:center;gap:10px}
.live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red-bright);
  animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:54px 0 40px;color:var(--mute);font-size:.85rem}
.footer .cols{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer .caps{color:var(--paper-dim)}
.footer a:hover{color:var(--paper)}
.patent{margin-top:26px;font-size:.75rem;color:var(--mute)}

/* ---------- page headers ---------- */
.pagehead{padding:90px 0 30px}
.pagehead h1{margin-top:18px;max-width:760px}
.pagehead .lede{margin-top:20px;max-width:640px}

/* about */
.headshot{width:100%;max-width:340px;border:1px solid var(--line);filter:grayscale(18%)}
.role-list li{border:0;padding:6px 0}
.role-list li::before{background:var(--mute)}

/* research bars */
.bar{margin:22px 0}
.bar .b-label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--paper-dim);margin-bottom:8px}
.bar .b-label b{color:var(--paper)}
.bar .track{height:6px;background:var(--panel);border:1px solid var(--line)}
.bar .fill{height:100%;background:var(--red)}

/* contact */
.contact-block{font-size:1.05rem}
.contact-block .row{padding:18px 0;border-bottom:1px solid var(--line)}
.contact-block .row .caps{color:var(--mute);display:block;margin-bottom:6px}
.contact-block .row a{color:var(--paper)}

/* NOT / IS lists */
.not-list li::before{background:transparent;content:"\00d7";width:auto;height:auto;
  color:var(--red-bright);font-weight:700;font-size:1.05rem;line-height:1}
.is-list li::before{background:transparent;content:"\2713";width:auto;height:auto;
  color:var(--paper);font-weight:700;font-size:.95rem;line-height:1}
.not-list li,.is-list li{padding:10px 0}

/* flow diagram */
.flow{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px}
.flow span{display:block;padding:8px 22px;border:1px solid var(--line);background:var(--ink);
  color:var(--paper);font-size:.9rem;min-width:180px}
.flow i{color:var(--mute);font-style:normal;font-size:1rem;line-height:1}
.flow .flow-dead{color:var(--mute);border-style:dashed}
.flow .flow-live{border-color:var(--red);color:var(--paper);background:var(--navy)}

/* ---------- demo player ---------- */
.demo-card{background:var(--panel);border:1px solid var(--line);padding:28px 26px;text-align:left;
  cursor:pointer;color:inherit;font-family:inherit;transition:border-color .15s}
.demo-card:hover{border-color:var(--red)}
.demo-card h3{margin:10px 0 8px}
.demo-card p{font-size:.9rem;color:var(--paper-dim)}
.demo-card .demo-go{display:inline-block;margin-top:14px;font-family:'Archivo';font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red-bright)}
.dp{background:var(--panel);border:1px solid var(--line);padding:0;overflow:hidden}
.dp-head{display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid var(--line);
  background:var(--ink)}
.dp-head .live-on{color:var(--red-bright)}
.dp-deep{background:var(--navy);border-bottom:1px solid var(--navy-line);padding:14px 20px}
.dp-deep .tag{font-family:'Archivo';text-transform:uppercase;letter-spacing:.24em;font-size:.65rem;
  font-weight:600;color:#7FA6D9;display:block;margin-bottom:6px}
.dp-deep p{color:var(--paper);font-size:1rem}
.dp-body{display:grid;grid-template-columns:1fr 1.2fr;min-height:380px}
@media(max-width:820px){.dp-body{grid-template-columns:1fr}}
.dp-col{border-right:1px solid var(--line);display:flex;flex-direction:column}
.dp-col:last-child{border-right:0}
.dp-collabel{font-family:'Archivo';text-transform:uppercase;letter-spacing:.26em;font-size:.65rem;
  color:var(--mute);padding:12px 20px;border-bottom:1px solid var(--line)}
.dp-scroll{padding:14px 20px;height:380px;overflow-y:auto;scroll-behavior:smooth}
.dp-chip{max-width:none;margin:0 0 12px}
.dp-transcript{background:#EDEDEF}
.dp-transcript .dp-collabel{color:#7A7B85;border-color:#D8D8DC}
.dp-line{display:flex;gap:12px;margin-bottom:16px}
.dp-line .dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;margin-top:6px}
.dp-line.me .dot{background:#3A5A86}
.dp-line .who{font-family:'Archivo';font-size:.62rem;letter-spacing:.22em;color:#8A8B96;margin-bottom:2px}
.dp-line p{color:#26262C;font-size:.95rem;line-height:1.45}
.dp-controls{display:flex;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid var(--line);
  background:var(--ink)}
.dp-bar{flex:1;height:6px;background:var(--panel);border:1px solid var(--line);cursor:pointer}
.dp-bar div{height:100%;width:0;background:var(--red)}

/* ================= demo player — faithful port of the live console ================= */
.dpv{background:#161616;border:1px solid #2b2b2b;font-family:"Helvetica Neue",Arial,system-ui,sans-serif}
.dpv-head{display:flex;align-items:center;gap:16px;padding:14px 20px;background:#161616;border-bottom:1px solid #2b2b2b;color:#fff}
.dpv-head img{width:32px;height:32px}
.dpv-brand{letter-spacing:.18em;font-weight:700;font-size:12px;color:#fff}
.dpv-brand span{letter-spacing:.30em;font-weight:400;font-size:9px;color:#9a9a9a}
.dpv-meta{display:flex;flex-direction:column;gap:2px;padding-left:16px;border-left:1px solid #2b2b2b}
.dpv-meta .k{letter-spacing:.24em;font-size:8px;text-transform:uppercase;color:#8a8a8a}
.dpv-meta .v{font-size:13px;color:#fff;font-variant-numeric:tabular-nums}
.dpv-livedot{display:inline-flex;align-items:center;gap:8px;letter-spacing:.28em;font-size:10px;text-transform:uppercase;color:#cfcfcf}
.dpv-livedot::before{content:"";width:8px;height:8px;border-radius:50%;background:#c0392b;animation:dpvpulse 1.6s infinite}
#dp-state.dpv-ended{color:#8a8a8a}
@keyframes dpvpulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.55)}70%{box-shadow:0 0 0 7px rgba(192,57,43,0)}100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}

/* deep-read bar: full width, navy, spanning all columns */
.dpv-deep{background:#0f1a2b;border-bottom:1px solid #2b2b2b;padding:8px 20px 12px;min-height:56px}
.dpv-deep .lbl{letter-spacing:.2em;font-size:9px;text-transform:uppercase;color:#7fb3ec;padding:2px 0 4px}
.dpv-deep p{color:#dceafd;font-size:20px;line-height:1.4;display:flex;gap:9px;align-items:flex-start}
.dpv-deep p::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#4a90d9;margin-top:9px}
.dpv-deep p:empty::before{display:none}
.dpv-deep .lf-empty{color:#5b7fae;font-size:14px}

/* three columns: nudges | caller | my side */
.dpv-body{display:grid;grid-template-columns:1fr 1fr 1fr;min-height:440px}
.dpv-col{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e6e6e6}
.dpv-col:last-child{border-right:0}
.dpv-collabel{padding:9px 20px;border-bottom:1px solid #e6e6e6;letter-spacing:.28em;font-size:9px;
  text-transform:uppercase;color:#6b6b6b;display:flex;align-items:center;gap:10px;flex:0 0 auto;background:#fff}
.dpv-collabel .sq{width:9px;height:9px;background:#c0392b}
.dpv-collabel .sq.int{background:#8a8a8a}

/* pinned latest frame */
.dpv-current{flex:0 0 auto;height:112px;overflow:hidden;border-bottom:1px solid #e6e6e6;background:#fbfbfb;padding:12px 20px}
.dpv-big{width:100%;height:100%}
.dpv-big .lf-scroll{height:100%;overflow-y:auto;display:flex;align-items:center}
.dpv-big.scrolling .lf-scroll,.dpv-current.scrolling .lf-scroll{align-items:flex-start}
.lf-body{font-size:var(--lf-fs,20px);line-height:1.25;color:#000;font-weight:600;display:flex;gap:10px;align-items:flex-start}
.lf-body::before{content:"";flex:0 0 auto;width:calc(var(--lf-fs,20px)*.5);height:calc(var(--lf-fs,20px)*.5);border-radius:50%;background:#c0392b;margin-top:calc(var(--lf-fs,20px)*.35)}
.dpv-big .lf-scroll::-webkit-scrollbar{width:6px}
.dpv-big .lf-scroll::-webkit-scrollbar-thumb{background:#dcdcdc}
.dpv-waiting{color:#b8b8b8;font-size:13px}

/* history stream */
.dpv-scroll{flex:1 1 auto;overflow-y:auto;padding:14px 20px 40px;background:#fff}
.dpv-tline{padding:7px 0;border-bottom:1px solid #f2f2f2;display:flex;gap:9px;align-items:baseline}
.dpv-tline::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#c0392b;margin-top:6px}
.dpv-tline p{font-size:15px;line-height:1.5;color:#000}
.dpv-tline .stamp{display:block;margin-top:3px;letter-spacing:.12em;font-size:9px;text-transform:uppercase;color:rgba(0,0,0,.75)}

/* NUDGES column = dark charcoal rail */
.dpv-nudges .dpv-collabel{background:#161616;color:#9a9a9a;border-bottom:1px solid #2b2b2b}
.dpv-nudges .dpv-current{background:#141414;border-bottom:1px solid #2b2b2b}
.dpv-nudges .lf-body{color:#fff}
.dpv-nudges .lf-scroll::-webkit-scrollbar-thumb{background:#333}
.dpv-nudges .dpv-scroll{background:#161616}
.dpv-nudges .dpv-waiting{color:#6f6f6f}
.dpv-card{padding:11px 13px;margin-bottom:10px;background:rgba(192,57,43,.14);border-left:3px solid #c0392b}
.dpv-card .lbl{letter-spacing:.2em;font-size:9px;text-transform:uppercase;color:#c0392b;margin-bottom:4px}
.dpv-card p{font-size:15px;line-height:1.45;color:#fff;font-weight:500;display:flex;gap:9px;align-items:baseline}
.dpv-card p::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#c0392b;margin-top:5px}
.dpv-card .stamp{display:block;margin-top:5px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.dpv-card.deep{background:rgba(56,110,190,.16);border-left-color:#4a90d9}
.dpv-card.deep .lbl{color:#7fb3ec}
.dpv-card.deep p::before{background:#4a90d9}
.dpv-curtag{display:none}

/* MY SIDE column = light grey */
.dpv-you .dpv-collabel{background:#dedee3;color:#5a5a5a;border-bottom:1px solid #cfcfd4}
.dpv-you .dpv-current{background:#dedee3;border-bottom:1px solid #cfcfd4}
.dpv-you .dpv-scroll{background:#e9e9ec}
.dpv-you .lf-body{color:#000}

@media(max-width:900px){
  .dpv-body{grid-template-columns:1fr}
  .dpv-col{border-right:0;border-bottom:1px solid #2b2b2b}
  .dpv-current{height:auto;min-height:80px}
}

/* transport */
.dpv-controls{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid #2b2b2b;background:#161616}
.dp-bar{flex:1;position:relative;height:6px;background:#2b2b2b;cursor:pointer}
.dp-bar #dp-barfill{height:100%;width:0;background:#c0392b}
#dp-marks{position:absolute;inset:0;pointer-events:none}
#dp-marks i{position:absolute;top:-3px;width:2px;height:12px;background:#e0703a;opacity:.6;transform:translateX(-1px)}
.dpv-controls .btn{background:#c0392b;color:#fff;border:none;letter-spacing:.16em;font-size:11px;text-transform:uppercase;cursor:pointer}
.dpv-controls .btn.ghost{background:transparent;border:1px solid #2b2b2b;color:#cfcfcf}
.dpv-controls .btn.ghost:hover{border-color:#c0392b;color:#fff}

/* picker cards */
.demo-card{background:var(--panel);border:1px solid var(--line);padding:28px 26px;text-align:left;cursor:pointer;color:inherit;font-family:inherit;transition:border-color .15s}
.demo-card:hover{border-color:var(--red)}
.demo-card h3{margin:10px 0 8px}
.demo-card p{font-size:.9rem;color:var(--paper-dim)}
.demo-card .demo-go{display:inline-block;margin-top:14px;font-family:'Archivo';font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red-bright)}
.dpv-deep .lf-empty{color:#5b7fae;font-size:14px;font-weight:400}
.dpv-deep p .lf-empty::before{display:none}

/* ===== demo player: mobile — mirror the live console (stacked latest frames only) ===== */
@media(max-width:900px){
  .dpv-body{display:flex;flex-direction:column}
  .dpv-col{border-right:0;border-bottom:1px solid #2b2b2b}
  /* hide scrolling history + column heads on phone, like the console */
  .dpv-scroll{display:none}
  .dpv-collabel{display:none}
  /* order: deep read (full-width band, already on top) -> nudges -> caller -> my side */
  .dpv-nudges{order:1}
  .dpv-caller{order:2}
  .dpv-you{order:3}
  /* taller latest frames, bigger fluid type — matches console's clamp */
  .dpv-current{height:auto;min-height:22vh;display:flex;align-items:center}
  .dpv-current .lf-body,.lf-body{font-size:clamp(18px,5.6vw,26px);line-height:1.3}
  .dpv-deep{padding:12px 18px}
  .dpv-deep p{font-size:clamp(17px,5vw,22px)}
  /* header wraps cleanly */
  .dpv-head{flex-wrap:wrap;gap:10px 14px}
  .dpv-meta{padding-left:12px}
  /* transport stays usable */
  .dpv-controls{flex-wrap:wrap;gap:10px}
  .dp-bar{order:5;flex:1 1 100%}
  /* picker: single column */
  .demo-card{padding:22px 20px}
}
@media(max-width:520px){
  .dpv-head .dpv-meta:nth-child(3){display:none} /* drop Replay-title cell on tiny screens */
  .dpv-brand span{display:none}
}

/* ===== general mobile polish ===== */
@media(max-width:880px){
  section{padding:56px 0}
  .hero{padding:80px 0 64px}
  .wrap{padding:0 20px}
  /* architecture SVG scales within its figure */
  .figure svg{width:100%;height:auto}
  /* stat bands: 2-up instead of cramped 4-up */
  .stats .grid4{grid-template-columns:1fr 1fr;gap:28px 20px}
  /* flow diagram (home) stacks */
  .flow span{min-width:0;width:100%}
  /* big serif headings don't overflow */
  h1{word-break:break-word}
  /* NOT/IS lists and role lists breathe */
  .list li{align-items:flex-start}
}
@media(max-width:480px){
  .stats .grid4{grid-template-columns:1fr}
  blockquote{font-size:1.3rem}
  .btn{width:100%;text-align:center}
  .hero .cta{flex-direction:column}
}