/* Page styles for /product/overview/ only: the tab switcher, the five
   light interface stages, and the mindmap. Interface mocks are drawn in
   the LIGHT theme (AGENTS law) while the page around them stays dark. */
  /* ── tab switcher (claude-style) ── */
  .tabs{display:flex;justify-content:center;margin-bottom:26px}
  .tabs__bar{display:inline-flex;gap:4px;background:var(--ink2);border:1px solid var(--line2);border-radius:14px;padding:5px}
  .tab{display:inline-flex;align-items:center;gap:8px;font:600 13.5px var(--font);color:var(--text3);border:0;background:none;border-radius:10px;padding:9px 18px;cursor:pointer;transition:.15s}
  .tab i{font-size:15px}
  .tab:hover{color:var(--text)}
  .tab.is-on{background:var(--surface2);color:var(--text)}
  .stagewrap{max-width:1060px;margin:0 auto}
  .stage{border-radius:22px;padding:40px;display:none;grid-template-columns:1.5fr .72fr;gap:24px;align-items:start;min-height:430px;background-image:radial-gradient(600px 300px at 20% 0%,rgba(255,255,255,.5),transparent)}
  .stage.is-on{display:grid}
  .stage--flip{grid-template-columns:.72fr 1.5fr}
  /* per-tab tints, our light family */
  .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}
  /* the app frame is a SCREENSHOT: not selectable */
  .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}
  /* caption */
  .caption{display:grid;grid-template-columns:.9fr 1.4fr;gap:40px;align-items:start;max-width:1060px;margin:30px auto 0}
  .caption h3{font-size:22px}
  .caption p{margin:0 0 14px;color:var(--text3);font-size:14.5px}
  .cap-pane{display:none}
  .cap-pane.is-on{display:contents}

  /* ── mindmap section ── */
  .mm{display:grid;grid-template-columns:.62fr 1.38fr;gap:40px;align-items:center}
  .mm__list{display:flex;flex-direction:column}
  .mm__item{border-top:1px solid var(--line);padding:22px 0}
  .mm__item h3{display:flex;align-items:center;gap:10px;font-size:17px}
  .mm__item h3 i{color:var(--text3);font-size:17px}
  .mm__item p{margin:6px 0 0;font-size:13.5px;color:var(--text3);line-height:1.6}
  .map{position:relative;height:560px}
  .map svg{position:absolute;inset:0;width:100%;height:100%}
  .map__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px}
  .map__center img.word{height:34px}
  .mnode{position:absolute;transform:translate(-50%,-50%);font:600 13.5px var(--font);color:var(--text);white-space:nowrap;cursor:default}
  .mnode--sub{font:400 11.5px var(--font);color:var(--text4)}
  .mnode--link{cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
  .mnode--link:hover{color:var(--accent);text-decoration-color:var(--accent)}
  .mcard{position:absolute;z-index:5;width:250px;background:var(--ink2);border:1px solid var(--line2);border-radius:14px;padding:14px 15px;box-shadow:0 22px 50px -20px rgba(0,0,0,.6);opacity:0;pointer-events:none;transform:translateY(6px);transition:.16s}
  .mcard.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
  .mcard b{display:block;font:700 13.5px var(--font-display);margin-bottom:5px}
  .mcard .mtext{display:block;font-size:11.5px;color:var(--text3);line-height:1.55;text-decoration:none;cursor:pointer;pointer-events:auto}
  .mcard .mtext:hover{color:var(--text)}
  .mcard p{margin:0;font-size:11.5px;color:var(--text3);line-height:1.55}
  .mcard .go{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:12.5px;font-weight:600;margin-top:9px;text-decoration:none}
  .mcard .go i{font-size:15px}
  /* full-scale interface miniatures inside mindmap cards: the whole mock,
     scaled down, never cropped. The card link lives on the text (.go). */
  .mshot{display:block;position:relative;overflow:hidden;border-radius:10px;border:1px solid #e5e3dc;background:#f5f4f1;margin:6px 0 10px;pointer-events:none;user-select:none;-webkit-user-select:none}
  .mshot__in{display:block;width:520px;transform-origin:top left}
  .mshot .app{box-shadow:none;border:0;border-radius:0;background:#f5f4f1}
  /* zoom scales the LAYOUT, so the card measures the real height and nothing
     is ever cropped. Fallback keeps transform with hand-measured heights. */
  .mshot__in{zoom:.423}
  @supports not (zoom:1){
    .mshot__in{zoom:normal;transform:scale(.423)}
    .mshot--relay{height:173px}
    .mshot--media{height:163px}
    .mshot--mcp{height:82px}
    .mshot--build{height:190px}
    .mshot--folders{height:150px}
  }
  .mans2{margin:6px 0 0;font-size:11.5px;color:#3a3a38;line-height:1.6}
  /* Relay folders settings, drawn in the mock vocabulary */
  .fdtop{text-align:center;padding:4px 0 10px}
  .fdtop>i{font-size:22px;color:#9a988f;display:block;margin-bottom:8px}
  .fdtop p{margin:0 auto 12px;font-size:12px;color:#77766f;max-width:330px;line-height:1.5}
  .fdbtn{display:inline-block;background:var(--accent);color:#fff;font:600 12.5px var(--font);border-radius:10px;padding:9px 18px}
  .fdlab{font:600 11px var(--font);color:#9a988f;margin:6px 0 6px}
  .fdlist{background:#efede8;border-radius:12px;padding:6px 4px}
  .fdrow{display:flex;align-items:baseline;gap:10px;padding:9px 12px}
  .fdrow b{font-size:13px;color:#1c1c1b}
  .fdrow i{font-style:normal;font-size:11px;color:#9a988f}
  .fdrow em{margin-left:auto;font-style:normal;color:#9a988f}
  /* ── 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 tab pages and the mindmap */
  @media (max-width:600px){
    .tabs__bar{border-radius:16px}
    .tab{padding:8px 13px;font-size:12.5px}
    .caption{gap:14px;margin-top:22px}
    .caption h3{font-size:19px}
    /* the map stays, claude-style: stretched tall so the % positions spread
       out vertically; a tap opens the card, and the card takes the width */
    .map{height:740px}
    .mnode{font-size:12.5px}
    .mnode--sub{font-size:10.5px}
    .mcard,.mcard.is-on{display:none}
    .mm{gap:26px}
  }
  /* 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}
    .caption{grid-template-columns:1fr}
    .mm{grid-template-columns:1fr;gap:0}
  }
  /* the tab bar never wraps: overflow tabs live behind a claude-style "..." */
  .tmore{display:none;position:relative}
  .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:180px;z-index:40}
  .tmore.is-open .tmore__menu{display:block}
  .tmore__menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--text2);font:500 14px var(--font);padding:11px 12px;border-radius:9px;cursor:pointer;text-align:left}
  .tmore__menu button:hover{color:var(--text);background:var(--surface2)}
  .tmore__menu button i{font-size:16px}
  @media (max-width:600px){
    .tabs__bar{flex-wrap:nowrap}
    .tab[data-t="media"],.tab[data-t="apps"]{display:none}
    .tmore{display:block}
  }
  /* features hero: the copy sits left, a small looping shot on the right.
     The video is sized from its own height so the hero block keeps its size. */
  .hero__in{--heroPad:clamp(18px,3.5vh,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,4vw,56px);
    align-items:center;text-align:left;max-width:1160px;min-height:min(calc(100svh - 240px),620px);padding-top:var(--heroPad);padding-bottom:var(--heroPad);box-sizing:border-box}
  /* r483: .hero__in IS .wrap - a padding SHORTHAND here nukes the wrap's side padding (the compound-element law, sideways) */
  /* r483: the features hero grows to the Lia size - full-hd first screen,
     the video sized from the VIEWPORT height (the landing law), same h1 */
  .hero__l{max-width:620px}
  .hero__l h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.02em;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:min(calc(100svh - 240px - 2 * var(--heroPad)),560px);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%}
  }
  /* 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)}
  /* 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}

/* r811: light-theme twins of the hand-written dark chrome above */
html[data-theme="light"] .conn{background:#FFFFFF;border-color:var(--line2)}
html[data-theme="light"] .app,html[data-theme="light"] .mock,html[data-theme="light"] .shot{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}