/* =========================================================
   Staff & Access Management — who works here, what they can
   reach, and the workspace they get.

   Prefix sa-, layered on pages/products/products.css (pr-), which
   carries the type scale, the sections, the product surface (.pr-ui),
   the patient-facing screen (.pr-fone), the triad, the list, tags,
   fields, the FAQ, the final CTA and the reveal contract.

   THE HERO IS DELIBERATELY NOT THE SHARED 45/55 SPLIT. Every other
   product page puts copy left and one screen right. The brief for this
   one asks for an organisation, not a dashboard, and an organisation is
   wide — four groups, eighteen departments. So the copy sits above and
   the map runs the full width of the frame. It is the one hero on the
   site that does this, on purpose.

   NOTE ON THE AVATAR STACKS. The brief asks for "small real-person
   avatars" under each department. There are no staff photographs in
   the library and inventing 143 initials would be inventing 143 people,
   so the stacks are the neutral overlapping discs every directory uses,
   with the real count beside them. Swap in faces when the photography
   exists; the markup is one <i> per disc.
   ========================================================= */

/* =========================================================
   01 HERO — the organisation, not a dashboard
   ========================================================= */
.sa-hero__copy { max-width: calc(880 * var(--u)); }

.sa-org { position: relative; margin-top: calc(72 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.sa-org__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(20 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); border-bottom: 1px solid var(--rule); background: #fcfcfb; }
.sa-org__top > b { font-family: var(--font-head); font-size: calc(20 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.sa-stats { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.sa-stats > li { display: flex; align-items: baseline; gap: calc(7 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: var(--grey); font-size: calc(13 * var(--u)); color: var(--muted); }
.sa-stats b { font-size: calc(15 * var(--u)); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.sa-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sa-group { padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(26 * var(--u)); }
.sa-group + .sa-group { border-left: 1px solid var(--rule); }
.sa-group > .pr-k { display: flex; padding-bottom: calc(14 * var(--u)); border-bottom: 1px solid var(--rule); }

.sa-depts { display: grid; }
.sa-dept { display: grid; gap: calc(9 * var(--u)); padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.sa-dept:last-child { border-bottom: 0; padding-bottom: 0; }
.sa-dept__t { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); }
.sa-dept__t > b { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.sa-dept__t > span { font-size: calc(13 * var(--u)); color: var(--muted); font-variant-numeric: tabular-nums; }

/* the stack is neutral discs, not invented faces — see the file header */
.sa-stack { display: flex; align-items: center; }
.sa-stack > i { flex: none; width: calc(21 * var(--u)); height: calc(21 * var(--u)); border-radius: 50%; border: 2px solid #fff; background: var(--lime); }
.sa-stack > i + i { margin-left: calc(-7 * var(--u)); }
.sa-stack > i:nth-child(2) { background: var(--lime-tint); }
.sa-stack > i:nth-child(3) { background: var(--soft); }
.sa-stack > em { margin-left: calc(9 * var(--u)); font-style: normal; font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the departments arrive group by group rather than all at once (§9.4) */
.pr-js .sa-org .sa-dept { opacity: 0; transform: translateY(calc(7 * var(--u))); }
.pr-js .sa-org.is-in .sa-dept { opacity: 1; transform: none; transition: opacity .5s var(--ease) calc(var(--i) * 55ms), transform .5s var(--ease) calc(var(--i) * 55ms); }

/* =========================================================
   02 WORKSPACES — one screen, four jobs
   ========================================================= */
.sa-app__head { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); border-bottom: 1px solid var(--rule); background: #fcfcfb; }
.sa-app__head > .pr-k { margin-right: calc(2 * var(--u)); }
.sa-roles { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.sa-role { position: relative; overflow: hidden; padding: calc(9 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font: inherit; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.sa-role:hover { border-color: var(--lime-ico); }
.sa-role[aria-selected="true"] { border-color: var(--lime-ico); background: var(--lime); color: var(--ink); }
.sa-role:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(2 * var(--u)); }
.sa-role .bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(3 * var(--u)); transform: scaleX(0); transform-origin: left; background: var(--lime-ink); opacity: .4; }

.sa-panel__t { font-family: var(--font-head); font-size: calc(22 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.sa-panel .pr-triad { margin-top: calc(16 * var(--u)); }
/* the shared triad is sized for a label and a line of text; these are
   headline figures, so the number grows and nothing else changes */
.sa-big b { font-family: var(--font-head); font-size: calc(30 * var(--u)); line-height: calc(36 * var(--u)); font-weight: 500; letter-spacing: -.032em; font-variant-numeric: tabular-nums; }
.sa-panel .pr-list { margin-top: calc(22 * var(--u)); padding-top: calc(4 * var(--u)); border-top: 1px solid var(--rule); }

/* =========================================================
   03 MOBILE — one workspace in front, two behind
   ========================================================= */
.sa-fleet { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; }
/* transform-origin toward the centre, not the default middle: scaling from
   the middle insets BOTH edges by 9%, which eats the negative margin and
   leaves the phones floating apart instead of behind the one in front */
.sa-fleet > .sa-back { width: calc(300 * var(--u)); transform: scale(.82); opacity: .92; }
.sa-fleet > .sa-back:first-child { justify-self: end; transform-origin: right center; margin-right: calc(-54 * var(--u)); }
.sa-fleet > .sa-back:last-child { justify-self: start; transform-origin: left center; margin-left: calc(-54 * var(--u)); }
.sa-fleet > .sa-front { position: relative; z-index: 2; }

.sa-hi { display: grid; gap: calc(3 * var(--u)); }
.sa-hi b { font-family: var(--font-head); font-size: calc(21 * var(--u)); line-height: calc(27 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.sa-mini { display: grid; }
.sa-mini > li { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.sa-mini > li:last-child { border-bottom: 0; }
.sa-mini b { font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sa-mini span { font-size: calc(13.5 * var(--u)); color: var(--muted); }
.sa-mini .warn b { color: var(--amber-ink); }

/* =========================================================
   04 VOICE — one interaction, not a second product
   ========================================================= */
.sa-voice { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(64 * var(--u)); align-items: center; }
.sa-mic { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); padding: calc(13 * var(--u)); border: 1px solid var(--lime-ico); border-radius: 999px; background: var(--lime); font-size: calc(14.5 * var(--u)); font-weight: 700; }
.sa-wave { display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); height: calc(26 * var(--u)); }
.sa-wave > i { width: calc(3 * var(--u)); height: 40%; border-radius: 999px; background: var(--lime-ico); }
.sa-wave > i:nth-child(2n) { height: 78%; }
.sa-wave > i:nth-child(3n) { height: 100%; }
.sa-wave > i:nth-child(5n) { height: 55%; }
.sa-said { padding: calc(13 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: var(--grey); font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); font-style: italic; }
.sa-upd { display: grid; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)); border: 1px solid var(--lime-ico); border-radius: var(--r); background: var(--lime-soft); }
.sa-upd__top { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-upd .pr-fields dt, .sa-upd .pr-fields dd { font-size: calc(13 * var(--u)); }
.sa-upd .pr-fields dd { color: var(--lime-ink); }

.sa-beat { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(28 * var(--u)); }
.sa-beat > li { display: flex; align-items: center; gap: calc(9 * var(--u)); font-family: var(--font-head); font-size: calc(21 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.sa-beat .i { color: var(--faint); }
.sa-chips { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); margin-top: calc(28 * var(--u)); }
.sa-chips > li { padding: calc(8 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--muted); }

/* =========================================================
   05 ROLES & PERMISSIONS
   ========================================================= */
.sa-access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(44 * var(--u)); align-items: start; }
.sa-perm { display: grid; }
.sa-perm > li { display: flex; align-items: center; gap: calc(13 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--rule); font-size: calc(15.5 * var(--u)); font-weight: 500; }
.sa-perm > li:last-child { border-bottom: 0; }
/* a tick or a dash, so the answer is a shape before it is a colour (§8.4) */
.sa-perm i { display: grid; place-items: center; flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; border: 1px solid var(--rule); background: var(--grey); }
.sa-perm .yes i { border-color: var(--lime-ico); background: var(--lime); }
.sa-perm .yes .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 2.6; color: var(--lime-ink); }
.sa-perm .no { color: var(--faint); }
.sa-perm .no i::after { content: ""; width: calc(9 * var(--u)); height: 2px; background: var(--divider); }
.sa-perm em { margin-left: auto; font-style: normal; font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--muted); }

.sa-make { display: grid; gap: calc(12 * var(--u)); margin-top: calc(30 * var(--u)); }
.sa-make > li { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); font-size: calc(15 * var(--u)); font-weight: 600; }
.sa-make .n { display: grid; place-items: center; flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; background: var(--lime); font-size: calc(12 * var(--u)); font-weight: 700; }

.sa-matrix { width: 100%; margin-top: calc(46 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.sa-matrix caption { padding-bottom: calc(14 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: left; position: sticky; left: 0; }
.sa-matrix th, .sa-matrix td { padding: calc(13 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid var(--rule); font-size: calc(14 * var(--u)); text-align: center; }
.sa-matrix tbody tr:last-child th, .sa-matrix tbody tr:last-child td { border-bottom: 0; }
.sa-matrix thead th { background: #fcfcfb; font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sa-matrix tbody th { text-align: left; font-weight: 600; }
.sa-matrix .y { color: var(--lime-ink); font-weight: 700; }
.sa-matrix .n { color: var(--faint); }
.sa-matrix .p { font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--amber-ink); }

/* =========================================================
   06 THE DIRECTORY
   ========================================================= */
.sa-dir { display: grid; grid-template-columns: calc(230 * var(--u)) minmax(0, 1fr); }
.sa-side { display: grid; align-content: start; gap: calc(2 * var(--u)); padding: calc(16 * var(--u)); border-right: 1px solid var(--rule); background: #fcfcfb; }
.sa-side > li { padding: calc(10 * var(--u)) calc(13 * var(--u)); border-radius: var(--r-sm); font-size: calc(14.5 * var(--u)); font-weight: 600; color: var(--text); }
.sa-side .on { background: var(--lime); color: var(--ink); }
.sa-side em { float: right; font-style: normal; font-size: calc(13 * var(--u)); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sa-side .on em { color: var(--lime-ink); }

.sa-main { min-width: 0; padding: calc(22 * var(--u)); }
.sa-main__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); padding-bottom: calc(16 * var(--u)); border-bottom: 1px solid var(--rule); }
.sa-main__head b { font-family: var(--font-head); font-size: calc(22 * var(--u)); font-weight: 500; letter-spacing: -.03em; }

.sa-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sa-table th, .sa-table td { padding: calc(12 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--rule); text-align: left; font-size: calc(14.5 * var(--u)); }
.sa-table th { font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.sa-table td:first-child, .sa-table th:first-child { padding-left: 0; }
.sa-table td:last-child, .sa-table th:last-child { padding-right: 0; text-align: right; }
.sa-table tbody tr:last-child td { border-bottom: 0; }
.sa-table .who { display: flex; align-items: center; gap: calc(11 * var(--u)); font-weight: 600; }
.sa-table .who .pr-av { width: calc(30 * var(--u)); height: calc(30 * var(--u)); font-size: calc(11.5 * var(--u)); }

.sa-profile { display: grid; gap: calc(14 * var(--u)); margin-top: calc(22 * var(--u)); padding: calc(18 * var(--u)); border: 1px solid var(--lime-ico); border-radius: var(--r); background: var(--lime-soft); }

/* =========================================================
   07 COLLABORATION
   ========================================================= */
.sa-thread { display: grid; gap: calc(12 * var(--u)); }
/* block + fit-content, never an inline span: an inline background paints
   one box per line, so a wrapped message comes out as offset rectangles
   spilling out of the panel (§14.1) */
.sa-bub { display: block; width: fit-content; max-width: calc(520 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; font-size: calc(15.5 * var(--u)); line-height: calc(23 * var(--u)); }
.sa-bub .pr-k { display: flex; margin-bottom: calc(6 * var(--u)); }
.sa-bub.me { margin-left: auto; border-color: var(--lime-ico); background: var(--lime-soft); }
.sa-done { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: var(--lime); font-size: calc(14.5 * var(--u)); font-weight: 700; }

/* =========================================================
   08 TEAM PERFORMANCE
   ========================================================= */
.sa-perf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: calc(48 * var(--u)); align-items: start; }
.sa-bars { display: grid; gap: calc(18 * var(--u)); margin-top: calc(26 * var(--u)); }
.sa-bars > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: calc(9 * var(--u)); column-gap: calc(16 * var(--u)); align-items: baseline; }
.sa-bars b { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.sa-bars em { font-style: normal; font-size: calc(15 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-bars span { grid-column: 1 / -1; font-size: calc(13.5 * var(--u)); color: var(--muted); }
.sa-bars i { grid-column: 1 / -1; grid-row: 2; display: block; height: calc(8 * var(--u)); border-radius: 999px; background: var(--grey); overflow: hidden; }
.sa-bars i::after { content: ""; display: block; width: var(--w); height: 100%; border-radius: 999px; background: var(--lime); transform: scaleX(.04); transform-origin: left; transition: transform 1.1s var(--ease); }
.is-in .sa-bars i::after { transform: none; transition-delay: calc(var(--i) * 150ms); }

.sa-people { display: grid; }
.sa-people > li { display: flex; align-items: center; gap: calc(13 * var(--u)); padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.sa-people > li:last-child { border-bottom: 0; }
.sa-people > li > div { min-width: 0; }
.sa-people > li > div > b { display: block; font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.sa-people > li > div > span { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }
.sa-people .pr-tag { margin-left: auto; }

/* =========================================================
   09 THE DAILY REPORT — a document, not a dashboard
   ========================================================= */
.sa-report { max-width: calc(760 * var(--u)); margin-inline: auto; padding: calc(40 * var(--u)) calc(44 * var(--u)) calc(36 * var(--u)); border: 1px solid var(--divider); border-radius: calc(4 * var(--u)); background: #fff; box-shadow: var(--shadow); }
.sa-report__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); padding-bottom: calc(20 * var(--u)); border-bottom: 2px solid var(--ink); }
.sa-report__head b { font-family: var(--font-head); font-size: calc(26 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.sa-report__head time { font-size: calc(14 * var(--u)); color: var(--muted); }
.sa-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(20 * var(--u)); padding: calc(26 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.sa-figs > li { display: grid; gap: calc(4 * var(--u)); }
.sa-figs b { font-family: var(--font-head); font-size: calc(32 * var(--u)); line-height: calc(38 * var(--u)); font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.sa-figs span { font-size: calc(13 * var(--u)); color: var(--muted); }
.sa-figs .warn b { color: var(--amber-ink); }
.sa-high { display: grid; padding-top: calc(10 * var(--u)); }
.sa-high > li { display: flex; align-items: baseline; justify-content: space-between; gap: calc(16 * var(--u)); padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--rule); font-size: calc(15.5 * var(--u)); }
.sa-high > li:last-child { border-bottom: 0; }
.sa-high b { font-weight: 600; }
.sa-high span { color: var(--muted); text-align: right; }
.sa-high .warn span { color: var(--amber-ink); font-weight: 600; }
.sa-report .pr-link { margin-top: calc(22 * var(--u)); }
.sa-vs { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(28 * var(--u)); margin-top: calc(36 * var(--u)); font-size: calc(15.5 * var(--u)); color: var(--muted); }
.sa-vs b { font-weight: 600; color: var(--ink); }

/* =========================================================
   10 STAFF -> ORGANISATION
   ========================================================= */
.sa-zoom { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.sa-zoom::before { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(6 * var(--u)); right: calc(100% / 4 - 6 * var(--u)); height: 2px; background: var(--divider); }
.sa-zoom::after { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(6 * var(--u)); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.6s var(--ease); }
.sa-zoom.is-in::after { width: calc(100% - 100% / 4); }
.sa-zoom > li { display: grid; justify-items: start; gap: calc(13 * var(--u)); padding-right: calc(24 * var(--u)); opacity: .42; transition: opacity .5s var(--ease); }
.sa-zoom.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.sa-zoom > li > i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.sa-zoom.is-in > li > i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.sa-zoom b { display: block; font-family: var(--font-head); font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.sa-zoom span { display: block; margin-top: calc(5 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }

/* =========================================================
   11 THE PEOPLE — the only photograph on the page
   ========================================================= */
.sa-team { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(64 * var(--u)); align-items: center; }
.sa-team figure { width: calc(640 * var(--u)); }
.sa-team img { width: 100%; height: auto; border-radius: var(--r-card); }
.sa-team figcaption { margin-top: calc(14 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--muted); }
.sa-heads { display: grid; gap: calc(2 * var(--u)); margin-top: calc(32 * var(--u)); border-top: 1px solid var(--rule); }
.sa-heads > li { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); padding: calc(15 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.sa-heads b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.018em; }
.sa-heads span { font-size: calc(14 * var(--u)); color: var(--muted); font-variant-numeric: tabular-nums; }

/* =========================================================
   WHERE IT SITS / PREV-NEXT
   ========================================================= */
.sa-os { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.sa-os > li > * { display: grid; align-content: start; gap: calc(7 * var(--u)); height: 100%; padding: calc(22 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.sa-os a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.sa-os b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
/* > li > * > span:last-child, not a bare span: the active card's panel is
   itself a last-child span and would take the description styling (§14.1) */
.sa-os > li > * > span:last-child { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: var(--muted); }
.sa-os > li.is-on > span { border-color: var(--lime-ico); background: var(--lime); }
.sa-os > li.is-on > span > span:last-child { color: var(--text); }
.sa-os .pr-k { color: var(--lime-ink); }

.sa-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); max-width: calc(880 * var(--u)); margin: calc(60 * var(--u)) auto 0; text-align: left; }
.sa-nav a { display: grid; align-content: start; gap: calc(6 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.sa-nav a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.sa-nav b { font-family: var(--font-head); font-size: calc(23 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.sa-nav > a > span:last-child { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
.sa-nav .sa-nav__next { text-align: right; justify-items: end; }
.sa-back { margin-top: calc(26 * var(--u)); }

/* =========================================================
   MOTION (§9) — the resting states the script animates from
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* the workspace settles rather than snaps, and the playing role fills
     its own underline over exactly the interval (§9.6.4, §9.6.6) */
  .sa-panel:not([hidden]) { animation: saSettle .45s var(--ease); }
  @keyframes saSettle { from { opacity: 0; transform: translateY(6px); } }
  .sa-app.is-cycling .sa-role[aria-selected="true"] .bar { animation: saFill 4600ms linear forwards; }
  @keyframes saFill { to { transform: scaleX(1); } }

  /* the voice update is a short played run: hold, speak, the words, the
     change it made */
  .pr-js .sa-voice [data-s] { opacity: 0; transform: translateY(calc(7 * var(--u))); }
  .pr-js .sa-voice.is-in [data-s] { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .pr-js .sa-voice.is-in [data-s="1"] { transition-delay: .5s; }
  .pr-js .sa-voice.is-in [data-s="2"] { transition-delay: 1.1s; }
  .pr-js .sa-voice.is-in [data-s="3"] { transition-delay: 1.9s; }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (§10).
   ========================================================= */
@media (max-width: 1179px) {
  .sa-org { margin-top: 32px; }
  .sa-org__top { padding: 16px 18px; }
  .sa-groups { grid-template-columns: minmax(0, 1fr); }
  .sa-group { padding: 18px; }
  .sa-group + .sa-group { border-left: 0; border-top: 1px solid var(--rule); }
  .sa-stats > li { font-size: 12.5px; }

  .sa-big b { font-size: 26px; line-height: 32px; }
  .sa-app__head { padding: 14px; gap: 10px; }
  .sa-roles { width: 100%; }
  .sa-role { flex: 1 1 auto; padding: 9px 12px; font-size: 13.5px; text-align: center; }

  .sa-fleet { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .sa-fleet > .sa-back { transform: none; }
  .sa-fleet > .sa-back:first-child, .sa-fleet > .sa-back:last-child { justify-self: stretch; margin: 0; }

  .sa-voice, .sa-access, .sa-perf, .sa-team { grid-template-columns: minmax(0, 1fr); }
  .sa-voice { row-gap: 28px; }
  .sa-access, .sa-perf { row-gap: 32px; }
  .sa-team { row-gap: 28px; }
  .sa-team figure { width: 100%; }
  .sa-beat { gap: 8px; }
  .sa-beat > li { font-size: 17px; }

  .sa-matrix { margin-top: 32px; display: block; overflow-x: auto; }
  .sa-matrix th, .sa-matrix td { padding: 11px 12px; white-space: nowrap; }

  .sa-dir { grid-template-columns: minmax(0, 1fr); }
  .sa-side { grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
  .sa-side::-webkit-scrollbar { display: none; }
  .sa-side em { float: none; margin-left: 8px; }
  .sa-main { padding: 18px; }
  .sa-table th:nth-child(2), .sa-table td:nth-child(2) { display: none; }

  .sa-bub { max-width: 92%; }

  .sa-zoom { grid-auto-flow: row; grid-auto-columns: auto; padding-left: 26px; }
  .sa-zoom::before, .sa-zoom::after { display: none; }
  .sa-zoom > li { position: relative; padding: 0 0 20px; }
  .sa-zoom > li:last-child { padding-bottom: 0; }
  .sa-zoom > li > i { position: absolute; left: -26px; top: 4px; }
  .sa-zoom b { font-size: 20px; line-height: 26px; }

  .sa-report { max-width: none; padding: 24px 20px; }
  .sa-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px 0; }
  .sa-figs b { font-size: 26px; line-height: 32px; }
  .sa-vs { justify-content: flex-start; gap: 14px; margin-top: 24px; }

  .sa-os { grid-template-columns: minmax(0, 1fr); }
  .sa-nav { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .sa-nav a { padding: 20px; }
  .sa-nav .sa-nav__next { text-align: left; justify-items: start; }
  .sa-nav b { font-size: 20px; }
}