/* ===========================================================================
   THE DEMO, as it sits in the page.

   Her own class vocabulary, her own tokens: the frame is the same material as
   a .shot, because it is the same kind of thing — a look at the software. The
   two new ideas are the brand switch, which only exists on EA4B, and the
   Phone / Desktop switch (5 Oct 2026), which draws the software at a phone's
   width inside a phone, or at its wide width.
   ======================================================================== */

.demo{margin:0;display:grid;gap:18px;align-content:start;min-width:0;max-width:1240px}
/* A grid item's min-width is auto, so a frame holding a 1200px-wide app would
   push the whole page sideways. Nothing here may do that at any width. */
.demo>*{min-width:0;max-width:100%}

/* ---- the head: what it is, which layout, and on EA4B whose it is -------- */
.demo-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.demo-head .label{margin:0}

.demo-view{display:inline-flex;gap:2px;padding:3px;border-radius:999px;margin-left:auto;
  background:var(--on-world,rgba(255,255,255,.14));border:1px solid var(--on-world-line,rgba(255,255,255,.26))}
.demo-view[hidden]{display:none}
.demo-view button{height:44px;min-width:104px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:.95rem;font-weight:600;color:#fff;cursor:pointer;background:none;border:0;transition:background .18s,color .18s}
.demo-view button:hover{background:rgba(255,255,255,.14)}
.demo-view button[aria-pressed="true"]{background:#fff;color:var(--ink,#0a1416)}
.demo-view button:focus-visible{outline:2px solid #fff;outline-offset:3px}

.demo-brands{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.demo-brands legend{padding:0;margin:0 0 10px;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.demo-brands button{
  height:44px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;
  background:var(--glass-soft,rgba(255,255,255,.1));border:1px solid var(--glass-line,rgba(255,255,255,.22));
  font-size:.95rem;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  transition:transform .18s var(--ease),background .18s,border-color .18s;
}
.demo-brands button:hover{transform:translateY(-2px)}
.demo-brands button[aria-pressed="true"]{background:var(--ink,#0a1416);color:var(--paper,#fff);border-color:transparent}
.demo-brands button .swatch{width:16px;height:16px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.15)}

/* ---- one product in the demo, the other as the upgrade ------------------ */
.demo-products{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.demo-products legend{padding:0;margin:0 0 10px;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.demo-products button{
  min-height:54px;padding:8px 18px 8px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:11px;
  background:var(--glass-soft,rgba(255,255,255,.1));border:1px solid var(--glass-line,rgba(255,255,255,.22));
  font-size:1rem;font-weight:700;line-height:1.1;cursor:pointer;text-align:left;
  transition:transform .18s var(--ease),background .18s,border-color .18s;
}
.demo-products button small{display:block;font-size:.82rem;font-weight:500;opacity:.78;margin-top:2px}
.demo-products button:hover{transform:translateY(-2px)}
.demo-products button[aria-pressed="true"]{background:var(--ink,#0a1416);color:var(--paper,#fff);border-color:transparent}
.demo-products .lock{position:relative;width:13px;height:16px;flex:0 0 auto;display:block}
.demo-products .lock::before{content:"";position:absolute;left:2px;top:0;width:7px;height:8px;border:2px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0}
.demo-products .lock::after{content:"";position:absolute;left:0;bottom:0;width:13px;height:9px;border-radius:2px;background:currentColor}
.demo-products button[aria-pressed="true"] .lock::before{transform:translateX(3px) rotate(18deg);transform-origin:bottom left}
.demo-upnote{margin:0;font-size:1.02rem;line-height:1.45;max-width:70ch}
.demo-upnote[hidden]{display:none}
.demo-upnote b{font-weight:700}

/* ---- the frame --------------------------------------------------------- */
.demo-frame{
  position:relative;display:block;padding:10px;border-radius:var(--r,28px);
  background:var(--glass,rgba(255,255,255,.08));border:1px solid var(--glass-line,rgba(255,255,255,.2));
  box-shadow:var(--shadow-sm,0 12px 34px rgba(2,10,14,.2));
}
.demo-face{
  position:relative;display:grid;place-items:center;overflow:hidden;min-width:0;max-width:100%;
  border-radius:calc(var(--r,28px) - 10px);background:#0b1214;
}
/* the phone's stage: a wide page looking at the phone layout */
.demo-face.staged{background:radial-gradient(60% 50% at 50% 42%, var(--c2a,rgba(255,255,255,.14)), transparent 72%),#0b1214}
.demo-shell{position:relative;flex:0 0 auto;max-width:100%}
.demo-screen{position:relative;overflow:hidden;background:#0b1214;max-width:100%}
.demo-face iframe{display:block;border:0;transform-origin:top left;background:#0b1214}
.demo-shell.bezel{padding:11px;border-radius:46px;
  background:linear-gradient(170deg,#1b2742,#070d1c 62%,#141d33);
  box-shadow:0 44px 96px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.09)}
.demo-shell.bezel .demo-screen{border-radius:36px}

/* Before anyone asks for it: a still panel, no spinner, nothing loading. */
.demo-start{
  position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:14px;
  padding:34px 24px;text-align:center;background:#0b1214;color:#fff;
}
.demo-start b{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.demo-start p{max-width:46ch;font-size:1rem;line-height:1.45;opacity:.82}
.demo-start .go{height:56px;padding:0 28px}
.demo-start[hidden]{display:none}
.demo-start.working b::after{content:" …"}

/* ---- the caption, exactly as a screenshot's -------------------------- */
.demo figcaption{display:grid;gap:8px;max-width:70ch;font-size:1.12rem;line-height:1.45}
.demo figcaption .fine{margin:0;font-size:.95rem}
.demo-acts{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center;margin-top:2px}
.demo-acts button,.demo-acts a{
  display:inline-flex;align-items:center;min-height:44px;
  font:inherit;font-size:.95rem;font-weight:600;text-decoration:underline;text-underline-offset:4px;opacity:.86;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
}
.demo-acts button:hover,.demo-acts a:hover{opacity:1}

/* ---- full screen: the script sizes the frame to the screen ------------- */
.demo-frame:fullscreen{padding:0;border-radius:0;border:0;background:#0b1214;width:100%;height:100%;display:grid}
.demo-frame:fullscreen .demo-face{border-radius:0;width:100%;height:100%}

/* ---- narrow ------------------------------------------------------------ */
@media (max-width:860px){
  .demo{gap:14px}
  .demo-frame{padding:7px;border-radius:var(--r2,22px)}
  .demo-face{border-radius:calc(var(--r2,22px) - 7px)}
  .demo-view{margin-left:0}
  .demo-view button{min-width:0;flex:1 1 auto;padding:0 16px}
}
@media (max-width:420px){
  .demo-view{width:100%}
}