/* The top of /hyperionos: the hero, What's Inside and One Job (PM #8577).
   Drawn and graded in _review/os-8573 (report KB #8798), picked by Mike on
   13 Oct 2026. Every rule is scoped to its own section (.osa, .osi, .osj),
   and the five layer tints (.osi-t-*) are shared by Inside and One Job. */

/* hero-a — PM #8573
   The top of /hyperionos as the product itself: a centred head, then the app's
   window on the night sky. Every rule is scoped to .osa; layout breaks on the
   section's own width (container osa), so the /rv/ rail reads the same as a
   narrower window. Wide (1100 and up): rail | board | your calls. Middle: the
   departments become a strip over the board, the calls stay beside it. Phone
   (under 720): no rail, three cards, one call. Gold sits on surfaces and light,
   never on an outline; a face's ring is a glow, drawn as a shadow. */

.show.osa {
  --h: 76px;
  --show-top: calc(var(--header-h) + clamp(22px, 1.8vw, 26px));
  --show-end: clamp(64px, 7vw, 104px);
  --show-bg: linear-gradient(to bottom, var(--ground), #040a17 50%, var(--ground));
  --haze:
    radial-gradient(62% 40% at 50% 60%, rgba(94, 106, 210, 0.46), rgba(94, 106, 210, 0.12) 58%, transparent 80%),
    radial-gradient(30% 14% at 50% 39%, rgba(var(--hy), 0.16), transparent 72%),
    radial-gradient(70% 22% at 50% 37%, rgba(var(--hz), 0.16), transparent 75%),
    radial-gradient(34% 30% at 84% 66%, rgba(191, 162, 95, 0.16), transparent 70%),
    radial-gradient(30% 30% at 14% 72%, rgba(70, 120, 200, 0.14), transparent 70%);
  container: osa / inline-size;
}
.osa :where(p, figure) { margin: 0; padding: 0; }

/* the night around the window: a denser field of stars, kept faint behind the head, and two clouds of haze */
.show.osa > .osa-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.osa .osa-sky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--stars);
  background-size: 520px 380px;
  opacity: 0.7;
}
/* no star lands on the words: every star layer, the kit's and this one, has a hole cut round the head */
.osa .osa-sky::before,
.osa .show-sky::before,
.osa .show-sky::after {
  -webkit-mask-image: radial-gradient(42% 22% at 50% 22%, transparent 78%, #000 100%);
          mask-image: radial-gradient(42% 22% at 50% 22%, transparent 78%, #000 100%);
}
.osa .osa-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34% 30% at 10% 16%, rgba(124, 112, 226, 0.2), transparent 72%),
    radial-gradient(30% 28% at 90% 12%, rgba(86, 128, 214, 0.18), transparent 72%),
    radial-gradient(24% 20% at 22% 44%, rgba(144, 133, 200, 0.12), transparent 70%),
    radial-gradient(24% 20% at 80% 46%, rgba(191, 162, 95, 0.1), transparent 70%),
    radial-gradient(80% 6% at 50% 43%, rgba(var(--hy), 0.1), transparent 75%);
}
.osa :where(p) { color: inherit; }

/* ------------------------------------------------------------ the head */

