/* ==========================================================================
   /memory — app-window frame (loaded after context.css, only on this page)
   Sample on the first row only: large radius, hairline border, a light catch on the top edge, a dark surface gradient, a soft drop shadow
   and a window bar with three buttons, a centred title and a status chip.
   ========================================================================== */
.cx { --win-line: rgba(255,255,255,.1); --win-top: rgba(255,255,255,.12); --win-shadow: 0 40px 90px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.5); }
.cx .cx-row.cx-framed { grid-template-columns: 290px minmax(0, 1fr); gap: 40px; padding: 40px 0 40px 26px; border-bottom: 1px solid var(--cell-line); }
.cx .cx-row.cx-framed .cx-copy { padding: 24px 0; border-right: 0; }
.cx .cx-row.cx-framed .cx-g { position: relative; min-height: 460px; margin-right: 26px; padding-top: 52px; border-radius: 22px; border: 1px solid var(--win-line); background: linear-gradient(180deg, #17171a 0%, #0d0d0f 42%, #070708 100%); box-shadow: inset 0 1px 0 var(--win-top), var(--win-shadow); overflow: hidden; }
.cx .cx-row.cx-framed .cx-g::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 38% at 50% 0%, rgba(255,255,255,.06), transparent 70%); }
.cx-win-bar { position: absolute; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0)); font-size: 15px; color: var(--fg-2); pointer-events: none; }
.cx-win-bar i { position: absolute; top: 21px; width: 10px; height: 10px; border-radius: 50%; background: #2a2a2d; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(0,0,0,.4); }
.cx-win-bar i:nth-child(1) { left: 18px; } .cx-win-bar i:nth-child(2) { left: 36px; } .cx-win-bar i:nth-child(3) { left: 54px; }
.cx-win-bar em { position: absolute; right: 16px; top: 13px; padding: 4px 11px; border-radius: 7px; border: 1px solid var(--win-line); background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); font-style: normal; font-size: 13px; color: var(--fg-3); }
/* pieces inside that window follow the same frame language */
.cx .cx-row.cx-framed .cx-tip { border-color: var(--win-line); background: #121214; box-shadow: inset 0 1px 0 var(--win-top), 0 12px 30px rgba(0,0,0,.5); }
.cx .cx-row.cx-framed .cx-hub { background: linear-gradient(180deg, #2e2e32, #1f1f22); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.5); }
@media (max-width: 980px) {
  .cx .cx-row.cx-framed { grid-template-columns: 1fr; gap: 16px; padding: 32px 16px; }
  .cx .cx-row.cx-framed .cx-copy { padding: 0 0 8px; }
  .cx .cx-row.cx-framed .cx-g { margin-right: 0; min-height: 0; padding-bottom: 16px; }
}

/* Row copy at the size the other product pages use (Visibility, Narrative, Truth): larger headline, 16px body, wider column */
.cx .cx-row { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.cx .cx-copy { padding: 36px 30px 36px 26px; }
.cx .cx-copy h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.03em; max-width: 400px; }
.cx .cx-copy p { margin: 16px 0 22px; font-size: 16px; line-height: 1.55; max-width: 400px; }
.cx .cx-row.cx-framed { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.cx .cx-row.cx-framed .cx-copy { padding: 24px 30px 24px 0; }
@media (max-width: 980px) { .cx .cx-row { grid-template-columns: 1fr; } .cx .cx-copy { padding: 24px 20px 8px; } .cx .cx-copy h2, .cx .cx-copy p { max-width: 560px; } }