/* Page styles for /product/liaison/ only: the jump bar, section heads,
   fact cards, the nav dropdown, and the interface-mock vocabulary. The mock
   vocabulary is copied VERBATIM from overview.css (its owner) so the stages
   render 1:1; when overview is next edited, promote the shared vocabulary to
   _assets/mocks.css and point both pages at it. Stages here are always-on
   sections (no tab switcher), so .stage displays unconditionally. */
  /* crumb path */
  .crumb__in a:hover{color:var(--text2)}
  .crumb__in b{color:var(--text3);font-weight:500}
  .crumb__in i{font-size:10px}
  /* hero on this page is shorter */
  .hero{padding:78px 0 12px}
  .hero h1{font-size:52px}
  /* jump bar: the # anchors */
  .jump{position:sticky;top:66px;z-index:56;background:rgba(26,26,25,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .jump__in{display:flex;justify-content:center;gap:6px;padding:10px 0;flex-wrap:wrap}
  .jl{display:inline-flex;align-items:center;gap:7px;font:500 12.5px var(--font);color:var(--text3);border:1px solid transparent;border-radius:999px;padding:6px 14px;transition:.15s}
  .jl i{font-size:13.5px}
  /* r491: hover only where hover exists. On iOS a tap leaves :hover STUCK on
     the link until the next tap elsewhere, so the previous anchor stayed lit
     next to the new .is-on one - two pills at once. TWIN: product-liaison.css */
  @media (hover:hover){ .jl:hover{color:var(--text);background:var(--surface)} }
  .jl.is-on{color:var(--text);border-color:var(--line2);background:var(--surface2)}
  section{scroll-margin-top:164px;padding:74px 0 60px}
  .sec-head{display:flex;align-items:baseline;gap:14px;max-width:1060px;margin:0 auto 8px}
  .sec-head h2{font:800 32px/1.12 var(--font-display);letter-spacing:-.015em;margin:0;text-align:left}
  .sec-head .deep{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:800 13px var(--font);color:var(--accent)}
  .sec-head .deep.soon{color:var(--text4);cursor:default}
  .sec-sub{font-size:15px;color:var(--text3);max-width:1060px;margin:0 auto 30px;text-align:left}
  .stagewrap{max-width:1060px;margin:0 auto}
  .stagewrap .stage + .stage{margin-top:16px}
  .stage{border-radius:22px;padding:40px;display:grid;grid-template-columns:1.5fr .72fr;gap:24px;align-items:start;background-image:radial-gradient(600px 300px at 20% 0%,rgba(255,255,255,.5),transparent)}
  .stage--flip{grid-template-columns:.72fr 1.5fr}
  .stage[data-s="analyze"]{background-color:#dbe4f0}
  .stage[data-s="build"]{background-color:#ece2d4}
  .stage[data-s="relay"]{background-color:#e3ddee}
  .stage[data-s="relay"] .app{font-size:11.5px;padding:16px 18px}
  .stage[data-s="relay"] .rr{margin-bottom:6px}
  .stage[data-s="relay"] .cmt{margin-top:5px}
  .stage[data-s="media"]{background-color:#dde9df}
  .stage[data-s="apps"]{background-color:#e8e6df}
  .stage[data-s="mcp"]{background-color:#dbe4f0;grid-template-columns:1fr 1fr}
  /* fact cards under a section */
  .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1060px;margin:22px auto 0}
  .fact{background:var(--ink2);border:1px solid var(--line2);border-radius:16px;padding:18px 20px}
  .fact b{display:block;font:700 14.5px var(--font-display);margin-bottom:5px}
  .fact p{margin:0;font-size:12.5px;color:var(--text3);line-height:1.6}
  @media (max-width:960px){
    .hero h1{font-size:38px}
    .facts{grid-template-columns:1fr}
    .stage[data-s="mcp"]{grid-template-columns:1fr}
    .sec-head{flex-wrap:wrap}
  }
  .app{background:#f5f4f1;border:1px solid #e5e3dc;border-radius:16px;box-shadow:0 30px 70px -34px rgba(30,35,50,.28);padding:20px 22px;font-size:12.5px;color:#55544f;user-select:none;-webkit-user-select:none;cursor:default}
  .side .dark{background:#161615;border:1px solid #2a2a28;border-radius:14px;padding:15px 16px;color:var(--text2);font-size:12px;line-height:1.6}
  .side .dark b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text4);margin-bottom:7px}
  .side .dark + .dark{margin-top:13px}
  .conn{display:flex;align-items:center;gap:9px;background:#1f1f1e;border:1px solid #2e2e2c;border-radius:10px;padding:8px 11px;color:var(--text);font-size:12px}
  .conn i{color:var(--accent)}
  .u{max-width:80%;margin-left:auto;background:#e9ebee;border-radius:14px;padding:9px 13px;color:#1c1c1b;width:fit-content}
  .status{display:flex;gap:8px;align-items:center;color:#9a988f;font-size:11px;margin:12px 0 10px}
  .bmark{width:15px;height:15px;flex:0 0 15px}
  .h{display:flex;align-items:center;gap:9px;margin:6px 0 12px}
  .h>i{font-size:14px;color:#8a8a86}
  .h b{font:700 13.5px var(--font);color:#1c1c1b}
  .pill{font:600 10.5px var(--font);color:#8a8a86;border:1px solid rgba(0,126,247,.45);border-radius:999px;padding:2px 9px}
  .h span:last-child{font-size:10.5px;color:#9a988f}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:8px}
  .kpi{background:#fff;border:1px solid #e9e7e0;border-radius:11px;padding:10px 12px}
  .kpi span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#9a988f;margin-bottom:3px}
  .kpi b{font:700 16px var(--font-display);color:#1c1c1b}
  .kpi b.blue{color:var(--accent)}
  .arr{font-size:10px;color:#9a988f;vertical-align:-1px}
  /* creatives: soft light thumbs, dimmed */
  /* r500 (Egor): display:block, and the strip has its pictures back. .th is a
     SPAN, and width/height do nothing on an inline box - it only ever looked
     right inside .best, which is a flex row and blockifies its children, so
     every cell thumbnail in .crow measured 0x0. TWIN: this rule lives in
     features.css, product-liaison.css AND product-lia.css (the vocabulary is
     duplicated the same way); fix all three or fix none. */
  .th{display:block;width:42px;height:42px;border-radius:8px;position:relative;flex:0 0 42px;opacity:.9}
  .th::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.86);box-shadow:0 2px 6px rgba(20,25,35,.18)}
  .th::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-42%,-50%);z-index:2;border-style:solid;border-width:4.5px 0 4.5px 7.5px;border-color:transparent transparent transparent #45443f}
  .cc .th::after{width:24px;height:24px}
  .cc .th::before{border-width:5px 0 5px 8.5px}
  .th1{background:linear-gradient(150deg,#cfd9e8,#b9c8de)}
  .th2{background:linear-gradient(150deg,#e8dccf,#dcc9b2)}
  .th3{background:linear-gradient(150deg,#d6e4d6,#bdd6bf)}
  .th4{background:linear-gradient(150deg,#e3d6e4,#d2bed4)}
  .th5{background:linear-gradient(150deg,#e0dfda,#cbc9c1)}
  .best{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e9e7e0;border-radius:12px;padding:10px 14px;margin:12px 0 10px}
  .best .m{flex:1;min-width:0}
  .best .m em{display:block;font:600 9px var(--font);font-style:normal;letter-spacing:.05em;color:#9a988f}
  .best .m b{color:#1c1c1b;font-size:12.5px}
  .best .m i{display:block;font-style:normal;font-size:10.5px;color:#9a988f}
  .best .p{font:700 18px var(--font-display);color:#1c1c1b;text-align:right}
  .best .p i{display:block;font-style:normal;font:400 9.5px var(--font);color:#9a988f}
  .crow{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
  .cc{background:#fff;border:1px solid #e9e7e0;border-radius:11px;padding:9px}
  .cc .th{width:100%;height:58px;border-radius:8px}
  .cc b{display:block;font-size:10px;color:#1c1c1b;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cc i{font-style:normal;font-size:9px;color:#9a988f;display:block}
  .cc em{font-style:normal;font-size:10.5px;font-weight:700;color:#1c1c1b}
  .cc em.warn{color:#d9a53f}.cc em.bad{color:#C25454}
  .openrow{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e9e7e0;border-radius:11px;padding:9px 13px;margin-top:10px;color:#1c1c1b;font-size:11.5px}
  /* build card */
  .card{background:#fff;border:1px solid #e9e7e0;border-radius:13px;padding:13px 15px}
  .card .top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .card .top>i{font-size:14px;color:#8a8a86}
  .card .top b{font-size:13px;color:#1c1c1b}
  .badge{font:600 9.5px var(--font);border:1px solid #ddd9d0;border-radius:999px;padding:2px 8px;color:#77766f}
  .tspacer{flex:1}
  .tnote{font-size:9.5px;color:#9a988f}
  .tchip{font:600 9.5px var(--font);border:1px solid #ddd9d0;border-radius:7px;padding:2px 7px;color:#77766f}
  .tabs2{display:flex;gap:14px;border-bottom:1px solid #e9e7e0;margin-bottom:10px;font-size:11px;color:#9a988f}
  .tabs2 b{color:#1c1c1b;border-bottom:2px solid #1c1c1b;padding-bottom:6px;font-weight:600}
  .tabs2 span{padding-bottom:6px}
  .kv{font-size:11px;color:#77766f;margin:3px 0}
  .kv b{color:#1c1c1b;font-weight:600}
  .map2{height:128px;border-radius:11px;margin:10px 0 8px;position:relative;border:1px solid #e5e3dc;overflow:hidden;background:#f7f6f2}
  .map2 img{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block;border-radius:10px}
  .map2 svg{position:absolute;inset:0;width:100%;height:100%}
  .mr{stroke:#dedbd2;stroke-width:2;fill:none}
  .mr--b{stroke:#e4b8b0;stroke-width:1.5;stroke-dasharray:4 4}
  .mr--w{stroke:#dbe4ec;stroke-width:7}
  .map2 b{position:absolute;left:62%;top:52%;transform:translate(-50%,-50%);font:600 11px var(--font);letter-spacing:.12em;color:#8b95a0}
  .map2 i{position:absolute;font-style:normal;font-size:8px;color:#9aa2ac}
  .legend{display:flex;gap:14px;font-size:9.5px;color:#9a988f;margin-bottom:6px}
  .legend b{color:var(--accent);font-weight:600}
  .note{color:var(--accent);font-size:10.5px;margin:4px 0 9px;display:flex;gap:6px;align-items:center}
  .chips2{display:flex;gap:7px;margin-bottom:11px}
  .ch{font:500 10.5px var(--font);color:#1c1c1b;background:#efede8;border:1px solid #e2e0d9;border-radius:999px;padding:4px 11px}
  .cfoot{display:flex;align-items:center;gap:9px}
  .cbtn{font:600 11px var(--font);border-radius:9px;padding:7px 14px;background:#2b2b29;color:#fff}
  .cbtn--ghost{background:none;color:#77766f}
  .reach{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end}
  .reach .r1{display:flex;align-items:baseline;gap:8px}
  .reach em{font-style:normal;font:600 9px var(--font);color:#9a988f;letter-spacing:.05em}
  .reach b{font:700 11.5px var(--font);color:#1c1c1b;letter-spacing:0}
  .reach u{display:block;height:3px;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent) 60%,#e2e0d9 60%);text-decoration:none;margin-top:4px}
  /* relay */
  .rhead{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e9e7e0;border-radius:999px;padding:7px 15px;width:fit-content;min-width:330px;margin:0 auto 12px}
  .ric{width:26px;height:26px;border-radius:50%;background:#ecebe5;display:flex;align-items:center;justify-content:center;font:700 9px var(--font-display);color:#55544f;flex:0 0 26px}
  .rhm{flex:1}
  .rhm b{font-size:11.5px;color:#1c1c1b;display:block}
  .rhm i{font-style:normal;font-size:9px;color:#9a988f}
  .avs{display:flex}
  .avs span{width:22px;height:22px;border-radius:50%;margin-left:-7px;font:700 8px var(--font);display:flex;align-items:center;justify-content:center;color:#fff}
  .avs span:first-child{margin-left:0}
  .day{width:fit-content;margin:0 auto 9px;font-size:9px;color:#9a988f;background:#eceae4;border-radius:9px;padding:2px 10px}
  .rr{display:flex;gap:8px;margin-bottom:7px}
  .rav{width:24px;height:24px;border-radius:50%;color:#fff;font:700 8.5px var(--font);display:flex;align-items:center;justify-content:center;flex:0 0 24px}
  .rb{background:#fff;border:1px solid #e9e7e0;border-radius:12px;padding:7px 11px;width:fit-content;max-width:78%}
  .rb .who{font-size:9.5px;font-weight:600;color:#4a8fe8;display:flex;gap:10px}
  .rb .who span{color:#b0aea6;font-weight:400}
  .rb b{display:block;font-size:11px;color:#1c1c1b;margin:2px 0}
  .rb>i{font-style:normal;font-size:10px;color:#77766f}
  .rb .from{text-decoration:line-through;color:#b0aea6}
  .rb .to--on{color:#27a567;font-weight:600}
  .rb .to--off{color:#C25454;font-weight:600}
  .cthread{border-left:2px solid #cfe0f7;margin:6px 0 0 11px;padding-left:14px}
  .cmt{margin:6px 0 0;display:flex;gap:7px;width:fit-content;max-width:76%}
  .cm{background:#fff;border:1px solid #e9e7e0;border-radius:11px;padding:6px 10px 4px;position:relative}
  .cav{width:19px;height:19px;border-radius:50%;color:#fff;font:700 7px var(--font);display:flex;align-items:center;justify-content:center;flex:0 0 19px;margin-top:2px}
  .cm .cw{font-size:9.5px;font-weight:600;color:#4a8fe8}
  .cm p{margin:1px 0 0;font-size:10px;color:#3a3a38;padding-right:30px}
  .cm time{position:absolute;right:8px;bottom:4px;font-size:8px;color:#b0aea6}
  .qq{border-left:2px solid #4a8fe8;background:#eaf2fd;border-radius:6px;padding:3px 8px;margin:3px 0 4px;font-size:9px;color:#55544f}
  .qq b{display:block;color:#4a8fe8;font-size:9px}
  .rmine{margin-left:auto;background:var(--accent);color:#fff;border-radius:12px;padding:6px 10px;width:fit-content;max-width:70%;margin-bottom:7px}
  .rmine b{font-size:11px;display:flex;gap:10px}
  .rmine b span{font-weight:400;opacity:.75;font-size:9px}
  .rmine i{font-style:normal;font-size:10.5px;opacity:.9}
  /* media */
  .mhead{display:flex;align-items:center;gap:9px;margin-bottom:10px}
  .mhead>i{font-size:15px;color:#8a8a86}
  .mhead b{font:700 13.5px var(--font);color:#1c1c1b}
  .mtabs{display:flex;gap:14px;font-size:11px;color:#9a988f;border-bottom:1px solid #e9e7e0;margin-bottom:12px}
  .mtabs b{color:#1c1c1b;border-bottom:2px solid var(--accent);padding-bottom:7px;font-weight:600}
  .mtabs span{padding-bottom:7px}
  .mg{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .mt{aspect-ratio:.82;border-radius:9px;position:relative;opacity:.92}
  .mg .mt:nth-child(1){background:linear-gradient(160deg,#cfd9e8,#b3c4dc)}
  .mg .mt:nth-child(2){background:linear-gradient(160deg,#e8dccf,#d8c5ab)}
  .mg .mt:nth-child(3){background:linear-gradient(160deg,#d6e4d6,#b8d2bb)}
  .mg .mt:nth-child(4){background:linear-gradient(160deg,#e3d6e4,#cdb9d0)}
  .mg .mt:nth-child(5){background:linear-gradient(160deg,#e0dfda,#c8c6bd)}
  .mg .mt:nth-child(6){background:linear-gradient(160deg,#d9e0e8,#bec9d8)}
  .mg .mt:nth-child(7){background:linear-gradient(160deg,#e8e2cf,#d6cbaa)}
  .mg .mt:nth-child(8){background:linear-gradient(160deg,#d6e0e4,#b8ccd4)}
  .mg .mt:nth-child(9){background:linear-gradient(160deg,#ded6e8,#c4b8d8)}
  .mg .mt:nth-child(10){background:linear-gradient(160deg,#d9e4d9,#bcd2bd)}
  .mt::after{content:"▶";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(20,20,19,.5);font-size:12px}
  .mt .dur{position:absolute;right:5px;bottom:5px;font:600 8.5px var(--font);background:rgba(0,0,0,.55);border-radius:5px;padding:1px 5px;color:#fff}
  .mt .in{position:absolute;left:5px;top:5px;font:600 8.5px var(--font);background:rgba(0,126,247,.85);border-radius:5px;padding:1px 6px;color:#fff}
  .mt.sel{outline:2px solid var(--accent);outline-offset:2px}
  .mfoot{display:flex;align-items:center;gap:11px;margin-top:12px}
  .mfoot i{font-style:normal;font-size:10px;color:#9a988f}
  /* app tools */
  .atsub{font-size:10.5px;color:#9a988f;margin:-4px 0 12px}
  .at{display:grid;grid-template-columns:.55fr 1.45fr;gap:14px}
  .atrail{display:flex;flex-direction:column;gap:4px}
  .atr{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#77766f;border-radius:10px;padding:8px 11px}
  .atr.on{background:#ecebe5;color:#1c1c1b;font-weight:600}
  .atgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .atc{background:#edebe6;border:1px solid #e3e1da;border-radius:12px;padding:11px 13px}
  .atc .t{display:flex;align-items:center;gap:8px}
  .atc .t>i{font-size:14px;color:#55544f}
  .atc .t b{font-size:12px;color:#1c1c1b}
  .atc .t em{font-style:normal;font-size:8.5px;color:var(--text4);display:block}
  .atc .open{margin-left:auto;font:600 9.5px var(--font);color:var(--accent);border:1px solid rgba(0,126,247,.4);border-radius:999px;padding:2px 9px}
  .atc p{margin:7px 0 0;font-size:10px;color:#8a8a86;line-height:1.5}
  /* ── phone rules for the interface-mock vocabulary ──
     TWIN: this exact block lives in features.css, product-liaison.css AND product-lia.css (r483)
     (the vocabulary itself is duplicated the same way); fix both or fix neither.
     Goal: the mock stays a readable screenshot on a 360px screen. */
  @media (max-width:600px){
    .stage,.stage--flip{padding:16px;border-radius:16px;gap:14px}
    .stage,.stage--flip{grid-template-columns:1fr}
    .stage--flip .side{order:2}
    .card .top{flex-wrap:wrap;row-gap:4px}
    .tnote{display:none}
    .rhead{width:100%;min-width:0;border-radius:14px}
    .kpi,.cc{min-width:0}
    .crow{gap:7px}
    .best{gap:9px}
    .best .m{overflow:hidden}
    .best .m b,.best .m i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
    .stage{overflow:hidden}
    .app{padding:13px 13px;font-size:12px}
    .u{max-width:95%}
    .kpis{grid-template-columns:repeat(2,1fr)}
    .crow{grid-template-columns:repeat(3,1fr)}
    .mg{grid-template-columns:repeat(4,1fr)}
    .rhead{min-width:0;width:100%}
    .rb{max-width:100%}
    .cmt{max-width:92%}
    .legend{flex-wrap:wrap}
    .cfoot{flex-wrap:wrap;row-gap:9px}
    .reach{margin-left:0;align-items:flex-start;width:100%}
    .reach u{max-width:150px}
    .tabs2,.mtabs{overflow-x:auto;white-space:nowrap}
    .mfoot{flex-wrap:wrap;row-gap:6px}
    .at{grid-template-columns:1fr}
    .atrail{flex-direction:row;overflow-x:auto;padding-bottom:2px}
    .atr{white-space:nowrap}
    .atgrid{grid-template-columns:1fr}
    .side .dark{padding:13px 14px}
  }
  /* phone: the jump bar and section heads */
  @media (max-width:600px){
    .hero{padding:56px 0 8px}
    .hero h1{font-size:clamp(27px,8vw,34px)}
    /* r488: no .jump{top} here. The @767 block at the end of this file is the
       one owner of the phone offset (100px, under the crumb); a second value
       at equal specificity in an earlier block only looked like a rule. */
    .jump__in{gap:4px;padding:8px 0}
    .jl{padding:5px 11px;font-size:12px}
    .jl i{font-size:12.5px}
    section{scroll-margin-top:148px;padding:52px 0 40px}
    .sec-head h2{font-size:23px}
    .sec-head .deep{margin-left:0;flex-basis:100%}
    .sec-sub{font-size:14px}
    .stagewrap .stage + .stage{margin-top:12px}
    .facts{gap:10px;margin-top:16px}
  }
  /* CASCADE LAW: this file loads AFTER site.css, so its base .stage rule beats
     site.css's @media override. Media layers for classes declared here must
     live here. (Found on the first real phone: stages stayed two-column.) */
  @media (max-width:960px){
    .stage,.stage--flip{grid-template-columns:1fr;padding:26px}
  }
  /* the jump bar never wraps: overflow anchors live behind "..." */
  .tmore{display:none;position:relative}
  .jl--more{background:none;border:0;cursor:pointer;font:500 12px var(--font);color:var(--text3);padding:5px 11px}
  .jl--more:hover,.jl--more.is-on{color:var(--text);background:var(--surface2);border-radius:999px}
  .tmore__menu{position:absolute;right:0;top:calc(100% + 10px);display:none;background:var(--ink2);border:1px solid var(--line2);border-radius:14px;box-shadow:0 26px 60px -22px rgba(0,0,0,.7);padding:8px;min-width:190px;z-index:40}
  .tmore.is-open .tmore__menu{display:block}
  .tmore__menu a{display:flex;align-items:center;gap:10px;color:var(--text2);font:500 14px var(--font);padding:11px 12px;border-radius:9px}
  .tmore__menu a:hover{color:var(--text);background:var(--surface2)}
  .tmore__menu a i{font-size:16px}
  @media (max-width:600px){
    .jump__in{flex-wrap:nowrap;justify-content:center;overflow:visible}
    .jl[href="#apps"],.jl[href="#mcp"]{display:none}
    .tmore{display:block}
    .tmore .jl--more{display:inline-flex}
  }
  /* r481: the mocks portray the product, and the product's UI is still "Nunito".
     The site's own type changed; the screenshots inside it must not. */
  .app{--font:"Nunito",ui-rounded,system-ui,sans-serif;--font-display:"Nunito",ui-rounded,system-ui,sans-serif}
  .app,.app *{font-family:var(--font-ui)}
  .app b,.app strong{font-family:var(--font-ui)}
  /* Relay, second stage: four panes across the width - the rail with folders,
     my own change with its menu, someone else's change with a thread, and the
     people popup. TWIN of nothing: these parts live only on this page. */
  .stage[data-s="relay2"]{background-color:#e3ddee}
  .pcols{display:grid;grid-template-columns:.92fr 1.08fr;gap:16px}
  .pcols--b{margin-top:16px}
  .pcap{font:600 9.5px var(--font);letter-spacing:.07em;text-transform:uppercase;color:#a3a199;margin:0 0 8px}
  .pbox{background:#fff;border:1px solid #eae8e1;border-radius:13px;padding:12px}

  .rl{background:#fff;border:1px solid #eae8e1;border-radius:13px;padding:10px}
  .rl__top{display:flex;gap:8px;margin-bottom:9px}
  .rl__b{width:30px;height:30px;border-radius:9px;background:#f0eee8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 0 auto}
  .rl__b i{display:block;width:13px;height:1.6px;border-radius:2px;background:#8a887f}
  .rl__s{flex:1;background:#f0eee8;border-radius:10px;padding:7px 12px;font-size:11.5px;color:#a3a199}
  .rl__tabs{display:flex;gap:3px;background:#eeece6;border-radius:10px;padding:3px;margin-bottom:10px;width:fit-content;max-width:100%}
  .rl__t{font-size:11px;color:#77766f;border-radius:8px;padding:4px 10px;white-space:nowrap}
  .rl__t.is-on{background:#fff;color:#1c1c1b;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.07)}
  .rl__t.is-drag{background:#e2eefc;color:#1c6fd0;transform:rotate(-2deg)}
  .rl__p{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:11px}
  .rl__p.is-on{background:rgba(0,126,247,.10)}
  .rl__ic{width:33px;height:33px;flex:0 0 auto;border-radius:50%;background:#efede7;display:flex;align-items:center;justify-content:center;font:600 11px var(--font);color:#77766f}
  .rl__m{flex:1;min-width:0}
  .rl__h{display:flex;align-items:baseline;gap:8px}
  .rl__h b{font-size:12.5px;color:#1c1c1b;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rl__h time{font-size:10.5px;color:#a3a199;flex:0 0 auto}
  .rl__l{display:block;font-size:11.5px;color:#77766f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rl__d{flex:0 0 auto;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font:600 10px var(--font);display:flex;align-items:center;justify-content:center;padding:0 5px}

  .rmine--lift{box-shadow:0 16px 36px -18px rgba(0,0,0,.4)}
  .rmenu{margin:9px 0 0;width:fit-content;background:#fff;border:1px solid #eae8e1;border-radius:12px;padding:5px;box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
  .rmenu--r{margin-left:auto;margin-right:14px}
  .rmenu span{display:flex;align-items:center;gap:9px;font-size:12px;color:#3a3a38;padding:8px 12px;border-radius:8px}
  .rmenu span i{font-size:14px;color:#77766f}
  .rmenu span.is-hi{background:#f3f2ee}
  .rundone{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:11.5px;color:#77766f}
  .rpill{background:#eef4fd;color:#1c6fd0;border-radius:999px;padding:3px 9px;font:600 10.5px var(--font)}

  /* the reply composer under a thread */
  .creply{margin-top:9px;padding-left:25px}
  .qq--in{position:relative;padding-right:22px}
  .qx{position:absolute;right:8px;top:6px;color:#a3a199}
  .cin{display:flex;align-items:center;gap:8px;margin-top:6px}
  .cin span:first-child{flex:1;border:1px solid #e2e0d9;border-radius:10px;padding:8px 12px;font-size:11.5px;color:#a3a199;background:#fff}
  .csend{background:var(--accent);color:#fff;border-radius:9px;padding:8px 14px;font:600 11.5px var(--font)}

  /* the people popup */
  .ppl{background:#fff;border:1px solid #eae8e1;border-radius:13px;overflow:hidden}
  .ppl__hero{text-align:center;padding:14px 12px 12px;border-bottom:1px solid #f0eee8}
  .ppl__av{width:46px;height:46px;border-radius:50%;background:#efede7;color:#77766f;font:600 14px var(--font);display:flex;align-items:center;justify-content:center;margin:0 auto 7px}
  .ppl__hero b{display:block;font-size:13px;color:#1c1c1b}
  .ppl__hero small{font-size:11px;color:#a3a199}
  .ppl__cap{font:600 9.5px var(--font);letter-spacing:.07em;text-transform:uppercase;color:#a3a199;padding:10px 13px 4px}
  .pr{display:flex;align-items:center;gap:10px;padding:7px 13px}
  .pav{width:28px;height:28px;border-radius:50%;color:#fff;font:700 9.5px var(--font);display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative}
  .pav.is-sys{background:#d6d4cd;color:#6f6e68}
  .pav i{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #fff;font:700 6px var(--font);font-style:normal;display:flex;align-items:center;justify-content:center}
  .pm{flex:1;min-width:0}
  .pm b{display:block;font-size:12px;color:#1c1c1b}
  .pm b em{font-style:normal;color:#a3a199;font-weight:400}
  .pm small{display:block;font-size:10.5px;color:#a3a199}
  .pn{font:600 11px var(--font);color:#a3a199}

  @media (max-width:600px){
    .pcols{grid-template-columns:1fr;gap:14px}
    .rmenu--r{margin-right:0}
    .creply{padding-left:14px}
  }
  /* Media, second stage: the drop zone, Uploads, and what a file is used in */
  .stage[data-s="media2"]{background-color:#dde9df}
  .drop{border:2px dashed #cfd6cf;border-radius:14px;background:rgba(255,255,255,.55);text-align:center;padding:24px 16px}
  .drop__ic{display:flex;width:38px;height:38px;margin:0 auto 9px;border-radius:11px;background:#fff;border:1px solid #e4e2db;align-items:center;justify-content:center;color:#77766f;font-size:18px}
  .drop b{display:block;font-size:13px;color:#1c1c1b;margin-bottom:3px}
  .drop i{font-style:normal;font-size:11px;color:#9a988f}
  .mtabs .is-on{color:#1c1c1b;font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:6px;margin-bottom:-1px}
  .mg--3{grid-template-columns:repeat(3,1fr)}
  .mg--4{grid-template-columns:repeat(4,1fr)}
  .mt.is-sel{outline:2px solid var(--accent);outline-offset:1px}
  .mdrop{margin:10px 0 0 auto;width:fit-content;background:#fff;border:1px solid #eae8e1;border-radius:12px;padding:5px;box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
  .mdrop span{display:flex;align-items:center;gap:9px;font-size:12px;color:#3a3a38;padding:8px 12px;border-radius:8px}
  .mdrop span i{font-size:14px;color:#77766f}
  .mdrop span.is-hi{background:#f3f2ee}
  .tree{margin-top:12px;border:1px solid #eae8e1;border-radius:12px;overflow:hidden;background:#fff}
  .tree__h{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#f7f6f3;font:600 10px var(--font);letter-spacing:.05em;text-transform:uppercase;color:#9a988f}
  .tpill{background:#e9f1fd;color:#1c6fd0;border-radius:999px;padding:2px 8px;font:600 10px var(--font);letter-spacing:0;text-transform:none}
  .tree__r{display:flex;align-items:baseline;gap:8px;padding:8px 12px;border-top:1px solid #f0eee8;font-size:12px}
  .tree__r b{color:#1c1c1b;font-weight:600}
  .tree__r i{font-style:normal;color:#9a988f;font-size:11px;flex:1}
  .tst{font:600 10px var(--font);color:#27a567;background:rgba(39,165,103,.10);border-radius:999px;padding:2px 8px}
  .tst.is-off{color:#8a887f;background:#f0eee8}
  /* App Tools, second stage: Storage and Tasks side by side, Canvas across */
  .stage[data-s="apps2"]{background-color:#e8e6df}
  .sh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
  .sh b{font:700 16px var(--font-display);color:#1c1c1b}
  .sbin{font:600 10.5px var(--font);color:#77766f;border:1px solid #e6e4dd;border-radius:9px;padding:5px 10px}
  .ssub{font-size:11.5px;color:#77766f;margin:0 0 10px}
  .ssub b{color:#1c1c1b}
  .snote{display:flex;gap:8px;background:#f0f5fd;border:1px solid #dfeafb;border-radius:10px;padding:8px 10px;font-size:10.5px;color:#5a6b80;margin-bottom:10px}
  .srow{display:flex;align-items:center;gap:10px;border:1px solid #eeece6;border-radius:11px;padding:9px 11px;margin-bottom:7px}
  .sic{width:26px;height:26px;border-radius:8px;background:#eaf2fd;color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
  .srow .nm{flex:1;font-size:12px;color:#1c1c1b}
  .srow .amt{text-align:right}
  .srow .amt b{display:block;font:600 12.5px var(--font);color:#1c1c1b}
  .srow .amt i{font-style:normal;font-size:10px;color:#a3a199}
  .srow .cv{color:#b0aea6;font-size:12px}
  .tt{display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .tt b{font:700 15px var(--font-display);color:#1c1c1b;flex:1}
  .tseg{display:flex;gap:2px;background:#eeece6;border-radius:9px;padding:2px}
  .tseg span{font-size:10.5px;color:#77766f;padding:4px 9px;border-radius:7px}
  .tseg span.is-on{background:#fff;color:#1c1c1b;font-weight:600}
  .tnew{font:600 10.5px var(--font);color:var(--accent)}
  .tsearch{background:#f2f1ec;border-radius:9px;padding:6px 10px;font-size:11px;color:#a3a199;margin-bottom:9px}
  .tcol{font:600 10px var(--font);color:#77766f;display:flex;align-items:center;gap:6px;margin-bottom:7px}
  .tdot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
  .tcard{border:1px solid #eeece6;border-left:3px solid #d8d5cc;border-radius:9px;padding:7px 10px;font-size:11.5px;color:#1c1c1b;margin-bottom:6px}
  .tcard.is-hi{border-left-color:var(--accent)}
  .tmenu{margin:6px 0 0 auto;width:fit-content;background:#fff;border:1px solid #eae8e1;border-radius:11px;padding:5px;box-shadow:0 16px 36px -20px rgba(0,0,0,.35)}
  .tmenu span{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#3a3a38;padding:7px 11px;border-radius:7px}
  .tmenu span i{font-size:13px;color:#77766f}
  .tmenu span.is-on{background:#f3f2ee}
  .canvas{position:relative;background:#fbfaf8;background-image:radial-gradient(#e4e2db 1px,transparent 1px);background-size:14px 14px;
    border:1px solid #eae8e1;border-radius:13px;padding:14px;display:flex;gap:12px;min-height:200px}
  .crail{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
  .crail span{width:26px;height:26px;border-radius:8px;background:#eceae4;display:block}
  .crail span.is-on{outline:2px solid var(--accent);outline-offset:1px}
  .ccard{background:#fff;border:1px solid #eae8e1;border-radius:11px;padding:10px 12px;box-shadow:0 12px 28px -20px rgba(0,0,0,.3);width:190px;height:fit-content;position:relative;z-index:2}
  .ccard .ch{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#1c1c1b;font-weight:600;margin-bottom:2px}
  .ccard .ch em{width:7px;height:7px;border-radius:50%;background:#27a567;font-style:normal;flex:0 0 auto}
  .ccard small{display:block;font-size:10px;color:#a3a199;margin-bottom:7px}
  .crow{display:flex;justify-content:space-between;font-size:11px;color:#77766f;padding:3px 0;border-top:1px solid #f2f1ec}
  .crow b{color:#1c1c1b}
  .cmp{background:#fff;border:1px solid #eae8e1;border-radius:11px;padding:10px 12px;width:240px;align-self:flex-end;margin-left:auto;box-shadow:0 12px 28px -20px rgba(0,0,0,.3);position:relative;z-index:2}
  .cmp__h{font:600 9.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:#a3a199;margin-bottom:6px}
  /* the right-hand column is a column: numbers align to the right edge, the
     label sits between them, so the eye reads two stacks, not a wall */
  .cmp__r{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;font-size:11px;padding:3px 0;border-top:1px solid #f2f1ec;align-items:baseline}
  .cmp__r b{color:#1c1c1b}
  .cmp__r b:last-child{text-align:right}
  .cmp__r i{font-style:normal;color:#a3a199;font-size:10px;text-align:center}
  .is-up{color:#27a567;font-weight:600}
  .is-dn{color:#d8663f;font-weight:600}
  /* the wire lives BETWEEN the two cards only: a line drawn edge to edge read
     as a stray stroke past them. Round joints sit on both ends, brand blue. */
  .cwire{position:absolute;left:calc(26px + 12px + 190px);right:calc(240px + 14px);top:58%;height:2px;
    background:var(--accent);opacity:.55;z-index:1}
  .cdot{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
    background:#fff;border:2px solid var(--accent)}
  .cdot--l{left:-4px}
  .cdot--r{right:-4px}
  @media (max-width:600px){
    .canvas{flex-direction:column}
    .ccard,.cmp{width:100%}
    .crail{flex-direction:row;overflow-x:auto}
  }
  /* our own Apps glyph, the same one the sidebar uses */
  .lia-ico{width:15px;height:15px;flex:0 0 auto;vertical-align:-2px}
  .jl .lia-ico,.tab .lia-ico{width:14px;height:14px}
  .atr .lia-ico{width:13px;height:13px}
  .atc .t .lia-ico{width:16px;height:16px;color:#77766f}
  /* MCP, one stage: the setup card as it looks in Settings, and the payoff */
  .stage[data-s="mcp2"]{background-color:#dbe4f0}
  .mh{font:600 14px var(--font-display);color:#1c1c1b;margin:0 0 3px}
  .msub{font-size:11.5px;color:#77766f;margin:0 0 12px}
  .mseg{display:inline-flex;gap:2px;background:#eeece6;border-radius:10px;padding:3px;margin-bottom:14px}
  .mseg span{display:flex;align-items:center;gap:7px;font-size:12px;color:#77766f;border-radius:8px;padding:6px 14px}
  .mseg span.is-on{background:#fff;color:#1c1c1b;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.07)}
  .mseg svg{width:14px;height:14px;flex:0 0 auto}
  .mseg span.is-on svg{color:#d97757}
  .msteps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .mst{background:#fff;border:1px solid #eae8e1;border-radius:12px;padding:12px}
  .mstn{display:flex;width:20px;height:20px;border-radius:50%;background:#eaf2fd;color:var(--accent);font:600 10.5px var(--font);align-items:center;justify-content:center;margin-bottom:8px}
  .mst b{display:block;font-size:12.5px;color:#1c1c1b;margin-bottom:4px}
  .mst p{margin:0 0 9px;font-size:11px;color:#77766f;line-height:1.5}
  .mst p a{color:var(--accent);font-weight:600}
  .murl{display:flex;align-items:center;gap:8px;background:#f0f5fd;border:1px solid #dfeafb;border-radius:9px;padding:7px 10px;font-size:11px;color:#1c6fd0}
  .murl i{margin-left:auto;color:#7d9bc0}
  .mbtn{display:inline-flex;background:var(--accent);color:#fff;border-radius:9px;padding:8px 14px;font:600 11.5px var(--font)}
  .mafter{margin-top:14px;border:1px solid #eae8e1;border-radius:12px;background:#fff;padding:12px}
  .mafter__c{font:600 9.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:#a3a199;margin-bottom:8px}
  .mq{background:#eef2f7;border-radius:11px;padding:8px 12px;font-size:12px;color:#1c1c1b;width:fit-content;max-width:80%;margin-left:auto;margin-bottom:10px}
  .mcall{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#77766f;margin-bottom:8px}
  .mcall b{color:#3a3a38;font-weight:600}
  .lsn{display:flex;width:18px;height:18px;border-radius:5px;background:var(--accent);color:#fff;font:700 7px var(--font);align-items:center;justify-content:center;flex:0 0 auto}
  .mres{border:1px solid #eae8e1;border-radius:12px;overflow:hidden;margin-bottom:10px}
  .mres__h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #f0eee8}
  .mres__h b{font-size:12.5px;color:#1c1c1b}
  .macc{margin-left:auto;font-size:10px;color:#77766f;background:#f2f1ec;border-radius:999px;padding:3px 9px}
  .mres__b{display:flex;align-items:center;gap:11px;padding:11px 12px}
  .mthumb{width:44px;height:34px;border-radius:7px;background:linear-gradient(160deg,#dfe5ec,#cfd8e2);flex:0 0 auto}
  .mbest{flex:1;min-width:0}
  .mpill{display:inline-block;background:#eaf2fd;color:#1c6fd0;border-radius:999px;padding:2px 8px;font:600 9.5px var(--font);margin-bottom:3px}
  .mbest b{display:block;font-size:12.5px;color:#1c1c1b}
  .mbest i{font-style:normal;font-size:10.5px;color:#a3a199}
  .mcpl{text-align:right}
  .mcpl b{display:block;font:700 17px var(--font-display);color:#27a567}
  .mcpl i{font-style:normal;font-size:10px;color:#a3a199}
  .mres__k{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #f0eee8}
  .mres__k span{padding:9px 10px;text-align:center;border-left:1px solid #f0eee8}
  .mres__k span:first-child{border-left:0}
  .mres__k i{display:block;font-style:normal;font:600 9px var(--font);letter-spacing:.05em;text-transform:uppercase;color:#a3a199;margin-bottom:2px}
  .mres__k b{font-size:12.5px;color:#1c1c1b}
  .mres__k b.is-bad{color:#d8663f}
  .mans{margin:0;font-size:12px;color:#3a3a38;line-height:1.55}
  .mans b{color:#1c1c1b}
  @media (max-width:600px){.msteps{grid-template-columns:1fr}.mres__k{grid-template-columns:repeat(2,1fr)}}

  /* r491: 768-899 keeps two bars - the riding crumb overlaps the centred
     links below 900px. TWIN: product-lia.css */
  @media (min-width:768px) and (max-width:899px){
    .jump{top:110px}
    .jump__crumb{display:none!important}
    .crumb.is-gone{opacity:1;pointer-events:auto}
  }
  /* r483: the crumb path rides the jump once the reader scrolls past it -
     twin of the rule in product-lia.css (behavior, not vocabulary) */
  .jump__in{position:relative}
  .jump__crumb{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%);align-items:center;gap:6px;font:400 12.5px var(--font);color:var(--text3);white-space:nowrap}
  .crumb{transition:opacity .15s}
  .crumb.is-gone{opacity:0;pointer-events:none}
  .jump__crumb a{color:var(--text3)} .jump__crumb a:hover{color:var(--text)}
  .jump__crumb b{color:var(--text);font-weight:600}
  .jump__crumb .sep{color:var(--text3);opacity:.6}
  .jump.is-crumbed .jump__crumb{display:inline-flex}

  /* r483 v12 twin (behavior): phone keeps two bars, crumb never rides the jump */
  @media (max-width:767px){
    .jump{top:100px}
    .jump__crumb{display:none!important}
    .crumb{top:56px}
    .crumb.is-gone{opacity:1;pointer-events:auto}
    .jl{white-space:nowrap}
  }

  /* ── r491 (Egor): one mock per tool on the phone ─────────────────────────
     The page ran too long on 390px with both mocks per section. What leaves,
     by his list: Lia keeps the chat, loses the tile stage (analyze); Relay
     keeps the feed, loses the panes stage (relay2); Media loses the FIRST
     stage and keeps the second without its tile cells; App Tools loses the
     panes stage (apps2). MCP keeps the setup and loses the "and then, in the
     assistant" half (.mafter - twin rule in product-lia.css for the blog). */
  @media (max-width:600px){
    .stage[data-s="analyze"],
    .stage[data-s="relay2"],
    .stage[data-s="media"],
    .stage[data-s="apps2"]{display:none}
    /* media2 without cells: the tile grids and the tile's context menu go;
       the "and it lands in Uploads" box held ONLY tiles under its tabs, so
       its caption and box go with them or the tabs would sit over a void */
    .stage[data-s="media2"] .mg,
    .stage[data-s="media2"] .mdrop,
    .stage[data-s="media2"] .pcap[style],
    .stage[data-s="media2"] .pcap[style] + .pbox{display:none}
    .mafter{display:none}
  }

/* r811: light-theme twins of the hand-written dark chrome above */
html[data-theme="light"] .jump{background:rgba(247,247,245,.9)}
html[data-theme="light"] .conn{background:#FFFFFF;border-color:var(--line2)}
html[data-theme="light"] .app{outline:1px solid var(--line)}

/* r812 (Egor): the side notes beside a mock (PROMPT / WHAT LIA DOES / CONNECTED) are
   white in both themes, like the Enterprise page's .ep-note - "Nunito", 12px, the
   same border and label. They are part of the mock, not the page. */
.side .dark,.stage .dark{background:#fff!important;border:1px solid #e9e7e0!important;border-radius:12px;padding:13px 14px;color:#55544f!important;font:12px/1.55 "Nunito",system-ui,sans-serif}
.side .dark b,.stage .dark b{color:#9a988f!important;font:600 10.5px var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.side .dark .conn,.stage .dark .conn{background:#f5f4f1;border-color:#e5e3dc;color:#1c1c1b}