/* CREx OS module explorer (crex-os.html #modules). Scoped to .mx; shared rebuild.css is unchanged. */
.modules-section{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mx{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-areas:"head ." "list stage";column-gap:clamp(48px,7vw,124px);row-gap:clamp(44px,5.5vw,80px)}
.mx-head{grid-area:head}
.mx-head h2{font-size:clamp(44px,4.6vw,68px);line-height:1.04;margin-top:22px}
.mx-head p:not(.eyebrow){font-size:15px;line-height:1.7;color:var(--muted);max-width:470px;margin-top:22px}

/* Accordion list. Native <details name> keeps one module open without script. */
.mx-list{grid-area:list;border-bottom:1px solid #cfcfcf}
.mx-item{position:relative;border-top:1px solid #cfcfcf}
.mx-item::before{content:'';position:absolute;left:0;top:-1px;width:36px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.7,.23,1)}
.mx-item[open]::before{transform:scaleX(1)}
.mx-summary{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:20px 0;list-style:none;cursor:pointer;color:#666666;transition:color .2s}
.mx-summary::-webkit-details-marker{display:none}
.mx-summary::marker{content:''}
.mx-summary:hover,.mx-item[open] .mx-summary{color:var(--ink)}
.mx-item[open] .mx-summary{cursor:default;padding-bottom:12px}
.mx-summary:focus-visible{outline:2px solid var(--purple);outline-offset:4px}
.mx-name{font-size:clamp(20px,1.6vw,24px);line-height:1.2;letter-spacing:-.015em}
.mx-tag{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b6b;transition:color .2s}
.mx-item[open] .mx-tag{color:var(--purple)}
.mx-body{padding-bottom:28px}
.mx-body>p{font-size:15px;line-height:1.65;color:var(--ink);max-width:470px}
.mx-body .text-link{margin-top:18px}
.mx-item[open] .mx-body>*{animation:mx-rise .45s cubic-bezier(.22,.7,.23,1) both}
.mx-item[open] .mx-body>.text-link{animation-delay:.06s}
@keyframes mx-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Stage: a dark frame with the product screen inset top-left and bleeding off the right and bottom edges. */
.mx-stage{grid-area:stage;position:sticky;top:max(28px,calc(50vh - 290px));align-self:start;min-width:0}
.mx-shot{margin:0}
.mx-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;container-type:inline-size;background:radial-gradient(80% 65% at 100% 0%,#6b10d633,transparent 62%),radial-gradient(110% 90% at 0% 100%,#000000,transparent 70%),linear-gradient(160deg,#2e2e2e 0%,#181818 55%,#0c0c0c 100%)}
.mx-window{position:absolute;left:7%;top:9%;width:96%;height:100%;overflow:hidden;border-radius:8px 0 0 0;background:#ffffff;box-shadow:0 0 0 1px #ffffff26,0 30px 60px -24px #000000b8}
.mx-window.is-dark{background:#0f1117}
.mx-window img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.mx-shot:not([hidden]) .mx-window{animation:mx-in .55s cubic-bezier(.22,.7,.23,1) both}
@keyframes mx-in{from{opacity:0;transform:translate(10px,14px)}to{opacity:1;transform:none}}
.mx-shot figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-family:var(--mono);font-size:9px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mx-shot figcaption span:last-child{color:var(--ink);text-align:right}

/* Illustrative screens. Sized in em off the frame width so they scale like a screenshot. */
.ui{height:100%;padding:1.55em calc(1.7em + 3.2%) 1.55em 1.7em;font-family:var(--sans);font-size:1.85cqi;line-height:1.35;color:#1a1a1a;background:#ffffff}
.ui p{line-height:1.45}
.ui-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1em;padding-bottom:1em;border-bottom:1px solid #ececec}
.ui-title{font-size:1.45em;font-weight:600;letter-spacing:-.02em}
.ui-sub{font-size:.8em;color:#6b6b6b;margin-top:.3em}
.ui-chips{display:flex;gap:.45em;flex:none}
.ui-chip{font-size:.76em;line-height:1;padding:.55em .85em;border:1px solid #e3e3e3;border-radius:.5em;color:#444444;white-space:nowrap}
.ui-chip.is-on{background:var(--purple);border-color:var(--purple);color:#ffffff}
.ui-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75em;margin-top:1.1em}
.ui-kpi{border:1px solid #ececec;border-radius:.7em;padding:.8em .95em}
.ui-kpi span,.ui-kpi small{display:block;font-size:.74em;color:#6b6b6b}
.ui-kpi strong{display:block;font-size:1.6em;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--purple);margin:.2em 0 .15em}
.ui-table{width:100%;border-collapse:collapse;margin-top:1.1em;font-size:.86em}
.ui-table th{font-weight:500;font-size:.92em;color:#6b6b6b;text-align:left;padding:.55em .5em;border-bottom:1px solid #e6e6e6;white-space:nowrap}
.ui-table td{padding:.7em .5em;border-bottom:1px solid #f1f1f1;white-space:nowrap}
.ui-table th:first-child,.ui-table td:first-child{padding-left:0}
.ui-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ui-table tr.is-subject td{background:#f6f0fe;font-weight:500}
.ui-table tr.is-subject td:first-child{padding-left:.5em}
.ui-pill{display:inline-block;font-size:.84em;font-weight:500;line-height:1;padding:.35em .7em;border-radius:1em;background:#f2f2f2;color:#444444}
.ui-pill.is-ok{background:#e6f4ea;color:#17703a}
.ui-pill.is-watch{background:#fff4d1;color:#7a5600}
.ui-pill.is-draft{background:#f1eafd;color:#5a12b5}
.ui-pill.is-bad{background:#fde8e8;color:#b42318}
.ui-note{margin-top:1em;font-size:.8em;color:#6b6b6b}
.ui-chart{display:block;width:100%;height:auto;margin-top:1em}
.ui-chart text{font-family:var(--mono);font-size:10px;fill:#8a8a8a}
.ui-trust{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:.75em;margin-top:1.1em}
.ui-score{display:grid;justify-items:center;align-content:center;gap:.6em;border:1px solid #ece4fb;border-radius:.7em;background:#faf7ff;padding:1em}
.ui-ring{width:6.4em;height:6.4em;border-radius:50%;display:grid;place-items:center;background:radial-gradient(closest-side,#faf7ff 78%,transparent 79%),conic-gradient(var(--purple) 0 84%,#e9e3f5 84% 100%)}
.ui-ring strong{font-size:2em;font-weight:600;letter-spacing:-.03em}
.ui-score span{font-size:.74em;color:#6b6b6b}
.ui-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75em}
.ui-issues{list-style:none;margin:1.1em 0 0;padding:0;border:1px solid #ececec;border-radius:.7em}
.ui-issues li{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.75em .95em;font-size:.84em}
.ui-issues li+li{border-top:1px solid #f1f1f1}
.ui-issues small{display:block;color:#6b6b6b;font-size:.9em;margin-top:.15em}
.ui-chat{display:grid;gap:.9em;margin-top:1.2em}
.ui-q{justify-self:end;max-width:78%;background:var(--ink);color:#ffffff;font-size:.92em;padding:.75em 1em;border-radius:1em 1em .25em 1em}
.ui-a{max-width:94%;border:1px solid #ececec;border-radius:1em 1em 1em .25em;padding:.95em 1.05em;font-size:.92em}
.ui-a p+p{margin-top:.6em}
.ui-sources{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.85em}
.ui-sources span{font-family:var(--mono);font-size:.74em;line-height:1;color:#555555;border:1px solid #e3e3e3;border-radius:.35em;padding:.45em .6em}

/* Section 05 used to sit between two white sections; keep a rule where it was cut. */
#getting-started{border-top:1px solid var(--line)}

@media(max-width:1180px){.mx{column-gap:56px}}
@media(max-width:900px){
  .mx{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "list" "stage";row-gap:36px}
  .mx-stage{position:static}
  .mx-body .mx-stage{margin-top:26px}
  .mx-body>p{max-width:640px}
}
@media(max-width:760px){.mx-head h2{font-size:52px}.mx-name{font-size:20px}}
@media(max-width:600px){.mx-frame{aspect-ratio:1/1}.ui{font-size:2.2cqi;padding:1.4em calc(1.3em + 3.2%) 1.4em 1.3em}}
@media(max-width:420px){.mx-head h2{font-size:44px}.mx-tag{display:none}.mx-shot figcaption{flex-direction:column;gap:2px}.mx-shot figcaption span:last-child{text-align:left}}

/* The OS page body now uses the release-copy layout (launch-copy.css): let the module heading span both columns. */
@media(min-width:901px){.release-copy .mx{grid-template-areas:"head head" "list stage"}}
@media(max-width:600px){.release-copy .mx-head h2 br{display:none}}