/* Page styles for /product/lia/ only: a VERBATIM copy of
   product-liaison.css (r483), because the page shares the same shell (jump
   bar, section heads, facts) and the same interface-mock vocabulary.
   TWIN: the mock vocabulary now lives in THREE files - features.css,
   product-liaison.css and this one; fix all three or fix none. The planned
   extraction to _assets/mocks.css is a job for a session with screenshot
   room (the r481 attempt moved 529k pixels and was reverted). */
  /* 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}
  /* r483, this page only: the tapped choice reads in brand blue */
  .ch--on{color:#007EF7;background:rgba(0,126,247,.08);border-color:rgba(0,126,247,.38);font-weight:600}
  .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{color:var(--ink,#1c1c1b);font-weight:600}   /* r486: the neutral new value had no rule and read as body text */
  .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%}
  /* r486: the twin vocabulary owns .mans2 (features.css:224,
     product-liaison.css:224); product-lia.css was copied before it existed,
     so assistant lines in this page and in blog mocks had no rule at all. */
  .mans2{margin:6px 0 0;font-size:11.5px;color:#3a3a38;line-height:1.6}
  .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)}
    .jump{top:56px}
    .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}
    /* r493 (Egor): the phone bar must read in the PAGE's order too. Hiding
       Confirm left the visible row jumping over it (ask, build, choices,
       quick); the two trio anchors go behind the dots instead, so what is
       visible is the first four sections in order. */
    .jl[href="#quick"],.jl[href="#composer"]{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 (Egor): on the phone the MCP mock ends at the setup steps - the
       "and then, in the assistant" half goes. This rule rides product-lia.css
       into all twelve blog pages; its twin in product-liaison.css covers the
       tools page. */
    .mafter{display:none}
    /* r491 (Egor): the Ask showcase keeps only the dialogue and the composer
       on the phone - the drawn Leads and Creatives panels and the client
       marquee go, the page was twice the scroll it needed to be */
    .show__r--big{display:none}
    #ask .show__marq{display:none}
  }

  /* ── r483, THIS PAGE ONLY: mock components built from Egor's product
     screenshots (panels, geo modal, quiz, slash menu, composer, context
     window). Prefixed lx- on purpose: NOT part of the TWIN vocabulary,
     never copy into features.css / product-liaison.css. Demo data only. */
  .lx-x{margin-left:auto;color:#a7a59d;font-size:13px;line-height:1}
  .lx-panel{background:#fff;border:1px solid #e8e6df;border-radius:14px;padding:12px;box-shadow:0 14px 34px -22px rgba(20,20,18,.18)}
  .lx-ph{display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .lx-date{font:500 10px var(--font);color:#5b5a55;background:#fff;border:1px solid #e2e0d9;border-radius:999px;padding:4px 10px}
  .lx-search{display:flex;align-items:center;gap:7px;font:400 10.5px var(--font);color:#a7a59d;background:#fff;border:1px solid #e8e6df;border-radius:10px;padding:7px 10px;margin-bottom:8px}
  .lx-chips{display:flex;gap:6px;margin-bottom:9px}
  .lx-fchip{font:500 9.5px var(--font);color:#1c1c1b;background:#eef4fd;border:1px solid #d7e6fb;border-radius:999px;padding:3px 9px}
  .lx-fchip b{color:#007EF7;font-weight:600}
  .lx-prow{display:flex;align-items:center;gap:9px;padding:8px 4px;border-top:1px solid #f0eee8}
  .lx-prow .th{width:34px;height:34px;border-radius:8px;flex:0 0 auto}
  .lx-pm{min-width:0;width:118px}
  .lx-pm b{display:block;font:600 10.5px var(--font);color:#1c1c1b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lx-pm i{display:block;font-style:normal;font:400 9px var(--font);color:#8a8a86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lx-pill{font:500 8.5px var(--font);color:#5b5a55;background:#fff;border:1px solid #e2e0d9;border-radius:6px;padding:2px 7px;white-space:nowrap}
  .lx-pk{display:flex;gap:10px;margin-left:auto}
  .lx-pk span{display:flex;flex-direction:column;align-items:flex-end}
  .lx-pk i{font-style:normal;font:500 7.5px var(--font);color:#a7a59d;text-transform:uppercase;letter-spacing:.03em}
  .lx-pk b{font:600 10px var(--font);color:#1c1c1b}
  .lx-bar{display:block;width:52px;height:4px;border-radius:2px;background:#efede8;overflow:hidden;flex:0 0 auto}
  .lx-bar u{display:block;height:100%;background:#007EF7;border-radius:2px}
  .lx-cards2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}
  .lx-c2{background:#fff;border:1px solid #e8e6df;border-radius:11px;padding:9px 11px}
  .lx-c2 i{display:block;font-style:normal;font:500 8.5px var(--font);color:#a7a59d}
  .lx-c2 b{display:block;font:700 16px var(--font);color:#1c1c1b;margin:2px 0 1px}
  .lx-c2 em{font-style:normal;font:400 8.5px var(--font);color:#8a8a86}
  .lx-trow{display:grid;grid-template-columns:1fr 1.5fr .7fr .5fr;gap:8px;align-items:center;padding:6px 4px;border-top:1px solid #f0eee8;font:400 9.5px var(--font);color:#3d3c38}
  .lx-trow--h{font:500 8.5px var(--font);color:#a7a59d;text-transform:uppercase;letter-spacing:.03em;border-top:0}
  .lx-cc{font-style:normal;font:600 7.5px var(--font);color:#5b5a55;background:#efede8;border-radius:4px;padding:1px 4px;margin-right:3px}
  .lx-q{font:500 8.5px var(--font);color:#007EF7;background:#eef4fd;border-radius:6px;padding:2px 8px;justify-self:start}
  /* quiz quick answer */
  .lx-att{display:flex;align-items:center;justify-content:center;width:96px;height:96px;margin:0 0 10px auto;border-radius:12px;background:linear-gradient(140deg,#cfd8cf,#8f9b90);position:relative;color:#fff}
  .lx-attb{position:absolute;top:6px;left:6px;font:700 6.5px var(--font);letter-spacing:.06em;color:#fff;background:rgba(20,20,18,.55);border-radius:4px;padding:2px 5px}
  .lx-att i{font-size:20px;background:rgba(255,255,255,.32);border-radius:50%;padding:8px}
  .lx-quiz{background:#fff;border:1px solid #e8e6df;border-radius:14px;padding:11px 13px;margin-top:10px;box-shadow:0 14px 34px -22px rgba(20,20,18,.18)}
  .lx-qh{display:flex;font:600 7.5px var(--font);letter-spacing:.07em;color:#a7a59d}
  .lx-qt{display:block;font:600 11px var(--font);color:#1c1c1b;margin:5px 0 8px}
  .lx-qopts{display:flex;flex-wrap:wrap;gap:6px}
  .lx-qo{font:500 9.5px var(--font);color:#1c1c1b;background:#fff;border:1px solid #e2e0d9;border-radius:999px;padding:6px 11px}
  .lx-qself{border:1px dashed #d9d7cf;border-radius:10px;padding:7px 11px;margin-top:8px}
  .lx-qself b{display:block;font:600 10px var(--font);color:#5b5a55}
  .lx-qself i{font-style:normal;font:400 8.5px var(--font);color:#a7a59d}
  /* slash menu + composer */
  .lx-slash{background:#fff;border:1px solid #e8e6df;border-radius:14px;padding:6px;max-width:300px;margin-bottom:12px;box-shadow:0 18px 44px -24px rgba(20,20,18,.22)}
  .lx-so{padding:7px 11px;border-radius:9px}
  .lx-so--on,.lx-so:hover{background:#f6f4ef}
  .lx-so b{display:block;font:600 11px var(--font);color:#1c1c1b}
  .lx-so i{display:block;font-style:normal;font:400 9px var(--font);color:#8a8a86}
  .lx-composer{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e8e6df;border-radius:14px;padding:11px 13px;box-shadow:0 10px 26px -18px rgba(20,20,18,.16)}
  .lx-composer i{color:#5b5a55;font-size:13px}
  .lx-cph{flex:1}
  .lx-model{font:500 9.5px var(--font);color:#5b5a55;display:inline-flex;align-items:center;gap:3px}
  .lx-model i{font-size:9px}
  .lx-send{width:24px;height:24px;border-radius:50%;background:#007EF7;color:#fff;display:inline-flex;align-items:center;justify-content:center}
  .lx-send i{color:#fff;font-size:12px}
  /* /rule quick action mounted into the composer */
  .lx-rule{background:#fff;border:1px solid #e8e6df;border-radius:14px;padding:11px 13px;box-shadow:0 10px 26px -18px rgba(20,20,18,.16)}
  .lx-rl{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font:500 10.5px var(--font);color:#1c1c1b}
  .lx-rchip{font:600 10px var(--font);color:#007EF7;background:#eef4fd;border:1px solid #d7e6fb;border-radius:999px;padding:2px 9px}
  .lx-rchip--pick{color:#5b5a55;background:#f4f2ec;border-color:#e2e0d9}
  .lx-rd{font:400 10.5px var(--font);color:#a7a59d;margin:10px 0 12px}
  .lx-composer--bare{border:0;box-shadow:none;padding:0}
  .lx-plus{position:absolute;left:0;top:0;background:#fff;border:1px solid #e8e6df;border-radius:14px;padding:6px;width:190px;z-index:2;box-shadow:0 18px 44px -24px rgba(20,20,18,.22)}
  .lx-po{display:flex;align-items:center;gap:8px;font:500 10.5px var(--font);color:#1c1c1b;padding:7px 9px;border-radius:8px}
  .lx-po:hover{background:#f6f4ef}
  .lx-po i{font-size:12px;color:#5b5a55}
  .lx-cr{margin-left:auto;font-size:9px;color:#a7a59d}
  .lx-psep{height:1px;background:#f0eee8;margin:4px 6px}
  .lx-dc{display:flex;gap:9px;align-items:baseline;margin-top:9px;padding:0 4px}
  .lx-dc b{font:600 9px var(--font);color:#5b5a55;white-space:nowrap}
  .lx-dc span{font:400 8.5px var(--font);color:#a7a59d}
  @media (max-width:600px){
    .lx-pk{gap:6px}
    .lx-pk span:nth-child(4){display:none}
    .lx-bar{display:none}
    .lx-pm{width:auto;flex:1}
    .lx-trow{grid-template-columns:1fr 1.6fr .7fr}
    .lx-trow span:nth-child(4){display:none}
    .lx-att{width:80px;height:80px}
    .lx-plus{position:static;width:100%;margin-bottom:12px}
  }

  /* ── r483, THIS PAGE ONLY: the hero is the features split (copy left, a
     looping shot right), and the jump bar wears the features tab-bar face
     instead of the liaison pill row - the mix Egor asked for. */
  .hero__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,4vw,56px);align-items:center;text-align:left;max-width:1080px}
  .hero__l{max-width:620px}
  .hero__l h1{margin-left:0;margin-right:0}
  .hero__l .hero__sub{margin-left:0;margin-right:0}
  .hero__l .ask{margin-left:0}
  .hero__shot{position:relative;border-radius:20px;overflow:hidden;background:var(--ink2);aspect-ratio:4/5;height:clamp(300px,38vw,440px);width:auto}
  .hero__shot video{width:100%;height:100%;object-fit:cover;display:block}
  @media (max-width:900px){
    .hero__in{grid-template-columns:1fr;gap:28px}
    .hero__shot{height:auto;width:100%;max-width:340px;margin:0 auto}
  }
  @media (max-width:600px){
    .hero__shot{max-width:100%}
  }

  /* r483: hero v3 (Egor) - the liaison headline with the split: video LEFT,
     title RIGHT, and the liaison pill jump underneath. */
  .hero__in--vfirst{grid-template-columns:auto minmax(0,1fr)}
  .hero__in--vfirst .hero__l h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.02em}
  @media (max-width:900px){
    .hero__in--vfirst{grid-template-columns:1fr}
    .hero__in--vfirst .hero__shot{order:2}
  }

  /* ── r483 v5, THIS PAGE ONLY ──
     HERO, the landing law: the video is sized from the VIEWPORT HEIGHT and
     .hero__in--tall is the ONE element that owns the height (two rulers always
     overflow). Copy block sits flush to the RIGHT edge of the hero field. */
  .hero__in--tall{--heroPad:clamp(18px,3.5vh,40px);min-height:min(calc(100svh - 240px),620px);
    align-items:center;padding-top:var(--heroPad);padding-bottom:var(--heroPad);box-sizing:border-box;max-width:1160px}
  /* r483: .hero__in IS .wrap - never a padding shorthand here (see features.css) */
  .hero__in--tall .hero__shot{height:min(calc(100svh - 240px - 2 * var(--heroPad)),560px);
    aspect-ratio:4/5;width:auto;max-width:100%}
  .hero__in--tall .hero__l{margin-left:auto;max-width:560px;text-align:right}
  .hero__in--tall .hero__l .hero__sub{margin-left:auto;margin-right:0}
  /* air between the hero and the jump bar - it was suffocating */
  .jump{margin-top:34px}
  @media (max-width:900px){
    .hero__in--tall{min-height:0}
    .hero__in--tall .hero__shot{height:auto;width:100%;max-width:340px;margin:0 auto;aspect-ratio:4/5}
    .hero__in--tall .hero__l{margin-left:0;text-align:left}
    .hero__in--tall .hero__l .hero__sub{margin-left:0}
    .jump{margin-top:22px}
  }
  /* the crumb path rides the jump once the reader scrolls past it (r483) */
  .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}
  /* ── comet-style overview grid, our canon ── */
  .gany{padding:58px 0 6px}
  /* skeleton vocabulary for the grid art - abstract, one key moment per card */
  .sk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:300px}
  @media (max-width:760px){
  }

  /* ── r483 v6: one block language for every enumeration. The stages drop the
     pastel tints and wear the same dark card shell as the overview grid; the
     light mock floats inside like a screenshot. Appended AFTER the vocabulary
     on purpose - the cascade law works for us here. */
  .stage,.stage--flip,.stage[data-s],.stage--flip[data-s]{background-color:var(--ink2);border:1px solid var(--line2);border-radius:24px;
    background-image:radial-gradient(520px 260px at 18% 0%,rgba(255,255,255,.05),transparent)}
  .stage .dark{background:#232321;border:1px solid var(--line2)}
  .gc .app{box-shadow:0 18px 40px -26px rgba(0,0,0,.5);width:100%}
  .gc .lx-panel,.gc .lx-slash{box-shadow:none;max-width:none}
  @media (max-width:760px){}

  /* ── r483 v7: the live composer. The real input, typing real questions -
     html instead of a screen recording. Static first query under
     prefers-reduced-motion. */
  .typer{padding:46px 0 0}
  .tc{max-width:760px;margin:0 auto;background:#fff;border:1px solid #e8e6df;border-radius:18px;padding:18px 20px 14px;
    box-shadow:0 30px 70px -34px rgba(30,35,50,.35);font-family:var(--font-ui)}
  /* r493: the field is a BLOCK. As a flex row the caret was a sibling ITEM
     aligned to the first baseline, so a phrase that wrapped on a phone left
     the caret hanging at the end of line one. Inline, it follows the last
     letter wherever that letter ends up. */
  .tc__field{min-height:26px;font-size:15.5px;line-height:1.5;color:#1c1c1b}
  .tc__text{white-space:pre-wrap}
  .tc__ph{color:#a7a59d;display:none}
  .tc.is-empty .tc__ph{display:inline}
  .tc__caret{display:inline-block;width:1.5px;height:17px;background:#1c1c1b;margin-left:2px;vertical-align:-3px;animation:tcblink 1.05s steps(1) infinite}
  @keyframes tcblink{50%{opacity:0}}
  .tc__row{display:flex;align-items:center;gap:10px;margin-top:16px}
  .tc__row i.ph-plus{color:#5b5a55;font-size:15px}
  .tc__sp{flex:1}
  .tc__model{font:500 12px "Nunito",sans-serif;color:#3d3c38;display:inline-flex;align-items:center;gap:4px}
  .tc__model i{font-size:10px;color:#5b5a55}
  .tc__send{width:30px;height:30px;border-radius:50%;background:#007EF7;color:#fff;display:inline-flex;align-items:center;justify-content:center}
  .tc__send i{font-size:14px}
  @media (max-width:600px){.tc{padding:15px 16px 12px}}

  /* ── r483 v8: the light body. Old stage sections are gone; the page is a
     showcase (dialogue + документ), alternating article rows, a colored trio
     and cross-links. Short words, big mocks. */
  .show{padding:44px 0 8px}
  .show__card{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;border-radius:28px;padding:clamp(26px,3.5vw,48px);
    background-color:#dbe4f0;background-image:radial-gradient(640px 320px at 16% 0%,rgba(255,255,255,.55),transparent);color:#1c1c1b}
  .show__l .tc{margin:0;max-width:none;box-shadow:0 24px 54px -30px rgba(30,35,50,.45)}
  .show__r{position:relative;min-height:300px}
  /* article rows: text jumps side to side */
  .row{padding:64px 0 0}
  .row__in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,64px);align-items:center;max-width:1120px}
  .row--flip .row__in{grid-template-columns:1.2fr .8fr}
  .row--flip .row__t{order:2}
  .row__t{text-align:left}
  .row__t em{display:block;font:500 12.5px var(--font);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}
  .row__t h2{font-size:clamp(26px,2.8vw,38px);font-weight:800;line-height:1.12;margin:0 0 12px}
  .row__t p{margin:0;font-size:15px;font-weight:700;color:var(--text3);line-height:1.55}
  .row__m .app{box-shadow:0 30px 70px -34px rgba(0,0,0,.55)}
  /* trio on pastel tints */
  .trio{padding:78px 0 0}
  .trio__h,.morex__h{font-size:clamp(26px,3vw,36px);font-weight:800;text-align:center;margin:0 0 30px}
  .trio__g{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1120px;margin:0 auto}
  .trio__c{border-radius:24px;padding:18px 18px 20px;background-color:var(--tint,#dbe4f0);
    background-image:radial-gradient(420px 220px at 20% 0%,rgba(255,255,255,.5),transparent);color:#1c1c1b;scroll-margin-top:130px}
  .trio__shot{border-radius:16px;overflow:hidden;margin-bottom:14px;min-height:210px;display:flex;align-items:center}
  .trio__shot .app{width:100%;box-shadow:0 18px 40px -24px rgba(30,35,50,.35)}
  .trio__shot--img{display:block;min-height:0}
  .trio__shot--img img{display:block;width:100%;height:210px;object-fit:cover;border-radius:16px}
  .trio__c>b{display:block;font:700 15.5px var(--font-display);margin:0 2px 4px}
  .trio__c>p{margin:0 2px;font-size:12.5px;color:#55544f}
  /* cross-links to the rest of the OS */
  .morex{padding:78px 0 8px}
  .morex__g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1120px;margin:0 auto}
  .morex__c{display:flex;flex-direction:column;gap:7px;border-radius:20px;padding:20px 22px;background:var(--ink2);border:1px solid var(--line2);transition:.16s}
  .morex__c:hover{border-color:#4a4a47;transform:translateY(-2px)}
  .morex__c b{font:700 15px var(--font-display)}
  .morex__c p{margin:0;font-size:12.5px;color:var(--text3);line-height:1.55}
  .morex__go{margin-top:auto;padding-top:8px;font:600 12.5px var(--font);color:#007EF7;display:inline-flex;align-items:center;gap:5px}
  .morex__go i{font-size:12px}
  @media (max-width:900px){
    .show__card{grid-template-columns:1fr;gap:24px}
    .show__r{min-height:260px}
    .row__in,.row--flip .row__in{grid-template-columns:1fr}
    .row--flip .row__t{order:0}
    .trio__g,.morex__g{grid-template-columns:1fr}
  }

  /* ── r483 v9: the showcase grows into a full dialogue + two big panels the
     chat draws, with a depth marquee of client logos underneath. */
  .show__card--big{grid-template-columns:1fr 1.08fr;align-items:start}
  .chat{background:#f5f4f1;border:1px solid #e5e3dc;border-radius:18px;padding:18px;font-family:var(--font-ui);
    font-size:12.5px;color:#55544f;box-shadow:0 24px 54px -30px rgba(30,35,50,.45)}
  .chat__u{width:fit-content;margin:0 0 12px auto;background:#e9e7e0;color:#1c1c1b;border-radius:14px;padding:8px 13px;font:400 12.5px "Nunito",sans-serif}
  .chat__a{font-family:"Nunito",ui-rounded,system-ui,sans-serif;font-size:14px;line-height:1.6;color:#1c1c1b;margin:0 0 12px}
  .chat .lx-att{margin-bottom:12px}
  .chat .status{margin-bottom:12px}
  .chat .lx-quiz{margin-top:0;box-shadow:none}
  .chat .card{box-shadow:none}
  .chat .tc{box-shadow:none;border:1px solid #e2e0d9;padding:14px 16px 11px}
  .chat .lx-dc{margin-top:8px}
  .show__r--big{min-height:640px}
  .show__p{position:absolute;width:88%;box-shadow:0 30px 70px -32px rgba(30,35,50,.55)}
  .show__p1{left:0;top:0;z-index:1}
  .show__p2{right:0;top:44%;z-index:2}
  .lx-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
  .lx-filters span{font:500 9.5px "Nunito",sans-serif;color:#5b5a55;background:#fff;border:1px solid #e2e0d9;border-radius:999px;padding:4px 10px;white-space:nowrap}
  .lx-filters span::after{content:" \2304";color:#a7a59d}
  /* depth marquee: near chips bigger and closer, far ones smaller and dimmer */
  /* r492: the strip used to hang half outside the card (bottom:-16px) inside
     an overflow:hidden box, so the near chip - scaled 1.14 and lifted - had
     its top and its shadow sliced off. It sits inside the card now and the
     row is given the room the scaling needs. */
  .show__marq{position:absolute;left:-6px;right:-6px;bottom:10px;z-index:3;overflow:hidden;display:flex;justify-content:center;
    padding:10px 0 6px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .marq__t{display:flex;align-items:center;justify-content:center;gap:12px;animation:marqpp 9s ease-in-out infinite alternate}
  @keyframes marqpp{from{transform:translateX(4%)}to{transform:translateX(-4%)}}
  .mchip{width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid #e2e0d9;flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;color:#1c1c1b;font-size:22px}
  .mchip svg{width:22px;height:22px}
  .mchip--near{transform:scale(1.14) translateY(-2px);z-index:2}
  .mchip--far{transform:scale(.82) translateY(2px);opacity:.75;z-index:0}
  @media (prefers-reduced-motion: reduce){.marq__t{animation:none}}
  @media (max-width:900px){
    .show__card--big{grid-template-columns:1fr}
    .show__r--big{min-height:520px}
    .show__p{width:96%}
  }

  /* r483 v10: brand-colored client chips */
  .mchip--meta{color:#0081FB}
  .mchip--ig{color:#E1306C}
  .mchip--fb{color:#1877F2}
  .mchip--claude{color:#D97757}
  .mchip--gpt{color:#000}
  /* mocks keep the UI face and refuse selection; the serif belongs ONLY to
     Lia's answers (r481 law extended to the showcase vocabulary) */
  .chat,.tc,.lx-panel,.lx-quiz,.lx-slash,.lx-plus,.lx-menu{user-select:none;-webkit-user-select:none;cursor:default}
  .chat,.chat *,.tc,.tc *,.lx-panel,.lx-panel *,.lx-quiz,.lx-quiz *,.lx-slash,.lx-slash *,.lx-plus,.lx-plus *,.lx-menu,.lx-menu *{font-family:var(--font-ui)}
  /* r499: the line above is not enough. Dozens of rules inside these mocks set
     the `font` SHORTHAND with var(--font) - `.lx-c2 b{font:700 16px var(--font)}`
     - and a shorthand later in the file beats a blanket font-family at equal
     specificity, so numbers and creative names came out in "Nunito". Redefine
     the VARIABLE in scope and every descendant follows, whatever its weight
     (the r481 law, the same one .app already uses). */
  .chat,.tc,.lx-panel,.lx-quiz,.lx-slash,.lx-plus,.lx-menu{--font:"Nunito",ui-rounded,system-ui,sans-serif;--font-display:"Nunito",ui-rounded,system-ui,sans-serif}
  .chat .chat__a{font-family:"Nunito",ui-rounded,system-ui,sans-serif}
  .lx-dc span{white-space:normal}
  /* rows: the text aligns to its own side */
  .row--flip .row__t{text-align:right}
  .row__t h2,.row__t p,.row__t em{text-align:inherit}   /* site.css centers h2 at element level; inheritance alone loses */
  /* teaser mocks on the cross-link cards */
  .morex__shot{border-radius:12px;overflow:hidden;margin-bottom:12px}
  .morex__app{box-shadow:none;padding:12px 13px;font-size:10.5px}
  .morex__app .rr{margin-bottom:0}

  /* r483 v11: the summary cards match leads.js verbatim (accent-bordered
     total, platform glyphs at the numbers, fb/ig bar in the app's colors) */
  .lx-c2h{display:flex;align-items:center}
  .lx-c2h i{font-style:normal;font:500 8.5px "Nunito",sans-serif;color:#a7a59d}
  .lx-c2i{margin-left:auto;font-size:12px!important;color:#a7a59d}
  .lx-c2--total{position:relative;border-color:#d7e6fb}
  .lx-c2--total::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:#007EF7}
  .lx-c2 em{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:8px}
  .lx-c2 em i{font-size:8.5px;margin-right:1px}
  .lx-c2 em u,.lx-plat u{text-decoration:none;color:#a7a59d;font-weight:400;font-size:.82em}
  .lx-plat{display:flex;gap:14px;align-items:baseline}
  .lx-plat span{display:inline-flex;align-items:baseline;gap:4px}
  .lx-plat i{font-size:14px;align-self:center}
  .lx-fb{color:#6BA6FF}
  .lx-ig{color:#E1306C}
  .lx-platbar{display:flex;height:5px;border-radius:3px;overflow:hidden;margin-top:7px}
  .lx-platbar__fb{background:#6BA6FF}
  .lx-platbar__ig{background:#E1306C}
  /* panels spread over the column: no dead air under the logos */
  .show__r--big{align-self:stretch;min-height:520px}
  .show__p2{top:auto;bottom:70px}
  .show__marq{bottom:2px}
  /* the rest of the OS: twice the presence, mocks included, air before the banner */
  .morex{padding:78px 0 64px}
  .morex__c{min-height:340px;padding:24px 26px;gap:9px}
  .morex__c b{font-size:17px}
  .morex__c p{font-size:13.5px}
  .morex__shot{margin-bottom:16px}
  .morex__app{padding:18px;font-size:12.5px}
  .morex__app .mg{grid-template-columns:repeat(4,1fr);gap:8px}

  /* ── r483 v12: the phone keeps TWO bars. The crumb is pinned under the nav
     and never rides the jump (no room in one row); the jump sticks below it. */
  /* r491: 768-899 keeps two bars TOO. The riding crumb is absolute at the
     left while the links stay centred, and below 900px the two meet: at 820
     the crumb's right edge (82) sat past Ask's left (69) and the bar read as
     scrambled. Same cure as the phone, at the desktop nav height.
     TWIN: product-liaison.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}
  }
  @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;padding:8px 10px;font-size:12px}
    .jl i{display:none}
    .jl.jl--more i{display:inline-block}
    .jump__in{gap:2px}
    .row__t,.row--flip .row__t{text-align:left}
    /* showcase: panels stack, no absolute overlap on a narrow screen */
    .show__card--big{grid-template-columns:1fr;gap:22px}
    .show__r--big{min-height:0;align-self:auto}
    .show__p{position:static;width:100%;margin:0 0 14px}
    .show__p2{bottom:auto}
    .show__marq{position:static;margin-top:2px}
    .lx-pk span:nth-child(3){display:none}
    .lx-prow .lx-pill{display:none}
    .lx-pm{min-width:0}
    .lx-ph{flex-wrap:wrap;row-gap:6px}
  }

  /* r483 v13: the cross-link cards stand taller and their shots share one
     height, so the three read as a set rather than three accidents. */
  .morex__c{min-height:500px}
  .morex__shot{height:250px;display:flex;align-items:flex-start;overflow:hidden}
  .morex__shot .morex__in{width:154%;zoom:.65}
  .morex__app{width:100%;padding:14px 15px;font-size:11.5px}
  .morex__app .mg{grid-template-columns:repeat(3,1fr);gap:7px}
  .row__m .app{min-height:300px}   /* the three row mocks read as one set */
  .morex__app .rr{margin-bottom:9px}
  .morex__app .chat__a{font-size:12px;line-height:1.5}
  /* r792: the phone drops the zoom. 154% x .65 is ~100% anyway, so the scaled
     layout buys nothing here, and CSS zoom is the property WebKit and Blink read
     differently: the card measured flush in Chrome and a hair wide on the phone.
     Natural width, natural size, nothing left to disagree about. */
  @media (max-width:900px){
    .morex__c{min-height:0}
    .morex__shot{height:auto}
    .morex__shot .morex__in{width:100%;zoom:normal}
    .morex__app{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
    .morex__app .rb,.morex__app .cmt{max-width:100%}
  }

/* 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"] .morex__c:hover{border-color:#B9B8B2}
html[data-theme="light"] .gc .app,html[data-theme="light"] .row__m .app{box-shadow:0 18px 40px -26px rgba(17,20,23,.25);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}