/* ============================================================
   v13.42.0 — the programme band, with Sparky and Ray's chat.
   The tiles are one column on the LEFT (no meta line); the feature
   panel takes the rest. A programme with a chat turns the panel into
   it (mascot-chat.js): "transparent" is the panel's own see-through
   card, "notebook" (.nb) a white Learn-with-us window.
   ============================================================ */
.prog-hero-band .prog-hero-in{max-width:1400px}
.prog-hero-band .prog-hero-split{grid-template-columns:320px minmax(0,1fr);gap:26px;align-items:start}
.prog-hero-band .prog-tilewrap{order:-1}
.prog-hero-band .prog-tiles{grid-template-columns:1fr;gap:9px}
.prog-hero-band .prog-tile{grid-template-columns:36px 1fr;align-items:center;padding:11px 14px}
.prog-hero-band .prog-tile:hover{transform:translateX(2px)}
.prog-hero-band .t-name{font-size:14.5px}
.prog-hero-band .t-sub{font-size:12.5px}
.prog-hero-band .t-meta{display:none}

/* the chat replaces the copy and picture */
.mstage[hidden]{display:none!important}
.prog-feature.staged{display:block;padding:14px 16px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px -24px rgba(20,0,50,.55)}
.prog-feature.staged>.pf-copy,.prog-feature.staged>.pf-art{display:none}
.mstage{display:grid;grid-template-rows:auto 1fr auto;height:clamp(420px,60vh,540px);min-width:0;
  --mch-ui:'Poppins',system-ui,sans-serif;--mch-chat:Nunito,'Poppins',system-ui,sans-serif;font-family:var(--mch-chat)}