.osa .osa-head { display: grid; justify-items: center; text-align: center; }
.osa .osa-head .eyebrow { margin-bottom: 12px; }
.osa h1.osa-h1 { font-size: clamp(40px, 5cqi, var(--h)); line-height: 1.02; letter-spacing: -0.044em; }
.osa h1.osa-h1 span { display: block; }
.osa .osa-head .osa-lede { max-width: none; margin-top: 16px; font-size: clamp(17px, 1.6cqi, 20px); line-height: 1.45; }
.osa .osa-lede span { display: block; }
.osa .osa-acts { justify-content: center; gap: 14px; margin-top: 22px; }
.osa .osa-acts .pill { padding: 13px 28px; font-size: 17px; }
/* the one filled button: gold into ivory, dark ink */
.osa .osa-acts .pill:not(.pill-ghost) {
  color: #15130f;
  font-weight: 500;
  background: linear-gradient(100deg, #e0bf84 0%, #ecd8ad 46%, #f6efe1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 12px 32px -12px rgba(226, 190, 110, 0.75), 0 0 46px -10px rgba(226, 190, 110, 0.55);
}
.osa .osa-acts .pill:not(.pill-ghost):hover { background: linear-gradient(100deg, #e7c890 0%, #f2e1bc 46%, #fbf6ec 100%); }

/* the quiet credit */
.osa .osa-by {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.3;
  color: #d6d8dd;
  text-decoration: none;
  transition: color .15s;
}
.osa .osa-by:hover { color: var(--cream); }
.osa .osa-me {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  background: #0b1424;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.osa .osa-me img { position: absolute; left: -44%; top: -27%; width: 200%; max-width: none; height: auto; }

/* ------------------------------------------------------------ the window */

.osa .osa-fig { position: relative; max-width: 1180px; margin: clamp(28px, 2.6cqi, 34px) auto 0; }
/* Hyperion's light along the window's top edge */
.osa .osa-fig::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 6%;
  right: 6%;
  top: -46px;
  height: 160px;
  background: radial-gradient(50% 50% at 50% 56%, rgba(var(--hy), 0.22), rgba(var(--hz), 0.1) 52%, transparent 76%);
  pointer-events: none;
}
.osa .osa-win {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  color: #e6e6ea;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 150px), rgba(10, 12, 20, 0.97);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 60px 120px -40px #000,
    0 0 160px -30px rgba(94, 106, 210, 0.85),
    0 -24px 90px -46px rgba(var(--hy), 0.55);
}
.osa .osa-win svg.i { width: 13px; height: 13px; }

/* a face inside the window: the portrait under a thin ring of light */
.osa .osa-win .fc { box-shadow: 0 0 0 1.5px #0b0e17, 0 0 0 2.5px rgba(var(--hy), 0.3), 0 0 14px -3px rgba(var(--hy), 0.45); }

/* the title bar: the mark, the ask, you */
.osa .osa-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px) minmax(0, 1fr);
  grid-template-areas: "mark ask me";
  align-items: center;
  gap: 10px 16px;
  min-height: 60px;
  padding: 10px 16px 10px 18px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.osa .osa-mark { grid-area: mark; display: flex; align-items: center; gap: 12px; min-width: 0; }
.osa .osa-lights { display: flex; gap: 7px; margin-right: 8px; }
.osa .osa-lights i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.osa .osa-mark .corona-mini { --s: 22px; }
.osa .osa-mark b { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; color: #ecebee; }
.osa .osa-mark b span { color: var(--os); }

.osa .osa-ask {
  grid-area: ask;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 40px;
  padding: 0 5px 0 14px;
  border-radius: 10px;
  background: rgba(22, 27, 42, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(var(--hy), 0.14), 0 0 34px -10px rgba(var(--hy), 0.4);
}
.osa .osa-ask-k { flex: none; padding-right: 12px; font-size: 12.5px; white-space: nowrap; color: #b4b8c2; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); }
.osa .osa-ask-q { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; color: #eceae6; }
.osa .osa-caret {
  display: inline-block;
  width: 1.5px;
  height: 16px;
  margin-left: 2px;
  vertical-align: -3px;
  background: rgb(var(--hy));
  animation: show-glint 1.1s steps(2) infinite;
}
.osa .osa-go {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: #15130f;
  background: linear-gradient(to bottom, #f3eee2, #d8cfba);
}
.osa .osa-go svg.i { stroke-width: 2.4; }

.osa .osa-who-me { grid-area: me; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.osa .osa-who-me .you { width: 32px; height: 32px; font-size: 11px; }

/* a small tag inside the window */
.osa .osa-tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
  color: #d8d8e2;
  background: rgba(255, 255, 255, 0.08);
}
.osa .osa-tg-gold { color: #f8eac2; background: rgba(150, 118, 44, 0.55); }
.osa .osa-tg .dot { width: 6px; height: 6px; color: #f0d48f; }

/* the body: departments | the board | your calls */
.osa .osa-body { display: grid; grid-template-columns: 212px minmax(0, 1fr) 280px; }

.osa .osa-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 10px 14px;
  background: rgba(255, 255, 255, 0.018);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}
.osa .osa-rk { padding: 0 10px; font-size: 11px; color: #c0c4cc; }
.osa .osa-depts { margin-top: 8px; }
.osa .osa-dept {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 6px 0 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #dcdde2;
}
.osa .osa-dept.osa-droid { margin-top: 6px; color: #c4c6cc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); border-radius: 0; }
.osa .osa-fs { display: flex; flex: none; gap: 4px; margin-left: auto; }
.osa .osa-rail .fc { width: 26px; height: 26px; }
/* the rail's foot: what the floor has spent, against its ceilings */
.osa .osa-rfoot { margin-top: 12px; padding: 16px 0 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.osa .osa-meter { position: relative; height: 4px; margin: 12px 10px 0; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.osa .osa-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; border-radius: 4px; background: linear-gradient(to right, rgba(106, 190, 150, 0.6), #a9e6c8); box-shadow: 0 0 8px rgba(106, 190, 150, 0.8); }
.osa .osa-rnote { margin-top: 10px; padding: 0 10px; font-size: 12px; line-height: 1.4; color: #c4c7ce; }

/* the board: four lanes */
.osa .osa-board { min-width: 0; padding: 16px 16px 16px; }
.osa .osa-bhd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.osa .osa-bt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.osa .osa-bt b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; color: #f2f2f5; }
.osa .osa-bt span { font-size: 12.5px; white-space: nowrap; color: #b4b8c2; }
.osa .osa-seg { display: flex; flex: none; margin-left: auto; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.osa .osa-seg span { display: grid; place-items: center; height: 26px; padding: 0 11px; border-radius: 6px; font-size: 12.5px; color: #b4b8c2; }
.osa .osa-seg span.on { color: #fff; background: #5e6ad2; }

.osa .osa-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 10px; }
.osa .osa-lane {
  --c: 140, 159, 208;
  min-width: 0;
  padding: 10px 7px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.032);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.osa .osa-lane.osa-wk { --c: 160, 168, 255; }
.osa .osa-lane.osa-yc {
  --c: 236, 214, 160;
  background:
    radial-gradient(100% 150px at 50% -30px, rgba(255, 230, 170, 0.34), transparent),
    linear-gradient(to bottom, rgba(240, 204, 128, 0.24), rgba(236, 186, 104, 0.13)),
    #17110a;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.6), 0 0 70px -14px rgba(236, 196, 110, 0.55);
}
.osa .osa-lane.osa-sh { --c: 106, 190, 150; }
.osa .osa-lh { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 4px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: #f2f2f5; }
.osa .osa-lh i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 8px rgba(var(--c), 0.7); }
.osa .osa-lh em { margin-left: auto; font-style: normal; font-weight: 500; color: #b0b5be; }
.osa .osa-yc .osa-lh { color: #fbecc4; }
.osa .osa-yc .osa-lh em { color: #ead9ae; }

.osa .osa-card {
  position: relative;
  margin-top: 8px;
  padding: 11px 10px 10px;
  border-radius: 9px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 46%), #151927;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 18px -10px rgba(0, 0, 0, 0.95);
}
.osa .osa-yc .osa-card {
  background:
    radial-gradient(100% 80px at 50% -16px, rgba(255, 232, 178, 0.36), transparent),
    linear-gradient(to bottom, rgba(246, 214, 146, 0.22), rgba(240, 192, 110, 0.13)),
    #261c0f;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.85), 0 10px 18px -10px rgba(0, 0, 0, 0.9), 0 0 34px -6px rgba(240, 200, 110, 0.7);
}
.osa .osa-cw { display: flex; align-items: center; gap: 10px; min-width: 0; }
.osa .osa-cw .fc { width: 38px; height: 38px; }
.osa .osa-wk .osa-cw .fc { box-shadow: 0 0 0 1.5px #0b0e17, 0 0 0 2.5px rgba(160, 168, 255, 0.6), 0 0 16px -2px rgba(140, 150, 255, 0.7); }
.osa .osa-yc .osa-cw .fc { box-shadow: 0 0 0 1.5px #15130e, 0 0 0 2.5px rgba(var(--need), 0.7), 0 0 16px -2px rgba(226, 190, 110, 0.75); }
.osa .osa-cw > span { display: grid; min-width: 0; line-height: 1.2; }
.osa .osa-cw b { overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: #f4f4f7; }
.osa .osa-cw > span > span { overflow: hidden; margin-top: 3px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; color: #c0c3ca; }
.osa .osa-ln { display: none; }
.osa .osa-job { margin-top: 10px; font-size: 13px; line-height: 1.38; color: #e0e1e6; }
.osa .osa-st { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-top: 9px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; color: #b4b8c2; }
.osa .osa-st svg.i { width: 12px; height: 12px; }
.osa .osa-st.osa-run { color: #c9cdff; }
.osa .osa-st.osa-run .dot { width: 6px; height: 6px; color: #a0a8ff; }
.osa .osa-st.osa-ok { color: #b1e2ca; }
.osa .osa-sh .osa-job { color: #c9cbd1; }
/* how far along: a line of light, not a bar with an edge */
.osa .osa-pg { position: relative; flex: 1; height: 3px; margin-left: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.osa .osa-pg i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 3px; background: linear-gradient(to right, rgba(160, 168, 255, 0.5), #c9cdff); box-shadow: 0 0 8px rgba(150, 160, 255, 0.8); }
.osa .osa-more { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0 4px; font-size: 12px; color: #c4c7ce; }
.osa .osa-more.osa-hint {
  justify-content: center;
  height: 30px;
  margin-top: 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #fff4d8;
  background: linear-gradient(to bottom, rgba(246, 214, 140, 0.4), rgba(236, 192, 104, 0.26));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.6), 0 0 18px -6px rgba(240, 200, 110, 0.7);
}
.osa .osa-more.osa-hint svg.i { width: 13px; height: 13px; }

/* your calls: the desk, under a warm lamp */
.osa .osa-desk {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 16px 16px;
  background:
    radial-gradient(120% 220px at 50% -40px, rgba(255, 226, 160, 0.16), transparent),
    linear-gradient(to bottom, rgba(214, 178, 100, 0.1), rgba(214, 178, 100, 0.035));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06);
}
.osa .osa-dhd { display: flex; align-items: center; gap: 10px; height: 26px; }
.osa .osa-dhd .lb { color: #f6e3ae; }
.osa .osa-dhd em {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  color: #15130f;
  background: linear-gradient(to bottom, #f3e2b4, #d9bd7c);
}
/* the kit's call, with its hairline taken off: the lamp and the lit top edge carry it */
.osa .osa-desk .osa-call {
  margin-top: 12px;
  padding: 14px 14px 14px;
  background:
    radial-gradient(90% 150px at 50% -30px, rgba(255, 230, 172, 0.34), transparent),
    linear-gradient(to bottom, rgba(240, 206, 132, 0.21), rgba(236, 184, 104, 0.12)),
    rgba(30, 21, 11, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.85), 0 24px 60px -24px rgba(0, 0, 0, 0.85), 0 0 56px -10px rgba(240, 200, 110, 0.6);
}
.osa .osa-call .k { font-size: 11px; color: #f6e3ae; }
.osa .osa-q { margin-top: 10px; font-size: 16px; font-weight: 500; line-height: 1.32; letter-spacing: -0.01em; color: #f6f1e4; }
.osa .osa-by2 { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 12.5px; line-height: 1.35; color: #e2dac8; }
.osa .osa-by2 .fc { width: 24px; height: 24px; }
.osa .osa-att {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.3;
  color: #f6efe0;
  background: rgba(255, 240, 210, 0.08);
}
.osa .osa-att svg.i { color: #e6d29c; }
.osa .osa-att em { flex-basis: 100%; padding-left: 21px; font-size: 12px; font-style: normal; color: #d6cfbf; }
.osa .osa-call .bts { margin-top: 12px; }
.osa .osa-call .bt { height: 32px; padding: 0 16px; font-size: 13px; }
.osa .osa-dft { margin-top: auto; padding-top: 14px; font-size: 12px; line-height: 1.4; color: #d2cdc2; }

/* the foot: what was filed, and the clock */
.osa .osa-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  min-height: 48px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: #c9cbd1;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.osa .osa-alx {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  line-height: 1.3;
  color: #ecdcc6;
  background: rgba(214, 160, 96, 0.16);
}
.osa .osa-alx svg.i { color: #f0c58f; }
.osa .osa-alx b { font-weight: 600; color: #f7e3c6; }
.osa .osa-clock { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; white-space: nowrap; }
.osa .osa-clock > .dot { color: #7fd6a8; }
.osa .osa-switch {
  position: relative;
  flex: none;
  width: 30px;
  height: 17px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(106, 190, 150, 0.6);
  box-shadow: 0 0 10px -2px rgba(106, 190, 150, 0.6);
}
.osa .osa-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #f2f2f5;
}

/* --------------------------------------------- the middle: a strip of departments */

@container osa (max-width: 1099px) {
  .osa .osa-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .osa .osa-body { grid-template-columns: minmax(0, 1fr) 236px; }
  .osa .osa-rail {
    grid-column: 1 / -1;
    flex-direction: row;
    padding: 10px 14px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }
  .osa .osa-rail > .osa-rk,
  .osa .osa-rfoot,
  .osa .osa-dept.osa-droid,
  .osa .osa-fs .fc:nth-child(3) { display: none; }
  .osa .osa-depts { display: flex; flex: 1; justify-content: space-between; gap: 6px; margin: 0; }
  .osa .osa-dept { flex: none; gap: 8px; height: 40px; padding: 0 5px 0 11px; font-size: 12.5px; background: rgba(255, 255, 255, 0.05); }
  .osa .osa-dept .osa-fs { margin-left: 0; }
  .osa .osa-dept > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .osa .osa-fs { gap: 0; }
  .osa .osa-fs .fc + .fc { margin-left: -4px; }
  .osa .osa-rail .fc { width: 28px; height: 28px; }
  .osa .osa-att em { display: none; }
  .osa .osa-board { padding: 14px 12px 14px; }
  .osa .osa-lanes { gap: 8px; }
  .osa .osa-lane { padding: 9px 6px 7px; }
  .osa .osa-card { padding: 10px 9px 9px; }
  .osa .osa-cw { gap: 9px; }
  .osa .osa-cw .fc { width: 32px; height: 32px; }
  .osa .osa-cw b { font-size: 13px; }
  .osa .osa-job { font-size: 12.5px; line-height: 1.36; }
  .osa .osa-desk { padding: 14px 12px; }
  .osa .osa-q { font-size: 15px; }
}

@container osa (max-width: 859px) {
  .osa .osa-depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .osa .osa-dept { justify-content: space-between; }
}

/* ------------------------------------------------- phone: three cards, one call */

@container osa (max-width: 719px) {
  .osa h1.osa-h1 { font-size: min(52px, 9.9cqi); line-height: 1.06; }
  .osa .osa-head .osa-lede { margin-top: 18px; font-size: min(17px, 4.32cqi); line-height: 1.5; }
  .osa .osa-acts { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 360px; margin-top: 26px; }
  .osa .osa-acts .pill { padding: 14px 22px; font-size: 16px; }
  .osa .osa-by { margin-top: 16px; font-size: 13.5px; }
  .osa .osa-fig { margin-top: 40px; }
  .osa .osa-sky::before,
  .osa .show-sky::before,
  .osa .show-sky::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 31%, #000 37%);
            mask-image: linear-gradient(to bottom, transparent 0, transparent 31%, #000 37%);
  }
  .osa .osa-fig::before { left: 0; right: 0; }

  .osa .osa-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "mark me" "ask ask";
    padding: 12px 12px 12px 14px;
  }
  .osa .osa-lights { gap: 5px; margin-right: 2px; }
  .osa .osa-lights i { width: 9px; height: 9px; }
  .osa .osa-mark { gap: 9px; }
  .osa .osa-mark b { font-size: 15px; }
  .osa .osa-ask { height: 40px; padding-left: 12px; }
  .osa .osa-ask-k { display: none; }
  .osa .osa-ask-q { font-size: 13.5px; }

  .osa .osa-body { grid-template-columns: minmax(0, 1fr); }
  .osa .osa-rail,
  .osa .osa-seg,
  .osa .osa-lh,
  .osa .osa-x { display: none; }
  .osa .osa-board { padding: 14px 12px 4px; }
  .osa .osa-bhd { margin-bottom: 4px; }
  .osa .osa-lanes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .osa .osa-lane,
  .osa .osa-lane.osa-yc { padding: 0; background: none; box-shadow: none; }
  .osa .osa-card { padding: 12px 12px 11px; }
  .osa .osa-cw .fc { width: 36px; height: 36px; }
  .osa .osa-job { font-size: 13.5px; }
  .osa .osa-ln {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 22px;
    margin-left: auto;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-style: normal;
    color: #dcdce4;
    background: rgba(255, 255, 255, 0.09);
  }
  .osa .osa-wk .osa-ln { color: #dcdcff; background: rgba(120, 110, 220, 0.4); }
  .osa .osa-sh .osa-ln { color: #cdeedd; background: rgba(106, 160, 136, 0.32); }

  .osa .osa-desk { margin-top: 14px; padding: 14px 12px 14px; background: linear-gradient(to bottom, rgba(191, 162, 95, 0.06), rgba(191, 162, 95, 0.02)); box-shadow: none; }
  .osa .osa-dhd { margin-top: 6px; }
  .osa .osa-desk .osa-call { margin-top: 10px; }
  .osa .osa-dft { padding-top: 12px; }
  .osa .osa-foot { padding: 10px 12px; }
  .osa .osa-clock { margin-left: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .osa .osa-caret { animation: none; }
}

/* inside — PM #8573 */
/* #inside: what is inside HyperionOS, as five glass slabs in a shallow stack.
   Your desk on top, then Hyperion, the Synths, the boards and machines, and
   Alexandria at the base. Each slab is tilted back a little, carries a short
   miniature of what it holds and its own tint, and stands on a lit front edge;
   a line of light rises through the gaps from Alexandria to the desk. Each
   slab's words sit level with it on the right, joined by a thread of light.
   Below 860px of section the same stack shrinks to a column of small slabs on
   the left (the miniature drawn at a narrow width, then zoomed down), with the
   words beside each, so the phone keeps one compact row per layer.
   Every rule is scoped to .osi except the five layer chips, which #one-job
   reuses: <span class="osi-t-desk">Your Desk</span> and so on. */

/* ---- the five layer tints, as chips (shared with #one-job) ---- */
.show .osi-t-desk { --osi-t: 236, 214, 160; color: #f6e7bd; }
.show .osi-t-hyp  { --osi-t: 242, 236, 220; color: #f7f3ea; }
.show .osi-t-syn  { --osi-t: 120, 146, 222; color: #dae1fb; }
.show .osi-t-brd  { --osi-t: 96, 190, 180;  color: #d3f2ed; }
.show .osi-t-alx  { --osi-t: 214, 160, 96;  color: #f5ddbc; }
.show :is(.osi-t-desk, .osi-t-hyp, .osi-t-syn, .osi-t-brd, .osi-t-alx) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-text-fill-color: currentColor;
  background: rgba(var(--osi-t), 0.2);
  box-shadow: inset 0 1px 0 rgba(var(--osi-t), 0.32);
}
.show :is(.osi-t-desk, .osi-t-hyp, .osi-t-syn, .osi-t-brd, .osi-t-alx)::before {
  content: '';
  position: static;
  display: block;
  flex: none;
  left: auto;
  top: auto;
  width: 6px;
  height: 6px;
  margin: 0;
  border-radius: 50%;
  opacity: 1;
  background: rgb(var(--osi-t));
  box-shadow: 0 0 8px rgba(var(--osi-t), 0.9);
}

/* ---- the section ---- */
.osi {
  container: osi / inline-size;
  --show-top: clamp(80px, 8.4vw, 120px);
  --show-end: clamp(56px, 5vw, 76px);
  --haze:
    radial-gradient(30% 260px at 32% 30%, rgba(242, 232, 205, 0.07), transparent 72%),
    radial-gradient(46% 44% at 32% 62%, rgba(70, 110, 220, 0.26), rgba(70, 110, 220, 0.07) 55%, transparent 76%),
    radial-gradient(36% 240px at 32% 92%, rgba(214, 150, 80, 0.12), transparent 72%);
}
.osi :where(p, h3, figure) { margin: 0; padding: 0; }
.osi :where(p, h3) { color: inherit; font-size: inherit; font-weight: inherit; }
/* the heading is sized by the section, not the window, so it holds in the review rail */
body.v3 .osi.show .show-head .display { font-size: clamp(36px, 6.2cqw, 80px); }

/* each layer is its own tint, and leans back a little further the lower it sits */
.osi .osi-ly-desk { --osi-l: 236, 214, 160; --osi-lt: #f2e1b2; --osi-tilt: 20deg; }
.osi .osi-ly-hyp  { --osi-l: 242, 236, 220; --osi-lt: #f3eee2; --osi-tilt: 22deg; }
.osi .osi-ly-syn  { --osi-l: 120, 146, 222; --osi-lt: #c9d4fa; --osi-tilt: 24deg; }
.osi .osi-ly-brd  { --osi-l: 96, 190, 180;  --osi-lt: #b9ece4; --osi-tilt: 26deg; }
.osi .osi-ly-alx  { --osi-l: 214, 160, 96;  --osi-lt: #f0cfa0; --osi-tilt: 28deg; }

/* ---- the stack ---- */
.osi .osi-fig {
  --gap: clamp(32px, 4.6cqw, 60px);
  --col: 64%;
  position: relative;
  margin-top: clamp(36px, 3.4vw, 48px);
}
.osi .osi-stack { position: relative; z-index: 1; display: grid; row-gap: 10px; }
.osi .osi-ly {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 64fr) minmax(0, 36fr);
  column-gap: var(--gap);
  align-items: center;
}
/* the slab above casts on the slab below */
.osi .osi-ly:nth-child(1) { z-index: 5; }
.osi .osi-ly:nth-child(2) { z-index: 4; }
.osi .osi-ly:nth-child(3) { z-index: 3; }
.osi .osi-ly:nth-child(4) { z-index: 2; }
.osi .osi-ly:nth-child(5) { z-index: 1; }

/* the line of light, rising from Alexandria to the desk behind the glass */
.osi .osi-beam {
  position: absolute;
  z-index: 0;
  top: 60px;
  bottom: 50px;
  left: calc((100% - var(--gap)) * 0.32);
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(to top, rgba(222, 156, 80, 0), rgb(240, 172, 96) 7%, rgb(255, 226, 166) 50%, rgb(250, 226, 160) 93%, rgba(236, 214, 160, 0));
  box-shadow: 0 0 10px 2px rgba(255, 214, 150, 0.7), 0 0 40px 10px rgba(236, 180, 100, 0.28);
}
.osi .osi-beam::after {
  content: '';
  position: absolute;
  left: -0.5px;
  bottom: 0;
  width: 4px;
  height: 48px;
  border-radius: 2px;
  background: linear-gradient(to top, rgba(255, 246, 225, 0), #fffaf0 60%, rgba(255, 246, 225, 0));
  box-shadow: 0 0 14px 4px rgba(255, 226, 170, 0.6);
  opacity: 0;
  animation: osi-rise 5.5s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
@keyframes osi-rise {
  0% { bottom: 0; opacity: 0; }
  12% { opacity: 1; }
  84% { opacity: 1; }
  100% { bottom: calc(100% - 48px); opacity: 0; }
}

/* a slab: opaque tinted glass, tilted back, standing on a lit front edge */
.osi .osi-slab { container: osi-slab / inline-size; position: relative; min-width: 0; padding-bottom: 12px; }
.osi .osi-face {
  position: relative;
  padding: 12px 14px 13px;
  border-radius: 13px;
  color: #e6e6ea;
  background:
    radial-gradient(70% 130px at 50% -46px, rgba(var(--osi-l), 0.3), transparent 80%),
    linear-gradient(to bottom, rgba(var(--osi-l), 0.13), rgba(var(--osi-l), 0.045) 62%),
    #0e121d;
  /* the far edge lit, then the slab's thickness under its front edge: a white lip
     fading into the layer's light, then the shadow it casts and its colour below */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    0 1.5px 0 0 rgba(255, 255, 255, 0.6),
    0 4px 0 0 rgba(var(--osi-l), 0.55),
    0 8px 0 0 rgba(var(--osi-l), 0.24),
    0 11px 0 0 rgba(var(--osi-l), 0.1),
    0 34px 36px -14px rgba(0, 0, 0, 1),
    0 24px 50px -18px rgba(var(--osi-l), 0.4),
    0 0 80px -18px rgba(var(--osi-l), 0.5);
  transform: perspective(1100px) rotateX(var(--osi-tilt));
  transform-origin: 50% 50%;
}

/* ---- 1 · your desk: your seat, and two calls under the lamp ---- */
.osi .osi-ly-desk .osi-face { background: radial-gradient(64% 170px at 50% -40px, rgba(255, 222, 150, 0.46), rgba(236, 196, 110, 0.12) 60%, transparent 85%), linear-gradient(to bottom, rgba(236, 200, 130, 0.14), rgba(236, 200, 130, 0.05) 62%), #15140f; }
.osi .osi-desk { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.osi .osi-me { display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: 12.5px; line-height: 1.25; color: #d6cfbd; }
.osi .osi-me .you { width: 34px; height: 34px; margin-bottom: 4px; font-size: 11px; }
.osi .osi-me b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #f6f1e4; }
.osi .osi-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.25; white-space: nowrap; color: #d0d3d9; }
.osi .osi-live .dot { width: 6px; height: 6px; color: #8edbb4; }
.osi .osi-me .osi-live { margin-top: 2px; }
.osi .osi-call { display: flex; flex-direction: column; min-width: 0; padding: 11px 13px 12px; }
.osi .osi-call-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.osi .osi-call .k { font-size: 10.5px; }
.osi .osi-by { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.2; white-space: nowrap; color: #e2dac6; }
.osi .osi-by .fc { width: 22px; height: 22px; }
.osi .osi-call-q { margin: 7px 0 10px; font-size: 16.5px; line-height: 1.22; letter-spacing: -0.012em; color: #fbf4e2; }
.osi .osi-call-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.osi .osi-call .bts { flex-wrap: nowrap; gap: 6px; }
.osi .osi-call .bt { height: 27px; padding: 0 12px; font-size: 12.5px; }
.osi .osi-tm { font: 500 11px/1 var(--mono); color: #d3c7a6; }

/* ---- 2 · Hyperion: the light, the ask, one answer with receipts ---- */
.osi .osi-ly-hyp .osi-face { background: radial-gradient(340px 220px at 64px 50%, rgba(255, 246, 225, 0.4), rgba(255, 240, 214, 0.12) 50%, transparent 80%), radial-gradient(70% 130px at 50% -46px, rgba(242, 236, 220, 0.3), transparent 80%), linear-gradient(to bottom, rgba(242, 236, 220, 0.16), rgba(242, 236, 220, 0.07) 62%), #13141a; }
.osi .osi-hyp { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; }
.osi .osi-light { position: relative; display: grid; place-items: center; height: 100%; min-height: 96px; }
.osi .osi-light::before { content: ''; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 248, 230, 0.62), rgba(255, 236, 200, 0.24) 34%, rgba(var(--hz), 0.12) 60%, transparent); }
.osi .osi-corona { --s: 70px; }
.osi .osi-corona .ring { inset: -12%; filter: blur(0.6px); }
.osi .osi-corona .disc { box-shadow: 0 0 0 1.5px rgba(255, 248, 232, 0.95), 0 0 16px 4px rgba(255, 244, 222, 0.8), 0 0 46px 14px rgba(255, 236, 200, 0.42), inset 0 0 20px rgba(var(--hz), 0.2); }
.osi .osi-corona .halo { opacity: 1; }
.osi .osi-askbar { min-height: 44px; gap: 10px; padding: 0 6px 0 15px; }
.osi .osi-askbar .typed { font-size: 15px; line-height: 1.3; }
.osi .osi-askbar .caret { height: 16px; vertical-align: -3px; }
.osi .osi-askbar .go { width: 32px; height: 32px; border-radius: 7px; }
.osi .osi-askbar .go svg.i { width: 14px; height: 14px; }
.osi .osi-ans { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 9px 12px; border-radius: 8px; background: rgba(var(--hy), 0.08); box-shadow: inset 0 1px 0 rgba(var(--hy), 0.2); }
.osi .osi-voice { flex: 1; min-width: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.3; letter-spacing: -0.005em; color: #f1ebdd; }
.osi .osi-voice em { color: #f6deaa; }
.osi .osi-rc { display: flex; flex: none; align-items: center; gap: 8px; font-size: 12.5px; white-space: nowrap; color: #ccd0d6; }
.osi .osi-rc .fc { width: 24px; height: 24px; }
.osi .osi-rc .fc + .fc { margin-left: -7px; }

/* ---- 3 · the Synths: the ladder in steps, and the floor by department ---- */
.osi .osi-floor { display: grid; grid-template-columns: 206px minmax(0, 1fr); gap: 10px; align-items: center; }
.osi .osi-lad { display: flex; flex-direction: column; align-items: center; padding: 8px 8px 0; border-radius: 8px; background: rgba(var(--osi-l), 0.08); }
.osi .osi-rung { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px 0 6px; border-radius: 7px 7px 0 0; font-size: 12px; line-height: 1.2; white-space: nowrap; color: #c6ccd9; background: rgba(150, 170, 235, 0.16); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.3); }
.osi .osi-rung b { font-weight: 500; color: #f3f5f9; }
.osi .osi-r1 { width: 72%; background: linear-gradient(to bottom, rgba(var(--hy), 0.3), rgba(var(--hy), 0.16)); }
.osi .osi-r2 { width: 86%; background: rgba(150, 170, 235, 0.22); }
.osi .osi-r3 { width: 100%; border-radius: 7px 7px 6px 6px; background: rgba(120, 146, 222, 0.2); }
.osi .osi-rung .fc { width: 22px; height: 22px; }
.osi .osi-r1 .fc { box-shadow: 0 0 0 1.5px rgba(var(--hy), 0.85), 0 0 10px rgba(var(--hy), 0.45); }
.osi .osi-r3 .fc + .fc { margin-left: -8px; }
.osi .osi-depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.osi .osi-depts > li { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; height: 40px; padding: 0 8px 0 10px; border-radius: 8px; background: rgba(var(--osi-l), 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.osi .osi-dn { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: #c4cde6; }
.osi .osi-dn .dot { width: 5px; height: 5px; color: #8edbb4; }
.osi .osi-dn .dot:not(.pulse) { color: #8a93a8; box-shadow: none; }
.osi .osi-depts .faces { display: flex; }
.osi .osi-depts .fc { width: 24px; height: 24px; }
.osi .osi-depts .fc + .fc { margin-left: -9px; }

/* ---- 4 · boards and machines: lanes, a card on the move, a process as stages ---- */
.osi .osi-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.osi .osi-lane { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px 6px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.045); }
.osi .osi-lane-call { background: rgba(236, 214, 160, 0.11); box-shadow: inset 0 1px 0 rgba(236, 214, 160, 0.24); }
.osi .osi-lh { display: flex; align-items: center; gap: 6px; padding: 1px 3px 2px; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: #d6d9df; }
.osi .osi-lh em { margin-left: auto; font: 500 11px/1 var(--mono); color: #b8bdc6; }
.osi .osi-lane-call .osi-lh { color: #f0deae; }
.osi .osi-cd { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; height: 27px; padding: 0 8px 0 5px; border-radius: 6px; font-size: 12px; line-height: 1.2; white-space: nowrap; color: #e8eaee; background: #1a2232; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 4px 10px -4px rgba(0, 0, 0, 0.6); }
.osi .osi-cd .fc { width: 19px; height: 19px; }
.osi .osi-lane-done .osi-cd { color: #c2c6ce; background: #151b28; }
.osi .osi-cd.osi-slot { background: none; box-shadow: none; }
/* the card on the move: half across into Your Call, a crisp trail of light behind it */
.osi .osi-cd.osi-mv {
  z-index: 3;
  color: #fff8e8;
  background: radial-gradient(90% 40px at 50% -10px, rgba(255, 226, 160, 0.55), transparent), linear-gradient(to bottom, rgba(236, 200, 120, 0.34), rgba(191, 152, 80, 0.2)), #1f1a10;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.95), inset 0 0 0 1px rgba(236, 214, 160, 0.3), 0 14px 24px -8px rgba(0, 0, 0, 0.9), 0 0 30px 2px rgba(236, 196, 110, 0.8);
  transform: translateX(calc(54% + 4px)) translateY(-2px) scale(1.06);
}
.osi .osi-cd.osi-mv::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 30%;
  width: 46%;
  height: 40%;
  background:
    linear-gradient(90deg, rgba(251, 231, 180, 0), #fbe7b4) right top / 100% 1.5px no-repeat,
    linear-gradient(90deg, rgba(251, 231, 180, 0), #fff3d6) right center / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(251, 231, 180, 0), #fbe7b4) right bottom / 70% 1.5px no-repeat;
  filter: drop-shadow(0 0 4px rgba(236, 196, 110, 0.9));
}
.osi .osi-mach { display: flex; align-items: center; gap: 16px; margin-top: 7px; padding: 7px 12px; border-radius: 8px; background: rgba(var(--osi-l), 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.osi .osi-mach-k { display: flex; flex: none; align-items: baseline; gap: 8px; white-space: nowrap; }
.osi .osi-mach-k span { font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #a9d8d1; }
.osi .osi-mach-k b { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: #ecf6f4; }
.osi .osi-steps { display: flex; flex: 1; align-items: center; min-width: 0; }
.osi .osi-steps > li { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.2; white-space: nowrap; color: #bcc5c7; }
.osi .osi-steps > li:last-child { flex: none; }
.osi .osi-steps > li::before {
  content: '';
  position: static;
  display: block;
  flex: none;
  left: auto;
  top: auto;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  opacity: 1;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: none;
}
.osi .osi-steps > li::after { content: ''; flex: 1; min-width: 6px; height: 1.5px; margin-right: 6px; background: rgba(255, 255, 255, 0.16); }
.osi .osi-steps > li:last-child::after { content: none; }
.osi .osi-steps > li.on { color: #dcf1ee; }
.osi .osi-steps > li.on::before { background: rgb(var(--osi-l)); box-shadow: 0 0 8px rgba(var(--osi-l), 0.95); }
.osi .osi-steps > li.on::after { background: rgba(var(--osi-l), 0.75); box-shadow: 0 0 6px rgba(var(--osi-l), 0.6); }
.osi .osi-steps > li.gate { color: #f4e2b0; }
.osi .osi-steps > li.gate::before { border-radius: 1.5px; background: #f3dc9c; transform: rotate(45deg); box-shadow: 0 0 12px rgba(226, 190, 110, 1); }

/* ---- 5 · Alexandria: one shelf of documents, warm, three just filed ---- */
.osi .osi-ly-alx .osi-face { padding-bottom: 18px; background: radial-gradient(70% 140px at 50% -46px, rgba(236, 170, 96, 0.34), transparent 80%), linear-gradient(to bottom, rgba(214, 150, 80, 0.16), rgba(214, 150, 80, 0.06) 62%), #14100e; }
.osi .osi-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.osi .osi-shelf > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  min-height: 74px;
  padding: 8px 9px 9px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(225deg, rgba(255, 226, 180, 0.3) 0 8px, transparent 8.5px), linear-gradient(to bottom, rgba(214, 150, 80, 0.22), rgba(214, 150, 80, 0.08)), #1d1711;
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, 0.24), 0 6px 12px -6px rgba(0, 0, 0, 0.8);
}
/* the row stands on a shelf of warm light */
.osi .osi-shelf > li::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -8px;
  height: 3px;
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(250, 196, 128, 0.95), rgba(214, 150, 80, 0.4));
  box-shadow: 0 0 12px 1px rgba(236, 170, 96, 0.6);
}
.osi .osi-shelf > li.osi-new {
  background: linear-gradient(225deg, rgba(255, 236, 200, 0.55) 0 8px, transparent 8.5px), radial-gradient(90% 60px at 50% -10px, rgba(255, 214, 150, 0.5), transparent), linear-gradient(to bottom, rgba(250, 190, 110, 0.4), rgba(214, 150, 80, 0.16)), #2a1d10;
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.8), 0 0 30px 2px rgba(240, 176, 96, 0.7);
}
.osi .osi-dk { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.osi .osi-ty { padding: 4px 6px; border-radius: 4px; font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #fbe6c6; background: rgba(214, 150, 80, 0.42); }
.osi .osi-new .osi-ty { color: #2a1d0c; background: #f3cf94; }
.osi .osi-shelf b { font-size: 12.5px; font-weight: 400; line-height: 1.25; color: #f4ece0; }
.osi .osi-shelf .fc { width: 20px; height: 20px; }

/* ---- the words, level with each slab ---- */
.osi .osi-tx { position: relative; min-width: 0; max-width: 430px; padding: 6px 0; }
/* a thread of the layer's light, from a node on the slab to its name */
.osi .osi-tx::before {
  content: '';
  position: absolute;
  right: calc(100% + 4px);
  top: 18.25px;
  width: calc(var(--gap) + 6px);
  height: 1.5px;
  background: linear-gradient(90deg, rgba(var(--osi-l), 0.5), rgba(var(--osi-l), 0.95));
  box-shadow: 0 0 6px rgba(var(--osi-l), 0.5);
}
.osi .osi-tx::after {
  content: '';
  position: absolute;
  right: calc(100% + var(--gap) + 6px);
  top: 15.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--osi-l));
  box-shadow: 0 0 10px 1px rgba(var(--osi-l), 0.9);
}
.osi .osi-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.osi .osi-nm { display: flex; }
.osi .osi-say { margin-top: 10px; }
.osi .osi-say b { display: block; font-size: 21px; font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; color: var(--ivory-mid); }
.osi .osi-say span { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.45; color: #c6c9cf; }
.osi .osi-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 1.4; text-decoration: none; color: var(--osi-lt); }
.osi .osi-go svg.i { width: 13px; height: 13px; transition: transform 0.2s ease; }
.osi .osi-go:hover { text-decoration: underline; text-underline-offset: 4px; }
.osi .osi-go:hover svg.i { transform: translateX(2px); }

/* ---- a narrower slab (1024, the review rail): the same parts, drawn for the width ---- */
@container osi-slab (max-width: 640px) {
  .osi .osi-desk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .osi .osi-me { display: none; }
  .osi .osi-call-q { font-size: 15.5px; }
  .osi .osi-hyp { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .osi .osi-corona { --s: 60px; }
  .osi .osi-light::before { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .osi .osi-voice { font-size: 14.5px; }
  .osi .osi-rc > span:last-child { display: none; }
  .osi .osi-floor { grid-template-columns: 136px minmax(0, 1fr); }
  .osi .osi-lad { padding: 6px 6px 0; }
  .osi .osi-rung { gap: 6px; padding: 0 7px 0 5px; font-size: 11.5px; }
  .osi .osi-r1 b, .osi .osi-r2 b { display: none; }
  .osi .osi-r3 .fc:nth-child(n+3), .osi .osi-depts .fc:nth-child(n+3) { display: none; }
  .osi .osi-depts > li { padding: 0 6px 0 8px; }
  .osi .osi-dn { gap: 5px; font-size: 10px; letter-spacing: 0.05em; }
  .osi .osi-depts .fc { width: 22px; height: 22px; }
  .osi .osi-cd { gap: 6px; padding: 0 6px 0 4px; }
  .osi .osi-cd .fc { width: 18px; height: 18px; }
  .osi .osi-mach { gap: 12px; padding: 7px 10px; }
  .osi .osi-mach-k b { display: none; }
  .osi .osi-steps > li { font-size: 11.5px; }
  .osi .osi-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .osi .osi-shelf > li:nth-child(n+5) { display: none; }
}

/* ---- a thumbnail slab (the phone): the drawing at a narrow width, zoomed down ---- */
@container osi-slab (max-width: 200px) {
  .osi .osi-face { zoom: 0.42; padding: 16px 16px 18px; border-radius: 18px; }
  .osi .osi-desk { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .osi .osi-call-q { font-size: 17px; }
  .osi .osi-hyp { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .osi .osi-light { min-height: 0; height: 100px; }
  .osi .osi-corona { --s: 72px; }
  .osi .osi-light::before { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .osi .osi-ans { display: none; }
  .osi .osi-floor { grid-template-columns: minmax(0, 1fr); }
  .osi .osi-lad { padding: 8px 8px 0; }
  .osi .osi-rung b { display: inline; }
  .osi .osi-depts > li { justify-content: center; padding: 0 6px; }
  .osi .osi-dn { display: none; }
  .osi .osi-depts .fc { width: 26px; height: 26px; }
  .osi .osi-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "work call" "next done"; }
  .osi .osi-lane-next { grid-area: next; }
  .osi .osi-lane-work { grid-area: work; }
  .osi .osi-lane-call { grid-area: call; }
  .osi .osi-lane-done { grid-area: done; }
  .osi .osi-mach { display: none; }
  .osi .osi-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .osi .osi-shelf > li:nth-child(n+5) { display: none; }
}

/* ---- the section narrows ---- */
@container osi (max-width: 1100px) {
  .osi .osi-ly { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); }
  .osi .osi-beam { left: calc((100% - var(--gap)) * 0.325); }
  .osi .osi-top { column-gap: 12px; }
  .osi .osi-tx::before { width: calc(var(--gap) + 2px); }
  .osi .osi-tx::after { right: calc(100% + var(--gap) + 2px); }
  .osi .osi-say b { font-size: 19px; }
  .osi .osi-say span { font-size: 15px; }
}
/* the phone: a column of small slabs, the words beside each */
@container osi (max-width: 860px) {
  .osi .osi-fig { --gap: 18px; margin-top: 34px; }
  .osi .osi-stack { row-gap: 26px; }
  .osi .osi-ly { grid-template-columns: 128px minmax(0, 1fr); align-items: center; }
  .osi .osi-ly-desk { --osi-tilt: 12deg; }
  .osi .osi-ly-hyp  { --osi-tilt: 12deg; }
  .osi .osi-ly-syn  { --osi-tilt: 12deg; }
  .osi .osi-ly-brd  { --osi-tilt: 12deg; }
  .osi .osi-ly-alx  { --osi-tilt: 12deg; }
  .osi .osi-slab { padding-bottom: 6px; }
  .osi .osi-face { transform: perspective(700px) rotateX(var(--osi-tilt)); }
  .osi .osi-beam { left: 64px; top: 40px; bottom: 40px; }
  .osi .osi-tx { max-width: none; }
  .osi .osi-tx::before, .osi .osi-tx::after { content: none; }
  .osi .osi-top { gap: 6px 12px; }
  .osi .osi-say { margin-top: 8px; }
  .osi .osi-say b { font-size: 17.5px; line-height: 1.25; }
  .osi .osi-say span { margin-top: 3px; font-size: 14.5px; line-height: 1.4; }
  .osi .osi-go { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .osi .osi-beam::after { animation: none; opacity: 0; }
  .osi .osi-go svg.i { transition: none; }
}

/* onejob — PM #8573
   #one-job: one real job through the layers overnight, ending in one gold call.
   The night is a quick relay on the left (four tight rows, each with one line of
   the real thing); the morning is on the right: the one big gold call, then a
   compact last step. Every class is osj-, every rule is scoped to .osj. Layout
   answers the section's own width (container osj), so the /rv/ rail reads the
   same as a narrower window; under 720 the two columns stack into one timeline.
   Each step is a container too (osj-step), so its card answers the width it got. */

.osj {
  container: osj / inline-size;
  --show-end: 64px;                     /* the next section brings its own top; as the board and inbox demos do */
  --osj-cold: 150, 172, 240;            /* the night's thread */
  --osj-rg: 18px;                       /* between two rows of the log */
  --osj-ind: 52px;                      /* the minute's column: words and cards start after it */
  --haze:
    radial-gradient(48% 46% at 22% 66%, rgba(70, 104, 220, 0.34), rgba(70, 104, 220, 0.08) 58%, transparent 78%),
    radial-gradient(46% 50% at 74% 66%, rgba(236, 200, 120, 0.22), rgba(214, 160, 96, 0.07) 56%, transparent 76%);
}

/* the page's prose rules stop at the door */
.osj :where(p, figure, h3, dl, dt, dd) { margin: 0; padding: 0; }
.osj :where(p) { color: inherit; }
.osj .bt { justify-content: center; line-height: 1.2; }

/* stars only in a band above the picture: never beside a word (the v3 head is centred, so its
   band is the whole top of the section) */
.osj .show-sky::before,
.osj .show-sky::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 52%), linear-gradient(to bottom, transparent 0, transparent calc(var(--show-y) + 330px), #000 calc(var(--show-y) + 380px), transparent calc(var(--show-y) + 520px));
          mask-image: linear-gradient(90deg, transparent 30%, #000 52%), linear-gradient(to bottom, transparent 0, transparent calc(var(--show-y) + 330px), #000 calc(var(--show-y) + 380px), transparent calc(var(--show-y) + 520px));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.osj .show-sky::after {
  -webkit-mask-image: linear-gradient(270deg, transparent 30%, #000 52%), linear-gradient(to bottom, transparent 0, transparent calc(var(--show-y) + 330px), #000 calc(var(--show-y) + 380px), transparent calc(var(--show-y) + 520px));
          mask-image: linear-gradient(270deg, transparent 30%, #000 52%), linear-gradient(to bottom, transparent 0, transparent calc(var(--show-y) + 330px), #000 calc(var(--show-y) + 380px), transparent calc(var(--show-y) + 520px));
}

/* the night on the left, the morning on the right */
.osj .osj-fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
  align-items: start;
  column-gap: clamp(28px, 3.4vw, 48px);
  margin-top: clamp(32px, 3.2vw, 46px);
}
.osj .osj-col { min-width: 0; }

/* ---- the layer chips: the same five tints as "What's inside" ---- */
.osj .osj-t-desk { --osj-c: 236, 214, 160; --osj-ci: #f6e6b8; }
.osj .osj-t-hyp  { --osj-c: 242, 236, 220; --osj-ci: #f6f1e4; }
.osj .osj-t-syn  { --osj-c: 120, 146, 222; --osj-ci: #d6e0ff; }
.osj .osj-t-brd  { --osj-c: 96, 190, 180;  --osj-ci: #cff3ee; }
.osj .osj-t-alx  { --osj-c: 214, 160, 96;  --osj-ci: #f5dcb8; }
.osj .osj-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--osj-ci);
  background: rgba(var(--osj-c), 0.2);
  box-shadow: inset 0 1px 0 rgba(var(--osj-c), 0.32);
}
.osj .osj-chip::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--osj-c));
  box-shadow: 0 0 6px rgba(var(--osj-c), 0.9);
}

/* ---- the two kickers, each over its own thread ---- */
.osj .osj-k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px -6px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #bcc1ca;
}
.osj .osj-kic { position: relative; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: #c9d4ff; background: linear-gradient(rgba(var(--osj-cold), 0.18), rgba(var(--osj-cold), 0.18)), #0a0f1d; box-shadow: inset 0 1px 0 rgba(var(--osj-cold), 0.3); }
.osj .osj-kic svg.i { width: 13px; height: 13px; }
/* the icon hands the thread down to the first node */
.osj .osj-kic::after { content: ''; position: absolute; left: 12px; top: 100%; width: 2px; height: 22px; background: linear-gradient(to bottom, rgba(var(--osj-cold), 0.1), rgba(var(--osj-cold), 0.7)); }
.osj .osj-k-night::after { content: ''; flex: 1; height: 1px; margin-left: 6px; background: linear-gradient(90deg, rgba(var(--osj-cold), 0.32), rgba(var(--osj-cold), 0)); }
.osj .osj-k-day { color: #e6d29c; }
.osj .osj-k-day .osj-kic { color: #f6dc94; background: linear-gradient(rgba(var(--need), 0.2), rgba(var(--need), 0.2)), #0a0f1d; box-shadow: inset 0 1px 0 rgba(var(--need), 0.4), 0 0 18px -2px rgba(226, 190, 110, 0.6); }
.osj .osj-k-day .osj-kic::after { background: linear-gradient(to bottom, rgba(var(--need), 0.15), rgba(var(--need), 0.85)); box-shadow: 0 0 8px rgba(226, 190, 110, 0.5); }
.osj .osj-k-day em { display: flex; flex: 1; align-items: center; gap: 12px; margin-left: 6px; font-style: normal; letter-spacing: 0.1em; color: #c4c9d3; }
.osj .osj-k-day em::before { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--need), 0.5), rgba(var(--osj-cold), 0.28)); }

/* ---- a log of steps, a node per minute, the thread from one node to the next ---- */
.osj .osj-log { display: grid; row-gap: var(--osj-rg); }
.osj .osj-st {
  --osj-th: var(--osj-cold);
  container: osj-step / inline-size;
  position: relative;
  min-width: 0;
  padding-left: 30px;
}
.osj .osj-col-day .osj-st { --osj-th: 236, 214, 160; }
.osj .osj-st::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 22px;
  bottom: calc(-1 * var(--osj-rg) - 8px);
  width: 2px;
  height: auto;
  border-radius: 0;
  opacity: 1;
  background: rgba(var(--osj-th), 0.6);
  box-shadow: 0 0 10px rgba(var(--osj-th), 0.45);
}
.osj .osj-log > .osj-st:last-child::before { bottom: auto; height: 40px; background: linear-gradient(to bottom, rgba(var(--osj-th), 0.6), rgba(var(--osj-th), 0)); box-shadow: none; }
.osj .osj-st::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f2f5ff;
  box-shadow: 0 0 0 3px rgba(var(--osj-th), 0.22), 0 0 12px 2px rgba(var(--osj-th), 0.85);
}
.osj .osj-col-day .osj-st::after { background: #fff1d6; }
.osj .osj-s5::after { left: 0; top: 7px; width: 14px; height: 14px; background: #fff3d2; box-shadow: 0 0 0 4px rgba(var(--need), 0.25), 0 0 16px 4px rgba(226, 190, 110, 0.95), 0 0 40px 8px rgba(191, 162, 95, 0.5); }

/* the row's head: the minute, who, and the layers it uses */
.osj .osj-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 28px; }
.osj .osj-hd time { flex: none; width: 42px; font: 500 13px/1 var(--mono); letter-spacing: 0.04em; color: #e2e8ff; }
.osj .osj-col-day .osj-hd time { color: #fbeccb; }
.osj .osj-hd .fc { width: 28px; height: 28px; box-shadow: 0 0 0 2px rgba(120, 146, 222, 0.85), 0 0 12px rgba(120, 146, 222, 0.45); }
.osj .osj-hd .you { width: 28px; height: 28px; font-size: 9.5px; box-shadow: 0 0 0 2px rgba(var(--need), 0.5), 0 0 16px rgba(226, 190, 110, 0.6); }
.osj .osj-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; }
.osj .osj-ic svg.i { width: 14px; height: 14px; }
.osj .osj-ic-brd { color: #cff3ee; background: rgba(96, 190, 180, 0.26); box-shadow: inset 0 1px 0 rgba(96, 190, 180, 0.45), 0 0 12px rgba(96, 190, 180, 0.35); }
.osj .osj-nm { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.osj .osj-nm b { font-size: 15px; font-weight: 500; line-height: 1.3; color: #f1eee8; }
.osj .osj-nm span { font-size: 12.5px; line-height: 1.3; color: #b6bcc8; }
.osj .osj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* what it did */
.osj .osj-ln { margin: 5px 0 0 var(--osj-ind); font-size: 14px; line-height: 1.45; text-wrap: balance; color: #d2d4da; }

/* ---- a line of the real thing, on opaque glass lit along its top ---- */
.osj .osj-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  margin: 9px 0 0 var(--osj-ind);
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #dcdee4;
  background-color: #111627;
  background-image: radial-gradient(90% 50px at 50% -16px, rgba(var(--osj-cold), 0.16), transparent), linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}
.osj .osj-strip b { font-weight: 600; white-space: nowrap; color: #f2f2f5; }
.osj .osj-dim { color: #c0c4ce; }
.osj .osj-si { width: 14px; height: 14px; color: #c9d0e0; }
.osj .osj-voice { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; color: #efe9db; }
.osj .osj-strip .osj-voice { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.35; text-wrap: balance; }
.osj .osj-msg { display: flex; flex: 1 1 250px; align-items: flex-start; gap: 8px; min-width: 0; }
.osj .osj-msg .osj-ini { margin-top: 0; }
.osj .osj-ini { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: #f6eef0; background: rgba(214, 132, 150, 0.46); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.osj .osj-tg {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 21px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #d8d8e2;
  background: rgba(255, 255, 255, 0.08);
}
.osj .osj-tg svg.i { width: 11px; height: 11px; }
.osj .osj-tg-brd { color: #cff3ee; background: rgba(96, 190, 180, 0.24); }
.osj .osj-tg-back { color: #d6e0ff; background: rgba(120, 146, 222, 0.26); }
.osj .osj-doc { display: inline-flex; align-items: center; height: 21px; margin-left: auto; padding: 0 8px; border-radius: 5px; font-size: 11.5px; font-weight: 500; white-space: nowrap; color: #dcdee6; background: rgba(255, 255, 255, 0.07); }
.osj .osj-doc-alx { color: #f5dcb8; background: rgba(214, 160, 96, 0.24); box-shadow: inset 0 1px 0 rgba(214, 160, 96, 0.36); }

/* 3 · the note is Cassian's: a little bluer */
.osj .osj-strip-note { background-image: radial-gradient(90% 50px at 50% -16px, rgba(120, 146, 222, 0.28), transparent), linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%); }

/* 4 · the move: a ghost where the card stood, an arrow, the card in Your Call */
.osj .osj-strip-move { flex-wrap: nowrap; }
.osj .osj-ghost { display: inline-flex; flex: none; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; color: #bfc4ce; outline: 1px dashed rgba(255, 255, 255, 0.22); outline-offset: -1px; }
.osj .osj-arw { flex: none; width: 16px; height: 16px; stroke-width: 2.4; color: #f3dc9c; filter: drop-shadow(0 0 4px rgba(226, 190, 110, 0.9)); }
.osj .osj-kard {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 26px;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 6px;
  background: radial-gradient(80% 40px at 50% -12px, rgba(var(--need), 0.34), transparent), linear-gradient(to bottom, rgba(191, 162, 95, 0.26), rgba(191, 162, 95, 0.16)), #16140f;
  box-shadow: inset 0 1px 0 rgba(var(--need), 0.55), inset 0 0 0 1px rgba(var(--need), 0.2), 0 0 22px -6px rgba(226, 190, 110, 0.8);
}
.osj .osj-kard i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f3dc9c; box-shadow: 0 0 8px rgba(226, 190, 110, 0.9); }
.osj .osj-kard b { font-size: 12.5px; color: #f6e6b8; }
.osj .osj-kard span { font-size: 12.5px; white-space: nowrap; color: #fbf4e2; }

/* ---- 5 · the call: the one big card, under the warm lamp ---- */
.osj .osj-call {
  margin: 12px 0 0 var(--osj-ind);
  padding: 20px 24px 20px;
  box-shadow: inset 0 1.5px 0 rgba(var(--need), 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 70px -26px rgba(0, 0, 0, 0.9), 0 0 90px -18px rgba(191, 162, 95, 0.7);
}
.osj .osj-ck { display: flex; align-items: center; gap: 10px; }
.osj .osj-call .k { font-size: 12px; }
.osj .osj-wait { margin-left: auto; font: 500 12px/1 var(--mono); letter-spacing: 0.04em; white-space: nowrap; color: #e6dcc2; }
.osj .osj-q { margin-top: 10px; font-size: 30px; font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; color: #fdf6e4; }
.osj .osj-ask { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; }
.osj .osj-ask .osj-ini { margin-top: 1px; }
.osj .osj-ask .osj-voice { font-size: 16px; line-height: 1.4; text-wrap: balance; color: #e8e0cc; }
.osj .osj-pane { margin-top: 14px; padding: 10px 14px 12px; border-radius: 8px; background: rgba(8, 8, 10, 0.42); box-shadow: inset 0 0 0 1px rgba(var(--need), 0.14); }
.osj .osj-pk { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: #d8cdb0; }
.osj .osj-qg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.osj .osj-qg li { min-width: 0; padding: 7px 10px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.osj .osj-qg span { display: block; font-size: 12px; line-height: 1.35; white-space: nowrap; color: #cfc6b0; }
.osj .osj-qg em { display: block; margin-top: 2px; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.35; white-space: nowrap; color: #f4efe2; }
.osj .osj-qg li.osj-add { background: rgba(191, 162, 95, 0.26); box-shadow: inset 0 1px 0 rgba(var(--need), 0.45), 0 0 18px -6px rgba(226, 190, 110, 0.7); }
.osj .osj-qg li.osj-add span { color: #f6e6b8; }
.osj .osj-qg li.osj-add em { color: #fff3d2; }
.osj .osj-cf { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 16px; }
.osj .osj-cby { display: flex; align-items: center; gap: 11px; font-size: 13px; line-height: 1.4; color: #e2dccb; }
.osj .osj-cby .fc { width: 32px; height: 32px; filter: brightness(1.3) saturate(1.05); }
.osj .osj-cby .faces .fc { box-shadow: 0 0 0 2px #1a1710, 0 0 0 3.5px rgba(var(--need), 0.55); }
.osj .osj-cby .faces .fc + .fc { margin-left: -6px; }
.osj .osj-cf .bts { flex-wrap: nowrap; gap: 10px; margin-left: auto; }
.osj .osj-call .bt { height: 42px; padding: 0 24px; font-size: 15px; }
.osj .osj-call .bt.pri { min-width: 108px; box-shadow: 0 0 24px -4px rgba(243, 238, 226, 0.55); }

/* 6 · sent: the deal moves a stage, the quote goes on the shelf */
.osj .osj-strip-sent { background-color: #15151f; background-image: radial-gradient(90% 50px at 50% -16px, rgba(var(--need), 0.12), transparent), linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%); }
.osj .osj-stg { display: flex; align-items: center; gap: 0; }
.osj .osj-stg li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.2; white-space: nowrap; color: #c8ccd6; }
.osj .osj-stg li + li { margin-left: 8px; }
.osj .osj-stg li + li::before {
  content: '';
  position: static;
  left: auto;
  top: auto;
  width: 14px;
  height: 2px;
  margin-right: 2px;
  border-radius: 0;
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}
.osj .osj-stg li.osj-on::before { background: rgba(96, 190, 180, 0.8); box-shadow: 0 0 6px rgba(96, 190, 180, 0.7); }
.osj .osj-stg li.osj-done { color: #ccd0d9; }
.osj .osj-stg li.osj-on { height: 22px; padding: 0 9px; border-radius: 999px; font-weight: 600; color: #dff7f3; background: rgba(96, 190, 180, 0.3); box-shadow: inset 0 1px 0 rgba(96, 190, 180, 0.5), 0 0 14px -4px rgba(96, 190, 180, 0.9); }
.osj .osj-file { display: inline-flex; align-items: center; gap: 7px; height: 26px; margin-left: auto; padding: 0 10px 0 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; color: #dcc3a0; background: rgba(214, 160, 96, 0.18); box-shadow: inset 0 1px 0 rgba(214, 160, 96, 0.36), 0 0 20px -8px rgba(214, 160, 96, 0.7); }
.osj .osj-file svg.i { width: 13px; height: 13px; color: #f5dcb8; }
.osj .osj-file b { font-size: 12.5px; color: #fbf1e2; }

/* the closing line */
.osj .osj-close { margin-top: 34px; font-size: 16px; line-height: 1.5; text-align: center; color: #d4d1cc; }

/* the morning node breathes; the still frame already says it */
@media (prefers-reduced-motion: no-preference) {
  .osj .osj-s5::after { animation: osj-glow 2.6s ease-in-out infinite; }
}
@keyframes osj-glow { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }

/* ---- a step, by the width it was given ---- */

@container osj-step (max-width: 560px) {
  .osj .osj-qg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osj .osj-q { font-size: 26px; }
  .osj .osj-strip-sent { flex-direction: column; align-items: flex-start; gap: 8px; }
  .osj .osj-strip-sent .osj-file { margin-left: 0; }
  .osj .osj-cf .bts { width: 100%; margin-left: 0; }
  .osj .osj-call .bt { flex: 1; padding: 0 14px; }
}
@container osj-step (max-width: 419px) {
  .osj .osj-wide { display: none; }
}
/* narrow: the words and cards stop leaving room for the minute */
@container osj-step (max-width: 460px) {
  .osj .osj-ln,
  .osj .osj-strip,
  .osj .osj-call { margin-left: 0; }
  .osj .osj-ln { margin-top: 7px; }
  .osj .osj-call { padding: 18px 18px 18px; }
  .osj .osj-cf .bts { width: 100%; margin-left: 0; }
  .osj .osj-call .bt { flex: 1; padding: 0 14px; }
}
@container osj-step (max-width: 340px) {
  .osj .osj-q { font-size: 23px; }
  .osj .osj-call { padding: 16px 15px 16px; }
  .osj .osj-qg li { padding: 7px 9px; }
}

/* ---- the section, by its own width ---- */

@container osj (max-width: 1199px) {
  .osj .show-head .lede { padding-bottom: 0; }
}

/* two columns on a narrow page: the night's rows keep the name and drop the job title, so
   the head stays one line */
@container osj (min-width: 720px) and (max-width: 1000px) {
  .osj .osj-col-night .osj-nm span { display: none; }
}

/* under 720: one timeline, the night above the morning, the thread runs through both */
@container osj (max-width: 719px) {
  .osj .osj-fig { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .osj .osj-col-night .osj-log > .osj-st:last-child::before {
    bottom: calc(-30px - 40px - 8px);
    height: auto;
    background: linear-gradient(to bottom, rgba(var(--osj-cold), 0.6), rgba(var(--osj-cold), 0.45) 55%, rgba(236, 214, 160, 0.8));
    box-shadow: none;
  }
  .osj .osj-close { margin-top: 34px; }
  .osj .osj-chips { flex-basis: 100%; margin-left: 52px; }
  .osj .osj-ln span { display: block; }
  .osj .show-head .lede span { display: block; text-wrap: balance; }
}