.mch-head{padding:0 4px 7px;border-bottom:1px solid rgba(255,255,255,.16)}
.mch-title{font:700 clamp(16px,1.3vw,19px)/1.25 var(--mch-ui);color:#fff;letter-spacing:.01em}
.mch-chat{overflow-y:auto;min-height:0;padding:10px 4px 4px;
  -webkit-mask-image:linear-gradient(transparent 0,#000 14px);mask-image:linear-gradient(transparent 0,#000 14px);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.mch-chat::-webkit-scrollbar{width:6px}.mch-chat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:3px}
.mch-log{max-width:820px;margin:0 auto}
.mch-msg{display:flex;gap:7px;align-items:flex-end;margin:0 0 7px;animation:mch-in .32s ease}
.mch-msg.quiet{animation:none}
.mch-msg.sparky{flex-direction:row-reverse}
@keyframes mch-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mch-av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.22);background:#fff}
.mch-av img{width:100%;height:100%;object-fit:cover;display:block}
.ray .mch-av{border-color:#FDBA8C}.sparky .mch-av{border-color:#D6CCF7}
.mch-bub{max-width:min(440px,78%);border-radius:16px;padding:6px 11px 7px;font-size:13.5px;line-height:1.42;color:#211A3E;box-shadow:0 8px 20px -12px rgba(20,0,50,.55)}
.mch-bub.wide{max-width:min(270px,78%)}
.ray .mch-bub{background:#FFF4EA;border-bottom-left-radius:5px}
.sparky .mch-bub{background:#F5F0FF;border-bottom-right-radius:5px}
.mch-who{font-size:9.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;margin:0 0 1px}
.ray .mch-who{color:#EA580C}.sparky .mch-who{color:#7C3AED}
.mch-bub p{margin:0}
.ray .mch-bub p b{color:#C2410C;font-weight:900}.sparky .mch-bub p b{color:#6D28D9;font-weight:900}
/* a picture, like a photo in a chat: square, so a 1024 x 1024 upload shows whole */
.mch-pic{margin:7px -5px -3px;border-radius:12px;overflow:hidden;position:relative;aspect-ratio:1/1;max-width:240px}
.mch-pic img{display:block;width:100%;height:100%;object-fit:cover}
.mch-tag{position:absolute;left:8px;bottom:8px;font:800 11.5px var(--mch-chat);letter-spacing:.05em;color:#fff;background:rgba(20,10,40,.62);padding:3px 9px;border-radius:999px}
.mch-msg.typing .mch-bub{padding:10px 14px}
.mch-dots{display:inline-flex;gap:4px}.mch-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;animation:mch-bl 1s infinite}
.mch-dots i:nth-child(2){animation-delay:.15s}.mch-dots i:nth-child(3){animation-delay:.3s}
@keyframes mch-bl{50%{opacity:1;transform:translateY(-2px)}}
.ray .mch-dots{color:#EA580C}.sparky .mch-dots{color:#7C3AED}
.mch-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mch-opt{font:800 12.5px var(--mch-chat);border:2px solid #D6CCF7;background:#fff;color:#4C1D95;border-radius:999px;padding:4px 12px;cursor:pointer;text-decoration:none}
.mch-opt:hover{border-color:#7C3AED}
.mch-opt.right{background:#ECFDF5;border-color:#10B981;color:#065F46}.mch-opt.wrong{background:#FFE4E6;border-color:#E11D48;color:#BE123C}
.mch-opt.go{background:linear-gradient(90deg,#3F27BD,#D22CB2);color:#fff;border:0}
.mch-fb{margin-top:5px!important;font-weight:700}
.mch-bar{display:flex;align-items:center;gap:7px;padding:8px 2px 0;border-top:1px solid rgba(255,255,255,.16)}
.mch-hint{font:700 12.5px var(--mch-chat);color:rgba(255,255,255,.85)}
.mch-sp{flex:1}
.mch-bar button,.mch-join{font:800 12.5px var(--mch-chat);border-radius:999px;padding:6px 13px;cursor:pointer;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.mch-bar button:hover{background:rgba(255,255,255,.22)}
.mch-bar button:disabled{opacity:.45;cursor:default}
.mch-join{background:#fff;color:#4C1D95;border-color:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}
.mch-bar button:focus-visible,.mch-join:focus-visible,.mch-opt:focus-visible{outline:3px solid #ffd27a;outline-offset:2px}

/* v13.44.0: less gap under the menu; the chat runs the full height of the
   tiles column (down to the pledge), so more of it can be read at once. The
   panel takes its height from the tiles, and the chat is laid over it, so a
   long chat scrolls inside instead of stretching the band. */
@media (min-width:861px){
  section.prog-hero-band.px-banner{padding-top:18px}
  .prog-hero-band .prog-hero-split{align-items:stretch}
  .prog-feature.staged{position:relative;min-height:clamp(440px,calc(100vh - 190px),720px)}
  .prog-feature.staged .mstage{position:absolute;inset:12px 16px 10px;height:auto}
  .prog-feature.staged.nb .mstage{inset:0}
}
.prog-figs-last .prog-hero-stats{margin-top:12px}

/* notebook look */
.prog-feature.staged.nb{background:#fff;border-color:#fff;padding:0;overflow:hidden;box-shadow:0 18px 40px -18px rgba(20,0,50,.6)}
.nb .mch-head{padding:11px 16px;border-bottom:2px solid #E7E1FA}
.nb .mch-title{color:#4C1D95}
.nb .mch-chat{padding:14px 12px 6px;-webkit-mask-image:none;mask-image:none;background-color:#F7F5FF;scrollbar-color:#D6CCF7 transparent;
  background-image:linear-gradient(#EDE7FC 1px,transparent 1px),linear-gradient(90deg,#EDE7FC 1px,transparent 1px);background-size:26px 26px}
.nb .mch-chat::-webkit-scrollbar-thumb{background:#D6CCF7}
.nb .mch-bub{box-shadow:none;border:2px solid}.nb .ray .mch-bub{border-color:#FDBA8C}.nb .sparky .mch-bub{border-color:#D6CCF7}
.nb .mch-bar{padding:9px 12px;border-top:2px solid #E7E1FA;background:#fff}
.nb .mch-hint{color:#6B6390}
.nb .mch-bar button{border-color:#D6CCF7;background:#fff;color:#5B21B6}
.nb .mch-join{background:linear-gradient(90deg,#3F27BD,#D22CB2);color:#fff;border:0}

@media (max-width:1100px){.prog-hero-band .prog-hero-split{grid-template-columns:270px minmax(0,1fr)}}
@media (max-width:860px){
  .prog-hero-band .prog-hero-split{grid-template-columns:1fr}
  .prog-hero-band .prog-tilewrap{order:2}
  .prog-hero-band .prog-tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .prog-hero-band .prog-tiles{grid-template-columns:1fr}
  .mstage{height:500px}
  .mch-bub,.mch-bub.wide{max-width:84%}
}
@media (prefers-reduced-motion:reduce){.mch-msg{animation:none}}