/* hyperionos.ai — the Skyline look (task #8190, to Mike's pick KB #8551).
   One sheet for all seven pages. Colours sampled from the target image with PIL;
   where the image does not decide, the app's Skyline tokens (global.css, room.css).
   Colour lives on tinted surfaces, never on a border or an edge stripe. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..600&display=swap');

:root {
  --ground: #02060d;          /* the space, sampled */
  --ground-up: #050b17;       /* one step lighter, for the alternate band */
  --text: #d6d8dd;            /* Skyline --text */
  --text-2: #b9bcc2;          /* Skyline --text-secondary */
  --muted: #9c9fa5;           /* Skyline --muted */
  --eyebrow: #7d899d;         /* sampled */
  --nav: #dcdbd8;             /* sampled */
  --ivory-hi: #fffaf3;        /* H1 gradient, sampled per line */
  --ivory-mid: #f4e8d9;
  --ivory-lo: #ddc8ae;
  --cream: #f2ecdc;           /* Skyline --lamp-cream */
  --gold: #dbc3aa;            /* the CTA ring, sampled */
  --gold-ink: #e6d6c0;        /* roster names, sampled */
  --os: #8c9fd0;              /* the OS in the wordmark, sampled */
  --hair: rgba(196, 178, 158, 0.42);
  --rule: rgba(255, 255, 255, 0.085);
  --tint-cool: rgba(110, 121, 201, 0.075);   /* Skyline --accent at low alpha */
  --tint-warm: rgba(219, 195, 170, 0.075);
  --tint-cool-2: rgba(110, 121, 201, 0.14);  /* the cool tint at double strength: Home's proof band */
  --radius: 6px;              /* Skyline radius scale: 6 / 4 / 999 */
  --radius-full: 999px;
  --pad: 64px;
  --section-y: clamp(72px, 9vw, 136px);   /* Home: the one vertical rhythm for every section below the hero */
  --header-h: 76px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --stars:
    radial-gradient(1.2px 1.2px at 25% 39%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 86% 88%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 19% 22%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 6% 88%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 75% 84%, rgba(235,240,255,.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 71% 66%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 72% 93%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 96% 18%, rgba(235,240,255,.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 63% 97%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 36% 55%, rgba(235,240,255,.55) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 65%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 3% 4%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 56% 43%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 85%, rgba(235,240,255,.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 15% 93%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 44% 18%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 21% 80%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 59% 56%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 68% 64%, rgba(235,240,255,.85) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 27% 47%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 5% 65%, rgba(235,240,255,.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 11% 13%, rgba(235,240,255,.45) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 3%, rgba(235,240,255,.85) 50%, transparent 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--ground); }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--cream); }

h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }

/* ------------------------------------------------------------------ header */

header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  padding: 0 var(--pad);
  box-shadow: 0 1px 0 var(--rule);
}

.brand {
  flex-shrink: 0;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #ecebee;
  text-decoration: none;
}
.brand .os { color: var(--os); }

header > nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 34px;
}

header > nav a {
  font-size: 15px;
  color: var(--nav);
  text-decoration: none;
  transition: color .15s;
}
header > nav a:hover { color: #fff; }
header > nav a[aria-current="page"] { color: #fff; }

/* the image's "Explore" pill, holding our Join */
header > nav a.button {
  margin-left: 18px;
  padding: 9px 32px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: #f4f3f1;
  transition: background .15s;
}
header > nav a.button:hover { background: rgba(255, 255, 255, 0.08); }
header > nav a.button[aria-current="page"] { background: rgba(255, 255, 255, 0.1); }

/* the phone menu: a <details>, so it opens with no script. Hidden on desktop. */
.menu { display: none; }
.menu summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px 7px 6px;
  font-size: 14px;
  color: var(--nav);
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
/* three short lines, drawn, not a glyph */
.menu summary::after {
  content: '';
  width: 16px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
}
.menu[open] summary { color: #fff; }
.menu[open] summary::after {
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat;
}
.menu nav {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  padding: 14px var(--pad) 22px;
  background:
    linear-gradient(to bottom, rgba(110, 121, 201, 0.16), rgba(110, 121, 201, 0.08)),
    #050a16;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}
.menu nav a {
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 17px;
  color: var(--nav);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.menu nav a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.menu nav a[aria-current="page"] { background: rgba(219, 195, 170, 0.1); color: #fff; }

/* ------------------------------------------------------------- the ground */

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 76% 34%, rgba(42, 72, 140, 0.32), transparent 70%),
    var(--stars);
  background-size: auto, 640px 540px;
}

/* the planet: a dark disc, lit along its upper-left rim */
.planet {
  position: absolute;
  left: 74%;
  top: 56%;
  width: 1080px;
  height: 1080px;
  margin: -540px 0 0 -540px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 18%, #0c1830 0%, #070e1c 36%, #03070f 66%);
  box-shadow:
    inset 6px 14px 18px -10px rgba(214, 232, 255, 0.7),
    inset 20px 40px 80px -40px rgba(92, 140, 230, 0.45),
    -4px -12px 40px -10px rgba(84, 126, 214, 0.36);
  /* lit along the top, gone by the time it reaches the headline */
  -webkit-mask-image: linear-gradient(215deg, #000 38%, rgba(0, 0, 0, 0.35) 50%, transparent 60%);
          mask-image: linear-gradient(215deg, #000 38%, rgba(0, 0, 0, 0.35) 50%, transparent 60%);
}

/* the city: Mike's pick's own skyline strip, fogged into the ground at both ends */
.city {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 240px;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(2, 6, 13, 0) 55%, var(--ground) 100%),
    url('assets/skyline.webp') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
}
.city::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 70px;
  background: radial-gradient(70% 100% at 50% 100%, rgba(80, 118, 196, 0.5), transparent 75%);
}

/* ------------------------------------------------------------ type steps */

.eyebrow {
  margin: 0 0 30px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.eyebrow span { display: block; }

.display {
  font-size: 104px;
  font-weight: 460;
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--ivory-mid);
}
/* each line carries its own warm ivory fall, as in the image. The padding is
   room for the descenders, which a clipped background would otherwise cut. */
.display span,
.band .display {
  display: block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  background: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.display span { width: max-content; }

.lede {
  max-width: 27em;
  margin: 44px 0 0;
  font-size: 20.5px;
  font-weight: 300;
  line-height: 1.45;
  color: #d4d1cc;
}
.lede span { display: block; }

/* --------------------------------------------------------------- buttons */

.pill,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 15px 30px;
  border-radius: var(--radius-full);
  background:
    linear-gradient(to bottom, rgba(219, 195, 170, 0.1), rgba(219, 195, 170, 0.04)),
    #0e0f13;
  box-shadow:
    inset 0 0 0 1.5px #e3bf8e,
    0 0 24px -4px rgba(227, 184, 122, 0.45);
  color: #fdfcfa;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background .15s;
}
.pill::after,
.textlink::after {
  content: '\2192';
  font-size: 1.05em;
}
.pill:hover,
a.button:hover {
  background:
    linear-gradient(to bottom, rgba(219, 195, 170, 0.2), rgba(219, 195, 170, 0.08)),
    #121317;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  font-size: 15px;
  color: #a8b0bb;
  text-decoration: none;
  background: linear-gradient(rgba(182, 175, 170, 0.75), rgba(182, 175, 170, 0.75)) left bottom / 100% 1px no-repeat;
  transition: color .15s;
}
.textlink:hover { color: #e6e8eb; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 34px;
  margin-top: 46px;
}

/* ------------------------------------------------------------- home hero */
/* Built to Mike's pick, KB #8551, measured with PIL. The stage is that picture's
   own 1586 x 992 frame: ground, figures, the city in front of them, the roster.
   Every figure is a transparent cutout, so they overlap with no box edge.
   Percentages are the target's pixels over 1586 (x) and 992 (y). */

.hero-home {
  position: relative;
  height: max(720px, 62.55vw);           /* 992 / 1586: 900 at 1440 */
  container-type: size;
  overflow: hidden;
  background: var(--ground);
}

/* the padding lives here, so the hero's container units are the full frame */
.hero-home .hero-copy {
  position: relative;
  z-index: 3;
  max-width: calc(620px + 2 * var(--pad));
  padding: calc(var(--header-h) + 69px) var(--pad) 0;
}

/* type steps measured off the target at 1440 (x 0.908) */
.hero-home .eyebrow { margin-bottom: 22px; font-size: 10.9px; line-height: 1.78; }
.hero-home .display { line-height: 0.93; }
/* the H1 fall, sampled per third of each line off the target */
.hero-home .display span {
  background-image: linear-gradient(to bottom, #f7f5f3 8%, #f5efe7 52%, #e3d1bb 96%);
}
.hero-home .lede { margin-top: 20px; font-size: 21.4px; line-height: 1.4; }
.hero-home .actions { margin-top: 36px; }
.hero-home .pill { padding: 15px 25px; }

.stage {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: max(100cqw, 159.9cqh);          /* covers the hero, anchored right */
  aspect-ratio: 1586 / 992;
}
.stage > img {
  position: absolute;
  max-width: none;
  height: auto;
  -webkit-user-select: none;
          user-select: none;
}
.stage .ground { inset: 0; width: 100%; height: 100%; }
.synth-sable   { left: 29.4%; top: 2.1%;  width: 41.5%; }
.synth-cyrus   { left: 70.3%; top: 6.1%;  width: 35.6%; }
.synth-octavia { left: 43.9%; top: 0.9%;  width: 52.3%; }
.stage .horizon { left: 0; bottom: 0; width: 100%; }
/* the seam where the city meets the sky, lit a step brighter, over the figures' shoulders */
.stage::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 66.5%;
  height: 12%;
  background: radial-gradient(58% 50% at 52% 52%, rgba(128, 168, 255, 0.3), transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* name and role, each under its own face, on a hairline that runs to the next */
.roster {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 90.6%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.roster li {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 9px;
}
.roster .at-sable   { left: 46.2%; right: 37.6%; }
.roster .at-octavia { left: 64.4%; right: 21.8%; }
.roster .at-cyrus   { left: 81.8%; right: 4.5%; }
.roster li::before { content: none; }
.roster b {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.roster li::after {
  content: '';
  grid-column: 2;
  grid-row: 1;
  height: 1px;
  background: var(--hair);
}
.roster span {
  grid-column: 1 / -1;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: #a9adb2;
}

/* --------------------------------------------------- inner page hero band */

.band {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  padding: calc(var(--header-h) + 96px) var(--pad) 150px;
}
.band-title { min-height: 440px; }
.band > :not(.sky) { position: relative; z-index: 3; max-width: 820px; }
.band .planet { left: 82%; top: 64%; }
.band .city { height: 190px; opacity: .85; }

.band h1 {
  margin: 0 0 22px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.band .display { font-size: 68px; line-height: 1.04; letter-spacing: -0.035em; width: auto; }
.band-title h1.display { margin: 0; font-size: 104px; letter-spacing: -0.045em; text-transform: none; }
.band p {
  margin: 0;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.6;
  color: #d4d1cc;
}
.band h2 + p { margin-top: 28px; }

/* ------------------------------------------------------------- sections */

main > section:not(.band):not(.hero-home) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 72px;
  align-content: start;
  padding: 104px max(var(--pad), calc((100% - 1180px) / 2));
}
main > section:not(.band):not(.hero-home) > * { grid-column: 2; }
main > section:not(.band):not(.hero-home) > h2 {
  grid-column: 1;
  grid-row: 1 / span 60;
  align-self: start;
}

/* the alternate band: a tinted surface, never a rule */
main > section.alt { background: linear-gradient(to bottom, var(--tint-cool), rgba(110, 121, 201, 0.03)); }

section h2 {
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  background: linear-gradient(to bottom, var(--ivory-hi), var(--ivory-lo));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;
}

section p { margin: 0 0 0.55em; color: var(--text-2); }
section p:last-child { margin-bottom: 0; }
section p a { color: var(--cream); text-underline-offset: 5px; text-decoration-color: rgba(242, 236, 220, 0.4); }
section p a:hover { text-decoration-color: var(--cream); }

section ul {
  margin: 0.3em 0 1.1em;
  padding: 0;
  list-style: none;
}
section li {
  position: relative;
  margin: 0 0 0.4em;
  padding-left: 26px;
  color: var(--text);
}
section li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .8;
}

section a.button { margin-top: 1.3em; justify-self: start; }

/* the close: a warm tinted surface, the one place the offer is lit */
main > section.cta {
  background:
    radial-gradient(70% 120% at 50% 0%, var(--tint-warm), transparent 75%),
    linear-gradient(to bottom, rgba(219, 195, 170, 0.04), transparent);
}

/* Home's three parts: three tinted surfaces */
.parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}
main > section.parts-wrap { grid-template-columns: minmax(0, 1fr); }
main > section.parts-wrap > h2 { grid-row: auto; margin-bottom: 40px; }
main > section.parts-wrap > * { grid-column: 1; }
.part {
  padding: 34px 32px 30px;
  border-radius: var(--radius);
  background: linear-gradient(to bottom, rgba(110, 121, 201, 0.11), rgba(110, 121, 201, 0.04));
}
.part h3 {
  margin: 0 0 18px;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.part p { font-size: 17px; }
.part p:last-child { margin-top: 1.1em; }

/* An ASK MIKE placeholder: still loud, but a tinted surface, not a dashed box */
.gap {
  margin: 0.8em 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: rgba(234, 176, 174, 0.1);
  color: #eab0ae;              /* Skyline --danger-ink */
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
main > section > .gap:only-child { grid-column: 1 / -1; }

/* ------------------------------------------------------ Home, below the hero */
/* The hero's standard carried down (task #8212). One rhythm, --section-y, on
   every section and no other section padding. Grounds alternate so no two
   neighbours share one. Prose runs in a measured column. The three parts are
   three doors on three tints. The close is the page's second peak, with the
   hero's city rising into it. */

body.home main > section:not(.hero-home) {
  padding: var(--section-y) max(var(--pad), calc((100% - 1180px) / 2));
  column-gap: 80px;
}
body.home main > section:not(.hero-home) > h2 {
  font-size: 58px;
  line-height: 1.04;
  letter-spacing: -0.038em;
}
body.home main > section:not(.hero-home) p {
  margin-bottom: 0.5em;
  font-size: 20.5px;
  font-weight: 300;
  line-height: 1.5;
  color: #d4d1cc;
}
body.home main > section:not(.hero-home) p.more { margin-top: 1.4em; }
body.home .more .textlink { font-size: 16px; color: var(--cream); }
body.home .more .textlink:hover { color: #fff; }

/* the centred bands: the offer, the three parts, the close */
body.home #offer,
body.home #three-parts,
body.home #the-way-in {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
body.home #offer > *,
body.home #three-parts > *,
body.home #the-way-in > * { grid-column: 1; grid-row: auto; }
body.home #offer > h2,
body.home #the-way-in > h2 { max-width: 13.5em; margin-bottom: 40px; }
body.home main > section:not(.hero-home) a.button {
  justify-self: center;
  margin-top: 48px;
}

/* the offer: the cool tint over the lifted ground, a soft glow behind the
   heading, and the hero's ground fading in at the top so the seam is not cut */
body.home #offer {
  background:
    linear-gradient(to bottom, var(--ground), transparent 140px),
    radial-gradient(42% 46% at 50% 24%, rgba(140, 159, 208, 0.2), transparent 72%),
    linear-gradient(var(--tint-cool), var(--tint-cool)),
    var(--ground-up);
}
body.home #offer p { margin-bottom: 0.3em; color: var(--muted); }
body.home #offer p b { font-weight: 400; color: var(--ivory-mid); }
body.home #offer p:nth-of-type(4) { margin-top: 0.9em; color: var(--cream); }
/* the mid-page offer is the quieter of the two buttons: the close carries the peak */
body.home #offer a.button {
  padding: 13px 26px;
  font-size: 16px;
  box-shadow:
    inset 0 0 0 1px #e3bf8e,
    0 0 16px -6px rgba(227, 184, 122, 0.35);
}

/* the three parts: three doors, one structure, three identities. A quiet
   numeral, the name, three lines, the way in. Each is its own tinted surface;
   hover lifts the surface and nothing else. */
body.home #three-parts { background: var(--ground); }
body.home #three-parts > h2 { margin-bottom: 64px; }
body.home .parts { width: 100%; gap: 28px; margin: 0; text-align: left; counter-reset: door; }
body.home .part {
  display: flex;
  flex-direction: column;
  padding: 36px 40px 40px;
  border-radius: 10px;
  background-color: var(--door);
  background-image: radial-gradient(120% 70% at 0% 0%, var(--door-light), transparent 66%);
  box-shadow: 0 48px 90px -42px rgba(0, 0, 0, 0.95);
  transition: background-color .2s;
}
body.home .part:hover { background-color: var(--door-hover); }
/* HyperionOS: cool, from --os */
body.home .part:nth-child(1) {
  --door: rgba(120, 146, 222, 0.15);
  --door-hover: rgba(120, 146, 222, 0.22);
  --door-light: rgba(140, 168, 240, 0.2);
  --door-ink: rgba(160, 182, 240, 0.62);
}
/* Agentic Swarm: warm, from --gold */
body.home .part:nth-child(2) {
  --door: rgba(230, 160, 80, 0.17);
  --door-hover: rgba(230, 160, 80, 0.24);
  --door-light: rgba(238, 172, 92, 0.24);
  --door-ink: rgba(234, 192, 132, 0.66);
}
/* Agentic Syndicate: an ivory lift */
body.home .part:nth-child(3) {
  --door: rgba(255, 238, 200, 0.25);
  --door-hover: rgba(255, 238, 200, 0.32);
  --door-light: rgba(255, 246, 226, 0.28);
  --door-ink: rgba(255, 246, 228, 0.78);
}
body.home .part::before {
  counter-increment: door;
  content: counter(door, decimal-leading-zero);
  content: counter(door, decimal-leading-zero) / "";
  display: block;
  margin: 0 0 22px -4px;
  font-size: 88px;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--door-ink);
}
body.home .part h3 {
  margin-bottom: 22px;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: linear-gradient(to bottom, var(--ivory-hi), var(--ivory-lo));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;
}
body.home main > section:not(.hero-home) .part p { font-size: 18px; line-height: 1.55; color: var(--text-2); }
body.home main > section:not(.hero-home) .part p.more { margin-top: auto; padding-top: 1.4em; }

/* proof and the confession: a 5/7 grid, the heading holds the left, the voice
   the right, in a column held to a reading measure */
body.home #proof,
body.home #why-he-built-it { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
body.home #proof > p,
body.home #why-he-built-it > p { max-width: 66ch; }
body.home #proof {
  background:
    radial-gradient(60% 90% at 0% 50%, rgba(80, 118, 196, 0.2), transparent 70%),
    linear-gradient(var(--tint-cool-2), var(--tint-cool-2)),
    var(--ground-up);
}
body.home #proof > h2,
body.home #why-he-built-it > h2 { position: sticky; top: 48px; }
body.home main > section:not(.hero-home) > p:first-of-type { padding-top: 6px; }
body.home main > #proof > p:first-of-type {
  margin-bottom: 0.7em;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ivory-mid);
}
/* the confession: the lifted ground, a soft vignette closing in at the edges */
body.home #why-he-built-it {
  background:
    linear-gradient(to bottom, var(--tint-cool-2), transparent 72px),
    linear-gradient(to bottom, var(--ground-up), transparent 72px),
    linear-gradient(to bottom, rgba(1, 2, 5, 0.75), transparent 30%, transparent 70%, rgba(1, 2, 5, 0.75)),
    radial-gradient(90% 80% at 50% 50%, transparent 36%, rgba(1, 2, 5, 0.9) 100%),
    radial-gradient(46% 60% at 60% 52%, rgba(230, 182, 124, 0.26), transparent 80%),
    var(--ground-up);
}

/* the close: the page's second peak. A type step above the offer's heading,
   the hero's pill at the hero's size, and the hero's city rising out of the
   floor through a fade, under a warm glow, the way it sits in the hero. The
   city is a grid item bled to both edges and the floor, so the section keeps
   the one rhythm and needs no padding of its own. */
body.home #the-way-in {
  overflow: hidden;
  background:
    radial-gradient(60% 48% at 50% 100%, rgba(236, 186, 116, 0.5), transparent 78%),
    radial-gradient(90% 50% at 50% 100%, rgba(80, 118, 196, 0.18), transparent 78%),
    radial-gradient(70% 85% at 50% 100%, rgba(227, 184, 122, 0.14), transparent 82%),
    radial-gradient(48% 40% at 50% 24%, rgba(227, 184, 122, 0.13), transparent 76%),
    var(--ground);
}
body.home #the-way-in > h2 {
  max-width: 15em;
  font-size: 77px;                      /* 58 x 4/3: one step above the offer on a perfect-fourth scale */
  font-weight: 460;
  line-height: 1;
  letter-spacing: -0.042em;
  background-image: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%);
  padding-bottom: 0.12em;
}
body.home #the-way-in a.button { padding: 15px 25px; font-size: 18px; }
body.home #the-way-in::after {
  content: '';
  justify-self: stretch;
  height: max(150px, 22.2vw);           /* hero-city.webp is 1586 x 352 */
  margin: -24px calc(50% - 50vw) calc(-1 * var(--section-y));
  background: url('assets/hero-city.webp') center bottom / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 46%);
          mask-image: linear-gradient(to bottom, transparent, #000 46%);
  pointer-events: none;
}

/* proof and the confession stack at 900 and down */
@media (max-width: 900px) {
  body.home #proof,
  body.home #why-he-built-it { grid-template-columns: minmax(0, 1fr); }
  body.home #proof > *,
  body.home #why-he-built-it > * { grid-column: 1; grid-row: auto; }
  body.home #proof > h2,
  body.home #why-he-built-it > h2 { position: static; margin-bottom: 32px; }
}

/* --------------------------------------------------------------- footer */

footer {
  padding: 64px var(--pad) 56px;
  background: linear-gradient(to bottom, var(--ground-up), var(--ground));
  box-shadow: inset 0 1px 0 var(--rule);
}
footer .brand { display: inline-block; margin-bottom: 26px; font-size: 22px; }
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-bottom: 28px;
}
footer nav a {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
footer nav a:hover,
footer nav a[aria-current="page"] { color: var(--cream); }
footer .gap { max-width: 720px; margin: 0; }

/* ------------------------------------------------------------- 1100 and down */

@media (max-width: 1100px) {
  :root { --pad: 40px; }
  header > nav { gap: 6px 22px; }
  header > nav a.button { margin-left: 4px; padding: 8px 22px; }
  .display { font-size: 84px; }
  /* the copy column meets Sable's hair sooner: deepen the ground behind it */
  .hero-home { height: max(680px, 62.55vw); }
  .hero-home .hero-copy { max-width: calc(470px + 2 * var(--pad)); padding-top: calc(var(--header-h) + 44px); }
  .hero-home .display { font-size: 72px; }
  .hero-home .lede { font-size: 18.5px; margin-top: 16px; }
  .hero-home .actions { margin-top: 26px; }
  .stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(2, 6, 13, 0.55), transparent 48%);
  }
}

/* --------------------------------------------- 960 and down: the hero stacks */

@media (max-width: 960px) {
  .hero-home {
    height: auto;
    container-type: normal;
    padding-bottom: 60px;
  }
  .hero-home .hero-copy { max-width: none; padding-top: calc(var(--header-h) + 56px); }
  .stage {
    position: relative;
    top: auto;
    right: auto;
    width: 120vw;
    margin: 8px 0 0 -20vw;
  }
  .stage::after { content: none; }
  .stage .ground {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%);
            mask-image: linear-gradient(to bottom, transparent, #000 14%);
  }
}

/* --------------------------------------------------------------- phones */

@media (max-width: 760px) {
  :root { --pad: 22px; --header-h: 64px; }
  body { font-size: 17px; }

  /* one line: the wordmark, the Join pill, the Menu toggle */
  header { gap: 14px; }
  .brand { font-size: 22px; margin-right: auto; }
  header > nav a:not(.button) { display: none; }
  header > nav a.button {
    margin: 0;
    padding: 7px 22px;
    font-size: 14px;
  }
  .menu { display: block; }

  .hero-home {
    height: auto;
    container-type: normal;
    padding-bottom: 70px;
  }
  .hero-home .hero-copy { padding-top: calc(var(--header-h) + 40px); }
  .eyebrow { font-size: 11px; letter-spacing: 0.34em; margin-bottom: 22px; }
  .display { font-size: 54px; letter-spacing: -0.04em; }
  .lede { margin-top: 24px; font-size: 18px; }
  .lede span { display: inline; }
  .actions { margin-top: 32px; gap: 22px 28px; }
  .pill { padding: 14px 28px; font-size: 17px; }

  /* the same stage, scaled so the three faces fill the phone's width */
  .stage {
    position: relative;
    top: auto;
    right: auto;
    width: 156vw;
    margin: 18px 0 0 -50vw;
  }
  .stage::after { content: none; }
  .stage .ground {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%);
            mask-image: linear-gradient(to bottom, transparent, #000 14%);
  }
  .roster li { column-gap: 8px; row-gap: 6px; }
  .roster .at-sable   { left: 45.6%; right: 38%; }
  .roster .at-octavia { left: 63.6%; right: 21.6%; }
  .roster .at-cyrus   { left: 79.4%; right: 4.4%; }
  .roster b { font-size: 10px; letter-spacing: 0.2em; }
  .roster span { font-size: 11px; letter-spacing: 0.02em; line-height: 1.35; }

  .band { min-height: 0; padding: calc(var(--header-h) + 48px) var(--pad) 120px; }
  .band-title { min-height: 0; }
  .band .planet { left: 96%; top: 46%; width: 620px; height: 620px; margin: -310px 0 0 -310px; }
  .band .city { height: 130px; }
  .band .display { font-size: 40px; }
  .band-title h1.display { font-size: 64px; }
  .band p { font-size: 18px; }

  .planet { left: 92%; top: 36%; width: 700px; height: 700px; margin: -350px 0 0 -350px; }

  main > section:not(.band):not(.hero-home) {
    grid-template-columns: minmax(0, 1fr);
    padding: 64px var(--pad);
  }
  main > section:not(.band):not(.hero-home) > *,
  main > section:not(.band):not(.hero-home) > h2 { grid-column: 1; grid-row: auto; }
  main > section:not(.band):not(.hero-home) > h2 { margin-bottom: 22px; }
  section h2 { font-size: 30px; }

  .parts { grid-template-columns: minmax(0, 1fr); }
  .part { padding: 26px 22px 24px; }

  .pill, a.button { padding: 14px 24px; font-size: 16px; }
  section a.button { width: 100%; }

  footer { padding: 48px var(--pad) 44px; }
  footer nav { gap: 10px 22px; }
}

/* ------------------------------------------------- Home below the hero, phones */

@media (max-width: 760px) {
  body.home main > section:not(.hero-home) > h2 { font-size: 36px; margin-bottom: 26px; }
  body.home main > section:not(.hero-home) p { font-size: 18px; }
  body.home #three-parts > h2 { margin-bottom: 32px; }
  body.home .parts { gap: 18px; }
  body.home .part { padding: 28px 26px 28px; }
  body.home .part::before { margin-bottom: 16px; font-size: 64px; }
  body.home .part h3 { font-size: 26px; }
  body.home main > #proof > p:first-of-type { font-size: 24px; }
  body.home main > section:not(.hero-home) a.button { width: 100%; margin-top: 36px; }
  body.home #offer a.button { padding: 13px 20px; font-size: 15px; }
  /* the close keeps its step above the offer, and the hero's pill at the hero's phone size */
  body.home main > #the-way-in > h2 { font-size: 44px; }
  body.home #the-way-in a.button { padding: 14px 24px; font-size: 16px; }
}

/* ---------------------------------------- Home roster captions, narrow phones */

@media (max-width: 480px) {
  /* the city skyline behind the roster runs bright in places (lit windows, rim
     light on the figures); a scrim guarantees legibility wherever it lands —
     a text-shadow halo left round letters' corners and letter gaps uncovered */
  .roster li {
    background: rgba(5, 7, 12, 0.6);
    box-shadow: 0 0 8px 5px rgba(5, 7, 12, 0.6);
    border-radius: 7px;
  }
}

/* ============================================================ the showcase */
/* Seven designed sections (task #8238, from the drawings in KB #8584). On Home:
   A Hyperion, C the building, E the cast, F a Synth's room, G how work moves.
   On hyperionos/: B how Hyperion answers, D a team's room. Each is a still
   picture of the product: no script, and nothing moves but Hyperion's light.
   The drawings are fixed 1440 frames; these are the same pictures as fluid
   layout, 1440 down to 390. Every rule is scoped to .show, the class all seven
   carry, so nothing above this line changes. Every face is a crop of that
   Synth's own portrait (assets/showcase/). Colour stays on surfaces and light;
   the rings round a face are a glow, drawn as a shadow, never a border. */

.show {
  --hy: 242, 236, 220;        /* Hyperion's light */
  --hz: 144, 133, 200;        /* the haze around it */
  --need: 236, 214, 160;      /* a call that is yours */
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --show-y: clamp(56px, 5.85vw, 88px);
  --h: 64px;                  /* the heading at 1440, and its slope on the way down */
  --h-vw: 4.45vw;
}

/* the shell: out of the page's two-column prose grid, into a 1248 column */
main > section.show:not(.band):not(.hero-home),
body.home main > section.show:not(.hero-home) {
  position: relative;
  display: block;
  overflow: hidden;
  padding: var(--show-top, var(--show-y)) max(var(--pad), calc((100% - 1248px) / 2)) var(--show-end, var(--show-y));
  background: var(--show-bg, var(--ground));
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;                     /* no one-word last lines inside the pictures */
}
.show > * { position: relative; z-index: 1; }
.show > .show-sky,
.show > .show-plate { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* the page's list and prose styles stop at the door */
.show ul, .show ol { margin: 0; padding: 0; list-style: none; }
.show li { margin: 0; padding: 0; color: inherit; }
/* the page's own bullet is an absolute 6px dot: undo all of it, not only its content */
.show li::before {
  content: none;
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  opacity: 1;
}
.show b { font-weight: 500; }
.show i, .show em { font-style: normal; }
.show svg.i {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* type: the site's own steps, sized to the drawings */
.show .eyebrow,
body.home main > section.show p.eyebrow {
  margin-bottom: 20px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--eyebrow);
}
.show .display { padding-bottom: 0; font-size: clamp(46px, var(--h-vw), var(--h)); line-height: 1; letter-spacing: -0.042em; }
.show .display span { width: auto; }
.show .lede,
body.home main > section.show p.lede {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  color: #d4d1cc;
}
.show .lede { margin-top: 0; }
.show .lb {
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b0b5be;
}

/* a heading on the left, its three lines on the right, bottoms level */
.show .show-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--lede-w, 508px));
  align-items: end;
}
.show .show-head .lede { padding-bottom: 5px; }

/* the sky behind a section: its own haze, and the star field kept off the copy */
.show .show-sky { background: var(--haze, none); }
.show .show-sky::before,
.show .show-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--stars);
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 56%);
          mask-image: linear-gradient(90deg, transparent 42%, #000 56%);
}
.show .show-sky::after {
  transform: scale(-1, 1);
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(270deg, transparent 42%, #000 56%);
          mask-image: linear-gradient(270deg, transparent 42%, #000 56%);
}
/* the hero's city, rising along the foot of a section */
.show .show-city {
  --city-h: max(150px, 22.2vw);          /* hero-city.webp is 1586 x 352 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--city-h);
  background: url('assets/hero-city.webp') center bottom / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
}
.show .show-city::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(to bottom, rgba(2, 6, 13, 0), var(--ground));
}

/* ---- shared parts of the product pictures ---- */

/* glass, lit along its top edge */
.show .gl {
  border-radius: 8px;
  background-color: rgba(30, 38, 60, 0.6);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 46%);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
          backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.11), 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}
/* a call that is yours: the same glass under a warm lamp */
.show .call {
  border-radius: 8px;
  background:
    radial-gradient(72% 120px at 50% -18px, rgba(var(--need), 0.26), transparent),
    linear-gradient(to bottom, rgba(191, 162, 95, 0.11), rgba(191, 162, 95, 0.04)),
    rgba(13, 14, 18, 0.86);
  box-shadow: inset 0 1px 0 rgba(var(--need), 0.5), inset 0 0 0 1px rgba(var(--need), 0.16), 0 24px 60px -24px rgba(0, 0, 0, 0.85), 0 0 50px -12px rgba(191, 162, 95, 0.5);
}
.show .call .k {
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6d29c;
}
.show .call .bts { display: flex; flex-wrap: wrap; gap: 8px; }
.show .bt {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13.5px;
  white-space: nowrap;
}
.show .bt.pri { color: #15130f; font-weight: 500; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.show .bt.sec { color: #efe9db; background: rgba(255, 255, 255, 0.13); }

/* a face: the Synth's own portrait, cut to the head */
.show .fc {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #0b0f18;
  filter: brightness(1.2) saturate(1.05);
}
.show .faces { display: inline-flex; flex: none; }
.show .faces .fc { box-shadow: 0 0 0 2px #0a0d14, 0 0 0 3px rgba(255, 255, 255, 0.14); }
.show .faces .fc + .fc { margin-left: -8px; }
.show .you {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #15130f;
  background: linear-gradient(to bottom, #f3eee2, #d8cfba);
}
.show .dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.show .dot.pulse { animation: show-glint 1.2s ease-in-out infinite; }

/* Hyperion's mark: a light with no face (KB #8472). Sized by --s. */
.show .corona {
  --s: 120px;
  --lt: 242, 236, 220;
  --hzc: 144, 133, 200;
  position: relative;
  display: block;
  flex: none;
  width: var(--s);
  height: var(--s);
}
.show .corona > i { position: absolute; display: block; border-radius: 50%; }
.show .corona .halo {
  inset: -75%;
  background: radial-gradient(closest-side, rgba(var(--lt), 0.22), rgba(var(--hzc), 0.14) 38%, rgba(var(--hzc), 0.05) 62%, transparent 80%);
  animation: show-breathe 7s ease-in-out infinite;
}
.show .corona .rays {
  inset: -50%;
  opacity: 0.32;
  background: repeating-conic-gradient(from 6deg, rgba(var(--lt), 0) 0deg, rgba(var(--lt), 0.22) 1.4deg, rgba(var(--lt), 0) 3.2deg, rgba(var(--lt), 0) 13deg);
  -webkit-mask: radial-gradient(closest-side, transparent 50%, #000 54%, rgba(0, 0, 0, 0.35) 76%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 50%, #000 54%, rgba(0, 0, 0, 0.35) 76%, transparent 100%);
  animation: show-spin 140s linear infinite;
}
.show .corona .ring {
  inset: -10%;
  background: conic-gradient(from 210deg, rgba(var(--lt), 0.95), rgba(var(--hzc), 0.6) 16%, rgba(var(--lt), 0.7) 33%, rgba(var(--lt), 0.28) 50%, rgba(var(--hzc), 0.65) 68%, rgba(var(--lt), 0.9) 86%, rgba(var(--lt), 0.95));
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 83%, rgba(0, 0, 0, 0.45) 91%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 78%, #000 83%, rgba(0, 0, 0, 0.45) 91%, transparent 100%);
  filter: blur(1.2px);
  animation: show-spin 52s linear infinite;
}
.show .corona .cres {
  inset: 7%;
  box-shadow:
    calc(var(--s) * 0.05) calc(var(--s) * -0.05) calc(var(--s) * 0.1) 0 rgba(255, 246, 225, 0.92),
    calc(var(--s) * 0.02) calc(var(--s) * -0.02) calc(var(--s) * 0.03) 0 #fff,
    calc(var(--s) * 0.1) calc(var(--s) * -0.1) calc(var(--s) * 0.34) calc(var(--s) * 0.03) rgba(255, 236, 200, 0.4);
}
.show .corona .disc {
  inset: 7%;
  background: radial-gradient(circle at 76% 22%, rgba(255, 244, 225, 0.2), transparent 36%), radial-gradient(circle at 46% 40%, #0c0c11, #020203 72%);
  box-shadow: 0 0 0 1px rgba(var(--lt), 0.55), 0 0 16px 2px rgba(var(--lt), 0.42), 0 0 56px 10px rgba(var(--hzc), 0.22), inset 0 0 20px rgba(var(--hzc), 0.16);
}
/* it turns faster while it works */
.show .corona.is-working .rays { opacity: 1; animation-duration: 16s; }
.show .corona.is-working .ring { animation-duration: 7s; }
.show .corona.is-working .halo { animation-duration: 2.4s; }
.show .corona-mini { --s: 24px; }
.show .corona-mini .halo { inset: -40%; }
.show .corona-card { --s: 132px; }
.show .corona-beacon { --s: 58px; }

@keyframes show-spin { to { transform: rotate(360deg); } }
@keyframes show-breathe { 0%, 100% { opacity: 0.72; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes show-glint { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }

/* the threads work travels along */
.show svg.threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.show .thr {
  fill: none;
  stroke: rgba(var(--hy), 0.9);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(var(--hy), 0.5));
}
.show .thr.dim { stroke: rgba(var(--hy), 0.28); stroke-width: 1.2; filter: none; }
.show .thr.gold {
  stroke: #f3dc9c;
  stroke-width: 2.8;
  filter: drop-shadow(0 0 6px rgba(226, 190, 110, 0.95)) drop-shadow(0 0 16px rgba(191, 162, 95, 0.6));
}
/* a handoff: one bead on the seam between two Synths */
.show .bead {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  color: rgb(var(--hy));
  background: #171d2e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1.5px rgba(var(--hy), 0.7), 0 0 26px 0 rgba(var(--hy), 0.65);
}
.show .bead svg.i { width: 15px; height: 15px; stroke-width: 2.6; }
.show .bead.gold {
  color: #f6e2a8;
  background: #2a2414;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1.5px rgba(var(--need), 0.95), 0 0 28px 2px rgba(226, 190, 110, 0.85);
}

/* the ask bar */
.show .askbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 0 10px 0 20px;
  border-radius: 10px;
  background-color: rgba(20, 26, 40, 0.52);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
          backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(var(--hy), 0.12), 0 24px 60px -18px rgba(0, 0, 0, 0.85), 0 0 50px -8px rgba(var(--hy), 0.22);
}
.show .askbar .typed { flex: 1; min-width: 0; font-size: 17px; color: var(--text); }
.show .askbar .caret {
  display: inline-block;
  width: 1.5px;
  height: 20px;
  margin-left: 2px;
  vertical-align: -4px;
  background: rgb(var(--hy));
  animation: show-glint 1.1s steps(2) infinite;
}
.show .askbar .scope {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 13px;
  color: #e4e2dd;
  white-space: nowrap;
}
.show .askbar .go {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #15130f;
  background: linear-gradient(to bottom, #f3eee2, #d8cfba);
}
.show .askbar .go svg.i { width: 17px; height: 17px; stroke-width: 2.3; }

/* ------------------------------------------------- A · Hyperion, the poster */

.show-hyperion {
  --h: 68px;
  --haze:
    linear-gradient(to bottom, transparent 93.3%, var(--ground) 93.3%),
    radial-gradient(60% 27% at 62% 93.3%, rgba(110, 150, 255, 0.2), transparent 70%),
    radial-gradient(62% 55% at 83% 87%, rgba(70, 110, 220, 0.14), transparent 70%),
    radial-gradient(49% 55% at 12.5% 13%, rgba(110, 121, 201, 0.07), transparent 70%);
}
.show-hyperion .show-city { bottom: calc(var(--city-h) * -0.31); }
/* the foot of the poster goes back to the ground */
.show-hyperion .show-city::after { bottom: calc(var(--city-h) * 0.31); }

/* sized off its own width, not the window's, so it holds wherever the page is narrower than the screen */
.show .hy {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(440px, 48%, 600px);
  column-gap: 48px;
  align-items: start;
  padding: 46px 0 56px;
}
.show .hy-copy { padding-top: 2px; }
.show.show-hyperion .display { font-size: clamp(44px, calc(7.45cqw - 25px), 68px); }
.show .hy-copy .eyebrow { display: flex; align-items: center; gap: 18px; }
.show .hy-copy .display,
.show .bld-copy .display { padding-top: 6px; }
.show.show-hyperion .display span { width: max-content; }
.show .hy-copy .lede { margin-top: 34px; }
.show .hy-copy .actions { margin-top: 44px; }
.show .hy-ask { margin-top: 47px; }
.show .hy-qs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.show .hy-qs li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  color: #e4e1da;
  background-color: rgba(20, 26, 40, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.show .hy-qs li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--hy));
  box-shadow: 0 0 8px rgba(var(--hy), 0.9);
}

/* the light, the leads it asked, and the question, on one centre line */
.show .hy-fig {
  --sx: clamp(170px, 17.4vw, 250px);
  position: relative;
  display: grid;
  justify-items: center;
  /* the drawing sets the light a little right of the column's edge */
  left: clamp(0px, calc((100vw - 1180px) / 4), 31px);
}
.show .hy-fig::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(var(--sx) / 2);
  width: 1320px;
  height: 920px;
  margin: -460px 0 0 -660px;
  background: radial-gradient(closest-side, rgba(var(--hy), 0.1), rgba(var(--hz), 0.08) 46%, transparent 74%);
  pointer-events: none;
}
/* isolated, so the bloom's blend stays inside the light: left open it turns the whole
   column into one blending group and the ask bar's glass stops seeing the city behind it */
.show .corona-xl { --s: var(--sx); isolation: isolate; }
.show .corona-xl .halo {
  inset: -95%;
  background: radial-gradient(closest-side, rgba(var(--lt), 0.32), rgba(var(--hzc), 0.2) 36%, rgba(var(--hzc), 0.07) 62%, transparent 82%);
}
.show .corona-xl .rays {
  inset: -85%;
  -webkit-mask: radial-gradient(closest-side, transparent 37%, #000 40%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 37%, #000 40%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
}
.show .corona-xl .ring { opacity: 0.55; }
.show .corona-xl .cres {
  box-shadow:
    calc(var(--s) * 0.048) calc(var(--s) * -0.048) calc(var(--s) * 0.104) 0 rgba(255, 246, 225, 0.5),
    calc(var(--s) * 0.12) calc(var(--s) * -0.12) calc(var(--s) * 0.36) calc(var(--s) * 0.048) rgba(255, 236, 200, 0.38);
}
.show .corona-xl .disc {
  box-shadow: 0 0 0 1px rgba(var(--lt), 0.38), 0 0 14px 1px rgba(var(--lt), 0.26), 0 0 56px 10px rgba(var(--hzc), 0.22), inset 0 0 20px rgba(var(--hzc), 0.16);
}
/* the bloom up and to the right, and the lens line through the middle */
.show .corona-xl .bloom {
  inset: -49.2% -49.2% 21.2% 21.2%;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 246, 225, 0.55), rgba(255, 236, 200, 0.15) 42%, transparent 72%);
}
.show .corona-xl .flare {
  left: -98%;
  right: -98%;
  top: calc(50% - 1.5px);
  height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--hy), 0.5) 42%, rgba(255, 255, 255, 0.9) 50%, rgba(var(--hy), 0.5) 58%, transparent);
  filter: blur(0.6px);
}
.show .corona-xl .flare-soft { top: calc(50% - 23px); height: 46px; opacity: 0.36; filter: blur(14px); }
/* the hot arc: the glow sits on a wrapper, because a filter is painted before a mask */
.show .corona-xl .hotw {
  inset: -8.8%;
  filter: blur(0.8px) drop-shadow(0 0 10px #fff) drop-shadow(0 0 26px rgba(255, 240, 210, 0.95)) drop-shadow(0 0 60px rgba(255, 230, 190, 0.7));
}
.show .corona-xl .hot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 252, 244, 0) 0deg, rgba(255, 252, 244, 0.45) 14deg, #fff 34deg, #fff 56deg, rgba(255, 252, 244, 0.45) 76deg, rgba(255, 252, 244, 0) 90deg, rgba(255, 252, 244, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 78%, #000 90%, transparent 95%);
          mask: radial-gradient(closest-side, transparent 74%, #000 78%, #000 90%, transparent 95%);
}

.show .hy-fan { position: relative; width: 100%; height: 84px; margin-top: 64px; }
.show .hy-asking {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #efe9db;
  white-space: nowrap;
  background-color: #131826;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(var(--hy), 0.3), 0 0 22px -4px rgba(var(--hy), 0.5);
}
.show .hy-asking .dot { width: 6px; height: 6px; color: rgb(var(--hy)); }
.show .hy-leads {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  margin-top: 2px;
  text-align: center;
}
.show .hy-leads .fc { width: min(88px, calc(100% - 10px)); height: auto; aspect-ratio: 1; margin: 0 auto 12px; }
.show .hy-leads .is-lit .fc { box-shadow: 0 0 0 2.5px rgba(var(--hy), 0.95), 0 0 26px rgba(var(--hy), 0.65); }
.show .hy-leads .is-off .fc { filter: grayscale(0.25) brightness(1.05); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.3); }
.show .hy-leads b {
  display: block;
  margin-right: -0.3em;
  font-size: 12.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.show .hy-leads span { display: block; margin-top: 5px; font-size: 13.5px; letter-spacing: 0.04em; color: #c9ccd2; }
.show .hy-leads .is-off b { color: #c9ccd2; }
.show .hy-leads .is-off span { color: #b0b5be; }
.show .hy-fig .askbar {
  width: min(570px, 100%);
  margin-top: 26px;
  background-color: rgba(70, 84, 118, 0.46);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 60px -18px rgba(0, 0, 0, 0.85), 0 0 50px -8px rgba(var(--hy), 0.25);
}

/* ---------------------------------------- B · how Hyperion answers, three beats */

.show-answers {
  --h: 56px;
  --h-vw: 3.89vw;
  --show-top: clamp(56px, 5.55vw, 80px);
  --show-end: 46px;
  --show-bg: linear-gradient(to bottom, var(--ground), var(--ground-up) 40%, var(--ground));
  --haze:
    radial-gradient(69% 51% at 50% 61%, rgba(120, 132, 230, 0.36), transparent 70%),
    radial-gradient(36% 40% at 79% 76%, rgba(191, 162, 95, 0.16), transparent 70%);
}
.show-answers .show-sky::before,
.show-answers .show-sky::after { -webkit-mask-image: none; mask-image: none; opacity: 0.5; }
.show .ans-head { text-align: center; }
.show .ans-head .eyebrow { margin-bottom: 20px; }
.show .beats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 84px;
}
.show .beat { position: relative; display: flex; flex-direction: column; min-height: 428px; padding: 24px; }
.show .beat > .bead { left: -12px; top: 50%; }
.show .beat .no { font: 500 12px/1 var(--mono); letter-spacing: 0.16em; color: #9aa5b8; }
.show .beat .tt { margin-top: 10px; font-size: 23px; line-height: 1.5; letter-spacing: -0.02em; color: var(--ivory-mid); }
.show .beat .bd { flex: 1; display: flex; flex-direction: column; margin-top: 16px; }
.show .beat .bd-rows { margin-top: 8px; }
.show .beat .end { margin-top: auto; }
.show .beat-light { flex: 1; display: grid; place-items: center; min-height: 200px; }
.show .askbar-sm { min-height: 54px; padding-left: 16px; }
.show .askbar-sm .typed { font-size: 15.5px; }
.show .askbar-sm .go { width: 36px; height: 36px; }
.show .beat-note { font-size: 14.5px; color: var(--text-2); }
.show .askbar-sm + .beat-note { margin-top: 16px; }
.show .row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 0;
}
.show .row + .row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.show .row .fc { width: 40px; height: 40px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.2); }
.show .row .nm { font-size: 14.5px; color: var(--text); }
.show .row .nm span { color: var(--muted); }
.show .row .qq { margin-top: 1px; font-size: 13.5px; color: var(--text-2); }
.show .row .st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.04em;
  color: #a9d3bd;
}
.show .row .st.run { color: rgb(var(--hy)); }
.show .row .st.q { color: #b0b5be; }
.show .row.q .nm,
.show .row.q .qq { opacity: 0.85; }
.show .voice {
  font-family: var(--serif);
  font-size: 22px;                       /* the drawing's Newsreader is not loaded here; a system serif runs wider */
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #efe9db;
}
.show .voice em { color: #f6deaa; }
.show .receipts { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 14px; color: var(--text-2); }
.show .receipts .fc { width: 38px; height: 38px; }
.show .receipts .fc + .fc { margin-left: -5px; }
.show .beat .call { padding: 17px 18px; }
.show .beat .call .tq { margin-top: 10px; font-size: 16.5px; line-height: 1.3; color: #f6f0de; }
.show .beat .call .bts { margin-top: 13px; }
.show .ans-foot { margin: 32px 0 0; text-align: center; font-size: 15px; color: var(--text-2); text-wrap: balance; }

/* ------------------------------------------ C · the building, six departments */

.show-building {
  --h: 58px;
  --h-vw: 4.03vw;
  --show-top: 40px;
  --show-end: 40px;
  --over: clamp(10px, 3.2vw, 46px);       /* how far the ground floor stands out from the shaft */
  --haze:
    radial-gradient(53% 51% at 67% 7%, rgba(var(--hy), 0.09), rgba(var(--hz), 0.07) 45%, transparent 75%),
    radial-gradient(69% 38% at 67% 94.5%, rgba(70, 110, 220, 0.2), transparent 70%);
}
.show-building .show-city { --city-h: max(190px, 30.6vw); }

.show .bld {
  display: grid;
  grid-template-columns: minmax(0, 400fr) minmax(0, 720fr);
  column-gap: clamp(40px, 5.8vw, 84px);
  align-items: start;
  padding-right: clamp(0px, calc((100vw - 1180px) / 6), 44px);
}
.show .bld-copy { margin-top: clamp(96px, 16.6vw, 240px); }
.show.show-building .display span { width: max-content; }
.show .bld-copy .lede { margin-top: 32px; }
.show .bld-key { display: grid; gap: 14px; margin-top: 36px; }
.show .bld-key li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--text-2); }
.show .bld-key li::before { content: ''; flex: none; width: 22px; height: 8px; border-radius: 999px; }
.show .bld-key .k-hy::before { background: rgb(var(--hy)); box-shadow: 0 0 10px rgba(var(--hy), 0.7); }
.show .bld-key .k-need::before { background: #ecd6a0; box-shadow: 0 0 10px rgba(191, 162, 95, 0.7); }
.show .bld-copy .textlink { margin-top: 44px; }

.show .bld-tower { position: relative; }
/* the light it gives off at the foot */
.show .bld-tower::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -22%;
  right: -22%;
  bottom: -70px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 165, 255, 0.5), rgba(120, 165, 255, 0.12) 60%, transparent);
  filter: blur(12px);
}
/* the beacon and its mast */
.show .bld-beacon { position: relative; display: grid; justify-items: center; }
.show .bld-beacon::after {
  content: '';
  width: 2px;
  height: 68px;
  margin-top: 2px;
  background: linear-gradient(to bottom, rgba(var(--hy), 0.95), rgba(var(--hy), 0.45));
  box-shadow: 0 0 10px rgba(var(--hy), 0.6);
}
.show .bld-beacon-l { position: absolute; left: calc(50% + 52px); top: 12px; }
.show .bld-beacon-l b { display: block; font-size: 12.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-ink); }
.show .bld-beacon-l span { display: block; margin-top: 4px; font-size: 13.5px; color: #b9bcc2; }
/* the crown: narrower than the floors, and the one lit surface on the tower */
.show .bld-pent {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  min-height: 72px;
  margin: 0 clamp(14px, 6vw, 86px);
  padding: 12px 20px;
  border-radius: 10px 10px 2px 2px;
  background: linear-gradient(to bottom, #fbf4e6, #e3d6bd 60%, #cfc0a3);
  box-shadow: inset 0 1px 0 #fff, 0 0 70px 0 rgba(var(--hy), 0.42), 0 0 20px 0 rgba(var(--hy), 0.5);
}
.show .bld-pent .you { width: 42px; height: 42px; background: #1a1712; color: #f4ecdb; }
.show .bld-pent-t { flex: 1 1 190px; min-width: 0; }
.show .bld-pent-t b { display: block; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: #1a1712; }
.show .bld-pent-t span { display: block; font-size: 13.5px; line-height: 1.4; color: #4a4336; }
.show .chip-need {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 13.5px;
  color: #f6e6b8;
  background: #2b2413;
  white-space: nowrap;
}
.show .chip-need .dot { color: #ecd6a0; }
/* the shaft: six floors inside one shell, Hyperion's line down its side */
.show .bld-stack { position: relative; display: grid; gap: 6px; margin-top: 12px; }
.show .bld-stack::before {
  content: '';
  position: absolute;
  inset: -6px -12px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(170, 190, 250, 0.42), rgba(150, 170, 230, 0.12) 2.2%, rgba(150, 170, 230, 0.07) 97.8%, rgba(170, 190, 250, 0.32));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 60px 120px -30px rgba(40, 80, 200, 0.4);
}
.show .bld-stack::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: -7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(var(--hy), 0.95), rgba(var(--hy), 0.35));
  box-shadow: 0 0 10px rgba(var(--hy), 0.6);
}
.show .fl {
  --t: 150, 160, 190;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "id team" "id now";
  align-content: start;
  column-gap: 16px;
  min-height: 118px;
  padding: 8px 14px 14px 28px;
}
/* where the line meets the floor */
.show .fl::before {
  content: '';
  position: absolute;
  z-index: 3;
  left: -11px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 10px 2px rgba(var(--hy), 0.85);
}
.show .fl > * { position: relative; z-index: 2; }
.show .fl > .fl-pic { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: 3px; }
.show .fl-pic img { width: 100%; height: 100%; object-fit: cover; filter: var(--pic-f, none); }
/* the floor's own tint over a veil that keeps the words readable */
.show .fl-pic::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 6, 12, 0.94) 0, rgba(3, 6, 12, 0.82) 30%, rgba(3, 6, 12, 0.36) 48%, rgba(3, 6, 12, 0) 62%),
    linear-gradient(to bottom, rgba(var(--t), 0.13), rgba(var(--t), 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -12px 16px -12px rgba(0, 0, 0, 0.9);
}
/* the columns that run through every floor */
.show .fl-pic::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 119px, rgba(255, 255, 255, 0.07) 119px 120px, rgba(0, 0, 0, 0.22) 120px 122px);
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 56%);
          mask-image: linear-gradient(90deg, transparent 44%, #000 56%);
}
.show .fl-id { grid-area: id; padding-top: 12px; }
.show .fl-no { display: block; font: 500 13px/1 var(--mono); letter-spacing: 0.16em; color: rgb(var(--t)); }
.show .fl-nm { display: block; margin-top: 8px; font-size: 27px; font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; color: var(--ivory-mid); }
.show .fl-ds { display: block; margin-top: 9px; font-size: 14px; line-height: 1.4; color: #c9ccd2; }
.show .fl-team {
  grid-area: team;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
  width: 316px;
  max-width: 100%;
  height: 60px;
  padding: 0 12px 0 20px;
  border-radius: 999px;
  background-color: rgba(4, 8, 14, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.show .fl-who { flex: 1; min-width: 0; text-align: right; }
.show .fl-who b { display: block; font-size: 15px; line-height: 1.25; color: #eceae6; }
.show .fl-who span { display: block; font-size: 12.5px; line-height: 1.25; color: #c0c3c9; }
.show .fl-team .fc-lead { width: 48px; height: 48px; box-shadow: 0 0 0 2px rgba(var(--t), 0.9), 0 0 18px rgba(var(--t), 0.5); }
.show .fl-team .faces .fc { width: 38px; height: 38px; }
.show .fl-team .faces .fc + .fc { margin-left: -6px; }
.show .fl-now {
  grid-area: now;
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  margin-top: 10px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #e4e2dd;
  background-color: rgba(4, 8, 14, 0.84);
}
.show .fl-now .dot { color: rgb(var(--t)); }
.show .fl-now.need { color: #f6e6b8; background-color: rgba(96, 76, 30, 0.82); }
.show .fl-now.need .dot { color: #ecd6a0; }
.show .fl-command   { --t: 200, 210, 232; --pic-f: brightness(1.35) saturate(1.15); }
.show .fl-pipeline  { --t: 110, 215, 205; --pic-f: brightness(1.3) saturate(1.15); }
.show .fl-revenue   { --t: 240, 128, 136; --pic-f: brightness(1.2); }
.show .fl-design    { --t: 242, 192, 112; --pic-f: brightness(1.5) saturate(1.2); }
.show .fl-delivery  { --t: 128, 172, 242; --pic-f: brightness(1.55) saturate(1.2); }
.show .fl-knowledge { --t: 226, 190, 110; --pic-f: brightness(1.35) saturate(1.1); }
/* the base: wider than the shaft, a lit door in the middle */
.show .bld-lobby {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  min-height: 56px;
  margin: 14px calc(-1 * var(--over)) 0;
  padding: 10px 20px;
  border-radius: 4px 4px 12px 12px;
  font-size: 14px;
  text-align: center;
  color: #dedcd7;
  background:
    radial-gradient(220px 70px at 50% 100%, rgba(140, 185, 255, 0.75), transparent),
    linear-gradient(to bottom, rgba(150, 170, 230, 0.26), rgba(150, 170, 230, 0.1)),
    #080b12;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -10px rgba(70, 120, 255, 0.75), 0 0 60px -10px rgba(110, 160, 255, 0.5);
}
.show .bld-lobby b { font: 500 11.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #bcd0fb; }

/* ------------------------------------------------------- D · a team's room */

.show-team { --show-end: 66px; --teal: 95, 200, 192; }
.show .show-plate { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: brightness(1.45) saturate(1.2); }
.show-team::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(36% 55% at 16.4% 64%, rgba(60, 200, 190, 0.2), transparent 70%),
    radial-gradient(36% 45% at 82% 60%, rgba(200, 80, 180, 0.12), transparent 70%),
    linear-gradient(to bottom, rgba(2, 6, 13, 0.84) 0, rgba(2, 6, 13, 0.46) 28%, rgba(2, 6, 13, 0.16) 58%, rgba(2, 6, 13, 0.62) 90%, var(--ground) 100%);
}
.show-team .show-head .lede { padding-bottom: 0; }
.show .team-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 72px; }
.show .tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 17px;
  border-radius: 999px;
  font-size: 14.5px;
  color: #c9ccd2;
  background-color: rgba(10, 14, 22, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.show .tab.on {
  color: #e6faf7;
  background-color: rgba(60, 160, 152, 0.45);
  box-shadow: inset 0 1px 0 rgba(180, 255, 245, 0.35), 0 0 24px -6px rgba(var(--teal), 0.6);
}
.show .tab .dot { width: 6px; height: 6px; color: #8fe6db; }
.show .team-tabs .back { margin-left: auto; font-size: 14.5px; color: #e4e2dd; }

/* the lead, then the specialists in the order the work passes, then the wall */
.show .team {
  display: grid;
  grid-template-columns: minmax(0, 264fr) repeat(4, minmax(0, 138fr)) minmax(0, 342fr);
  gap: 18px;
  margin-top: 26px;
}
.show .team-mates { display: contents; }
.show .team-lead {
  position: relative;
  min-height: 548px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(var(--teal), 0.25), 0 30px 70px -30px #000, 0 0 70px -20px rgba(var(--teal), 0.5);
}
.show .team-lead .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; filter: brightness(1.15); }
.show .team-lead::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(4, 8, 14, 0) 46%, rgba(4, 8, 14, 0.8) 74%, rgba(4, 8, 14, 0.96) 100%);
}
.show .team-lead .tx { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; display: grid; }
.show .team-lead .lb { color: #a6ece3; }
.show .team-lead-nm,
.show .cast-nm {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  font-weight: 460;
  background: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.show .team-lead-nm { margin-top: 10px; font-size: 42px; line-height: 1.05; letter-spacing: -0.035em; }
.show .team-lead .rl { margin-top: 4px; font-size: 14.5px; color: #c9ccd2; }
.show .team-lead .now {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin-top: 16px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(60, 160, 152, 0.34);
  font-size: 13.5px;
  line-height: 1.3;
  color: #e6faf7;
}
.show .team-lead .now .dot { color: #8fe6db; }
.show .mate {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 548px;
  border-radius: 10px;
  background-color: rgba(10, 14, 22, 0.62);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 60px -28px #000;
}
.show .mate > .bead,
.show .team-wall > .bead { left: -9px; top: 319px; }
.show .mate .ph {
  width: 100%;
  height: 360px;
  border-radius: 10px 10px 0 0;
  object-fit: cover;
  object-position: var(--nx, 50%) 0;
  filter: brightness(1.2);
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}
.show .mate-lucian { --nx: 54%; }
.show .mate-hermes { --nx: 59%; }
.show .mate-kestrel { --nx: 65%; }
.show .mate .sn {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 7px;
  border-radius: 4px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  color: #e9e6e0;
  background: rgba(6, 9, 15, 0.6);
}
.show .mate .tx { position: relative; display: grid; justify-items: start; margin-top: -8px; padding: 0 12px 10px 14px; }
.show .mate .nm { font-size: 19px; font-weight: 400; letter-spacing: -0.015em; color: var(--ivory-mid); }
.show .mate .rl { margin-top: 1px; font-size: 13px; color: #c0c3c9; }
.show .mate .got { margin-top: 14px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #a6ece3; }
.show .mate .now { margin-top: 7px; font-size: 13.5px; line-height: 1.4; color: #dedcd7; }
.show .mate .done { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; font-size: 12.5px; color: #a9d3bd; }
.show .mate .done svg.i { width: 12px; height: 12px; stroke-width: 2.6; }
.show .mate .done.run { color: #8fe6db; }
.show .mate .done .dot { width: 6px; height: 6px; }
.show .team-wall { position: relative; min-height: 548px; padding: 22px 22px 16px; }
.show .wt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.show .wt b { font-size: 18px; color: #eceae6; }
.show .wt span { font-size: 13.5px; color: #b0b5be; }
.show .stages { margin-top: 12px; }
.show .stage-r {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 30px;
  align-items: center;
  column-gap: 12px;
  height: 31px;
  font-size: 14px;
  color: #c9ccd2;
}
.show .stage-r .v { text-align: right; color: #eceae6; font-variant-numeric: tabular-nums; }
.show .bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.show .bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--teal), 0.6), #a6f0e7);
  box-shadow: 0 0 10px rgba(var(--teal), 0.7);
}
.show .is-found .bar > i { width: 100%; }
.show .is-contacted .bar > i { width: 62%; }
.show .is-replied .bar > i { width: 24%; }
.show .is-booked .bar > i { width: 11%; }
.show .is-won .bar > i { width: 5%; }
.show .team-wall .call { margin-top: 18px; padding: 16px 16px 15px; }
.show .team-wall .call .tq { margin-top: 11px; font-size: 16.5px; line-height: 1.3; color: #f3ecda; }
.show .team-wall .call .sm { margin-top: 5px; font-size: 13.5px; color: #e4e2dd; }
.show .team-wall .call .bts { margin-top: 14px; }
.show .team-wall .call .bt { height: 36px; font-size: 14px; }
.show .wall-b .lb { display: block; margin: 22px 0 8px; }
.show .hof { display: flex; align-items: center; gap: 12px; min-height: 29px; font-size: 13.5px; color: #c9ccd2; }
.show .hof em { flex: none; width: 40px; font: 500 11.5px/1 var(--mono); color: #9aa5b8; }
.show .hof b { color: #eceae6; }

/* ---------------------------------------------------------- E · the cast */

.show-cast {
  --show-end: 60px;
  --haze:
    radial-gradient(53% 69% at 22% 61%, rgba(80, 150, 255, 0.24), rgba(80, 150, 255, 0.06) 55%, transparent 75%),
    radial-gradient(43% 51% at 50% 63%, rgba(80, 150, 255, 0.1), transparent 70%),
    radial-gradient(56% 50% at 86% 12%, rgba(110, 121, 201, 0.08), transparent 70%);
}
.show .cast {
  display: grid;
  grid-template-columns: minmax(0, 410fr) minmax(0, 350fr) minmax(0, 440fr);
  column-gap: 24px;
  align-items: start;
  margin-top: 76px;
}
/* the open Synth: the portrait with no card round it, fading into the sky */
.show .cast-big { position: relative; align-self: stretch; min-height: 620px; }
.show .cast-ph {
  position: absolute;
  left: -66px;
  top: -50px;
  width: calc(100% + 110px);
  height: calc(100% + 100px);
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  -webkit-mask: radial-gradient(48% 44% at 50% 44%, #000 50%, rgba(0, 0, 0, 0.6) 72%, transparent 100%);
          mask: radial-gradient(48% 44% at 50% 44%, #000 50%, rgba(0, 0, 0, 0.6) 72%, transparent 100%);
}
.show .cast-id { position: absolute; z-index: 1; left: 0; bottom: 0; }
.show .cast-nm { display: block; font-size: clamp(56px, 5.83vw, 84px); line-height: 1; letter-spacing: -0.045em; }
.show .cast-rl { display: block; margin-top: 12px; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-ink); }
.show .cast-dos {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  padding: 24px 24px 20px;
  background-color: rgba(14, 24, 44, 0.62);
}
.show .cast-dos .sec + .sec { margin-top: 18px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.show .cast-dos .lb { display: block; font-size: 12px; color: #d2defc; }
.show .cast-dos .v { margin-top: 10px; font-size: 16.5px; line-height: 1.4; color: #eceae6; }
.show .cast-dos .mem { display: grid; gap: 7px; margin-top: 10px; }
.show .cast-dos .mem li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: #c9ccd2; }
.show .cast-dos .mem li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9fc0f4;
  transform: translateY(-2px);
}
.show .cast-dos .who { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 15px; color: #eceae6; }
.show .cast-dos .who span { color: #b0b5be; }
.show .cast-dos .who .fc { width: 42px; height: 42px; }
.show .cast-dos .who > .fc { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
.show .cast-dos .sec-room { flex: 1; display: flex; flex-direction: column; }
.show .roomt { position: relative; flex: 1; min-height: 110px; margin-top: 10px; border-radius: 8px; overflow: hidden; }
.show .roomt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.show .roomt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.show .roomt .walk {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: #15130f;
  background: linear-gradient(to bottom, #f3eee2, #d8cfba);
  box-shadow: 0 6px 18px -6px #000;
}
.show .roomt .walk::after { content: '\2192'; }
.show .cast-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.show .tile { position: relative; aspect-ratio: 101 / 146; border-radius: 6px; overflow: hidden; background: #0b0f18; }
.show .tile img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.3) contrast(1.03); }
.show .tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(to bottom, rgba(2, 6, 13, 0) 46%, rgba(2, 6, 13, 0.9) 94%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.show .tile b { position: absolute; z-index: 1; left: 9px; right: 6px; bottom: 8px; font-size: 13.5px; line-height: 1.3; color: #f1eee8; }
.show .tile.on { box-shadow: 0 0 0 2.5px rgb(var(--hy)), 0 0 34px 2px rgba(var(--hy), 0.6); }
.show .tile.on img { filter: brightness(1.1); }

/* ------------------------------------------------------ F · a Synth's room */

.show-room {
  --show-end: 56px;
  --teal: 95, 200, 192;
  --out: clamp(-32px, calc((1248px - 100vw) / 6), 0px);   /* the window runs a little wider than the column */
}
.show-room .show-sky::after { opacity: 0.4; }
.show .room-win {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr) 250px;
  align-items: start;
  min-height: 580px;
  margin: 44px var(--out) 0;
  padding: 24px 28px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(var(--teal), 0.14), 0 40px 90px -40px #000, 0 0 90px -30px rgba(60, 200, 200, 0.35);
}
.show .room-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 74%;
  filter: brightness(1.32) saturate(1.15);
}
.show .room-win::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(2, 6, 13, 0.6) 0, rgba(2, 6, 13, 0.2) 32%, rgba(2, 6, 13, 0) 52%),
    linear-gradient(to bottom, rgba(2, 6, 13, 0.2), rgba(2, 6, 13, 0) 26%, rgba(2, 6, 13, 0) 78%, rgba(2, 6, 13, 0.3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Sable, standing in her own room */
.show .room-fig {
  position: absolute;
  z-index: 2;
  left: 398px;
  bottom: -70px;
  width: clamp(250px, calc(100% - 720px), 360px);
  height: auto;
  max-width: none;
  filter: drop-shadow(0 0 44px rgba(60, 200, 200, 0.22));
}
.show .room-win::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 27.4%;
  right: 38.1%;
  bottom: 0;
  height: 170px;
  background: linear-gradient(to bottom, rgba(3, 9, 14, 0), rgba(3, 9, 14, 0.92));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.show .room-chat { position: relative; z-index: 4; grid-column: 1; display: flex; flex-direction: column; gap: 13px; padding: 16px 18px; }
.show .room-side { position: relative; z-index: 4; grid-column: 3; padding: 18px 18px 12px; }
.show .chd { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09); }
.show .chd .fc { width: 46px; height: 46px; box-shadow: 0 0 0 2px rgba(var(--teal), 0.85), 0 0 18px rgba(var(--teal), 0.5); }
.show .chd-id b { display: block; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ivory-mid); }
.show .chd-id span { display: block; font-size: 13.5px; line-height: 1.25; color: #c9ccd2; }
.show .chd .state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  color: #e6faf7;
  background: rgba(60, 160, 152, 0.46);
  white-space: nowrap;
}
.show .chd .state .dot { color: #8fe6db; }
.show .msg { display: flex; align-items: flex-start; gap: 11px; }
.show .msg .fc,
.show .msg .you { width: 30px; height: 30px; margin-top: 2px; font-size: 10.5px; }
.show .msg .you { background: #1b2030; color: #f2ecdc; box-shadow: inset 0 0 0 1.5px rgba(242, 236, 220, 0.75); }
.show .bub { font-size: 15px; line-height: 1.45; color: #eceae6; }
.show .bub .wh { display: block; margin-bottom: 1px; font-size: 12.5px; color: #c9ccd2; }
.show .bub .l { display: block; }
.show .drafts { margin-left: 41px; padding: 3px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); }
.show .drafts .d { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13.5px; color: #c9ccd2; }
.show .drafts .d + .d { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.show .drafts b { color: #eceae6; }
.show .drafts .bt { height: 28px; margin-left: auto; padding: 0 11px; font-size: 12.5px; }
.show .composer {
  display: flex;
  align-items: center;
  height: 46px;
  margin-top: 4px;
  padding: 0 8px 0 14px;
  border-radius: 8px;
  font-size: 14.5px;
  color: #b0b5be;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.show .composer .go {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 6px;
  color: #15130f;
  background: linear-gradient(to bottom, #f3eee2, #d8cfba);
}
.show .room-side .lb { display: block; margin-bottom: 10px; }
.show .room-side .lb-2 { margin-top: 14px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.show .steps li { display: flex; align-items: center; gap: 11px; min-height: 34px; font-size: 14.5px; color: #c9ccd2; }
.show .steps .mk {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: transparent;
  background: rgba(255, 255, 255, 0.12);
}
.show .steps .mk svg.i { width: 10px; height: 10px; stroke-width: 3; }
.show .steps .ok { color: #a3a8b0; }
.show .steps .ok .mk { color: #b9e2cd; background: rgba(106, 160, 136, 0.36); }
.show .steps .on { color: #f6f1e4; }
.show .steps .on .mk { background: rgba(var(--teal), 0.34); box-shadow: 0 0 0 2px rgba(var(--teal), 0.65), 0 0 12px rgba(var(--teal), 0.6); }
.show .notes li { padding: 8px 0; font-size: 14px; line-height: 1.4; color: #dedcd7; }
.show .notes li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
/* the other rooms along the foot */
.show .room-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin: 26px var(--out) 0;
}
.show .rt { position: relative; height: 130px; border-radius: 8px; overflow: hidden; }
.show .rt-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.show .rt-sable .rt-pic { object-position: 50% 88%; }
.show .rt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(2, 6, 13, 0) 24%, rgba(2, 6, 13, 0.55) 62%, rgba(2, 6, 13, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.show .rt.on { box-shadow: 0 0 0 2px rgba(var(--teal), 0.95), 0 0 30px -2px rgba(var(--teal), 0.6); }
.show .rt-w { position: absolute; z-index: 1; left: 10px; right: 8px; bottom: 10px; display: flex; align-items: center; gap: 10px; }
.show .rt-w .fc { width: 46px; height: 46px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55); filter: brightness(1.3); }
.show .rt-w b { display: block; font-size: 14.5px; line-height: 1.2; color: #f6f3ec; }
.show .rt-w span { display: block; font-size: 12.5px; line-height: 1.25; color: #cfd1d6; }

/* ------------------------------------------------- G · how work moves, the relay */
/* Seven lanes, one job crossing them through the night, one call at the end.
   Wide, it is the drawing's own 1248 x 532 map: --u is one drawn pixel, so the
   whole picture scales as one piece. Below 1180 the same list reads top to
   bottom as a timeline. */

.show-relay {
  --h: 60px;
  --h-vw: 4.17vw;
  --lede-w: 444px;
  --show-end: 40px;
  --haze:
    radial-gradient(62% 44% at 82% 40%, rgba(191, 162, 95, 0.1), transparent 70%),
    radial-gradient(76% 40% at 43% 97%, rgba(70, 110, 220, 0.12), transparent 70%);
}
.show-relay .show-sky::after { opacity: 0.4; }
.show .relay { container-type: inline-size; margin-top: 98px; }
.show .relay-map { --u: calc(100cqw / 1248); position: relative; aspect-ratio: 1248 / 532; }
.show .relay-map svg.threads { z-index: 1; }
.show .relay-steps { position: absolute; inset: 0; }
.show .rs {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--row) * 76 * var(--u));
  height: calc(76 * var(--u));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.show .rs-you      { --row: 0; --x: 194; background: linear-gradient(90deg, rgba(242, 236, 220, 0.08), rgba(242, 236, 220, 0.03)); }
.show .rs-hyperion { --row: 1; --x: 324; }
.show .rs-command  { --row: 2; --x: 464; }
.show .rs-pipeline { --row: 3; --x: 644; }
.show .rs-design   { --row: 4; --x: 834; }
.show .rs-revenue  { --row: 5; --x: 644; }
.show .rs-delivery { --row: 6; --x: 994; }
.show .rs-command,
.show .rs-design,
.show .rs-delivery { background: linear-gradient(90deg, rgba(110, 121, 201, 0.07), rgba(110, 121, 201, 0.03)); }
.show .rs .ll {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: max(10px, calc(12 * var(--u)));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c3cad8;
}
.show .rs-you .ll { color: var(--gold-ink); }
.show .rs time,
.show .rs-gate time {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc((var(--row) * -76 - 28) * var(--u));
  transform: translateX(-50%);
  font: 500 max(10px, calc(12 * var(--u)))/1 var(--mono);
  letter-spacing: 0.06em;
  color: #b0b5be;
}
/* Lucian and Cyrus start on the same tick: one label */
.show .rs-revenue time { visibility: hidden; }
.show .rs .nd { position: absolute; z-index: 2; left: calc(var(--x) * var(--u)); top: 50%; transform: translate(-50%, -50%); }
.show .rs .nd .fc,
.show .rs .nd .you {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  box-shadow: 0 0 0 2px rgba(var(--hy), 0.9), 0 0 20px rgba(var(--hy), 0.45);
}
.show .rs .nd .fc { filter: brightness(1.35) saturate(1.05); }
.show .rs .nd .you { font-size: calc(13 * var(--u)); }
.show .corona-node { --s: calc(46 * var(--u)); }
.show .rs .ncap {
  position: absolute;
  z-index: 2;
  left: calc((var(--x) + 36) * var(--u));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}
.show .ncap b { display: block; font-size: calc(15.5 * var(--u)); line-height: 1.35; color: #eceae6; }
.show .ncap b span { font-weight: 400; color: #b0b5be; }
.show .ncap i { display: block; font-size: calc(15 * var(--u)); line-height: 1.3; color: #efe9db; }
/* the hours you are asleep: a band down through every lane */
.show .rs-asleep {
  position: absolute;
  left: calc(520 * var(--u));
  top: calc(-62 * var(--u));
  width: calc(506 * var(--u));
  font-size: max(10px, calc(12 * var(--u)));
  line-height: 1;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  color: #c3caf6;
}
.show .rs-asleep::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(-16 * var(--u));
  height: calc(610 * var(--u));
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(120, 132, 230, 0.24), rgba(120, 132, 230, 0.08));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24%, #000 82%, transparent);
  pointer-events: none;
}
/* the one call that is yours, where the gold thread ends */
.show .rs-gate { --row: 0; position: absolute; z-index: 3; left: calc(1034 * var(--u)); top: 0; width: calc(214 * var(--u)); }
.show .rs-gate time { left: 50%; color: #f3dc9c; }
.show .rs-gate .call { padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(15 * var(--u)); }
.show .rs-gate .k { font-size: max(10px, calc(11 * var(--u))); }
.show .rs-gate .tq { margin-top: calc(12 * var(--u)); font-size: calc(17.5 * var(--u)); line-height: 1.25; color: #f6f0de; }
.show .rs-gate .sm { margin-top: calc(5 * var(--u)); font-size: calc(13.5 * var(--u)); color: #e4e2dd; }
.show .rs-gate .bts { flex-wrap: nowrap; gap: calc(8 * var(--u)); margin-top: calc(13 * var(--u)); }
.show .rs-gate .bt { height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
.show .rs-gate::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(204 * var(--u));              /* where the gold thread ends, just under the card */
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #f6e2a8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1.5px rgba(var(--need), 0.95), 0 0 28px 2px rgba(226, 190, 110, 0.85);
}
.show .relay-key { display: flex; flex-wrap: wrap; gap: 12px 44px; margin-top: 24px; font-size: 15px; color: #dedcd7; }
.show .relay-key li { display: flex; align-items: center; gap: 12px; }
.show .relay-key li::before {
  content: '';
  flex: none;
  width: 34px;
  height: 2.5px;
  border-radius: 2px;
  background: rgb(var(--hy));
  box-shadow: 0 0 8px rgba(var(--hy), 0.7);
}
.show .relay-key .g::before { background: #f3dc9c; box-shadow: 0 0 8px rgba(226, 190, 110, 0.9); }

/* ----------------------------------------- the showcase, 1179 and down */
/* The relay turns into a timeline; the team's wall drops under the team. */

@media (max-width: 1179px) {
  .show .relay { margin-top: 48px; }
  .show .relay-map { aspect-ratio: auto; }
  .show .relay-map svg.threads { display: none; }
  .show .relay-steps { position: relative; inset: auto; display: grid; max-width: 640px; }
  .show .rs,
  .show .rs-gate {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: 46px 50px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 13px 14px 13px 10px;
    background: none;
    box-shadow: none;
  }
  /* the thread, now running down through the faces */
  .show .rs::before,
  .show .rs-asleep::after,
  .show .rs-gate::before {
    content: '';
    position: absolute;
    left: 94px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(var(--hy), 0.55);
    box-shadow: 0 0 8px rgba(var(--hy), 0.4);
  }
  .show .rs-you::before { top: 50%; }
  .show .rs-gate::before { bottom: 50%; background: #f3dc9c; box-shadow: 0 0 10px rgba(226, 190, 110, 0.8); }
  .show .rs .ll { display: none; }
  .show .rs time,
  .show .rs-gate time {
    position: static;
    transform: none;
    font-size: 12px;
    text-align: right;
  }
  .show .rs-revenue time { visibility: visible; }
  .show .rs .nd { position: relative; left: auto; top: auto; transform: none; justify-self: center; }
  .show .rs .nd .fc,
  .show .rs .nd .you { width: 50px; height: 50px; }
  .show .rs .nd .you { font-size: 13px; }
  .show .corona-node { --s: 44px; }
  .show .rs .ncap { position: static; transform: none; white-space: normal; }
  .show .ncap b { font-size: 15.5px; }
  .show .ncap i { font-size: 15px; }
  .show .rs-asleep {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin-top: 6px;
    padding: 16px 14px 8px 134px;
    border-radius: 12px 12px 0 0;
    font-size: 11.5px;
    text-align: left;
    background: rgba(120, 132, 230, 0.2);
  }
  .show .rs-asleep::before { content: none; }
  .show .rs.is-night { background: rgba(120, 132, 230, 0.2); }
  .show .rs-delivery { margin-bottom: 6px; border-radius: 0 0 12px 12px; }
  .show .rs-gate .call { grid-column: 3; padding: 16px 16px 15px; }
  .show .rs-gate .k { font-size: 11px; }
  .show .rs-gate .tq { margin-top: 12px; font-size: 17.5px; }
  .show .rs-gate .sm { margin-top: 5px; font-size: 13.5px; }
  .show .rs-gate .bts { gap: 8px; margin-top: 13px; }
  .show .rs-gate .bt { height: 36px; padding: 0 14px; font-size: 14px; }
  /* the gold time and dot sit level with the card's first line */
  .show .rs-gate { align-items: start; }
  .show .rs-gate time { margin-top: 17px; }
  .show .rs-gate::before { top: -6px; bottom: auto; height: 36px; }
  .show .rs-gate::after { position: relative; left: auto; top: auto; grid-column: 2; grid-row: 1; justify-self: center; margin: 15px 0 0; }

  .show .team { grid-template-columns: minmax(0, 264fr) repeat(4, minmax(0, 138fr)); }
  .show .team-wall {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 32px;
    align-items: start;
    min-height: 0;
  }
  /* the gold bead comes down from the last specialist, who stands at the right */
  .show .team-wall > .bead { left: 91%; top: -9px; transform: rotate(90deg); }
  .show .team-wall .call { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .show .wall-a,
  .show .wall-b { grid-column: 1; }
}

/* ----------------------------------------- the showcase, 1100 and down */
/* Copy over picture. Hyperion and the building stack, the cast folds to two
   columns over its grid, the room keeps Sable above her panels. */

@media (max-width: 1100px) {
  .show .display,
  .show.show-hyperion .display { font-size: clamp(34px, 6.2vw, 56px); }
  .show.show-building .display span,
  .show.show-hyperion .display span { width: auto; }

  /* copy now runs the full width, so the stars step back from it */
  .show .show-sky::before { opacity: 0.4; }
  .show .show-sky::after { opacity: 0.3; }

  .show .hy { grid-template-columns: minmax(0, 1fr); row-gap: 72px; padding: 0 0 72px; }
  .show .hy-ask { margin-top: 36px; }
  .show .hy-fig { left: 0; justify-self: center; width: 100%; max-width: 600px; }

  .show .beats { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 56px auto 0; }
  .show .beat { min-height: 0; }
  .show .beat > .bead { left: 50%; top: -12px; transform: rotate(90deg); }
  .show .beat-light { min-height: 230px; }

  .show-building { --show-top: var(--show-y); --haze: radial-gradient(90% 30% at 50% 97%, rgba(70, 110, 220, 0.2), transparent 70%); }
  .show .bld { grid-template-columns: minmax(0, 1fr); row-gap: 56px; padding-right: 0; }
  .show .bld-copy { margin-top: 0; }
  .show .bld-tower { justify-self: center; width: 100%; max-width: 720px; }

  .show .cast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 32px; margin-top: 56px; }
  .show .cast-grid { grid-column: 1 / -1; grid-template-columns: repeat(8, minmax(0, 1fr)); }

  .show .room-win { grid-template-columns: minmax(0, 1fr) 250px; column-gap: 20px; min-height: 0; padding-top: 250px; }
  .show .room-win::after { content: none; }
  .show .room-fig { left: 50%; bottom: auto; top: 14px; width: 260px; margin-left: -130px; }
  .show .room-side { grid-column: 2; }
  .show .room-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ----------------------------------------- the showcase, 900 and down */

@media (max-width: 900px) {
  .show .show-head { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .show .team-tabs { margin-top: 44px; }
  .show .team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .show .team-lead { grid-column: 1 / -1; min-height: 360px; }
  .show .team-lead .ph { object-position: 50% 16%; }
  .show .mate { min-height: 0; }
  .show .mate .ph { height: clamp(220px, 36vw, 320px); }
  .show .mate:first-child > .bead { left: 50%; top: -9px; transform: rotate(90deg); }
  .show .mate > .bead { top: 40%; }
  .show .team-wall > .bead { left: 87.5%; }
  .show .relay { margin-top: 40px; }
}

/* ----------------------------------------- the showcase, phones */

@media (max-width: 760px) {
  .show .eyebrow,
  body.home main > section.show p.eyebrow { font-size: 11px; }
  .show .lede,
  body.home main > section.show p.lede { font-size: 18px; }

  .show .hy { row-gap: 60px; }
  .show .hy-fan { margin-top: 52px; }
  .show .hy-leads b { margin-right: -0.1em; font-size: 11px; letter-spacing: 0.1em; }
  .show .hy-leads span { margin-top: 3px; font-size: 11.5px; letter-spacing: 0; }
  .show .hy-leads .fc { margin-bottom: 9px; }

  /* a floor on a phone: its name, then its team, then what it is doing */
  .show .fl {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "team" "now";
    row-gap: 12px;
    padding: 6px 12px 16px 18px;
  }
  .show .fl-pic::before {
    background:
      linear-gradient(90deg, rgba(3, 6, 12, 0.9), rgba(3, 6, 12, 0.62)),
      linear-gradient(to bottom, rgba(var(--t), 0.13), rgba(var(--t), 0.03));
  }
  .show .fl-pic::after { content: none; }
  .show .fl-team { justify-self: start; width: auto; padding: 0 12px 0 18px; }
  .show .fl-now { justify-self: start; margin-top: 0; }
  .show-building { --over: 12px; }
  .show .bld-pent { padding: 12px 16px; }
  .show .bld-lobby { padding: 12px 16px; }

  .show .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show .team-lead { min-height: 420px; }
  .show .team-lead .ph { object-position: 50% 8%; }
  .show .mate .ph { height: auto; aspect-ratio: 4 / 5; }
  /* two across: the third takes the work from the second, up and to the right of it,
     so its bead sits where the four cards meet and points down to the left */
  .show .mate:nth-child(3) > .bead { left: calc(100% + 9px); top: -9px; transform: rotate(135deg); }
  .show .team-wall > .bead { left: 75%; }
  .show .team-tabs .back { flex-basis: 100%; margin: 6px 0 0; }
  .show .team-wall { grid-template-columns: minmax(0, 1fr); }
  .show .team-wall .call { grid-column: 1; grid-row: auto; margin-top: 14px; }

  .show .cast { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .show .cast-big { min-height: 440px; }
  .show .cast-ph { left: calc(-1 * var(--pad)); top: -20px; width: calc(100% + 2 * var(--pad)); height: calc(100% + 40px); }
  .show .cast-dos { min-height: 0; }
  .show .roomt { min-height: 150px; }
  .show .cast-grid { grid-column: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .show .tile b { left: 7px; right: 4px; bottom: 6px; font-size: 12px; }

  /* Sable to the waist above her panels, and the draft rows given the full width */
  .show .room-win { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-top: 32px; padding: 300px 12px 12px; }
  .show .room-fig { width: 244px; margin-left: -122px; }
  .show .room-side { grid-column: 1; }
  .show .drafts { margin-left: 0; }
  .show .drafts b { white-space: nowrap; }
  .show .room-strip { gap: 12px; margin-top: 16px; }
  .show .chd .state { padding: 0 10px; font-size: 12px; }
}

@media (max-width: 560px) {
  /* the ask bar: the question and its button, the scope beneath */
  .show .hy-fig .askbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 10px 10px 12px 16px;
  }
  .show .hy-fig .askbar .typed { font-size: 16px; }
  .show .hy-fig .askbar .scope { grid-row: 2; justify-self: start; }
  .show .askbar-sm .typed { font-size: 14.5px; }
  .show .voice { font-size: 21.5px; }
  .show .room-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show .rt-w { gap: 8px; }
  .show .rt-w .fc { width: 40px; height: 40px; }
  .show .bub { font-size: 14.5px; }
  .show .rs,
  .show .rs-gate { grid-template-columns: 40px 46px minmax(0, 1fr); column-gap: 12px; padding-right: 10px; }
  .show .rs::before,
  .show .rs-asleep::after,
  .show .rs-gate::before { left: 84px; }
  .show .rs .nd .fc,
  .show .rs .nd .you { width: 46px; height: 46px; }
  .show .rs time,
  .show .rs-gate time { font-size: 11px; }
  .show .rs-asleep { padding-left: 120px; }
  .show .relay-key { font-size: 14px; }
}

/* the narrowest phones: the faces give a little so the names keep their room */
@media (max-width: 359px) {
  .show .hy-leads b { margin-right: -0.04em; font-size: 10px; letter-spacing: 0.04em; }
  .show .hy-leads span { font-size: 11px; }
  .show .fl-team { gap: 9px; padding: 0 10px 0 14px; }
  .show .fl-team .fc-lead { width: 42px; height: 42px; }
  .show .fl-team .faces .fc { width: 30px; height: 30px; }
  .show .fl-who b { font-size: 14px; }
  .show .fl-who span { font-size: 12px; }
}

/* nothing moves for a reader who asked for stillness */
@media (prefers-reduced-motion: reduce) {
  .show .corona .halo,
  .show .corona .rays,
  .show .corona .ring,
  .show .dot.pulse,
  .show .askbar .caret { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE SHOWCASE, ROUND TWO (task #8237, from the drawings in KB #8609)
   Seven more designed sections. On hyperionos/: I a Synth against an agent,
   L the Light Table, M review and release, J how they learn, H the ladder,
   K build your own. On swarm/: N the campaign board.
   They stand on round one's kit above and do not redefine it: the .show
   shell and its sky, .show-head, the type steps, the glass (.gl), a face
   (.fc), Hyperion's light (--hy), .lb, .bt, .dot, .bead. Everything added
   here is scoped to .s2, the class all seven carry, and named s2-*.
   Three widths: 1200 and up is the drawn composition, below it the pieces
   stack, and 760 and down is the phone. Colour sits on tinted surfaces and
   light; the only edges are neutral hairlines. Nothing here is interactive,
   so nothing has a hover state.
   ══════════════════════════════════════════════════════════════════════════ */

.s2 {
  --h: 62px;                  /* these seven were drawn a step under round one's heading */
  --h-vw: 4.3vw;
  --s2-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315130f' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --s2-i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2370757e' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --s2-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2ecdc' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --s2-i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa5b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
  --s2-i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcd8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5v14zM4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E");
  --s2-i-bars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcd8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
  --s2-i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcd8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.5-2.5 2.5-2.5z'/%3E%3C/svg%3E");
}

/* the page's paragraph rules stop at the door, as its list rules already do */
.s2 :where(p, dl, dt, dd, figure, h3) { margin: 0; padding: 0; }
.s2 :where(p) { color: inherit; }
.s2 :where(h3) { font-size: inherit; font-weight: inherit; }

/* a head that stacks: the three lines under the heading, not beside it */
.s2 .display + .lede { margin-top: 26px; }

/* a name set in the heading's own ivory */
.s2-ivory {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  background: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.s2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s2-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
  color: #e4e2dd;
  background: rgba(255, 255, 255, 0.1);
}
.s2-chip.ok { color: #c9ecd9; background: rgba(106, 160, 136, 0.3); }
.s2-chip.gold { color: #f6e6b8; background: rgba(150, 118, 44, 0.5); }
.s2-chip.vio { color: #dcd8ff; background: rgba(120, 110, 220, 0.4); }
.s2-chip.teal { color: #e6faf7; background: rgba(60, 160, 152, 0.42); }
.s2-chip.bad { color: #f2c4c2; background: rgba(193, 112, 112, 0.3); }
.s2-chip.sel { color: #f0f1f4; background: #6e79c9; }
.s2-chip.tick::before {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--s2-i-check) center / contain no-repeat;
          mask: var(--s2-i-check) center / contain no-repeat;
}
.s2-chip .fc { width: 18px; height: 18px; margin-left: -4px; }
.s2 .bt { justify-content: center; line-height: 1.2; }
.s2 .lb { line-height: 1.35; }
.s2-inset { padding: 14px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }

/* ── H · the ladder ── */

.s2-ladder {
  /* the first step's height: taller as the columns narrow, so the stair keeps its shape */
  --s2-base: max(304px, calc(304px + (1440px - 100vw) * 0.42));
  --show-end: 44px;
  --haze:
    radial-gradient(52.8% 560px at 86.8% 230px, rgba(var(--hy), 0.13), rgba(191, 162, 95, 0.05) 50%, transparent 74%),
    radial-gradient(62.5% 420px at 22.2% calc(100% - 44px), rgba(70, 110, 220, 0.12), transparent 70%);
}
/* the head sits in the empty corner above the low steps: one cell, two layers */
.s2-ladder-in { display: grid; }
.s2-ladder-in > * { grid-area: 1 / 1; }
.s2-ladder-head { position: relative; z-index: 1; align-self: start; justify-self: start; max-width: 46%; }
.s2-ladder-in > .s2-note { grid-area: 2 / 1; margin-top: 22px; font-size: 14.5px; color: #c0c3c9; }

.s2-stair { position: relative; }
.s2-stair > ol { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; padding-top: 260px; }
/* one line through every face and up to you. Stretched sideways only: x is in columns, y in px */
.s2-thread {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 900px;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(var(--hy), 0.5));
}
/* the glow is on the svg, in real px: on the path it would stretch with the columns */
.s2-thread .thr { stroke: rgba(var(--hy), 0.55); stroke-width: 1.4; filter: none; }

.s2-stair .s2-step {
  --i: 0;
  --a: 0.05;
  --f: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--s2-base) + var(--i) * 56px);
  margin-inline: 4px;
  padding: 16px 15px 14px;
  border-radius: 8px 8px 3px 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(255, 255, 255, 0.028) 27px 28px),
    linear-gradient(to bottom, rgba(255, 236, 196, var(--a)), rgba(255, 236, 196, calc(var(--a) * 0.52)) 50%, rgba(255, 236, 196, calc(var(--a) * 0.3))),
    #0a0e17;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 250, 240, calc(0.1 + var(--a) * 1.6)),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 30px 60px -30px #000,
    0 0 70px -24px rgba(var(--hy), calc(var(--a) * 1.6));
}
.s2-step:nth-child(2) { --i: 1; --a: 0.09; --f: 46px; }
.s2-step:nth-child(3) { --i: 2; --a: 0.13; --f: 84px; }
.s2-step:nth-child(4) { --i: 3; --a: 0.18; --f: 92px; }
.s2-step:nth-child(5) { --i: 4; --a: 0.24; --f: 100px; }
.s2-step:nth-child(6) { --i: 5; --a: 0.3; --f: 108px; }
.s2-step:nth-child(7) { --i: 6; --a: 0.36; --f: 120px; }

.s2-fig { position: absolute; left: 50%; bottom: 100%; z-index: 1; isolation: isolate; display: flex; margin-bottom: 16px; transform: translateX(-50%); }
.s2-fig::before {
  content: '';
  position: absolute;
  inset: -70%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 196, calc(var(--a) * 2.6)), rgba(255, 236, 196, calc(var(--a) * 0.8)) 50%, transparent);
}
.s2-fig .fc {
  width: var(--f);
  height: var(--f);
  box-shadow: 0 0 0 2.5px rgba(var(--hy), calc(0.35 + var(--a) * 2)), 0 0 26px rgba(var(--hy), calc(var(--a) * 2.2));
}
.s2-fig .fc + .fc { margin-left: -7px; }
.s2-spark {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--s2-i-bolt) center / 24px no-repeat, #0a0e17;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2);
}

.s2-step-no { font: 500 12.5px/1 var(--mono); letter-spacing: 0.16em; color: #e9e6e0; }
.s2-step-rank { margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.26em; text-transform: uppercase; color: #fff6e2; }
.s2-step-eg { margin-top: 4px; font-size: 13px; line-height: 1.35; color: #ecebe6; }
.s2-step-is { margin-top: 10px; font-size: 13.5px; line-height: 1.42; color: #f6f3ec; }
.s2-step-ans { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: #dedcd7; }
.s2-step-ans b { font-weight: 400; color: #fffaf0; }
.s2 .s2-caps { margin-top: auto; padding-top: 14px; }
.s2-caps li { display: flex; align-items: center; gap: 9px; min-height: 21px; font-size: 12.5px; line-height: 1.25; color: #b4b9c1; }
.s2-caps li::before {
  content: '';
  position: static;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: none;
  opacity: 1;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}
.s2-caps li.on { color: #e9e6e0; }
.s2-caps li.on::before { background: #fffaf0; box-shadow: 0 0 8px 1px rgba(var(--hy), 0.85); }
.s2-caps li.half { color: #c9ccd2; }
.s2-caps li.half::before { background: linear-gradient(90deg, #fffaf0 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px rgba(var(--hy), 0.8); }
.s2-step-own { margin-top: 8px; padding-top: 9px; font-size: 12.5px; color: #b9bcc2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.s2-step-own b { color: #f6e6b8; }

/* you, above the top step */
.s2-stair .s2-step-you { position: absolute; top: 40px; right: 4px; display: flex; align-items: center; gap: 14px; }
.s2-step-you p { font-size: 14.5px; line-height: 1.35; text-align: right; color: #dedcd7; }
.s2-step-you b { display: block; margin-right: -0.3em; font-size: 12.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-ink); }
.s2-step-you .you { width: 50px; height: 50px; font-size: 13px; box-shadow: 0 0 0 2.5px rgba(var(--hy), 0.6), 0 0 30px rgba(var(--hy), 0.6); }

/* ── I · a Synth against an agent ── */

.s2-versus { --show-end: 72px; --lede-w: 464px; --haze: radial-gradient(52.8% 600px at 75% 640px, rgba(200, 120, 90, 0.12), transparent 70%); }
.s2-vs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; margin-top: 64px; }
.s2-vs::before {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(var(--hy), 0.5) 20%, rgba(var(--hy), 0.5) 80%, transparent);
}
.s2-vs-badge {
  position: absolute;
  left: 50%;
  top: 96px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #efe9db;
  background: #131826;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1.5px rgba(var(--hy), 0.6), 0 0 26px rgba(var(--hy), 0.45);
}
.s2-vs-a,
.s2-vs-s { position: relative; overflow: hidden; min-height: 596px; padding: 26px 28px 22px; border-radius: 12px; }
/* the left side is grey and flat on purpose */
.s2-vs-a {
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 255, 255, 0.025) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.025) 39px 40px),
    #090b10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  filter: grayscale(1);
}
.s2-vs-s { isolation: isolate; box-shadow: 0 0 90px -20px rgba(226, 170, 110, 0.55), 0 40px 80px -40px #000; }
.s2-plate {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 62% 50%;
  filter: brightness(1.55) sepia(0.95) saturate(1.7) hue-rotate(-16deg);
}
.s2-vs-s::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(4, 6, 12, 0.9) 0, rgba(4, 6, 12, 0.74) 52%, rgba(4, 6, 12, 0.06) 76%),
    linear-gradient(to bottom, rgba(226, 150, 90, 0.16), rgba(226, 150, 90, 0.06) 40%, rgba(4, 6, 12, 0.4) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 244, 220, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.s2-figure {
  position: absolute;
  right: -78px;
  bottom: -40px;
  z-index: -1;
  width: 350px;
  height: 480px;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 0 40px rgba(226, 150, 110, 0.25));
}
.s2-vs-top { min-height: 170px; }
.s2-vs-top .lb { font-size: 12px; }
.s2-vs-a .lb { color: #8a8f98; }
.s2-vs-s .lb { color: #f6e6b8; }
.s2-chatmock { max-width: 532px; min-height: 112px; margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: #12141a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.s2-chatmock p { font-size: 13px; color: #8a8f98; }
.s2-chatmock p + p {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 15px;
  color: #9a9fa8;
  background: #191c23;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.s2-vs-name { width: max-content; margin-top: 12px; font-size: 46px; font-weight: 460; line-height: 1.05; letter-spacing: -0.04em; }
.s2-vs-role { margin-top: 4px; font-size: 15px; color: #dedcd7; }
.s2-vs-top .s2-chips { margin-top: 14px; }

.s2-rows li { display: flex; align-items: center; gap: 13px; min-height: 54px; padding-block: 8px; font-size: 15.5px; line-height: 1.3; }
.s2-rows li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.s2-rows li::before { content: ''; position: static; flex: none; width: 24px; height: 24px; border-radius: 50%; opacity: 1; }
.s2-vs-a .s2-rows li { color: #8e939c; }
.s2-vs-a .s2-rows li::before { background: var(--s2-i-cross) center / 12px no-repeat, rgba(255, 255, 255, 0.06); }
.s2-vs-s .s2-rows { max-width: 340px; }
.s2-vs-s .s2-rows li { color: #f1eee8; }
.s2-vs-s .s2-rows li::before { background: var(--s2-i-check) center / 12px no-repeat, linear-gradient(to bottom, #f3eee2, #d8cfba); box-shadow: 0 0 14px rgba(var(--hy), 0.5); }

/* ── J · how they learn ── */

.s2-learn { --show-end: 104px; --haze: radial-gradient(48.6% 680px at 20.1% 620px, rgba(220, 70, 70, 0.16), rgba(220, 70, 70, 0.04) 55%, transparent 75%); }
.s2-learn-body { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); margin-top: 43px; }
.s2-who { position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: -50px; padding-right: 64px; }
.s2-who-pic {
  position: absolute;
  left: -66px;
  top: -7px;
  z-index: -1;
  width: 480px;
  height: 660px;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  filter: brightness(1.2);
  -webkit-mask-image: radial-gradient(48% 44% at 50% 42%, #000 50%, rgba(0, 0, 0, 0.6) 72%, transparent 100%);
          mask-image: radial-gradient(48% 44% at 50% 42%, #000 50%, rgba(0, 0, 0, 0.6) 72%, transparent 100%);
}
.s2-who-name { width: max-content; font-size: 76px; font-weight: 460; line-height: 1; letter-spacing: -0.045em; }
.s2-who-role { margin-top: 10px; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-ink); }
.s2-journal { margin-top: 26px; padding: 16px 18px 14px; }
.s2-journal .lb { margin-bottom: 8px; }
.s2-ln { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.4; color: #e4e2dd; }
.s2-ln + .s2-ln { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.s2-ln em { flex: none; width: 44px; font: 500 11.5px/1.7 var(--mono); color: #9aa5b8; }

/* four groups of equal height, so the fan that joins them to Memory can be drawn in fractions */
.s2-groups { position: relative; display: grid; grid-auto-rows: 1fr; }
.s2-group { --t: 242, 236, 220; position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 12px; min-height: 154px; padding-block: 7px; }
.s2-group.g2 { --t: 110, 205, 196; }
.s2-group.g3 { --t: 160, 168, 255; }
.s2-group.g4 { --t: 236, 200, 120; }
.s2-group::before { content: ''; position: absolute; left: -18px; top: 20%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: rgb(var(--t)); }
.s2-gh { padding: 14px 16px 0 0; }
.s2-gh h3 { font-size: 12.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(var(--t)); }
.s2-gh p { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: #b0b5be; }
.s2-group ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.s2-group ul li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 15px 13px;
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(var(--t), 0.17), rgba(var(--t), 0.05)), rgba(14, 19, 30, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.s2-tg { font-size: 15px; line-height: 1.32; color: #f1eee8; }
.s2-lv { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; font-size: 13.5px; line-height: 1.35; color: #ecebe6; }
.s2-lv::before {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  background: rgb(var(--t));
  -webkit-mask: var(--s2-i-arrow) center / contain no-repeat;
          mask: var(--s2-i-arrow) center / contain no-repeat;
}
.s2-fan { position: absolute; left: -62px; top: 0; width: 44px; height: 100%; overflow: visible; pointer-events: none; }
.s2-fan .thr { stroke-width: 1.7; filter: none; }
.s2-fan .t1 { stroke: rgba(242, 236, 220, 0.85); }
.s2-fan .t2 { stroke: rgba(110, 205, 196, 0.9); }
.s2-fan .t3 { stroke: rgba(160, 168, 255, 0.9); }
.s2-fan .t4 { stroke: rgba(236, 200, 120, 0.9); }
.s2-memory {
  position: absolute;
  left: -132px;
  top: calc(42.5% + 19px);
  width: 62px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: #f6f3ec;
  text-shadow: 0 0 6px #000, 0 0 12px #000;
}
.s2-memory::before {
  content: '';
  position: absolute;
  left: 61px;
  top: -28px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 0 4px rgba(var(--hy), 0.18), 0 0 26px 4px rgba(var(--hy), 0.75);
}

/* ── K · build your own ── */

.s2-build { --show-end: 72px; --lede-w: 444px; --haze: radial-gradient(104% 60% at 50% 55%, rgba(132, 122, 255, 0.7), rgba(132, 122, 255, 0.42) 28%, rgba(132, 122, 255, 0.2) 52%, rgba(132, 122, 255, 0.07) 66%, transparent 78%); }
.s2 .s2-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.s2-panels > .s2-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 636px;
  padding: 24px;
  background-color: rgba(44, 40, 92, 0.58);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 60px -24px rgba(0, 0, 0, 0.85), 0 0 80px -20px rgba(132, 122, 255, 0.55);
}
.s2-panel > .bead { left: -12px; top: 50%; }
.s2-pn { font: 500 12px/1 var(--mono); letter-spacing: 0.16em; color: #9aa5b8; }
.s2-pt { margin-top: 10px; font-size: 23px; line-height: 1.5; letter-spacing: -0.02em; color: var(--ivory-mid); }
.s2-say { margin-top: 18px; font-size: 14.5px; color: #dedcd7; }
.s2-say.sm { margin-top: 14px; margin-bottom: 14px; font-size: 13.5px; color: #c9ccd2; }

.s2-hire { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.s2-hire > img { width: 100%; height: 204px; border-radius: 8px; object-fit: cover; object-position: 16% 36%; filter: brightness(1.2); box-shadow: 0 0 30px -8px rgba(190, 140, 255, 0.6); }
.s2-hire dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; min-height: 34px; padding-block: 4px; font-size: 13.5px; line-height: 1.25; color: #f1eee8; }
.s2-hire dl > div + div { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.s2-hire dt { font-size: 12px; color: #a6acb7; }
.s2-hire dd { display: flex; align-items: center; gap: 7px; }
.s2-hire dd .fc { width: 24px; height: 24px; }
.s2-panel > .s2-chips { margin-top: 14px; }
.s2-panel > .bt { display: flex; min-height: 40px; margin-top: 14px; font-size: 14.5px; }
.s2 .s2-nexts { display: grid; gap: 2px; margin-top: 14px; margin-bottom: 14px; }
.s2-nexts li { display: flex; align-items: center; gap: 10px; min-height: 26px; font-size: 13.5px; line-height: 1.3; color: #dedcd7; }
.s2-nexts li::before {
  content: '';
  position: static;
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 0;
  opacity: 1;
  background: #a9d3bd;
  -webkit-mask: var(--s2-i-check) center / contain no-repeat;
          mask: var(--s2-i-check) center / contain no-repeat;
}
.s2-panel > .s2-inset.btm { min-height: 108px; margin-top: auto; }
.s2-tray { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.s2-tray span { display: inline-flex; flex: none; }
.s2-tray .fc { width: 44px; height: 44px; box-shadow: 0 0 0 2px #0a0d14, 0 0 0 3px rgba(255, 255, 255, 0.14); }
.s2-tray .fc + .fc { margin-left: -10px; }
.s2-tray p { font-size: 13.5px; line-height: 1.4; color: #dedcd7; }

.s2-pi { margin-top: 14px; }
.s2-pi > p { display: grid; grid-template-columns: 48px minmax(0, 1fr) 74px 74px; align-items: center; column-gap: 10px; min-height: 41px; font-size: 14px; color: #e4e2dd; }
.s2-pi > p + p + p { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.s2-pi > p:first-child { min-height: 0; padding-bottom: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-align: center; text-transform: uppercase; color: #a6acb7; }
.s2-pi img { width: 48px; height: 32px; border-radius: 4px; object-fit: cover; }
.s2-pc,
.s2-ik { display: grid; place-items: center; height: 26px; border-radius: 999px; font-size: 12.5px; }
.s2-pc { color: #b0b5be; background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, 0.06) 4px 5px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.s2-ik { font-weight: 500; color: #15130f; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.s2-ik.ch { color: #2b2209; background: linear-gradient(to bottom, #f6e2a8, #dcbf74); box-shadow: 0 0 16px -2px rgba(226, 190, 110, 0.7); }
.s2-pips { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; color: #dedcd7; }
.s2-pips i { flex: none; width: 22px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.s2-pips i.on { background: #f3dc9c; box-shadow: 0 0 8px rgba(226, 190, 110, 0.8); }
.s2-pips span { margin-left: 8px; }
.s2-exam { margin-top: 12px; margin-bottom: 12px; }
.s2-exam .lb { margin-bottom: 8px; }
.s2-er { display: grid; grid-template-columns: 82px minmax(0, 1fr) 26px; align-items: center; column-gap: 10px; min-height: 26px; font-size: 13.5px; color: #dedcd7; }
.s2-er i { width: 88%; height: 8px; border-radius: 0 4px 4px 0; background: rgba(255, 255, 255, 0.3); }
.s2-er i.new { width: 91%; background: #f3eee2; }
.s2-er b { font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; color: #f1eee8; }
.s2-exam .s2-chip { margin-top: 8px; }
.s2-hb { margin-top: 8px; font-size: 14.5px; color: #f1eee8; }
.s2-hb + p { margin-top: 4px; font-size: 12.5px; color: #a6acb7; }

.s2 .s2-tools { margin-top: 10px; }
.s2-tools li { --ic: var(--s2-i-book); display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 60px; padding-block: 8px; }
.s2-tools li.num { --ic: var(--s2-i-bars); }
.s2-tools li.tool { --ic: var(--s2-i-wrench); }
.s2-tools li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.s2-tools li::before { content: ''; position: static; width: 36px; height: 36px; border-radius: 8px; opacity: 1; background: var(--ic) center / 16px no-repeat, rgba(120, 110, 220, 0.3); }
.s2-tools li > span:first-child b { display: block; font-size: 14.5px; font-weight: 400; line-height: 1.25; color: #f1eee8; }
.s2-tools li > span:first-child span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: #a6acb7; }
.s2 .s2-line { display: flex; align-items: center; margin-top: 10px; }
.s2-line li { position: relative; flex: 1; min-width: 0; min-height: 46px; padding: 7px 10px; border-radius: 6px; background: rgba(60, 160, 152, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.s2-line li + li { margin-left: 14px; }
.s2-line li + li::before { content: ''; position: absolute; left: -14px; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 0; opacity: 1; background: rgba(180, 255, 245, 0.5); }
.s2-line b { display: block; font-size: 13px; line-height: 1.2; color: #e6faf7; }
.s2-line span { display: block; font-size: 11.5px; line-height: 1.3; color: #b6d6d1; }

/* ── L · the Light Table ── */

.s2-table { --show-end: 56px; --haze: radial-gradient(62.5% 600px at 33.3% 760px, rgba(110, 121, 201, 0.2), transparent 70%); }
.s2-table-in { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 26.3%, 328px); gap: 60px 32px; }
.s2-table-head { grid-area: 1 / 1; }
.s2-ltw {
  grid-area: 2 / 1;
  overflow: hidden;
  margin-left: -32px;
  border-radius: 12px;
  background: #0d0e12;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 50px 100px -40px #000, 0 0 90px -30px rgba(110, 121, 201, 0.6);
}
.s2-ltw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 54px; padding: 8px 20px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07); }
.s2-ltw-bar > span:first-child { font-size: 12.5px; color: #9c9fa5; }
.s2-ltw-bar > b { font-size: 16px; font-weight: 600; color: #e8eaee; }
.s2-ltw-bar > b + span { font-size: 12.5px; color: #babdc3; }
.s2-ltw-bar .s2-chip { margin-left: auto; }
.s2-ltw-bar .dot { color: #929ad6; }
.s2-ltw-tabs { display: flex; align-items: center; gap: 4px; min-height: 42px; padding: 0 16px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07); }
.s2-ltw-tabs span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; white-space: nowrap; color: #babdc3; }
.s2-ltw-tabs span.on { color: #f0f1f4; background: #6e79c9; }
.s2-ltw-tabs span:last-child { margin-left: auto; color: #9c9fa5; }
.s2-ltw-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 544px; }
.s2-ltw-pages { padding: 14px 12px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.07); }
.s2-pg { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 0 6px; font-size: 13px; color: #d6d8dd; }
.s2-pg span { font-size: 12px; color: #9c9fa5; }
.s2-pg.hd { min-height: 0; padding-bottom: 10px; font-weight: 600; color: #e8eaee; }
.s2-pg.hd span { font-size: 13px; font-weight: 400; color: #929ad6; }
.s2-pg.sep { margin-top: 8px; }
.s2-sc { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 9px; min-height: 44px; padding: 5px 6px; border-radius: 6px; }
.s2-sc img { width: 40px; height: 23px; border-radius: 3px; object-fit: cover; object-position: 50% 0; }
.s2-sc b { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.25; color: #d6d8dd; }
.s2-sc em { display: block; font-size: 11.5px; line-height: 1.3; color: #8fc4a9; }
.s2-sc.on { background: rgba(110, 121, 201, 0.26); }
.s2-sc.on em { color: #e6d29c; }
.s2-desk { min-width: 0; padding: 16px 20px 20px; }
.s2-desk-h { display: flex; align-items: flex-end; gap: 10px 14px; }
.s2-desk-h p span { display: block; font-size: 12px; color: #9c9fa5; }
.s2-desk-h p b { display: block; margin-top: 2px; font-size: 20px; font-weight: 600; line-height: 1.3; color: #e8eaee; }
.s2-desk-h .bt { margin-left: auto; font-weight: 500; color: #f0f1f4; background: #6e79c9; }
.s2-chosen { display: grid; grid-template-columns: minmax(0, 69%) minmax(0, 1fr); gap: 18px; margin-top: 14px; }
/* the chosen picture is marked by its light, a neutral hairline and its chip, not by a coloured ring */
.s2-chosen > img { width: 100%; height: auto; aspect-ratio: 472 / 250; border-radius: 6px; object-fit: cover; object-position: 50% 0; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75), 0 0 44px 0 rgba(110, 121, 201, 0.95); }
.s2-code { margin-left: 8px; font: 500 12px/1 var(--mono); color: #babdc3; }
.s2-meta-nm { margin-top: 12px; font-size: 14px; line-height: 1.35; color: #e8eaee; }
.s2-meta-fr { margin-top: 4px; font-size: 12.5px; color: #9c9fa5; }
.s2-meta-why { margin-top: 12px; padding: 8px 10px; border-radius: 4px; font-size: 13.5px; line-height: 1.45; color: #d6d8dd; background: linear-gradient(90deg, rgba(110, 121, 201, 0.2), transparent); }
.s2-vz { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-size: 13px; line-height: 1.4; color: #d6d8dd; }
.s2-vz .fc { width: 28px; height: 28px; }
.s2-vz span span { display: block; margin-top: 2px; font-size: 11.5px; color: #9c9fa5; }
.s2-imgs-h { margin-top: 16px; font-size: 13px; font-weight: 600; color: #e8eaee; }
.s2-imgs-h span { margin-left: 6px; font-weight: 400; color: #9c9fa5; }
.s2-imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.s2-vf > :first-child {
  display: grid;
  place-content: center;
  width: 100%;
  height: 116px;
  border-radius: 6px;
  object-fit: cover;
  object-position: 50% 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: #d6d8dd;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.s2-vf .gen { background: linear-gradient(110deg, #16181d 30%, #262a38 50%, #16181d 70%); }
.s2-vf .dr { background: repeating-linear-gradient(135deg, #14161b 0 8px, #1b1e27 8px 16px); }
.s2-vf small { display: block; font-size: 11.5px; color: #9c9fa5; }
.s2-vf-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 7px; font: 500 11.5px/1 var(--mono); color: #babdc3; }
.s2-vf-cap .s2-chip { min-height: 20px; padding: 0 8px; font: 400 11.5px/1 var(--font); }

/* the storyboard: as tall as the head and the window together, fading out at the foot */
.s2-story { grid-area: 1 / 2 / 3 / 3; position: relative; container-type: inline-size; }
.s2-story-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #0d0e12;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 216px), rgba(0, 0, 0, 0.1) calc(100% - 91px), transparent calc(100% - 13px));
          mask-image: linear-gradient(to bottom, #000 calc(100% - 216px), rgba(0, 0, 0, 0.1) calc(100% - 91px), transparent calc(100% - 13px));
}
.s2-story figcaption { min-height: 58px; padding: 12px 14px 0; }
.s2-story figcaption b { display: block; font-size: 13.5px; font-weight: 600; color: #e8eaee; }
.s2-story figcaption span { display: block; margin-top: 2px; font-size: 12px; color: #9c9fa5; }
.s2-story li { position: relative; margin: 0 8px 6px; }
.s2-story li img { width: 100%; height: auto; aspect-ratio: 312 / 184; border-radius: 4px; object-fit: cover; object-position: 50% 0; opacity: 0.8; }
.s2-story li i { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font: 500 11px/1 var(--mono); color: #e8eaee; background: #0d0e12; }
/* the section on the desk is the lit one: the others stand in shade, and it keeps full strength,
   its own light, a neutral hairline and a tinted tag. No coloured ring */
.s2-story li.on { z-index: 1; }
.s2-story li.on img { opacity: 1; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.8), 0 0 30px 4px rgba(110, 121, 201, 1); }
.s2-story li.on i { color: #f0f1f4; background: #6e79c9; }
/* the link from the desk to the lit slot: 58 of caption, two and a half pictures down */
.s2-story::before {
  content: '';
  position: absolute;
  left: -36px;
  top: calc(69px + (100cqw - 16px) * 1.4744);
  z-index: 3;
  width: 46px;
  height: 2px;
  background: #929ad6;
  box-shadow: 0 0 8px rgba(110, 121, 201, 0.95);
}
.s2-story > .bead { left: -16px; top: calc(70px + (100cqw - 16px) * 1.4744); }

/* ── M · review and release ── */

.s2-review { --show-end: 78px; --lede-w: 444px; --haze: radial-gradient(76.4% 460px at 50% 700px, rgba(226, 190, 110, 0.1), transparent 70%); }
.s2 .s2-zones { display: grid; grid-template-columns: minmax(0, 292fr) minmax(0, 532fr) minmax(0, 336fr); column-gap: 44px; margin-top: 56px; }
.s2-zones > li { position: relative; min-width: 0; }
.s2-zones > li > .bead { left: -22px; top: 369px; }
.s2-zh b { display: block; font: 500 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #9aa5b8; }
.s2-zh span { display: block; margin-top: 8px; font-size: 20px; line-height: 1.5; letter-spacing: -0.015em; color: var(--ivory-mid); }
.s2-zones figure { margin-top: 20px; }

/* the made-up client page, on the phone and in the team's window */
.s2-phone {
  width: 100%;
  max-width: 292px;
  height: 598px;
  padding: 10px;
  border-radius: 34px;
  background: #15171d;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 50px 100px -40px #000, 0 0 80px -30px rgba(226, 190, 110, 0.5);
}
.s2-scr { position: relative; height: 100%; overflow: hidden; border-radius: 25px; background: #f6f2ea; color: #1d1a16; }
.s2-site-nav { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: #57504a; }
.s2-site-nav > i:first-child { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font: 500 12px/1 var(--serif); letter-spacing: 0; color: #f6f2ea; background: #1d1a16; }
.s2-site-nav > i:last-child { flex: none; width: 16px; height: 2px; margin-left: auto; background: #1d1a16; box-shadow: 0 5px 0 #1d1a16; }
.s2-site-hero { position: relative; }
.s2-site-hero img { width: 100%; height: 130px; object-fit: cover; object-position: 50% 55%; }
.s2-site-bd { padding: 14px 16px 0; }
.s2-site-hl { font-family: var(--serif); font-size: 25px; line-height: 1.12; letter-spacing: -0.01em; color: #1d1a16; }
.s2-site-tx { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: #57504a; }
.s2-site-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.s2-site-two img { width: 100%; height: 70px; border-radius: 4px; object-fit: cover; object-position: 50% 55%; }
.s2-site-cta { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 12.5px; line-height: 1.35; color: #57504a; }
.s2-site-cta b { display: grid; place-items: center; flex: none; height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; color: #f6f2ea; background: #1d1a16; }
.s2-pin {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  border-radius: 50%;
  vertical-align: 4px;
  font: 600 12px/1 var(--font);
  letter-spacing: 0;
  color: #2b2209;
  background: linear-gradient(to bottom, #f6e2a8, #dcbf74);
  box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(0, 0, 0, 0.45);
}
.s2-site-nav .s2-pin { margin-left: 6px; }
.s2-site-hero .s2-pin { position: absolute; right: 16px; top: 18px; z-index: 3; margin: 0; }
.s2-notebox { position: absolute; left: 14px; right: 14px; top: 404px; z-index: 4; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.s2-notebox span { display: block; font-size: 12px; color: #7a7268; }
.s2-notebox span + span { margin-top: 5px; font-size: 14.5px; line-height: 1.35; color: #1d1a16; }
.s2-dock { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px 10px 12px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08); }
.s2-dock span { display: grid; place-items: center; height: 36px; border-radius: 8px; font-size: 13px; color: #1d1a16; background: #ece6da; }
.s2-dock span.pri { color: #fff; background: #1d1a16; }
.s2-dock span.out { background: #fff; box-shadow: inset 0 0 0 1.5px #1d1a16; }

.s2-rvw { display: grid; grid-template-columns: minmax(0, 1fr) 232px; min-height: 598px; overflow: hidden; border-radius: 12px; background: #0f1116; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 50px 100px -40px #000; }
.s2-pgw { position: relative; overflow: hidden; background: #f6f2ea; color: #1d1a16; }
.s2-pgw .s2-site-hero img { height: 190px; }
.s2-pgw .s2-site-hero .s2-pin { right: 18px; top: 22px; }
.s2-pgw .s2-site-hl { font-size: 27px; }
.s2-pgw .s2-site-tx { font-size: 13px; }
.s2-pgw .s2-site-two img { height: 96px; }
.s2-rail { display: flex; flex-direction: column; gap: 9px; padding: 14px 12px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08); }
.s2-rail-t { font-size: 13px; font-weight: 600; color: #e8eaee; }
.s2-modes { display: grid; gap: 5px; }
.s2-modes span { display: flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; color: #d6d8dd; background: rgba(255, 255, 255, 0.07); }
.s2-modes span.on { color: #f0f1f4; background: rgba(110, 121, 201, 0.4); }
.s2-ncard { padding: 9px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.s2-q { display: flex; gap: 7px; font-size: 13px; line-height: 1.35; color: #e8eaee; }
.s2-q i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; font-size: 10px; font-weight: 600; color: #2b2209; background: #e9cf8a; }
.s2-an { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12.5px; line-height: 1.3; color: #babdc3; }
.s2-an + .s2-an { margin-top: 5px; }
.s2-ncard .s2-chip { min-height: 20px; padding: 0 8px; font-size: 11.5px; }
.s2-round { padding: 10px; border-radius: 8px; font-size: 13px; line-height: 1.35; color: #e6e3ff; background: rgba(120, 110, 220, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.s2-round i { display: block; height: 5px; margin-top: 8px; border-radius: 999px; background: #b6b0ff; }
.s2-rail .bt { height: auto; min-height: 34px; margin-top: auto; padding: 9px 10px; font-size: 12.5px; text-align: center; white-space: normal; }

.s2-dpl { display: flex; flex-direction: column; gap: 9px; min-height: 598px; padding: 16px; }
.s2-dpl-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.s2-fr2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s2-fr2 p > span:first-child { display: block; font-size: 11.5px; color: #babdc3; }
.s2-mini { position: relative; display: block; height: 92px; margin-top: 5px; overflow: hidden; border-radius: 5px; background: #f6f2ea; }
.s2-mini img { width: 100%; height: 46px; object-fit: cover; object-position: 50% 55%; }
.s2-mini::before { content: ''; position: absolute; left: 8px; top: 55px; width: 60%; height: 7px; border-radius: 2px; background: #1d1a16; }
.s2-mini::after { content: ''; position: absolute; left: 8px; top: 69px; width: 80%; height: 4px; border-radius: 2px; background: #b9b0a3; box-shadow: 0 9px 0 #b9b0a3; }
/* the proposed version is the lit one: a warm light, a neutral hairline and a warm caption */
.s2-fr2 .new > span:first-child { color: #f6e6b8; }
.s2-fr2 .new .s2-mini { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 0 22px 2px rgba(230, 180, 80, 0.95); }
.s2-fr2 .new .s2-mini::before { width: 46%; }
.s2-dpl .s2-chips { gap: 6px; }
.s2-sx { padding: 10px 11px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.s2-sx-t { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: #e8eaee; }
.s2-kd { display: flex; flex: none; gap: 5px; margin-left: auto; }
.s2-kd span { display: grid; place-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 11.5px; color: #babdc3; background: rgba(255, 255, 255, 0.08); }
.s2-kd span.k { font-weight: 500; color: #0f2a1d; background: #8fd3ad; }
.s2-kd span.d { font-weight: 500; color: #3a0f0f; background: #e79a9a; }
.s2-df { margin-top: 7px; font-size: 12.5px; line-height: 1.7; color: #babdc3; }
.s2-df del,
.s2-df ins { display: table; padding: 0 3px; border-radius: 3px; }
.s2-df del { color: #eab0ae; background: rgba(193, 112, 112, 0.24); }
.s2-df ins { color: #bfe6cf; text-decoration: none; background: rgba(106, 160, 136, 0.3); }
.s2-fin { display: grid; gap: 7px; margin-top: auto; padding-top: 6px; }
.s2-fin .bt { min-height: 36px; }
.s2-fin small { font-size: 12px; text-align: center; color: #babdc3; }

/* ── N · the campaign board (swarm/) ── */

.s2-swarm { --show-end: 44px; --haze: radial-gradient(104% 50% at 50% 62%, rgba(94, 106, 210, 0.5), rgba(94, 106, 210, 0.12) 55%, transparent 76%); }
.s2 .s2-stages { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 28px; font-size: 14px; color: #dedcd7; }
.s2-stages::before { content: ''; position: absolute; left: 24px; right: 24px; top: calc(50% - 0.75px); z-index: -1; height: 1.5px; background: rgba(var(--hy), 0.4); }
.s2-stages li { display: inline-flex; align-items: center; flex: none; gap: 9px; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; white-space: nowrap; background: #121829; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.s2-stages .fc { width: 24px; height: 24px; }
.s2-stages i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 500 11px/1 var(--mono); color: #c3c9f5; background: rgba(94, 106, 210, 0.34); }
.s2-stages li.me { padding-left: 14px; font-weight: 500; color: #2b2209; background: linear-gradient(to bottom, #f6e2a8, #dcbf74); }

/* the board steps out a little further than the head, as it does in the drawing */
.s2-swarm figure { margin: 22px calc(max(var(--pad), (100vw - 1312px) / 2) - max(var(--pad), (100vw - 1248px) / 2)) 0; }
.s2-sww { overflow: hidden; border-radius: 12px; background: #0d0d12; color: #e6e6ea; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px #26262e, 0 50px 110px -40px #000, 0 0 130px -20px rgba(94, 106, 210, 0.85); }
.s2-swarm figcaption { margin-top: 14px; font-size: 13.5px; text-align: center; color: #b4b9c1; }
.s2-sww-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 58px; padding: 10px 24px; box-shadow: inset 0 -1px 0 #1f1f27; }
.s2-sww-top > b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #f2f2f5; }
.s2-sww-top > span { font-size: 13px; color: #9a9aa6; }
.s2-seg { display: flex; margin-left: auto; padding: 3px; border-radius: 8px; background: #16161e; box-shadow: inset 0 0 0 1px #26262e; }
.s2-seg span { display: grid; place-items: center; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: #9a9aa6; }
.s2-seg span.on { color: #fff; background: #5e6ad2; }
.s2-sww-top > .s2-newc { display: grid; place-items: center; height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 500; color: #fff; background: #5e6ad2; }

.s2-sww-row { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 488fr); gap: 16px; padding: 18px 24px 0; }
.s2-card { border-radius: 10px; background: #16161e; box-shadow: inset 0 0 0 1px #26262e; }
.s2-kk { font-size: 10.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a96; }
.s2-hz { position: relative; padding: 16px 18px 12px; }
.s2-hz-h { margin-top: 5px; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; color: #f2f2f5; }
/* first emails #5e6ad2, follow-ups #29a58c: the two colours stay, with their legend */
.s2-lgd { position: absolute; right: 18px; top: 18px; display: flex; gap: 14px; font-size: 12px; color: #b4b4c0; }
.s2-lgd span { display: inline-flex; align-items: center; gap: 6px; }
.s2-lgd span::before { content: ''; width: 9px; height: 9px; border-radius: 2px; background: #5e6ad2; }
.s2-lgd span + span::before { background: #29a58c; }
.s2 .s2-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; height: 100px; margin-top: 12px; box-shadow: inset 0 -1px 0 #2e2e38; }
.s2-bars li { --f: 0; --t: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; }
.s2-bars li::before { content: ''; position: static; flex: none; width: 22px; height: calc(var(--f) * 1px); border-radius: 4px 4px 0 0; opacity: 1; background: #29a58c; }
.s2-bars li::after { content: ''; flex: none; width: 22px; height: calc(var(--t) * 1px); background: #5e6ad2; }
.s2-bars li.none::before { height: 2px; border-radius: 0; background: #3b3b47; }
.s2-bars li.none::after { content: none; }
.s2-bars li:nth-child(3) { --f: 14; --t: 80; }
.s2-bars li:nth-child(4) { --f: 24; --t: 68; }
.s2-bars li:nth-child(5) { --f: 30; --t: 60; }
.s2-bars li:nth-child(6) { --f: 36; --t: 34; }
.s2-bars li:nth-child(7) { --f: 42; --t: 14; }
.s2-bars li:nth-child(10) { --f: 34; --t: 14; }
.s2-bars li:nth-child(11) { --f: 22; --t: 14; }
/* the tag starts over its own bar and runs right, into the empty days, never back over the bar before it */
.s2-bars li b { order: -1; align-self: flex-start; margin-bottom: 1px; margin-left: calc(50% - 11px); font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; white-space: nowrap; color: #f2f2f5; }
.s2 .s2-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); margin-top: 7px; font-size: 11.5px; line-height: 1.4; text-align: center; white-space: nowrap; color: #a4a4b0; }
.s2 .s2-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.s2-tiles li { display: flex; flex-direction: column; padding: 13px 14px; border-radius: 10px; background: #16161e; box-shadow: inset 0 0 0 1px #26262e; }
.s2-tiles b { display: block; margin-top: auto; padding-top: 9px; font-size: 25px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #f2f2f5; }
.s2-tiles small { margin-left: 5px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: #9a9aa6; }
.s2-tiles li.amb { background: rgba(245, 166, 35, 0.16); box-shadow: none; }
.s2-tiles li.grn { background: rgba(76, 175, 80, 0.16); box-shadow: none; }

.s2-lanes { margin: 16px 24px 22px; padding: 12px 16px 6px; }
.s2-gr { display: grid; grid-template-columns: minmax(190px, 1fr) repeat(7, minmax(58px, 72px)) minmax(132px, 150px) 12px repeat(3, minmax(58px, 76px)); align-items: center; column-gap: 6px; }
.s2-gr.bands { min-height: 22px; }
.s2-gr.bands span:first-child { grid-column: 2 / 10; }
.s2-gr.bands span + span { grid-column: 11 / 14; }
.s2-gr.cols { min-height: 24px; }
.s2-gr.cols span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; color: #8a8a96; }
.s2-gr.cols span:first-child { text-align: left; }
.s2-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 30px; margin-top: 2px; font-size: 12.5px; color: #9a9aa6; }
.s2-pl { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.s2-pl.snd { color: #b9e6bb; background: rgba(76, 175, 80, 0.22); }
.s2-pl.mine { color: #fbd89a; background: rgba(245, 166, 35, 0.2); }
.s2-pl.wip { color: #c7c7d1; background: rgba(255, 255, 255, 0.09); }
.s2-pl .dot { width: 6px; height: 6px; }
.s2-lrow { padding-bottom: 2px; box-shadow: inset 0 -1px 0 #1f1f27; }
.s2-lrow.last { box-shadow: none; }
.s2-gr.lane { min-height: 42px; }
.s2-nmc { min-width: 0; }
.s2-nmc b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #f2f2f5; }
.s2-nmc span { display: block; font-size: 12px; line-height: 1.3; color: #9a9aa6; }
.s2-cl { display: grid; place-items: center; height: 36px; border-radius: 7px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: #8a8a96; background: #1c1c25; }
.s2-cl.sm { font-size: 11.5px; letter-spacing: -0.02em; }
.s2-cl.dn { color: #a5dba7; background: rgba(76, 175, 80, 0.19); }
/* one lit cell per campaign: where it is stuck, or moving */
.s2-cl.fr { color: #fff; background: #5e6ad2; box-shadow: 0 0 22px -2px rgba(94, 106, 210, 0.95); }
.s2-cl.sk { color: #6a6a78; background: none; }
.s2-cl.rw { justify-items: start; padding: 0 12px; font-weight: 500; color: #d5d8fb; background: rgba(94, 106, 210, 0.2); }
.s2-cl.rw.amb { color: #fbd89a; background: rgba(245, 166, 35, 0.16); }
.s2-cl.res { color: #e6e6ea; background: none; }
.s2-cl.res.g { color: #a5dba7; }
.s2-lsub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; min-height: 24px; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: #b4b4c0; }
.s2-wh { display: grid; place-items: center; height: 18px; padding: 0 7px; border-radius: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #c7c7d1; background: #26262e; }
.s2-wh.y { color: #2b1d05; background: #f5a623; }
.s2-act { display: grid; place-items: center; height: 24px; margin-left: auto; padding: 0 11px; border-radius: 7px; font-size: 12px; font-weight: 600; color: #fff; background: #5e6ad2; }

/* ── a tight desktop, 1200 to 1339: the drawn compositions, with a little less air ── */

@media (min-width: 1200px) and (max-width: 1339px) {
  .s2-stair .s2-step { padding-inline: 12px; }
  .s2-step-rank { letter-spacing: 0.18em; }
  .s2-panels > .s2-panel { padding: 20px; }
  .s2-hire { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .s2-hire dl > div { grid-template-columns: 64px minmax(0, 1fr); }
  .s2-pi > p { grid-template-columns: 44px minmax(0, 1fr) 62px 62px; column-gap: 8px; }
  .s2-line li { padding-inline: 7px; }
  .s2-line li + li { margin-left: 8px; }
  .s2-line li + li::before { left: -8px; width: 8px; }
  /* the phone keeps its real width; the two windows share what is left */
  .s2 .s2-zones { grid-template-columns: 292px minmax(0, 532fr) minmax(0, 336fr); column-gap: 32px; }
  .s2-zones > li > .bead { left: -16px; }
  .s2-rvw { grid-template-columns: minmax(0, 1fr) 208px; }
  .s2-pgw .s2-site-nav { gap: 7px; padding: 0 12px; letter-spacing: 0.06em; }
  .s2-tiles li { padding: 12px 10px; }
  .s2-tiles b { font-size: 22px; }
  .s2 .s2-days { font-size: 11px; }
  .s2-vs-s .s2-rows { max-width: 310px; }
}

/* ── below 1200: the pieces stack ── */

@media (max-width: 1199px) {
  .s2 .show-head { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .s2 .show-head .lede { padding-bottom: 0; }

  .s2-ladder { --haze: radial-gradient(70% 40% at 80% 16%, rgba(var(--hy), 0.1), transparent 72%), radial-gradient(62.5% 420px at 22.2% calc(100% - 44px), rgba(70, 110, 220, 0.12), transparent 70%); }
  .s2-versus { --haze: radial-gradient(90% 34% at 60% 70%, rgba(200, 120, 90, 0.12), transparent 70%); }
  .s2-learn { --show-end: var(--show-y); --haze: radial-gradient(70% 420px at 24% 420px, rgba(220, 70, 70, 0.16), rgba(220, 70, 70, 0.04) 55%, transparent 75%); }
  .s2-table { --haze: radial-gradient(90% 40% at 50% 46%, rgba(110, 121, 201, 0.2), transparent 70%); }
  .s2-review { --haze: radial-gradient(90% 44% at 50% 56%, rgba(226, 190, 110, 0.1), transparent 70%); }

  /* H: the stair becomes eight tiles, two across, with you as the last */
  .s2-ladder-in { display: block; }
  .s2-ladder-head { max-width: none; }
  .s2-thread { display: none; }
  .s2-stair > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 14px; margin-top: 40px; padding-top: 0; }
  .s2-stair .s2-step { display: grid; grid-template-columns: 78px minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 16px; min-height: 0; margin-inline: 0; padding: 18px 18px 16px; border-radius: 8px; background: linear-gradient(to bottom, rgba(255, 236, 196, calc(var(--a) * 0.34)), rgba(255, 236, 196, calc(var(--a) * 0.14))), #0a0e17; }
  .s2-fig::before { inset: -26%; opacity: 0.4; }
  .s2-step:nth-child(n) { --f: 60px; }
  .s2-step:nth-child(2) { --f: 30px; }
  .s2-step > * { grid-column: 2; }
  .s2-step > .s2-fig { position: static; grid-column: 1; grid-row: 1 / span 7; align-self: start; justify-self: center; margin: 2px 0 0; transform: none; }
  .s2 .s2-caps { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 0; }
  .s2-caps li { white-space: nowrap; }
  .s2-stair .s2-step-you {
    position: static;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 18px;
    padding: 18px 18px 18px 32px;
    border-radius: 8px;
    background: linear-gradient(to bottom, rgba(255, 236, 196, 0.2), rgba(255, 236, 196, 0.08)), #0a0e17;
    box-shadow: inset 0 1.5px 0 rgba(255, 250, 240, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  }
  .s2-step-you p { text-align: left; }
  .s2-step-you b { margin-right: 0; }

  /* I: one above the other, the badge between them */
  .s2-vs { grid-template-columns: minmax(0, 1fr); }
  .s2-vs::before { display: none; }
  .s2-vs-badge { position: static; justify-self: center; margin: 16px 0; }
  .s2-vs-a,
  .s2-vs-s { min-height: 0; padding-bottom: 14px; }

  /* J: the Synth as a banner, then the four groups, each under its own heading */
  .s2-learn-body { grid-template-columns: minmax(0, 1fr); row-gap: 30px; margin-top: 36px; }
  .s2-who { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); grid-template-rows: 1fr auto auto; column-gap: 28px; margin-bottom: 0; padding-right: 0; }
  .s2-who > * { grid-column: 2; }
  .s2-who > .s2-who-pic { position: static; grid-column: 1; grid-row: 1 / span 3; width: 100%; height: 310px; -webkit-mask-image: radial-gradient(closest-side, #000 50%, rgba(0, 0, 0, 0.6) 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, rgba(0, 0, 0, 0.6) 76%, transparent 100%); }
  .s2-who-name { align-self: end; }
  .s2-journal { align-self: start; max-width: 560px; }
  .s2-fan,
  .s2-memory,
  .s2-group::before { display: none; }
  .s2-groups { grid-auto-rows: auto; }
  .s2-group { grid-template-columns: minmax(0, 1fr); row-gap: 12px; min-height: 0; padding-block: 14px; }
  .s2-gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 0; }
  .s2-gh h3::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 12px; border-radius: 50%; background: rgb(var(--t)); }
  .s2-gh p { margin-top: 0; }

  /* K: three panels in one column, the bead pointing down */
  .s2 .s2-panels { grid-template-columns: minmax(0, 560px); justify-content: center; gap: 40px; }
  .s2-panels > .s2-panel { min-height: 0; }
  .s2-panel > .bead { left: 50%; top: -20px; transform: rotate(90deg); }
  .s2-panel > .s2-inset.btm { margin-top: 16px; }

  /* L: the window, then the storyboard under it, cut after the lit section */
  .s2-table-in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .s2-table-head,
  .s2-ltw,
  .s2-story { grid-area: auto; }
  .s2-ltw { margin-left: 0; }
  .s2-story { width: 100%; max-width: 400px; justify-self: center; }
  .s2-story::before { content: none; }
  .s2-story > .bead { display: none; }
  .s2-story-in {
    position: relative;
    inset: auto;
    max-height: calc(86px + (100cqw - 16px) * 2.07);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - (100cqw - 16px) * 0.32), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - (100cqw - 16px) * 0.32), transparent);
  }

  /* M: three numbered rows, the screen beside its heading */
  .s2 .s2-zones { grid-template-columns: minmax(0, 1fr); row-gap: 52px; }
  .s2-zones > li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; column-gap: 32px; }
  .s2-zones > li > .bead { display: none; }
  .s2-zones figure { margin-top: 0; }
  .s2-rvw { max-width: 560px; }
  .s2-dpl { max-width: 420px; min-height: 0; }
  .s2-fin { margin-top: 6px; }

  /* N: the steps wrap, the board keeps its seven stages and drops the columns past Send */
  .s2 .s2-stages { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .s2-stages::before { content: none; }
  .s2-sww-top { padding-inline: 16px; }
  .s2-sww-top > span { display: none; }
  .s2-sww-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 16px 0; }
  .s2-lanes { margin: 12px 16px 16px; padding: 10px 12px 4px; }
  .s2-gr { grid-template-columns: minmax(150px, 1fr) repeat(7, minmax(54px, 72px)); }
  .s2-gr.bands span:first-child { grid-column: 2 / 9; }
  .s2 .s2-x { display: none; }
}

@media (max-width: 899px) {
  .s2-ltw-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .s2-ltw-pages { display: none; }
  .s2-zones > li { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
}

/* ── the phone ── */

@media (max-width: 760px) {
  .s2-stair > ol { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .s2-stair .s2-step { grid-template-columns: 70px minmax(0, 1fr); column-gap: 14px; padding: 16px 16px 14px; }
  .s2-step:nth-child(2) { --f: 28px; }
  .s2-stair .s2-step-you { padding-left: 26px; }
  .s2-ladder-in > .s2-note { margin-top: 18px; }

  .s2-vs { margin-top: 40px; }
  .s2-vs-a,
  .s2-vs-s { padding: 22px 20px 10px; }
  .s2-vs-top { min-height: 0; padding-bottom: 14px; }
  .s2-rows li { font-size: 15px; }
  .s2-vs-s .s2-rows { max-width: none; }
  .s2-vs-top .s2-chips { flex-direction: column; align-items: flex-start; }
  /* the figure moves up beside the name, and is gone before the rows begin */
  .s2-figure {
    right: -26px;
    top: 6px;
    bottom: auto;
    width: 160px;
    height: 218px;
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 88%);
            mask-image: linear-gradient(to bottom, #000 46%, transparent 88%);
  }
  .s2-vs-s::before {
    background:
      linear-gradient(to bottom, rgba(4, 6, 12, 0.5) 0, rgba(4, 6, 12, 0.56) 110px, rgba(4, 6, 12, 0.93) 196px),
      linear-gradient(to bottom, rgba(226, 150, 90, 0.16), rgba(226, 150, 90, 0.06) 40%, rgba(4, 6, 12, 0.4) 100%);
  }
  .s2-rows li { text-wrap: balance; }

  .s2-learn-body { margin-top: 28px; }
  .s2-who { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: 1fr 1fr auto; column-gap: 18px; }
  .s2-who > .s2-who-pic { grid-row: 1 / span 2; height: 176px; }
  .s2-who-name { font-size: 52px; }
  .s2-who-role { align-self: start; }
  .s2-journal { grid-column: 1 / -1; max-width: none; margin-top: 18px; }
  .s2-gh { display: block; }
  .s2-gh p { margin-top: 4px; }
  .s2-group ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .s2-group ul li { gap: 8px; padding: 12px 14px; }

  .s2 .s2-panels { margin-top: 40px; }
  .s2-panels > .s2-panel { padding: 20px 18px; }
  .s2-hire { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .s2-hire dl > div { grid-template-columns: 66px minmax(0, 1fr); }
  .s2-pi > p { grid-template-columns: 44px minmax(0, 1fr) 64px 64px; column-gap: 8px; }
  .s2-tools li { grid-template-columns: 36px minmax(0, 1fr); row-gap: 7px; }
  .s2-tools li::before { grid-row: 1 / span 2; align-self: start; }
  .s2-tools li > .s2-chip { grid-column: 2; justify-self: start; }
  .s2-line li { padding-inline: 7px; }
  .s2-line li + li { margin-left: 8px; }
  .s2-line li + li::before { left: -8px; width: 8px; }

  /* L: cropped to the Section desk. The pages column and the last two tabs go */
  .s2-table-in { row-gap: 32px; }
  .s2-ltw-bar { padding: 10px 14px; }
  .s2-ltw-bar > b + span { display: none; }
  .s2-ltw-bar .s2-chip { margin-left: 0; }
  .s2-ltw-tabs { gap: 3px; padding: 0 10px; }
  .s2-ltw-tabs span { padding: 0 7px; font-size: 12.5px; }
  .s2-ltw-tabs span:nth-last-child(-n+2) { display: none; }
  .s2-desk { padding: 14px 14px 16px; }
  .s2-desk-h { flex-wrap: wrap; }
  .s2-desk-h .bt { margin-left: 0; }
  .s2-chosen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .s2-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .s2-vf > :first-child { height: auto; aspect-ratio: 16 / 9; }
  .s2-story { max-width: none; }
  /* a tag under its picture, not over a corner of it: at this size it would hide part of the design */
  .s2-story li { margin-bottom: 10px; }
  .s2-story li i { position: static; margin-top: 6px; }
  .s2-story-in { max-height: calc(200px + (100cqw - 16px) * 2.07); }

  /* M: one screen under another; the team's window itself stacks, page over rail */
  .s2 .s2-zones { row-gap: 44px; margin-top: 40px; }
  .s2-phone { justify-self: center; }
  .s2-rvw { grid-template-columns: minmax(0, 1fr); min-height: 0; max-width: none; }
  .s2-pgw { padding-bottom: 18px; }
  .s2-pgw .s2-site-hero img { height: 150px; }
  .s2-pgw .s2-site-two,
  .s2-pgw .s2-site-cta { display: none; }
  .s2-rail { box-shadow: none; }
  .s2-rail .bt { margin-top: 2px; }
  .s2-dpl { max-width: none; }

  /* N: each campaign becomes a card: its name, seven pips with the lit one named, its next move */
  .s2 .s2-stages { margin-top: 24px; }
  .s2-sww-top { padding: 12px; }
  .s2-sww-top > .s2-newc { display: none; }
  .s2-seg { width: 100%; margin-left: 0; }
  .s2-seg span { flex: 1; padding: 0 4px; font-size: 12.5px; }
  .s2-sww-row { padding: 12px 12px 0; }
  .s2-hz { padding: 14px 14px 10px; }
  .s2-hz-h { font-size: 20px; }
  .s2-lgd { position: static; margin-top: 8px; }
  .s2-bars li::before,
  .s2-bars li::after { width: 14px; }
  .s2 .s2-days { font-size: 11px; }
  .s2-days i { display: none; }
  .s2 .s2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s2-lanes { margin: 12px; padding: 8px 12px 4px; }
  .s2-gr.bands,
  .s2-gr.cols { display: none; }
  .s2-grp { margin-top: 6px; }
  .s2-gr.lane { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; padding-top: 4px; }
  .s2-nmc { flex: 0 0 100%; margin-bottom: 4px; }
  .s2-cl { display: flex; align-items: center; justify-content: center; flex: 0 0 22px; height: 26px; border-radius: 6px; font-size: 0; }
  .s2-cl:not(.dn):not(.fr) { background: #3d3d4e; }
  .s2-cl.dn { background: rgba(76, 175, 80, 0.5); }
  .s2-cl.fr { flex: 0 1 auto; padding: 0 10px; font-size: 12px; letter-spacing: 0; box-shadow: none; }
  .s2-cl.fr::before { content: attr(data-s) ' · '; font-weight: 500; white-space: pre; }
  .s2-lsub { padding-block: 5px 6px; }
  .s2-act { margin-left: 0; }
  .s2-swarm figcaption { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE SHOWCASE, ROUND THREE (task #8276, from the drawings in KB #8637)
   Seven more designed sections on hyperionos/, each standing where a plain
   section stood: O the board (#pipeline), U a process turned into work
   (#delivery), P one inbox (#follow-up), T the money (#reporting), Q the
   library (#knowledge), S be the CEO (#decisions), R they keep working
   (#the-staff).
   They stand on round one's kit above and do not redefine it: the .show
   shell and its sky, .show-head, the type steps, the glass (.gl), a call
   that is yours (.call), a face (.fc, .faces), .you, .lb, .bt, .dot, .bead,
   svg.threads. Everything added here is scoped to .s3, the class all seven
   carry. Shared parts are named s3-*; a section's own parts carry its letter
   (s3o-, s3u-, s3p-, s3t-, s3q-, s3s-, s3r-), so no two sections can restyle
   each other. Three widths, as in round two: 1200 and up is the drawn
   composition, below it the pieces stack, and 760 and down is the phone.
   Colour sits on tinted surfaces and light; the only edges are neutral
   hairlines. Nothing here is interactive, so nothing has a hover state.
   ══════════════════════════════════════════════════════════════════════════ */

.s3 {
  --h: 62px;                  /* drawn a step under round one's heading, as round two was */
  --h-vw: 4.3vw;
}

/* the page's paragraph rules stop at the door, as its list rules already do */
.s3 :where(p, dl, dt, dd, figure, h3) { margin: 0; padding: 0; }
.s3 :where(p) { color: inherit; }
.s3 :where(h3) { font-size: inherit; font-weight: inherit; }
.s3 .bt { justify-content: center; line-height: 1.2; }
.s3 .lb { line-height: 1.35; }
.s3 > figure { margin-top: clamp(26px, 2.9vw, 40px); }

/* a product window: the app's own dark surface, lit from behind */
.s3-win { overflow: hidden; border-radius: 12px; color: #e6e6ea; background: rgba(11, 13, 21, 0.94); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 50px 110px -40px #000, 0 0 130px -28px rgba(94, 106, 210, 0.75); }
.s3-win-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 56px; padding: 10px 22px; white-space: nowrap; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
.s3-win-top > b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #f2f2f5; }
.s3-win-top > span { font-size: 13px; color: #a8a8b4; }
.s3-kk { font-size: 10.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: #9c9ca8; }
.s3-seg { display: flex; 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.08); }
.s3-seg span { display: grid; place-items: center; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: #a8a8b4; }
.s3-seg span.on { color: #fff; background: #5e6ad2; }
.s3-wbt { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border-radius: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; color: #fff; background: #5e6ad2; }
.s3-wbt.q { font-weight: 400; color: #dcdce4; background: rgba(255, 255, 255, 0.08); }

/* a person who is not a Synth: initials on a tinted disc */
.s3-ini { --t: 126, 138, 168; display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: #e9ebf5; background: rgba(var(--t), 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
/* a channel's two letters */
.s3-mono { --t: 126, 138, 168; display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 6px; font: 600 9.5px/1 var(--mono); letter-spacing: 0.02em; color: #fff; background: rgba(var(--t), 0.55); }

/* a small tag inside a window, and a chip on the glass */
.s3-tg { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; line-height: 1; white-space: nowrap; color: #d8d8e2; background: rgba(255, 255, 255, 0.08); }
.s3-tg.gold { color: #f6e6b8; background: rgba(150, 118, 44, 0.45); }
.s3-tg.ok { color: #c9ecd9; background: rgba(106, 160, 136, 0.28); }
.s3-tg.vio { color: #dcd8ff; background: rgba(120, 110, 220, 0.36); }
.s3-tg.teal { color: #dff6f2; background: rgba(60, 160, 152, 0.36); }
.s3-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; line-height: 1.2; white-space: nowrap; color: #e4e2dd; background: rgba(255, 255, 255, 0.1); }
.s3-chip.ok { color: #c9ecd9; background: rgba(106, 160, 136, 0.3); }
.s3-chip.gold { color: #f6e6b8; background: rgba(150, 118, 44, 0.5); }
.s3-chip.vio { color: #dcd8ff; background: rgba(120, 110, 220, 0.4); }
.s3-chip .dot { width: 6px; height: 6px; }

/* a numbered beat: 01, then its title */
.s3-pn { font: 500 12px/1 var(--mono); letter-spacing: 0.16em; color: #9aa5b8; }
.s3-pt { margin-top: 10px; font-size: 23px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ivory-mid); }

/* words in the serif voice: something a person said or wrote */
.s3-voice { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; color: #efe9db; }
.s3-voice em { color: #f6deaa; }

/* below 1200 the head stacks: the three lines under the heading, not beside it */
@media (max-width: 1199px) {
  .s3 .show-head { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .s3 .show-head .lede { padding-bottom: 0; }
}

/* ── O · the board ── */

/* the haze is the drawing's, and it is gone by the foot so the next section starts on clean ground */
.s3-board { --show-end: 52px; --haze: linear-gradient(to top, var(--ground), rgba(2, 6, 13, 0) 96px), radial-gradient(104% 63% at 50% 65%, rgba(94, 106, 210, 0.46), rgba(94, 106, 210, 0.11) 55%, transparent 76%); }

/* the window steps out a little further than the head, as it does in the drawing */
.s3-board > figure { margin: clamp(28px, 3.2vw, 46px) calc(max(var(--pad), (100vw - 1312px) / 2) - max(var(--pad), (100vw - 1248px) / 2)) 0; }
.s3-board .s3-seg span { display: inline-flex; align-items: center; gap: 5px; }
.s3-board .s3-seg svg.i { width: 12px; height: 12px; opacity: 0.8; }
.s3-board .s3-win-top > .s3-wbt { gap: 6px; }
.s3-board .s3-wbt svg.i { width: 13px; height: 13px; stroke-width: 2.4; }

/* the board on the left, the open deal on the right, one window */
.s3o-body { display: grid; grid-template-columns: minmax(0, 878fr) minmax(0, 434fr); }

/* four stages: a dot, the name, how many, and what they are worth. A card is painted in the
   order it is written (position: static), so the lit card's halo falls behind its neighbours' words */
.s3 .s3o-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px 20px 20px; }
.s3 .s3o-col { position: static; min-width: 0; padding: 12px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.s3o-col:nth-child(1) { --c: 140, 159, 208; }
.s3o-col:nth-child(2) { --c: 160, 168, 255; }
.s3o-col:nth-child(3) { --c: 110, 205, 196; }
.s3o-col:nth-child(4) { --c: 106, 190, 150; }
.s3o-hd { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 3px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; color: #f2f2f5; }
.s3o-hd i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 8px rgba(var(--c), 0.7); }
.s3o-hd em { font-weight: 500; color: #9c9ca8; }
.s3o-hd span { margin-left: auto; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: #c2c2ce; }
.s3 .s3o-lead { position: static; margin-top: 8px; padding: 10px 11px; border-radius: 8px; background: #171a27; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.s3o-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.s3o-who b { font-size: 13.5px; font-weight: 600; white-space: nowrap; color: #f2f2f5; }
.s3o-col .s3-ini { --t: var(--c); }
.s3o-amt { display: flex; align-items: center; gap: 6px; height: 22px; margin-top: 8px; }
.s3o-amt em { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; color: #d2d2dc; }
/* the one lit card: the deal that is open. Its ring is light, drawn as a shadow */
.s3 .s3o-lead.on { background: #222744; box-shadow: inset 0 0 0 1.5px #aab4ff, 0 0 34px -2px rgba(110, 124, 255, 0.95), 0 0 80px -10px rgba(110, 124, 255, 0.6); }

/* the open deal: who, what the qualifier made of it, what it suggests, everything said so far */
.s3o-deal { position: relative; z-index: 1; min-width: 0; padding: 20px 24px 19px; background: rgba(22, 26, 42, 0.97); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16), -34px 0 60px -24px rgba(0, 0, 0, 0.9); }
.s3o-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 21px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: #f4f4f7; }
.s3o-nm .s3-tg { font-weight: 600; letter-spacing: 0; }
.s3o-deal .s3-kk { line-height: 1.5; }
.s3o-sub { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: #b4b4c0; }
.s3o-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.s3o-as { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.s3o-score { text-align: center; }
.s3o-score b { display: block; font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--ivory-mid); }
.s3o-score span { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #9c9ca8; }
.s3 .s3o-warn li { display: flex; gap: 9px; font-size: 13px; line-height: 1.4; color: #dcdce4; }
.s3 .s3o-warn li + li { margin-top: 6px; }
.s3o-warn svg.i { width: 13px; height: 13px; margin-top: 2.5px; color: #ecd6a0; }
/* a suggestion: the window's own blue, as a surface */
.s3o-sgs { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.s3o-sg { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: rgba(94, 106, 210, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.s3o-say { margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: #eaeaf0; }
.s3o-acts { display: flex; gap: 7px; margin-top: auto; padding-top: 10px; }
.s3o-acts .s3-wbt { height: 26px; padding: 0 11px; border-radius: 6px; font-size: 12px; }
.s3o-acts .s3-wbt.q { background: rgba(255, 255, 255, 0.09); }
.s3o-tl { margin-top: 16px; }
.s3 .s3o-log { margin-top: 4px; }
.s3 .s3o-log li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 8px 0; font-size: 13px; line-height: 1.4; color: #dcdce4; }
.s3 .s3o-log li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.s3o-log em { display: block; font-size: 12px; color: #babdc3; }

/* ── a tight desktop, 1200 to 1339: the same picture, the deal a little narrower so four stages still fit ── */

@media (min-width: 1200px) and (max-width: 1339px) {
  .s3o-body { grid-template-columns: minmax(0, 1fr) calc(340px + (100vw - 1200px) * 0.43); }
  .s3 .s3o-cols { gap: 8px; padding: 16px 12px 18px; }
  .s3 .s3o-col { padding: 12px 5px; }
  .s3o-hd { gap: clamp(5px, calc(5px + (100vw - 1200px) * 0.05), 8px); padding: 0 2px; }
  .s3 .s3o-lead { padding: 10px 9px; }
  .s3o-who { gap: 8px; }
  .s3o-deal { padding-inline: 18px; }
  .s3o-pills { gap: 6px; }
  .s3o-pills .s3-tg { padding: 0 8px; }
  .s3o-as { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 14px; }
}

/* ── below 1200: the deal moves under the board ── */

@media (max-width: 1199px) {
  .s3o-body { grid-template-columns: minmax(0, 1fr); }
  .s3 .s3o-cols { padding: 16px 16px 18px; }
  .s3o-deal { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 -24px 44px -24px rgba(0, 0, 0, 0.8); }
}

/* and opens out, two columns wide: who she is and the assessment on the left, the two
   suggestions on the right, everything so far across the foot, read left to right */
@media (min-width: 761px) and (max-width: 1199px) {
  .s3o-deal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "nm sgs" "sub sgs" "pills sgs" "as sgs" "tl tl"; column-gap: 16px; padding: 20px 24px 22px; }
  .s3o-nm { grid-area: nm; }
  .s3o-sub { grid-area: sub; }
  .s3o-pills { grid-area: pills; }
  .s3o-as { grid-area: as; }
  .s3o-sgs { grid-area: sgs; margin-top: 0; }
  .s3o-tl { grid-area: tl; margin-top: 18px; }
  .s3 .s3o-log { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin-top: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
  .s3 .s3o-log li { display: block; padding: 10px 0 0; }
  .s3 .s3o-log li + li { box-shadow: none; }
  .s3o-log li > p:first-child { display: flex; align-items: baseline; gap: 8px; }
  .s3o-log em { display: inline; }
}

/* the top bar runs out of room: the count goes under the name */
@media (max-width: 999px) {
  .s3-board .s3-win-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "t seg btn" "s seg btn"; gap: 1px 12px; padding-inline: 16px; }
  .s3-board .s3-win-top > b { grid-area: t; line-height: 1.25; }
  .s3-board .s3-win-top > span { grid-area: s; line-height: 1.35; }
  .s3-board .s3-seg { grid-area: seg; }
  .s3-board .s3-win-top > .s3-wbt { grid-area: btn; }
}

/* a narrow tablet: four stages still stand side by side, each a little closer */
@media (min-width: 761px) and (max-width: 899px) {
  .s3-board .s3-win-top > .s3-wbt { display: none; }
  .s3 .s3o-cols { gap: 6px; padding: 12px 10px 14px; }
  .s3 .s3o-col { padding: 10px 6px 6px; }
  .s3o-hd { flex-wrap: wrap; gap: 1px 7px; padding: 0 3px 2px; }
  .s3o-hd span { flex: 0 0 100%; margin-left: 0; padding-left: 15px; }
  .s3 .s3o-lead { padding: 9px 8px; }
  .s3o-who { gap: 7px; }
  .s3o-who b { font-size: 13px; }
  .s3o-col .s3-ini { width: 24px; height: 24px; }
  .s3o-amt .s3-tg { padding: 0 7px; font-size: 11px; }
  .s3o-amt em { font-size: 12px; }
  .s3o-deal { padding: 18px 20px 22px; }
}

/* ── the phone: the four stages as tallies, then the stage the open deal is in, then the deal ── */

@media (max-width: 760px) {
  .s3-board .s3-win-top { padding: 12px 14px; }
  .s3-board .s3-seg,
  .s3-board .s3-win-top > .s3-wbt { display: none; }
  .s3 .s3o-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
  .s3 .s3o-col { display: contents; }
  .s3o-hd { flex-wrap: wrap; gap: 3px 8px; padding: 10px 12px 11px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
  .s3o-hd span { flex: 0 0 100%; margin-left: 0; padding-left: 16px; font-size: 15px; font-weight: 600; color: #f2f2f5; }
  .s3o-col.cur .s3o-hd { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .s3 .s3o-col:not(.cur) .s3o-leads { display: none; }
  .s3 .s3o-leads { grid-column: 1 / -1; order: 1; padding: 2px 8px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
  .s3 .s3o-lead { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 9px 11px; }
  .s3 .s3o-lead.on { box-shadow: inset 0 0 0 1.5px #aab4ff, 0 0 26px -4px rgba(110, 124, 255, 0.9), 0 0 60px -12px rgba(110, 124, 255, 0.55); }
  .s3o-who { flex: 1 1 auto; }
  .s3o-amt { flex: none; gap: 10px; margin-top: 0; }
  .s3o-amt em { min-width: 44px; margin-left: 0; text-align: right; }
  .s3o-deal { padding: 18px 14px 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
  .s3o-as { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 14px; }
}

/* a wide phone has room for the four tallies in one row */
@media (min-width: 600px) and (max-width: 760px) {
  .s3 .s3o-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* the narrowest phones: a card goes back to two lines, the name over its tag and amount */
@media (max-width: 359px) {
  .s3 .s3o-lead { display: block; }
  .s3o-amt { margin-top: 6px; }
  .s3o-amt em { margin-left: auto; }
}

/* ── U · a process turned into work ── */

.s3-machine {
  --show-end: clamp(112px, 11.25vw, 216px);
  --haze:
    radial-gradient(62.5% 52.3% at 48.6% 59.8%, rgba(94, 106, 210, 0.34), rgba(94, 106, 210, 0.08) 55%, transparent 76%),
    radial-gradient(36.1% 35.5% at 17.4% 56.1%, rgba(var(--hy), 0.1), transparent 72%);
}
/* the city is cut to its lower half and kept under the cards: no lit window behind glass */
.s3-machine > .show-city { --city-h: clamp(104px, 10.42vw, 200px); background-size: max(100%, 1000px) auto; opacity: 0.5; }
.s3-machine > .s3u-fig { margin-top: clamp(30px, 3.5vw, 50px); }

/* three steps side by side, ending level: the first two cards stretch to the third column */
.s3u-steps { --gap: clamp(24px, calc(24px + (100vw - 1200px) * 0.115), 40px); display: grid; grid-template-columns: minmax(0, 360fr) minmax(414px, 420fr) minmax(362px, 388fr); column-gap: var(--gap); }
.s3u-step { position: relative; display: flex; flex-direction: column; min-width: 0; }
.s3u-hd { padding-bottom: 18px; }
.s3u-hd > .s3-pt { line-height: 1.5; }
/* the handoff between two steps: a bead on a short line of light, in the gutter at mid height */
.s3u-step + .s3u-step > .s3u-hd::before {
  content: '';
  position: absolute;
  left: calc(var(--gap) * -1);
  top: 48.5%;
  width: var(--gap);
  height: 1.5px;
  margin-top: -0.75px;
  background: rgba(var(--hy), 0.6);
  box-shadow: 0 0 8px rgba(var(--hy), 0.5);
}
.s3u-hd > .bead { left: calc(var(--gap) / -2); top: 48.5%; }

/* 01 · the chat */
.s3u-chat { flex: 1; padding: 20px; }
.s3u-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.s3u-msg + .s3u-msg { margin-top: 18px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.s3u-msg > .you,
.s3u-msg > .fc { width: 34px; height: 34px; font-size: 11px; }
.s3u-by { font-size: 12.5px; line-height: 20px; color: #b0b5be; }
.s3u-by b { margin-right: 6px; font-size: 13.5px; color: #f1eee8; }
.s3u-p { margin-top: 5px; font-size: 14.5px; line-height: 1.48; color: #e4e2dd; }
.s3u-said { margin-top: 5px; font-size: 17.5px; line-height: 1.42; }
.s3 .s3u-list { display: grid; gap: 5px; margin-top: 10px; }
.s3u-list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #e4e2dd; }
.s3u-list em { font: 500 11px/1.75 var(--mono); color: #9aa5b8; }
.s3u-bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }

/* 02 · the machine */
.s3u-mac { display: flex; flex: 1; flex-direction: column; padding-bottom: 8px; }
.s3u-mac-top { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 18px 0 20px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09); }
.s3u-mac-top b { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; color: var(--ivory-mid); }
.s3u-mac-top .bt { height: 30px; margin-left: auto; font-size: 13px; }
.s3u-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09); }
.s3u-tiles > div { padding: 13px 10px 13px 20px; }
.s3u-tiles > div + div { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08); }
.s3u-tiles dt { margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: #c9ccd2; }
.s3u-tiles dd b { display: block; margin-top: 5px; font-size: 26px; font-weight: 460; line-height: 1; letter-spacing: -0.035em; color: var(--ivory-mid); }
.s3u-tiles dd span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: #c9ccd2; }
/* five stages of equal height, so the line that joins their numbers can be drawn in fractions */
.s3 .s3u-stages { display: grid; flex: 1; grid-auto-rows: 1fr; }
.s3 .s3u-stages > li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 69px; padding: 0 18px 0 20px; }
.s3u-stages > li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.s3u-stages > li:not(:last-child)::after { content: ''; position: absolute; left: 32px; top: calc(50% + 13px); width: 2px; height: calc(100% - 26px); background: rgba(var(--hy), 0.4); }
.s3u-n { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 500 11.5px/1 var(--mono); color: #1a1712; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.s3u-who { min-width: 0; }
.s3u-who b { display: block; font-size: 15px; line-height: 1.25; color: #f1eee8; }
.s3u-ow { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12.5px; line-height: 1.5; white-space: nowrap; color: #b0b5be; }
.s3u-ow .fc { width: 18px; height: 18px; }
.s3u-rt { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.5; white-space: nowrap; color: #c9ccd2; }
.s3u-rt .s3-chip,
.s3u-r1 .s3-chip { min-height: 22px; padding: 0 9px; font-size: 11.5px; }

/* 03 · the preview, a run for each client, and one that went quiet */
.s3u-prev { padding: 16px 18px; }
.s3u-prev .s3-kk { padding-top: 6px; line-height: 18px; }
.s3u-ln { margin-top: 8px; font-size: 15.5px; line-height: 1.4; color: #f1eee8; }
.s3u-sm { margin-top: 3px; font-size: 13px; line-height: 1.5; color: #b0b5be; }
.s3u-prev .s3u-bts { margin-top: 12px; }
.s3 .s3u-runs { display: grid; gap: 10px; margin-top: 10px; }
.s3 .s3u-run { padding: 13px 18px; }
.s3u-r1 { display: flex; align-items: center; gap: 10px; }
.s3u-r1 b { font-size: 15px; line-height: 1.5; color: #f1eee8; }
.s3u-r1 .s3-chip { margin-left: auto; }
.s3u-pips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.s3u-pips i { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.s3u-pips i.d { background: rgba(var(--hy), 0.9); }
.s3u-pips i.r { background: #fff6e2; box-shadow: 0 0 10px rgba(var(--hy), 0.9); }
.s3u-pips i.y { background: #f3dc9c; box-shadow: 0 0 10px rgba(226, 190, 110, 0.95); }
.s3u-run .s3u-sm { margin-top: 8px; color: #c9ccd2; }
.s3u-run .s3u-sm.y { color: #f6e2a8; }
.s3u-dead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 54px; margin-top: 10px; padding: 10px 12px 10px 18px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; color: #c9ccd2; background: rgba(14, 18, 30, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 40px -20px #000; }
.s3u-dn { white-space: nowrap; }
.s3u-dn b { margin-right: 8px; color: #e4e2dd; }
.s3u-acts { display: flex; gap: 5px; margin-left: auto; }
.s3u-acts span { display: grid; place-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; line-height: 1; white-space: nowrap; color: #dedcd7; background: rgba(255, 255, 255, 0.1); }

/* ── a tight desktop, 1200 to 1339: the same three columns, with less air inside them ── */

@media (min-width: 1200px) and (max-width: 1339px) {
  /* the machine and the runs keep the width their rows need; the chat gives */
  .s3u-steps { grid-template-columns: minmax(0, 360fr) minmax(396px, 420fr) minmax(344px, 388fr); }
  .s3u-chat { padding: 18px; }
  .s3u-msg { column-gap: 10px; }
  .s3u-chat .bt { padding: 0 12px; }
  .s3u-mac-top { padding: 0 14px 0 16px; }
  .s3u-tiles > div { padding-left: 16px; }
  .s3 .s3u-stages > li { column-gap: 10px; padding: 0 14px; }
  .s3u-stages > li:not(:last-child)::after { left: 26px; }
  .s3u-rt { gap: 6px; }
  .s3u-rt .s3-chip { padding: 0 8px; }
  .s3u-prev,
  .s3 .s3u-run { padding-inline: 16px; }
  .s3u-dead { padding: 10px 10px 10px 14px; }
  .s3u-dn b { margin-right: 6px; }
  .s3u-acts { gap: 4px; }
  .s3u-acts span { padding: 0 8px; }
}

/* ── below 1200: the third step drops under the first two, and its handoff turns to point down ── */

@media (max-width: 1199px) {
  .s3-machine {
    --haze:
      radial-gradient(96% 46% at 50% 54%, rgba(94, 106, 210, 0.3), rgba(94, 106, 210, 0.07) 55%, transparent 76%),
      radial-gradient(70% 20% at 22% 26%, rgba(var(--hy), 0.08), transparent 72%);
  }
  .s3u-steps { --gap: 40px; grid-template-columns: minmax(0, 360fr) minmax(0, 420fr); row-gap: var(--gap); }
  .s3u-step:nth-child(3) { grid-column: 1 / -1; }
  /* a step under the one before it: the line runs from the card above to the card below, past
     the step's own heading. Here it leaves the machine at the middle of its foot */
  .s3u-step:nth-child(3) > .s3u-hd { --bx: calc(100% - (100% - var(--gap)) * 0.2692); position: relative; }
  .s3u-step:nth-child(3) > .s3u-hd::before { left: var(--bx); top: calc(var(--gap) * -1); bottom: 0; width: 1.5px; height: auto; margin: 0 0 0 -0.75px; }
  .s3u-step:nth-child(3) > .s3u-hd > .bead { left: var(--bx); top: calc((100% - var(--gap)) / 2); }
  .s3u-step:nth-child(3) > .s3u-hd > .bead svg { transform: rotate(90deg); }
}
/* the third step has the full width: the preview as one bar, the three clients side by side */
@media (min-width: 761px) and (max-width: 1199px) {
  .s3u-prev { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 16px 20px 18px; }
  .s3u-prev > * { grid-column: 1; }
  .s3u-prev > .s3u-bts { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .s3 .s3u-runs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the chat column is wider here than it was drawn: what you said grows to hold it */
  .s3u-said { font-size: clamp(17.5px, calc(17.5px + (100vw - 1000px) * 0.0125), 20px); }
}

/* ── below 900: one step under another ── */

@media (max-width: 899px) {
  .s3u-steps { --gap: 36px; grid-template-columns: minmax(0, 1fr); }
  .s3u-step:nth-child(3) > .s3u-hd { --bx: 50%; }
  .s3u-step:nth-child(2) > .s3u-hd { --bx: 50%; position: relative; }
  .s3u-step:nth-child(2) > .s3u-hd::before { left: var(--bx); top: calc(var(--gap) * -1); bottom: 0; width: 1.5px; height: auto; margin: 0 0 0 -0.75px; }
  .s3u-step:nth-child(2) > .s3u-hd > .bead { left: var(--bx); top: calc((100% - var(--gap)) / 2); }
  .s3u-step:nth-child(2) > .s3u-hd > .bead svg { transform: rotate(90deg); }
  .s3 .s3u-stages > li { min-height: 64px; }
}
/* what you said beside what came back */
@media (min-width: 761px) and (max-width: 899px) {
  .s3u-chat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 24px 0; }
  .s3u-msg { padding: 0 24px; }
  .s3u-msg + .s3u-msg { margin-top: 0; padding-top: 0; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.09); }
  .s3u-said { font-size: 22px; line-height: 1.36; }
}

/* ── the phone ── */

@media (max-width: 760px) {
  .s3u-steps { --gap: 28px; }
  /* the bead moves to the right edge, clear of the heading beside it */
  .s3u-hd { padding-right: 60px; }
  .s3u-step:nth-child(n) > .s3u-hd { --bx: calc(100% - 30px); }
  .s3u-chat { padding: 18px 16px; }
  .s3u-msg { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
  .s3u-msg > .you,
  .s3u-msg > .fc { width: 30px; height: 30px; }
  .s3u-mac-top { padding: 0 14px 0 16px; }
  .s3u-tiles > div { padding: 12px 8px 12px 16px; }
  .s3 .s3u-stages > li { column-gap: 10px; padding: 0 14px 0 16px; }
  .s3u-stages > li:not(:last-child)::after { left: 28px; }
  /* a stage keeps its owner, its chip and its count; how the owner works it is dropped */
  .s3u-x { display: none; }
  .s3u-ow { white-space: normal; }
  .s3u-prev,
  .s3 .s3u-run { padding-inline: 16px; }
  /* one line down to a 360 phone; under that the three buttons wrap below the name */
  .s3u-dead { gap: 6px; padding: 10px 10px 10px 12px; font-size: clamp(12.5px, 3.47vw, 13.5px); }
  .s3u-dn b { margin-right: 6px; }
  .s3u-acts { gap: 4px; }
  .s3u-acts span { padding: 0 7px; font-size: 11.5px; }
}

/* ── P · One inbox ── */

.s3-inbox {
  --show-end: 48px;
  --haze: radial-gradient(97% 61% at 58% 64.5%, rgba(94, 106, 210, 0.44), rgba(94, 106, 210, 0.1) 55%, transparent 76%), radial-gradient(36% 29% at 70% 72%, rgba(236, 200, 120, 0.16), transparent 70%);
}

/* the five tints a channel or a person can carry */
.s3-inbox .s3p-teal { --t: 110, 205, 196; }
.s3-inbox .s3p-rose { --t: 226, 132, 146; }
.s3-inbox .s3p-steel { --t: 140, 159, 208; }
.s3-inbox .s3p-vio { --t: 160, 168, 255; }
.s3-inbox .s3p-green { --t: 106, 190, 150; }

/* five channels in, one list out */
.s3p-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 10px; margin-top: 18px; font-size: 13.5px; line-height: 1.2; color: #dedcd7; }
.s3 .s3p-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s3 .s3p-chips li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px 0 6px; border-radius: 999px; white-space: nowrap; background-color: rgba(22, 28, 44, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.s3p-one { display: flex; align-items: center; flex: none; font-size: 12.5px; line-height: 1.2; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap; color: var(--gold-ink); }
.s3p-one::before { content: ''; flex: none; width: 46px; height: 1.5px; margin-right: 10px; background: linear-gradient(90deg, rgba(var(--hy), 0.25), rgba(var(--hy), 0.75)); }

/* the window steps out a little further than the head, as it does in the drawing */
.s3-inbox > figure { margin: 28px calc(max(var(--pad), (100vw - 1312px) / 2) - max(var(--pad), (100vw - 1248px) / 2)) 0; }

.s3-inbox .s3p-ct { color: #c2c2ce; }
.s3-inbox .s3p-ct.owe { color: #f6e6b8; }
.s3-inbox .s3p-srch { display: flex; align-items: center; width: 190px; height: 32px; margin-left: 10px; padding: 0 12px; border-radius: 8px; color: #8f8f9c; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.s3-inbox .s3p-new { color: #fff; }
.s3-inbox .s3p-top .fc { width: 20px; height: 20px; }

.s3p-body { display: grid; grid-template-columns: minmax(0, 540fr) minmax(0, 772fr); }

/* the list: three sections, the ones you owe first */
.s3p-list { padding: 14px 16px 22px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08); }
.s3p-sec { display: flex; align-items: baseline; gap: 8px; min-height: 24px; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; color: #f2f2f5; }
.s3p-sec ~ .s3p-sec { margin-top: 16px; }
.s3p-sec em { font-weight: 500; color: #9c9ca8; }
.s3p-sec span { margin-left: auto; font-size: 12px; font-weight: 400; color: #a8a8b4; }
.s3 .s3p-row { margin-top: 8px; padding: 10px 12px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.s3p-r1 { display: flex; align-items: center; gap: 9px; }
.s3p-r1 b,
.s3p-cm b { font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap; color: #f2f2f5; }
.s3p-r1 .s3-tg { margin-left: auto; }
.s3p-av { position: relative; flex: none; margin-right: 4px; }
.s3-inbox .s3p-av .s3-mono { position: absolute; right: -8px; bottom: -6px; width: 15px; height: 15px; border-radius: 4px; font-size: 7px; box-shadow: 0 0 0 2px #12141f; }
.s3p-un { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8c9bff; box-shadow: 0 0 8px #8c9bff; }
.s3p-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.s3p-tl p { padding: 6px 10px 5px; border-radius: 7px; white-space: nowrap; background: rgba(255, 255, 255, 0.045); }
.s3p-tl span { display: block; font-size: 11px; line-height: 1.5; letter-spacing: 0.07em; text-transform: uppercase; color: #b4b4c0; }
.s3p-tl b { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: #eaeaf0; }
/* the tile that says a draft is waiting */
.s3p-tl p.d { background: linear-gradient(to bottom, rgba(206, 176, 104, 0.3), rgba(191, 162, 95, 0.2)); box-shadow: inset 0 1px 0 rgba(var(--need), 0.36); }
.s3p-tl p.d span { color: #eedba6; }
.s3p-qt { margin-top: 7px; font-size: 13px; line-height: 1.4; color: #c9c9d4; }
/* two rows are lit, each under its own lamp: gold on the first reply you owe, blue on the open thread */
.s3 .s3p-row.owe { background: radial-gradient(76% 84px at 50% -16px, rgba(var(--need), 0.2), transparent), rgba(191, 162, 95, 0.1); box-shadow: inset 0 1px 0 rgba(var(--need), 0.5), inset 0 0 0 1px rgba(var(--need), 0.15), 0 0 26px -8px rgba(191, 162, 95, 0.75); }
.s3 .s3p-row.on { background: radial-gradient(76% 84px at 50% -16px, rgba(150, 165, 255, 0.34), transparent), rgba(94, 106, 210, 0.24); box-shadow: inset 0 1px 0 rgba(184, 194, 255, 0.72), inset 0 0 0 1px rgba(140, 155, 255, 0.24), 0 0 30px -6px rgba(94, 106, 210, 1); }
/* a thread that is not yours to answer: one line */
.s3 .s3p-cm { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.s3p-cm-t { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 9px; min-width: 0; }
.s3p-cm em { font-size: 12.5px; line-height: 1.5; white-space: nowrap; color: #b4b4c0; }

/* the open thread */
.s3p-read { display: flex; flex-direction: column; min-width: 0; padding: 18px 28px 22px; }
.s3p-hd { display: flex; align-items: center; gap: 10px; }
.s3p-hd b { font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; white-space: nowrap; color: #f4f4f7; }
.s3p-sj { font-size: 13.5px; line-height: 1.5; white-space: nowrap; color: #b4b4c0; }
.s3p-hd .s3-tg { margin-left: auto; }
.s3p-rt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 34px; margin-top: 12px; padding: 6px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; color: #c9c9d4; background: rgba(255, 255, 255, 0.04); }
.s3p-rt > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.s3p-rt b { color: #eaeaf0; }
.s3p-a { flex: none; width: 22px; height: 1.5px; background: rgba(var(--hy), 0.5); }
.s3-inbox .s3p-rt .fc { width: 20px; height: 20px; }
.s3p-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.s3-inbox .s3p-msg .s3-ini { width: 32px; height: 32px; font-size: 11.5px; }
.s3p-me { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #15130f; background: linear-gradient(to bottom, #f3eee2, #d8cfba); }
.s3p-by { font-size: 12.5px; line-height: 1.5; color: #a8a8b4; }
.s3p-by b { margin-right: 8px; font-size: 13.5px; font-weight: 600; color: #eaeaf0; }
.s3p-tx { max-width: 600px; margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: #e2e2ea; }
.s3p-msg.me { opacity: 0.78; }
.s3p-msg.me .s3p-tx { font-size: 13.5px; color: #c9c9d4; }
.s3p-band { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 11.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #e6d29c; }
.s3p-band::before,
.s3p-band::after { content: ''; flex: 1; height: 1px; background: rgba(var(--need), 0.3); }
.s3p-band::before { flex: none; width: 22px; }
/* the reply that waits: the warm card, and the one thing here that is yours to do */
.s3-inbox .s3p-draft { margin-top: 12px; padding: 16px 20px 18px; }
.s3p-t1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; line-height: 1.5; color: #cfc8b4; }
.s3-inbox .s3p-t1 .k { font-size: 12.5px; color: #cfc8b4; }
.s3p-dby { display: flex; align-items: center; gap: 9px; margin-top: 11px; font-size: 13px; line-height: 1.5; color: #e2dccb; }
.s3-inbox .s3p-dby .fc { width: 24px; height: 24px; }
.s3p-dtx { max-width: 640px; margin-top: 10px; font-size: 17px; line-height: 1.5; }
.s3-inbox .s3p-draft .bts { margin-top: 14px; }
.s3p-then { margin-top: 14px; }
.s3p-held { display: flex; align-items: center; gap: 12px; min-height: 50px; margin: 8px 0 44px; padding: 0 12px 0 16px; border-radius: 9px; font-size: 13.5px; line-height: 1.5; white-space: nowrap; color: #e2e2ea; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.s3-inbox .s3p-held svg.i { width: 16px; height: 16px; color: #b9c2ff; }
.s3p-held em { font-size: 12.5px; color: #a8a8b4; }
.s3-inbox .s3p-held .s3-wbt { height: 28px; margin-left: auto; }
.s3p-comp { display: flex; align-items: center; height: 46px; margin-top: auto; padding: 0 8px 0 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; color: #8f8f9c; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.s3p-comp span { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 7px; color: #c9c9d4; background: rgba(255, 255, 255, 0.08); }
.s3-inbox .s3p-comp svg.i { width: 15px; height: 15px; }

/* ── a tight desktop, 1200 to 1339: the list keeps its width, the thread gives up the air ── */

@media (min-width: 1200px) and (max-width: 1339px) {
  .s3p-body { grid-template-columns: 500px minmax(0, 1fr); }
  .s3-inbox .s3p-srch { width: 150px; }
  .s3p-read { padding-inline: 22px; }
  .s3p-rt,
  .s3p-rt > span { column-gap: 8px; }
  .s3p-a { width: 14px; }
}

/* ── below 1200: the list, then the open thread under it ── */

@media (max-width: 1199px) {
  .s3-inbox { --show-end: var(--show-y); --haze: radial-gradient(110% 38% at 50% 46%, rgba(94, 106, 210, 0.42), rgba(94, 106, 210, 0.1) 55%, transparent 76%), radial-gradient(60% 16% at 50% 68%, rgba(236, 200, 120, 0.15), transparent 70%); }
  .s3-inbox .s3-win-top { padding-inline: 16px; }
  .s3-inbox .s3p-srch,
  .s3-inbox .s3p-all { display: none; }
  .s3p-body { grid-template-columns: minmax(0, 1fr); }
  /* the list is cut to the replies you owe; the two sections under them close to their headings */
  .s3p-list { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 26px; padding: 14px 16px 12px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
  .s3p-sec:first-child,
  .s3 .s3p-rows { flex: 0 0 100%; }
  .s3 .s3p-more { display: none; }
  .s3p-sec ~ .s3p-sec { margin-top: 12px; }
  .s3p-read { padding: 18px 16px 16px; }
  .s3p-tx { max-width: 780px; }
  .s3p-dtx { max-width: 720px; }
  .s3p-held { margin-bottom: 22px; }
}

/* a row with room to spare lies down: who and what they said, then its three tiles */
@media (min-width: 900px) and (max-width: 1199px) {
  .s3 .s3p-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: 'r1 tl' 'qt tl'; align-items: center; column-gap: 28px; padding: 10px 10px 10px 12px; }
  .s3p-r1 { grid-area: r1; }
  .s3p-tl { grid-area: tl; margin-top: 0; }
  .s3p-qt { grid-area: qt; margin-top: 5px; }
}

@media (max-width: 899px) {
  .s3-inbox .s3p-new { display: none; }
}

/* ── the phone ── */

@media (max-width: 760px) {
  .s3-inbox { --haze: radial-gradient(150% 30% at 50% 40%, rgba(94, 106, 210, 0.42), rgba(94, 106, 210, 0.1) 55%, transparent 76%), radial-gradient(110% 14% at 50% 66%, rgba(236, 200, 120, 0.16), transparent 70%); }
  .s3p-ch { margin-top: 22px; }
  .s3p-one { flex: 0 0 100%; }
  .s3p-one::before { width: 34px; }
  .s3-inbox > figure { margin-top: 22px; }

  .s3-inbox .s3-win-top { gap: 10px; padding: 12px; }
  .s3-inbox .s3-seg { flex: 1; margin-left: 0; }
  .s3-inbox .s3-seg span { flex: 1; padding: 0 8px; }

  .s3p-list { padding: 12px 10px 10px; }
  .s3p-sec:first-child { flex-wrap: wrap; }
  .s3p-sec span { flex: 0 0 100%; margin-left: 0; font-size: 12.5px; }
  .s3 .s3p-row { padding: 10px 10px 9px; }
  /* three tiles side by side, the first a little wider for the longest line it carries */
  .s3p-tl { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.95fr); gap: 5px; }
  .s3p-tl p { padding: 6px 7px 5px; }
  .s3p-tl span { font-size: 10.5px; letter-spacing: 0.05em; }
  .s3p-tl b { font-size: 12.5px; }

  .s3p-read { padding: 16px 10px 10px; }
  .s3p-hd { flex-wrap: wrap; gap: 2px 10px; }
  .s3p-hd b { font-size: 18px; }
  .s3p-sj { flex: 0 0 100%; order: 3; }
  .s3p-rt { padding: 8px 12px; }
  .s3p-msg { gap: 10px; }
  .s3-inbox .s3p-draft { padding: 16px 16px 18px; }
  /* what happens next, on two lines: the promise, then who said so and the way to stop it */
  .s3p-held { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: 'i t t' '. e b'; gap: 6px 10px; padding: 12px 10px 10px 14px; }
  .s3p-held svg.i { grid-area: i; }
  .s3p-held > span:first-of-type { grid-area: t; }
  .s3p-held em { grid-area: e; }
  .s3-inbox .s3p-held .s3-wbt { grid-area: b; }
  .s3p-held { margin-bottom: 14px; }
}

/* a phone too narrow for three tiles keeps the first: why this one is yours */
@media (max-width: 383px) {
  .s3p-tl { grid-template-columns: minmax(0, 1fr); }
  .s3p-tl p { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; }
  .s3p-tl p + p { display: none; }
  .s3p-tl b { margin-top: 0; }
  .s3p-band::before { content: none; }
  .s3-inbox .s3-win-top { padding-inline: 10px; }
  .s3-inbox .s3-seg span { padding: 0 6px; }
}

/* and one too narrow for the route on two lines goes without it */
@media (max-width: 349px) {
  .s3p-rt { display: none; }
}

/* ── T · the money ── */

/* One wide panel hinged on today: twelve months of revenue running up to it, the two futures for
   your cash running on from it. Under it, what the AI cost, where your week went, and the cash
   dial. The charts are written by T.gen.py, each twice: s3t-d is the desktop drawing, s3t-m the
   phone drawing (a narrower viewBox, larger type, fewer ticks). Which one shows is decided here.
   The two series colours are #6a8ee6 and #bb8236 and no text wears either. */

.s3-money {
  --show-end: 54px;
  --s3t-x0: calc(8 / 612 * 100%);      /* today's point: 8 of the projection drawing's 566, in a column 612 wide */
  --haze:
    radial-gradient(59.7% 48% at 26.4% 51.5%, rgba(84, 120, 230, 0.6), rgba(84, 120, 230, 0.14) 55%, transparent 76%),
    radial-gradient(16.7% 44.6% at 51.1% 46.3%, rgba(var(--hy), 0.34), rgba(var(--hy), 0.08) 55%, transparent 78%),
    radial-gradient(52.8% 44.6% at 79.9% 44.6%, rgba(144, 133, 200, 0.34), rgba(120, 110, 220, 0.1) 55%, transparent 76%),
    radial-gradient(29.2% 25.7% at 81.25% 63.5%, rgba(224, 160, 74, 0.3), transparent 72%);
}
.s3 > .s3t-fig { margin: clamp(30px, 3.47vw, 50px) -32px 0; }

/* ---- the charts ---- */

.s3t-ch { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.s3t-ch.s3t-m { display: none; }
.s3t-grid { fill: none; stroke: rgba(255, 255, 255, 0.11); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s3t-ax { font-size: var(--s3t-ax, 11.5px); font-weight: 400; fill: #b9bfca; }
.s3t-ax.s3t-ax2 { font-size: 12.5px; }
.s3t-ax.s3t-lit { font-weight: 500; fill: #ecebe6; }
.s3t-val { font-size: 13.5px; font-weight: 500; fill: #f6f3ec; }
.s3t-m .s3t-ax { font-size: 12.5px; }
.s3t-m .s3t-val { font-size: 13px; }
.s3t-bar { filter: drop-shadow(0 0 9px rgba(106, 142, 230, 0.75)); }
.s3t-bar.s3t-lit { fill: #dfe7ff; filter: drop-shadow(0 0 12px rgba(200, 214, 255, 0.9)); }
.s3t-m .s3t-bar { filter: drop-shadow(0 0 6px rgba(106, 142, 230, 0.75)); }
.s3t-m .s3t-bar.s3t-lit { filter: drop-shadow(0 0 8px rgba(200, 214, 255, 0.9)); }
.s3t-ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.s3t-ln.s3t-lb { stroke: #6a8ee6; filter: drop-shadow(0 0 6px rgba(106, 142, 230, 1)) drop-shadow(0 0 16px rgba(106, 142, 230, 0.6)); }
.s3t-ln.s3t-la { stroke: #bb8236; filter: drop-shadow(0 0 6px rgba(207, 148, 64, 1)) drop-shadow(0 0 16px rgba(207, 148, 64, 0.55)); }
.s3t-pt { stroke: #141a2a; stroke-width: 2; }
.s3t-pt.s3t-pb { fill: #6a8ee6; }
.s3t-pt.s3t-pa { fill: #bb8236; filter: drop-shadow(0 0 8px rgba(224, 160, 74, 1)); }
.s3t-pt.s3t-pw { fill: #fff6e2; filter: drop-shadow(0 0 6px rgba(var(--hy), 0.9)); }
.s3t-needle { stroke: #fff6e2; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(var(--hy), 0.8)); }

/* ---- the hinge: revenue up to today, cash from today ---- */

.s3 .gl.s3t-hinge {
  display: grid;
  grid-template-columns: minmax(0, 574fr) minmax(0, 612fr);    /* the two drawings' widths, so both plots scale as one */
  column-gap: 54px;
  padding: 22px 36px 30px;
  background-color: rgba(22, 29, 50, 0.5);
}
.s3t-past,
.s3t-fut { position: relative; display: flex; flex-direction: column; min-width: 0; }
.s3t-plot { position: relative; margin-top: auto; }
.s3t-fut .s3t-ch.s3t-d { width: calc(566 / 612 * 100%); }
.s3-money .s3-kk { display: block; color: #b0b5be; }

.s3t-hl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.s3t-hl .s3-kk { line-height: 19px; }
.s3t-src,
.s3t-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 19px; white-space: nowrap; color: #c9ccd2; }
.s3 .s3t-src .dot,
.s3 .s3t-live .dot { width: 6px; height: 6px; color: #7fd0a8; }
.s3 .s3t-nums { display: flex; gap: 40px; margin: 9px 0 21px; }
.s3t-nums dt { font-size: 12.5px; line-height: 19px; white-space: nowrap; color: #b0b5be; }
.s3t-nums dd { margin-top: 3px; font-size: 27px; font-weight: 460; line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ivory-mid); }

/* Today: a pill on a line of Hyperion's light. Everything about where it stands is measured from
   the projection's column (percentages of its width, margins included), so the line is on the
   drawing's first point at any size. */
.s3t-seam {
  position: absolute;
  left: calc(var(--s3t-x0) - 1.5px);
  top: 28px;
  bottom: 0;
  width: 3px;
  margin-bottom: calc(26 / 612 * 100%);          /* it ends just under the plot's zero line */
  border-radius: 999px;
  background: linear-gradient(to bottom, #fffaf0, rgba(var(--hy), 0.55));
  box-shadow: 0 0 14px 2px rgba(var(--hy), 0.8), 0 0 60px 14px rgba(var(--hy), 0.28);
}
.s3t-now {
  position: absolute;
  left: var(--s3t-x0);
  top: -2px;
  display: grid;
  place-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  transform: translateX(-50%);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #15130f;
  background: linear-gradient(to bottom, #f3eee2, #d8cfba);
}
.s3 .s3t-cash { position: absolute; left: calc(var(--s3t-x0) + 18px); bottom: 0; margin-bottom: calc(300 / 612 * 100% - 46px); }   /* 8px above the plot's top */
.s3t-cash .s3-kk { line-height: 13px; }
.s3t-cash b { display: block; margin-top: 7px; font-size: 26px; font-weight: 460; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; color: var(--ivory-mid); }

/* drawn 32px further right, in Newsreader. The site sets the voice in a system serif, which runs wider:
   the block starts earlier and the sentence is a step smaller, so it still stands on one line. */
.s3t-fh { margin: 8px 0 21px calc(204 / 612 * 100%); }
.s3t-fh .s3-kk { line-height: 13px; }
.s3 .s3t-say { margin-top: 12px; font-size: clamp(18px, 1.528vw, 22px); line-height: 1.2; letter-spacing: -0.01em; }
.s3 .s3t-lg { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-top: 18px; }
.s3 .s3t-lg li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 19.5px; white-space: nowrap; color: #dedcd7; }
.s3t-lg i { flex: none; width: 20px; height: 3px; border-radius: 999px; }
.s3t-lg .s3t-kb { background: #6a8ee6; }
.s3t-lg .s3t-ka { background: #bb8236; }

/* ---- under it: AI spend, the journal, cash ---- */

.s3 .s3t-three { display: grid; grid-template-columns: minmax(0, 424fr) minmax(0, 432fr) minmax(0, 424fr); gap: 16px; margin-top: 20px; }
.s3 .gl.s3t-p { display: flex; flex-direction: column; min-width: 0; padding: 20px; background-color: rgba(22, 29, 50, 0.5); }
.s3t-p > .s3-kk { margin-top: 8px; line-height: 13px; }
.s3t-p .s3t-plot { margin-top: 12px; }
.s3t-st { display: flex; gap: 30px; }
.s3t-st dt { font-size: 12px; line-height: 18px; white-space: nowrap; color: #b0b5be; }
.s3t-st dd { margin-top: 2px; font-size: 20px; font-weight: 460; line-height: 30px; letter-spacing: -0.025em; white-space: nowrap; color: var(--ivory-mid); }

.s3 .gl.s3t-ai { padding-bottom: 10px; }
.s3 .s3t-sum { display: flex; align-items: baseline; gap: 12px; height: 35px; margin-top: 11px; }
.s3t-sum b { font-size: 34px; font-weight: 460; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ivory-mid); }
.s3t-who { margin-top: 12px; }
.s3t-who .s3-kk { margin-bottom: 4px; line-height: 16px; }
.s3 .s3t-who li { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) 48px; align-items: center; gap: 10px; height: 27px; font-size: 13px; line-height: 1.2; color: #e4e2dd; }
.s3 .s3t-who .fc { width: 22px; height: 22px; }
.s3t-mt { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.s3t-mt i { display: block; height: 100%; border-radius: 999px; background: #6a8ee6; }
.s3t-who em { text-align: right; font-variant-numeric: tabular-nums; color: #f1eee8; }

.s3 .gl.s3t-jr { padding-bottom: 18px; }
.s3t-jr > .s3t-st { margin-top: 15px; }
.s3t-jr > .s3t-plot { margin-top: 16px; }
.s3 .s3t-ramp { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: auto; padding-top: 14px; font-size: 11px; line-height: 17px; white-space: nowrap; color: #9aa5b8; }
.s3t-ramp span { display: flex; gap: 4px; }
.s3t-ramp i { width: 12px; height: 12px; border-radius: 2.5px; background: rgba(255, 255, 255, 0.06); }
.s3t-ramp i:nth-child(2) { background: #2c3d6e; }
.s3t-ramp i:nth-child(3) { background: #4160aa; }
.s3t-ramp i:nth-child(4) { background: #6a8ee6; }
.s3t-ramp i:nth-child(5) { background: #b1c6fb; }

/* the figure in the middle of the dial stands on the dial's own base line */
.s3t-dial { position: relative; margin-top: 15px; }
.s3 .s3t-mid { position: absolute; left: 0; right: 0; bottom: calc(23 / 172 * 100%); text-align: center; }
.s3t-mid b { display: block; font-size: clamp(25px, 2.084vw, 30px); font-weight: 460; line-height: 1; letter-spacing: -0.04em; color: var(--ivory-mid); }
.s3t-mid span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 19px; color: #b0b5be; }
.s3t-run { display: flex; align-items: flex-end; gap: 12px 28px; margin-top: auto; padding-top: 24px; }
.s3t-run .s3t-st { gap: 28px; }
.s3 .s3t-run .bt { height: 30px; margin-left: auto; padding: 0 12px; font-size: 12.5px; }

/* ── a tight desktop, 1200 to 1339: the same picture, the axis type held up as the plots shrink ── */

@media (min-width: 1200px) and (max-width: 1339px) {
  .s3t-ch { --s3t-ax: 12.5px; }
  .s3t-run,
  .s3t-run .s3t-st { column-gap: 14px; }
  .s3t-run dd { font-size: 18px; }
  .s3 .s3t-run .bt { padding: 0 10px; }
}

/* ── below 1200: the hinge turns. Revenue, then today lying down, then the projection ── */

@media (max-width: 1199px) {
  .s3-money {
    --show-end: var(--show-y);
    --haze:
      radial-gradient(95% 30% at 34% 36%, rgba(84, 120, 230, 0.5), rgba(84, 120, 230, 0.12) 55%, transparent 76%),
      radial-gradient(90% 26% at 66% 58%, rgba(144, 133, 200, 0.3), rgba(120, 110, 220, 0.08) 55%, transparent 76%),
      radial-gradient(46% 12% at 74% 56%, rgba(224, 160, 74, 0.2), transparent 72%);
  }
  .s3 > .s3t-fig { margin-inline: 0; }
  .s3 .gl.s3t-hinge { grid-template-columns: minmax(0, 1fr); padding: 26px 28px 28px; }

  /* each half: its words on the left, its plot on the right */
  .s3t-past,
  .s3t-fut { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, clamp(528px, 66%, 700px)); column-gap: 24px; align-items: start; }
  .s3t-past { grid-template-rows: auto 1fr; }
  .s3t-past > .s3t-plot,
  .s3t-fut > .s3t-plot { grid-column: 2; margin-top: 0; }
  .s3t-past > .s3t-plot { grid-row: 1 / span 2; }
  .s3t-fut .s3t-ch.s3t-d { width: 100%; }
  .s3 .s3t-nums { flex-direction: column; gap: 12px; margin: 20px 0 0; }

  /* today: the pill at the head of the line, cash today at its end */
  .s3t-today { grid-column: 1 / -1; display: flex; align-items: center; margin: 28px 0 26px; }
  .s3t-now,
  .s3t-seam,
  .s3 .s3t-cash { position: static; margin: 0; transform: none; }
  .s3t-seam { flex: 1; width: auto; height: 3px; margin: 0 18px 0 4px; background: linear-gradient(to right, #fffaf0, rgba(var(--hy), 0.55)); }
  .s3 .s3t-cash { display: flex; align-items: baseline; gap: 10px; }
  .s3t-cash b { margin-top: 0; }
  .s3t-fh { margin: 0; }
  .s3 .s3t-say { font-size: 22px; }
  .s3 .s3t-lg { flex-direction: column; margin-top: 16px; }

  /* AI spend and the journal side by side; cash runs the full width under them, the dial under
     the first and its numbers under the second */
  .s3 .s3t-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s3 .gl.s3t-ai { padding-bottom: 14px; }
  .s3 .gl.s3t-cs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; align-items: center; }
  .s3t-cs > .s3-kk { grid-column: 1 / -1; }
  .s3t-run { flex-wrap: wrap; margin-top: 0; padding-top: 0; }
  .s3t-run,
  .s3t-run .s3t-st { column-gap: 20px; }
  .s3t-mid b { font-size: clamp(27px, 3.1vw, 32px); }
}

/* ── 899 and down: the words go over their plot, and the three small charts change to the phone drawing ── */

@media (max-width: 899px) {
  .s3t-past,
  .s3t-fut { display: flex; align-items: stretch; }
  .s3 .s3t-nums { flex-direction: row; gap: 40px; margin: 9px 0 22px; }
  .s3t-fh { margin-bottom: 20px; }
  .s3 .s3t-lg { flex-direction: row; margin-top: 12px; }
  .s3t-p .s3t-ch.s3t-d { display: none; }
  .s3t-p .s3t-ch.s3t-m { display: block; }
  .s3 .s3t-run .bt { margin-left: 0; }
  .s3t-mid b { font-size: 27px; }
}

/* ── the phone ── */

@media (max-width: 760px) {
  .s3 .gl.s3t-hinge { padding: 18px 16px 16px; }
  .s3 .s3t-nums { flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; margin: 12px 0 18px; }
  .s3t-nums dd { font-size: clamp(20px, 5.6vw, 27px); }
  .s3t-today { margin: 24px 0 20px; }
  .s3t-seam { margin: 0 14px 0 4px; }
  .s3 .s3t-cash { display: block; text-align: right; }
  .s3t-cash b { margin-top: 5px; font-size: 22px; }
  .s3 .s3t-say { font-size: 21px; text-wrap: balance; }
  .s3t-fh { margin-bottom: 16px; }

  .s3 .s3t-three { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .s3 .gl.s3t-p { padding: 16px; }
  .s3 .gl.s3t-ai { padding-bottom: 10px; }
}

/* a wide phone or a small tablet, 560 to 760: each small panel lies down, its chart beside its numbers */
@media (min-width: 560px) and (max-width: 760px) {
  .s3 .gl.s3t-p { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .s3t-p > * { grid-column: 1; }
  .s3t-p > .s3t-who,
  .s3t-p > .s3t-st,
  .s3t-p > .s3t-run { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; }
  .s3t-jr > .s3t-st,
  .s3t-run,
  .s3t-run .s3t-st { flex-direction: column; align-items: flex-start; gap: 10px; }
  .s3t-cs > .s3-kk { grid-column: 1; }
  .s3 .s3t-who li { grid-template-columns: 22px 56px minmax(0, 1fr) 40px; gap: 8px; }
}

/* the two large charts change to the phone drawing where the desktop one would set its labels under 10.5px */
@media (max-width: 620px) {
  .s3t-hinge .s3t-ch.s3t-d { display: none; }
  .s3t-hinge .s3t-ch.s3t-m { display: block; }
}

@media (max-width: 559px) {
  .s3 .gl.s3t-cs { display: flex; align-items: stretch; }
  .s3t-p .s3t-plot,
  .s3t-dial { width: 100%; max-width: 400px; }
  .s3t-dial { align-self: center; }
  .s3t-run { padding-top: 18px; }
}

/* the narrowest phones: the phone drawings are under their own size here, so their type steps up */
@media (max-width: 350px) {
  .s3t-m .s3t-ax { font-size: 14px; }
  .s3t-m .s3t-val { font-size: 14.5px; }
  .s3t-st { flex-wrap: wrap; gap: 6px 20px; }
}

/* ── Q · the library: Alexandria, the knowledge system ── */

.s3-library { --show-end: 64px; --haze: radial-gradient(70% 30% at 50% 78%, rgba(70, 110, 220, 0.2), transparent 72%); }
.s3q-fig { --q-h: clamp(330px, 44vw, 640px); position: relative; }
/* the hall: key art made for this section, wider than the column, faded into the page on every side */
.s3q-art { position: absolute; left: 50%; top: 0; width: 100vw; height: var(--q-h); transform: translateX(-50%); pointer-events: none;
  background: url('assets/showcase/library-hall.webp') 50% 43% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 62%, transparent 96%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 62%, transparent 96%); }
.s3q-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ground) 0, rgba(2, 6, 13, 0) 20%, rgba(2, 6, 13, 0) 80%, var(--ground) 100%); }
/* its name, set over the dark of the dome */
.s3q-name { position: relative; padding-top: calc(var(--q-h) * 0.05); text-align: center; }
.s3q-name b { display: block; padding-left: 0.34em; font-size: clamp(27px, 4.5vw, 64px); font-weight: 300; line-height: 1.1; letter-spacing: 0.34em; text-transform: uppercase;
  background: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.s3q-name span { display: block; margin-top: clamp(8px, 1vw, 14px); padding-left: 0.3em; font-size: clamp(10.5px, 0.9vw, 12.5px); line-height: 1.5; letter-spacing: 0.3em; text-transform: uppercase; color: #f0e0c6; text-shadow: 0 0 10px #02060d, 0 0 22px #02060d, 0 0 34px #02060d; }
.s3q-name span::before { content: ''; display: block; width: 44px; height: 1.5px; margin: 0 auto clamp(8px, 1vw, 14px); transform: translateX(-0.15em); background: rgba(var(--need), 0.9); box-shadow: 0 0 10px rgba(191, 162, 95, 0.8); }

.s3 .s3q-beats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: calc(var(--q-h) * 0.5); }
.s3 .s3q-beats > li { display: flex; flex-direction: column; padding: 22px 24px 24px; }
/* the portal's light, spilling over the tops of the three cards */
.s3q-beats::before { content: ''; position: absolute; z-index: 2; left: 14%; right: 14%; top: -70px; height: 240px; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 232, 186, 0.42), rgba(236, 200, 120, 0.16) 46%, transparent 100%); }
/* in, used, kept true: one bead on each seam */
.s3 .s3q-beats > li.s3q-next { position: absolute; z-index: 3; inset: 0; display: block; padding: 0; pointer-events: none; }
.s3q-next .bead { position: absolute; top: 50%; left: calc(33.333% - 2.7px); }
.s3q-next .bead + .bead { left: calc(66.667% + 2.7px); }
.s3q-beats > li.gl { background-color: rgba(18, 24, 42, 0.74); }
.s3q-beats .s3-pt { margin-top: 8px; }

.s3 .s3q-in { display: grid; gap: 11px; margin-top: 18px; }
.s3 .s3q-in li { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; gap: 12px; font-size: 14.5px; line-height: 1.4; color: #e4e2dd; }
.s3q-in .s3-chip { justify-self: start; }

.s3q-faces { margin-top: 18px; }
.s3q-faces .fc { width: 34px; height: 34px; }
.s3q-reads { display: grid; gap: 11px; margin-top: 16px; }
.s3q-reads div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.s3q-reads dd { font-size: 14.5px; line-height: 1.4; color: #e4e2dd; }

.s3q-stale { margin-top: 18px; padding: 15px 16px 16px; border-radius: 8px; background: rgba(8, 9, 12, 0.5); box-shadow: inset 0 1px 0 rgba(var(--need), 0.22); }
.s3q-stale-t { margin-top: 9px; font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; color: #fbf4e2; }
.s3q-stale-s { margin-top: 6px; font-size: 14px; line-height: 1.45; color: #d9d2c0; }
.s3q-stale .bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.s3q-foot { margin-top: auto; padding-top: 14px; font-size: 13.5px; line-height: 1.45; color: #d9d2c0; }

@media (max-width: 1199px) {
  .s3 .s3q-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: calc(var(--q-h) * 0.56); }
  /* the gold card runs the full width: its words on the left, the rewrite on the right */
  .s3 .s3q-beats > li.call { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 28px; align-content: start; }
  .s3q-beats > li.call .s3q-stale { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .s3q-beats > li.call .s3q-foot { margin-top: 0; }
  .s3 .s3q-beats > li.s3q-next { display: none; }
}

@media (max-width: 760px) {
  .s3q-fig { --q-h: 300px; }
  .s3 .s3q-beats { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 150px; }
  .s3 .s3q-beats > li { padding: 18px 18px 20px; }
  .s3 .s3q-beats > li.call { display: flex; }
  .s3q-beats > li.call .s3q-stale { margin-top: 16px; }
  .s3q-beats > li.call .s3q-foot { padding-top: 14px; }
  .s3 .s3q-in li, .s3q-reads div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .s3q-faces .fc { width: 36px; height: 36px; }
  .s3q-beats::before { left: 0; right: 0; top: -50px; height: 180px; }
}

/* ── S · be the CEO ── */

/* A stepped hill: narrow and bright where you sit, wider at every rank, widest at the runs
   nobody watches. The steps are shares of the figure (--s3s-*), so they survive as it narrows.
   The figure is one grid: the two cards flank the top two bands, every band after them takes
   a full row and centres itself at its own share. */
.s3-ceo {
  --show-end: 41px;
  --haze:
    radial-gradient(43% 360px at 50% 268px, rgba(var(--hy), 0.2), rgba(var(--hz), 0.1) 50%, transparent 76%),
    radial-gradient(104% 560px at 50% calc(100% - 50px), rgba(70, 110, 220, 0.42), rgba(70, 110, 220, 0.1) 55%, transparent 76%);
  --s3s-you: 34.46;           /* 430 of 1248 */
  --s3s-ld: 46.47;            /* 580 */
  --s3s-ex: 58.49;            /* 730 */
  --s3s-lt: 70.51;            /* 880 */
  --s3s-sy: 82.53;            /* 1030 */
  --s3s-rn: 94.55;            /* 1180 */
  --s3s-gap: 1.6;             /* 20: a card to the Leader band */
  --s3s-step: 12px;           /* between one band and the next */
}

.s3s-fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--s3s-ld) * 1%) minmax(0, 1fr);
  grid-template-rows: 1fr repeat(6, auto);   /* the cards stand taller than the two bands between them: the slack goes above You */
  column-gap: calc(var(--s3s-gap) * 1%);
  row-gap: var(--s3s-step);
}

/* ---- the two cards: what you set, and what comes back ---- */

.s3s-mis,
.s3s-gate { position: relative; z-index: 1; grid-row: 1 / span 2; min-width: 0; }
.s3s-mis { grid-column: 1; padding: 18px 20px 19px; }
.s3s-gate { grid-column: 3; padding: 17px 20px 20px; }
.s3 .s3s-mis .lb { line-height: 1; }
.s3s-mis-t { margin-top: 11px; font-size: 22px; line-height: 1.18; letter-spacing: -0.02em; color: var(--ivory-mid); }
.s3s-bar { height: 6px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.s3s-bar i { display: block; width: 70%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--hy), 0.6), #fff6e2); box-shadow: 0 0 12px rgba(var(--hy), 0.6); }
.s3s-rw { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 13px; line-height: 1.5; color: #c9ccd2; }
.s3s-rw + .s3s-rw { margin-top: 6px; }
.s3s-rw .s3-chip { margin-left: auto; }
.s3s-mis .s3-chip,
.s3s-gate .s3-chip { min-height: 22px; padding: 0 9px; font-size: 11.5px; }
.s3s-by { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 13px; line-height: 1.35; color: #c9ccd2; }
.s3 .s3s-by .fc { width: 24px; height: 24px; }

.s3s-gate-k { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.s3s-gate-k .s3-chip { margin-left: auto; }
.s3s-gate-q { margin-top: 10px; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; color: #fbf4e2; }
.s3s-gate .s3s-by { margin-top: 9px; color: #d9d2c0; }
.s3 .s3s-gate .bts { gap: 7px; margin-top: 12px; }
.s3 .s3s-gate .bt { height: 32px; padding: 0 11px; font-size: 13px; }
.s3s-gate .bt i { margin-right: 7px; font: 500 11px/1 var(--mono); opacity: 0.7; }
.s3s-gate-f { margin-top: 9px; font-size: 13px; line-height: 1.5; color: #e2dac4; }

/* ---- the ladder ---- */

.s3s-b { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; height: 88px; padding: 0 24px; }
.s3s-t { min-width: 0; }
.s3 .s3s-t b { display: block; font-size: 21px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap; color: var(--ivory-mid); }
.s3s-t span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; white-space: nowrap; color: #c9ccd2; }
.s3s-fcs { margin-left: auto; }
.s3s-lead { display: inline-flex; flex: none; }
.s3 .s3s-lead .fc { width: 46px; height: 46px; box-shadow: 0 0 0 2px rgba(var(--hy), 0.85), 0 0 18px rgba(var(--hy), 0.45); }
.s3 .s3s-b2 .fc { width: 44px; height: 44px; }
.s3 .s3s-b3 .fc { width: 40px; height: 40px; }
.s3 .s3s-b4 .fc { width: 32px; height: 32px; }
.s3s-more { display: none; place-items: center; flex: none; width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #e9ebf5; background: #232b42; box-shadow: 0 0 0 2px #0a0d14, 0 0 0 3px rgba(255, 255, 255, 0.14); }
.s3s-ct { flex: none; width: 104px; text-align: right; }
.s3 .s3s-ct b { display: block; font-size: 30px; font-weight: 460; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ivory-mid); }
.s3s-ct span { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: #9aa5b8; }

/* you: the one bright band, joined to the mission on its left and to the call on its right */
.s3s-me {
  grid-area: 1 / 2;
  align-self: end;
  justify-self: center;
  width: calc(var(--s3s-you) / var(--s3s-ld) * 100%);
  height: 92px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(to bottom, #fbf4e6, #e3d6bd 60%, #cfc0a3);
  box-shadow: inset 0 1px 0 #fff, 0 0 80px 0 rgba(var(--hy), 0.45), 0 0 22px 0 rgba(var(--hy), 0.5);
}
.s3 .s3s-me .you { width: 44px; height: 44px; color: #f4ecdb; background: #1a1712; }
.s3 .s3s-me .s3s-t b,
.s3 .s3s-me .s3s-ct b { color: #1a1712; }
.s3s-me .s3s-t span { color: #4a4336; }
.s3s-me .s3s-ct { width: auto; margin-left: auto; }
.s3s-me .s3s-ct span { color: #5c5343; }
.s3s-me::before,
.s3s-me::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc((var(--s3s-gap) + (var(--s3s-ld) - var(--s3s-you)) / 2) / var(--s3s-you) * 100%);
  height: 1.5px;
  background: rgba(var(--hy), 0.6);
  box-shadow: 0 0 8px rgba(var(--hy), 0.5);
}
.s3s-me::before { right: 100%; }
.s3s-me::after { left: 100%; background: #f3dc9c; box-shadow: 0 0 10px rgba(226, 190, 110, 0.95); }

.s3s-b1 { grid-area: 2 / 2; }
.s3s-b2,
.s3s-b3,
.s3s-b4,
.s3s-runs { grid-column: 1 / -1; justify-self: center; }
.s3s-b2 { grid-row: 3; width: calc(var(--s3s-ex) * 1%); }
.s3s-b3 { grid-row: 4; width: calc(var(--s3s-lt) * 1%); }
.s3s-b4 { grid-row: 5; width: calc(var(--s3s-sy) * 1%); }

/* direction goes down: one short light between each band and the next */
.s3s-b1::before,
.s3s-b2::before,
.s3s-b3::before,
.s3s-b4::before,
.s3s-runs::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--s3s-step));
  width: 2px;
  height: var(--s3s-step);
  margin-left: -1px;
  background: rgba(var(--hy), 0.8);
  box-shadow: 0 0 8px rgba(var(--hy), 0.7);
}

/* ---- the foot: the runs, a field of small cells ---- */

.s3s-runs {
  position: relative;
  z-index: 1;
  grid-row: 6;
  width: calc(var(--s3s-rn) * 1%);
  padding: 0 0.16% 0.577%;    /* 2 and 7 at 1248, as shares: the threads below are drawn to the same scale */
  border-radius: 8px 8px 12px 12px;
  background-color: rgba(18, 24, 42, 0.72);
  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 40px 90px -20px rgba(70, 120, 255, 0.6);
}
.s3s-runs-h { display: flex; align-items: baseline; gap: 12px; height: 44px; padding: 13px 22px 0; line-height: 1.5; white-space: nowrap; }
.s3 .s3s-runs-h > b { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; color: var(--ivory-mid); }
.s3s-runs-h > span { font-size: 14.5px; color: #d6d8dd; }
.s3s-runs-h > em { margin-left: auto; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #9aa5b8; }
.s3 .s3s-runs-h > em b { margin-right: 8px; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; color: var(--ivory-mid); }
.s3s-field { display: block; width: 100%; height: auto; aspect-ratio: 1176.4 / 126.8; }
.s3s-w { fill: rgba(var(--hy), 0.07); }
.s3s-d { fill: rgba(var(--hy), 0.24); }
.s3s-r { fill: #fff6e2; filter: drop-shadow(0 0 4px rgba(var(--hy), 0.9)); }
.s3s-g { fill: #f6dc94; filter: drop-shadow(0 0 5px rgba(236, 200, 110, 1)) drop-shadow(0 0 12px rgba(191, 162, 95, 0.8)); }

/* ---- what comes back up: two gold threads from the two gold cells to the foot of the call ----
   One drawing laid over the rows from Executives to the runs, in two parts. The upper part is
   as wide as the figure and exactly as tall as three bands, their gaps and the runs' heading
   (344), so it stretches sideways only; the lower part is the cells, which scale with the
   figure, so it scales with them. They meet where the thread is a plain upright. */
.s3 .s3s-thr { z-index: 0; grid-column: 1 / -1; grid-row: 3 / 7; }
.s3s-thr svg { overflow: visible; }
.s3 .s3s-thr .thr { stroke-width: 2.6; }
.s3 .s3s-thr .s3s-p-tight { display: none; }   /* the same rise, to where the card stands at 1200 to 1339 */
.s3s-yours {
  position: absolute;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 3 / 7;
  left: calc(98.56% + 14px);
  top: 234px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f6e2a8;
}
.s3s-yours::before { content: '\2191'; margin-right: 7px; font-size: 13px; }

/* ---- the key ---- */

.s3 .s3s-key { grid-column: 1 / -1; grid-row: 7; display: flex; justify-content: center; gap: 10px 44px; margin-top: 32px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.s3 .s3s-key li { display: flex; align-items: center; gap: 12px; }
.s3 .s3s-key li::before { content: ''; flex: none; width: 22px; height: 3px; border-radius: 999px; background: rgb(var(--hy)); box-shadow: 0 0 8px rgba(var(--hy), 0.7); }
.s3 .s3s-key li.s3s-up::before { background: #f3dc9c; box-shadow: 0 0 10px rgba(226, 190, 110, 0.95); }

/* ── S at 1200 to 1339: the drawn composition with a little less air. The cards need their
   width for one line each, so the Leader band gives some up and the first step is the short one ── */

@media (min-width: 1200px) and (max-width: 1339px) {
  .s3-ceo { --s3s-ld: 42.6; --s3s-ex: 55.6; --s3s-lt: 68.6; --s3s-sy: 81.55; --s3s-gap: 1.2; }
  .s3s-mis { padding-inline: 16px; }
  .s3s-gate { padding-inline: 16px; }
  .s3s-by { gap: 8px; font-size: 12.5px; }
  .s3 .s3s-gate .bts { gap: 6px; }
  .s3 .s3s-gate .bt { padding: 0 9px; font-size: 12.5px; }
  .s3s-me { gap: 12px; padding: 0 18px; }
  .s3s-me .s3s-ct span { letter-spacing: 0.12em; }
  .s3s-b1 { padding: 0 20px; }
  .s3 .s3s-thr .s3s-p-wide { display: none; }
  .s3 .s3s-thr .s3s-p-tight { display: inline; }
}

/* until the page has margin to spare, the thread's label stands inside it, beside the Lieutenants */
@media (min-width: 1200px) and (max-width: 1399px) {
  .s3s-yours { left: auto; right: calc(1.44% + 24px); top: 138px; }
}

/* ── S below 1200: the two cards side by side above the hill, and the hill at the full width
   with gentler steps. The threads go; the gold of the card and of the two cells carries it ── */

@media (max-width: 1199px) {
  .s3-ceo {
    --s3s-you: 64; --s3s-ld: 71.2; --s3s-ex: 78.4; --s3s-lt: 85.6; --s3s-sy: 92.8; --s3s-rn: 100;
    --s3s-drop: 34px;         /* from the foot of a card to the top of You */
    --haze:
      radial-gradient(70% 300px at 50% 548px, rgba(var(--hy), 0.17), rgba(var(--hz), 0.09) 50%, transparent 76%),
      radial-gradient(130% 520px at 50% calc(100% - 50px), rgba(70, 110, 220, 0.4), rgba(70, 110, 220, 0.1) 55%, transparent 76%);
  }
  .s3s-fig { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; column-gap: 20px; }
  .s3s-mis,
  .s3s-gate { grid-row: 1; margin-bottom: calc(var(--s3s-drop) - var(--s3s-step)); }
  .s3s-mis { grid-column: 1; }
  .s3s-gate { grid-column: 2; }
  .s3s-b { grid-column: 1 / -1; justify-self: center; height: auto; min-height: 88px; padding-block: 14px; }
  .s3s-t span { white-space: normal; }
  .s3s-ct { width: auto; min-width: 62px; }
  .s3s-me { grid-row: 2; align-self: auto; width: calc(var(--s3s-you) * 1%); min-height: 92px; }
  .s3s-b1 { grid-row: 3; width: calc(var(--s3s-ld) * 1%); }
  .s3s-b2 { grid-row: 4; }
  .s3s-b3 { grid-row: 5; }
  .s3s-b4 { grid-row: 6; }
  .s3s-runs { grid-row: 7; padding: 0 2px 7px; }
  .s3 .s3s-key { grid-row: 8; }
  /* each card drops its own light onto You */
  .s3s-me::before,
  .s3s-me::after { top: calc(-1 * var(--s3s-drop)); width: 1.5px; height: var(--s3s-drop); }
  .s3s-me::before { right: auto; left: 22%; }
  .s3s-me::after { left: auto; right: 22%; }
  .s3 .s3s-thr,
  .s3s-yours { display: none; }
  /* the runs' heading on two lines: its name and its count, then what they are */
  .s3s-runs-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; height: auto; padding: 12px 22px 12px; white-space: normal; }
  .s3s-runs-h > span { grid-column: 1 / -1; grid-row: 2; }
  .s3s-runs-h > em { grid-column: 2; grid-row: 1; white-space: nowrap; }
}

/* fourteen faces no longer fit beside the words: eight, and a count of the rest */
@media (max-width: 899px) {
  .s3-ceo { --s3s-you: 70; --s3s-ld: 76; --s3s-ex: 82; --s3s-lt: 88; --s3s-sy: 94; }
  .s3 .s3s-b4 .fc:nth-child(n+9) { display: none; }
  .s3s-more { display: grid; }
}

/* ── S on the phone: the call first, then the mission, then the ladder as full rows that still
   step in a little going up. Each row: its name and line with the count at the right, then
   its faces on a line of their own. You have no faces: yours is the short bright row on top ── */

@media (max-width: 760px) {
  .s3-ceo {
    --show-end: 40px;
    --s3s-in: 4px;            /* how far each row steps in from the one below */
    --haze:
      radial-gradient(120% 250px at 50% 735px, rgba(var(--hy), 0.16), rgba(var(--hz), 0.08) 50%, transparent 76%),
      radial-gradient(200% 460px at 50% calc(100% - 40px), rgba(70, 110, 220, 0.4), rgba(70, 110, 220, 0.1) 55%, transparent 76%);
  }
  .s3s-fig { grid-template-columns: minmax(0, 1fr); }
  .s3s-mis,
  .s3s-gate { grid-column: 1; margin-bottom: 0; padding-inline: 18px; }
  .s3s-gate { grid-row: 1; }
  .s3s-mis { grid-row: 2; margin-bottom: 10px; }
  .s3s-me::before,
  .s3s-me::after { content: none; }

  .s3s-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; justify-self: stretch; gap: 11px 12px; width: auto; min-height: 0; padding: 14px 14px 15px; }
  .s3s-me { grid-row: 3; width: auto; min-height: 0; margin-inline: calc(var(--s3s-in) * 5); }
  .s3s-b1 { grid-row: 4; width: auto; margin-inline: calc(var(--s3s-in) * 4); }
  .s3s-b2 { grid-row: 5; width: auto; margin-inline: calc(var(--s3s-in) * 3); }
  .s3s-b3 { grid-row: 6; width: auto; margin-inline: calc(var(--s3s-in) * 2); }
  .s3s-b4 { grid-row: 7; width: auto; margin-inline: var(--s3s-in); }
  .s3s-runs { grid-row: 8; }
  .s3 .s3s-key { grid-row: 9; }
  .s3 .s3s-t b { font-size: 19px; }
  .s3s-t span { margin-top: 3px; font-size: 13px; line-height: 1.4; }
  .s3s-ct { min-width: 0; }
  .s3 .s3s-ct b { font-size: 26px; }
  .s3s-ct span { margin-top: 5px; letter-spacing: 0.1em; }
  .s3s-fcs { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-left: 0; }
  .s3 .s3s-lead .fc,
  .s3 .s3s-b2 .fc { width: 40px; height: 40px; }
  .s3 .s3s-b3 .fc { width: 36px; height: 36px; }
  .s3 .s3s-b4 .fc,
  .s3s-more { width: 30px; height: 30px; }

  /* you: the disc beside the name, the line under both, the count and its label down the right */
  .s3s-me { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 5px 10px; padding-block: 13px 14px; }
  .s3s-me .s3s-t,
  .s3s-me .s3s-ct { display: contents; }
  .s3 .s3s-me .you { grid-area: 1 / 1; width: 28px; height: 28px; font-size: 10.5px; }
  .s3 .s3s-me .s3s-t b { grid-area: 1 / 2; }
  .s3s-me .s3s-t span { grid-area: 2 / 1 / auto / span 2; margin-top: 0; }
  .s3 .s3s-me .s3s-ct b { grid-area: 1 / 3; text-align: right; }
  .s3s-me .s3s-ct span { grid-area: 2 / 3; margin-top: 0; text-align: right; }

  /* the runs: name, what they are, the count; and the field cut to its right half so a cell stays a cell */
  .s3s-runs-h { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 13px 14px 12px; }
  .s3 .s3s-runs-h > b { font-size: 17px; }
  .s3s-runs-h > span { grid-column: 1; grid-row: 2; font-size: 13px; line-height: 1.4; }
  .s3s-runs-h > em { grid-column: 1; grid-row: 3; margin: 6px 0 0; }
  .s3 .s3s-runs-h > em b { font-size: 20px; }
  .s3s-field { height: 78px; aspect-ratio: auto; }

  .s3 .s3s-key { flex-direction: column; align-items: flex-start; gap: 8px; width: fit-content; margin: 26px auto 0; font-size: 13.5px; }
}

/* the narrowest phones: the steps give a little so You keeps its line */
@media (max-width: 374px) {
  .s3-ceo { --s3s-in: 2px; }
}

/* ── R · they keep working ── */

/* One night on the floor, 21:30 to 07:00. The markup is written by R.gen.py from the drawing's
   own data: every bar, tick and hour label is a share of the track's width (--x, --w, --b), so
   the night stretches with the page, while a row keeps its height and the four handoffs are one
   SVG pulled over the track. --s3r-who is the names column (it gives way first, so the track
   holds its drawn 770px as long as it can), --s3r-pr the air right of 07:00, --s3r-rh a row and
   --s3r-bl the line a row's work sits on. */
.s3-night {
  --lede-w: 532px;
  --show-end: clamp(52px, 4.6vw, 66px);
  --haze:
    radial-gradient(62.5% 69.7% at 97.2% 56.9%, rgba(250, 186, 124, 0.62), rgba(232, 136, 140, 0.28) 42%, rgba(160, 120, 200, 0.1) 62%, transparent 78%),
    radial-gradient(76.4% 51.4% at 20.8% 69.7%, rgba(70, 110, 220, 0.3), transparent 72%);
  --s3r-who: clamp(234px, calc(100% - 770px), 270px);
  --s3r-pr: 0px;
  --s3r-rh: 74px;
  --s3r-bl: 44px;
  --s3r-head: 190px;
}
.s3-night > figure { margin-top: clamp(30px, 3.5vw, 50px); }

/* night is on the left: both star layers stay there and thin out toward the dawn. They are also
   kept out of the band the heading stands in, where a star beside a word reads as a full stop
   (--s3r-head is the head's height, near enough, at each of the three widths) */
.s3-night .show-sky::before,
.s3-night .show-sky::after {
  --s3r-band: linear-gradient(to bottom, #000 calc(var(--show-y) - 34px), transparent calc(var(--show-y) - 10px), transparent calc(var(--show-y) + var(--s3r-head)), #000 calc(var(--show-y) + var(--s3r-head) + 28px));
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 46%, transparent 78%), var(--s3r-band);
          mask-image: linear-gradient(90deg, #000 0, #000 46%, transparent 78%), var(--s3r-band);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.s3-night .show-sky::after {
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(270deg, #000 0, #000 46%, transparent 78%), var(--s3r-band);
          mask-image: linear-gradient(270deg, #000 0, #000 46%, transparent 78%), var(--s3r-band);
}

/* the panel: the timeline, then what you find at 07:00. The dawn warms the glass from the right */
.s3r-night { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 208px; }
.s3r-night::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 190, 130, 0) 40%, rgba(255, 186, 128, 0.16) 68%, rgba(255, 190, 130, 0.34) 88%, rgba(255, 204, 156, 0.5) 100%);
}
.s3r-tl,
.s3r-dawn { position: relative; min-width: 0; }
.s3r-away {
  position: absolute;
  left: 24px;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #b0b5be;
}
.s3r-away svg.i { width: 13px; height: 13px; color: rgb(var(--hy)); }

/* the sheet: the hours, six rows, and the line where the night ends */
.s3r-sheet { position: relative; padding-bottom: 24px; }
.s3r-sheet::after {
  content: '';
  position: absolute;
  right: calc(var(--s3r-pr) - 1px);
  top: 34px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(to bottom, #ffe9c4, rgba(255, 214, 160, 0.5));
  box-shadow: 0 0 14px 2px rgba(255, 205, 140, 0.7);
}
.s3r-ax { position: relative; height: 62px; margin: 0 var(--s3r-pr) 0 var(--s3r-who); }
.s3r-ax span {
  position: absolute;
  left: var(--x);
  top: 16px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  color: #9aa5b8;
  transform: translateX(-50%);
}
.s3r-ax span:last-child { color: #ffe9c4; }
.s3r-ax::after {
  content: '';
  position: absolute;
  left: var(--a);
  top: 40px;
  width: var(--z);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--hy), 0.12), rgba(var(--hy), 0.42) 12%, rgba(var(--hy), 0.42) 88%, rgba(var(--hy), 0.12));
}

/* a row: who, then their night */
.s3 .s3r-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--s3r-who) minmax(0, 1fr);
  height: var(--s3r-rh);
  padding-right: var(--s3r-pr);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.s3r-who { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 17px 0 0 24px; }
.s3r-who .fc { margin-top: 2px; box-shadow: 0 0 0 2px rgba(var(--t), 0.8), 0 0 14px rgba(var(--t), 0.4); }
.s3r-who b { display: block; font-size: 15px; line-height: 1.25; color: #f1eee8; }
.s3r-who span { display: block; font-size: 12px; line-height: 1.4; white-space: nowrap; color: #b6bcc8; }

/* the track: a hairline, and a tick on every beat */
.s3 .s3r-trk { position: relative; min-width: 0; }
.s3r-trk::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s3r-bl) - 5px);
  height: 11px;
  background:
    repeating-linear-gradient(90deg, rgba(var(--t), 0.95) 0 2px, transparent 2px var(--b)),
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) 0 5px / 100% 1px no-repeat;
}

/* a job: a bar where the beat found work, its name above, and a thin line per worker sent out */
.s3 .s3r-job { position: absolute; left: var(--x); top: 0; width: var(--w); height: 100%; }
.s3r-trk time { display: none; }
.s3r-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s3r-bl) - 12px);
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(to bottom, rgba(var(--t), 0.95), rgba(var(--t), 0.7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 18px -2px rgba(var(--t), 0.75);
}
.s3r-lbl {
  position: absolute;
  left: 12px;
  top: calc(var(--s3r-bl) - 33px);
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
  color: #ecebe6;
}
.s3r-job.r .s3r-lbl { left: auto; right: 0; }
.s3r-wk {
  position: absolute;
  left: 10px;
  top: calc(var(--s3r-bl) + 16px);
  width: 72%;
  height: 3px;
  border-radius: 999px;
  background: rgba(var(--t), 0.6);
}
.s3r-wk + .s3r-wk { left: 24px; top: calc(var(--s3r-bl) + 21px); width: 56%; }
.s3r-wk + .s3r-wk + .s3r-wk { left: 38px; top: calc(var(--s3r-bl) + 26px); width: 40%; }

/* where a handoff lands, and the one place the night stops for you */
.s3 .s3r-job.in::before {
  content: '';
  position: absolute;
  left: -8px;
  top: calc(var(--s3r-bl) - 5px);
  z-index: 4;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 8px 2px rgba(var(--hy), 0.85);
}
.s3 .s3r-gate { position: absolute; left: var(--x); top: var(--s3r-bl); z-index: 5; width: 0; height: 0; }
.s3r-gate i {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: #f6dc94;
  box-shadow: 0 0 0 2px #1b1608, 0 0 18px 4px rgba(226, 190, 110, 0.95), 0 0 44px 8px rgba(191, 162, 95, 0.6);
  transform: rotate(45deg);
}
.s3r-gate span {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: #f8e6b0;
}
/* the curves keep the drawing's 74px rows: the box is as tall as six rows and starts where
   row one's work line needs it to, so it still fits when a row is taller */
.s3r-over {
  position: absolute;
  left: var(--s3r-who);
  right: var(--s3r-pr);
  top: calc(62px + var(--s3r-bl) - var(--s3r-rh) * 44 / 74);
  height: calc(var(--s3r-rh) * 6);
  pointer-events: none;
}

/* 07:00: what Pulse shows, and the one call that waited */
.s3r-dawn { padding: 62px 22px 24px; }
.s3r-seven b { display: block; font-size: 34px; font-weight: 460; line-height: 1; letter-spacing: -0.04em; color: #fff3df; }
.s3r-seven span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: #e4d9c6; }
.s3r-pulse { margin-top: 22px; }
.s3r-pulse .s3-kk { line-height: 1.5; color: #c9bfae; }
.s3r-counts > div {
  display: flex;
  align-items: baseline;
  height: 33px;
  padding-top: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: #ecebe6;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09);
}
.s3r-counts dd { margin-left: auto; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff3df; }
.s3r-counts > .s3r-gated { color: #f6e2a8; box-shadow: none; }
.s3r-gated dd { color: #f6dc94; }
.s3r-call { margin-top: 14px; padding: 12px 13px 13px; }
.s3 .s3r-call .k { font-size: 10px; }
.s3r-q { margin-top: 8px; font-size: 14.5px; line-height: 1.25; color: #fbf4e2; }
.s3r-by { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; line-height: 1.5; color: #d9d2c0; }
.s3r-by .fc { width: 20px; height: 20px; }

/* the four guard rails */
.s3 .s3r-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.s3 .s3r-tiles > li { display: flex; flex-direction: column; min-height: 168px; padding: 16px 20px 18px; }
.s3r-tiles h3 { margin-top: 8px; font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: -0.015em; color: var(--ivory-mid); }
.s3r-tiles h3 + p { margin-top: 6px; font-size: 13.5px; line-height: 1.42; color: #c9ccd2; }
.s3r-vz { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; font-size: 12.5px; line-height: 1.5; white-space: nowrap; color: #dedcd7; }
.s3r-vz .fc { width: 24px; height: 24px; }
.s3r-vz svg.i { width: 16px; height: 16px; color: rgb(var(--hy)); }
.s3r-vz .bt { height: 28px; padding: 0 11px; font-size: 12.5px; }
.s3r-meter { flex: 1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--hy), 0.5), #fff6e2); }
.s3r-slot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(var(--hy), 0.5); }
.s3r-slot.on { background: rgb(var(--hy)); box-shadow: 0 0 12px rgba(var(--hy), 0.7); }
.s3r-slot + span { margin-left: 4px; }
.s3r-sw { position: relative; flex: none; width: 46px; height: 26px; margin-left: auto; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.s3r-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #f3eee2; }

/* ── a tight desktop, 1200 to 1359: the same composition, the names column and 07:00 a little narrower ── */

@media (min-width: 1200px) and (max-width: 1359px) {
  .s3-night { --s3r-who: clamp(228px, calc(100% - 770px), 270px); }
  .s3r-night { grid-template-columns: minmax(0, 1fr) 200px; }
  .s3r-who { gap: 10px; padding-left: 20px; }
  .s3r-away { left: 20px; }
  .s3r-dawn { padding-inline: 20px 18px; }
  .s3 .s3r-tiles > li { padding-inline: 18px; }
}

/* ── below 1200: 07:00 drops under the night as a row, the guard rails go two by two ── */

@media (max-width: 1199px) {
  .s3-night { --s3r-who: 232px; --s3r-pr: 28px; --s3r-head: 290px; }
  .s3r-night { grid-template-columns: minmax(0, 1fr); }
  .s3r-dawn {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 236px);
    align-items: center;
    column-gap: 36px;
    padding: 20px 24px 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }
  .s3r-pulse { margin-top: 0; }
  .s3r-counts { display: grid; grid-template-columns: repeat(5, minmax(max-content, 1fr)); margin-top: 8px; }
  .s3r-counts > div,
  .s3r-counts > .s3r-gated { display: block; height: auto; padding: 0 12px 0 14px; font-size: 13px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1); }
  .s3r-counts > div:first-child { padding-left: 0; box-shadow: none; }
  .s3r-counts dd { margin: 1px 0 0; font-size: 22px; line-height: 1.2; }
  .s3r-call { margin-top: 0; }
  .s3 .s3r-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s3 .s3r-tiles > li { min-height: 152px; }
}

/* under 985 the names column would starve the track: each Synth moves onto a line above its own night */
@media (max-width: 984px) {
  .s3-night { --s3r-who: 18px; --s3r-pr: 26px; --s3r-rh: 108px; --s3r-bl: 78px; }
  .s3r-away { position: static; padding: 18px 18px 0; }
  .s3 .s3r-row { grid-template-columns: minmax(0, 1fr); padding-left: var(--s3r-who); }
  .s3r-who { position: absolute; left: 18px; top: 11px; align-items: center; gap: 10px; padding: 0; }
  .s3r-who .fc { width: 24px; height: 24px; margin-top: 0; }
  .s3r-who p { display: flex; align-items: baseline; gap: 10px; }
  /* a handoff that drops through a row passes behind that row's name, not across it: the curves
     are hidden in the band each name stands in, as far along as the longest name reaches */
  .s3r-over {
    -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0, transparent 24px, #000 34px, #000 90px, transparent 100px, transparent 108px), linear-gradient(90deg, transparent 264px, #000 292px);
            mask-image: repeating-linear-gradient(to bottom, transparent 0, transparent 24px, #000 34px, #000 90px, transparent 100px, transparent 108px), linear-gradient(90deg, transparent 264px, #000 292px);
  }
  .s3r-dawn { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); grid-template-areas: 'seven call' 'pulse pulse'; row-gap: 18px; padding-inline: 18px 20px; }
  .s3r-seven { grid-area: seven; }
  .s3r-pulse { grid-area: pulse; }
  .s3r-call { grid-area: call; }
}

/* while the track is too narrow for every label: a tail is cut, one label goes, two hang from
   the end of their bar. The three ranges are the widths at which the track is under 766px,
   each with room to spare for a window that loses 17px to a scrollbar. */
@media (min-width: 1200px) and (max-width: 1339px), (min-width: 985px) and (max-width: 1169px), (min-width: 761px) and (max-width: 912px) {
  .s3r-lbl { font-size: 12px; }
  .s3r-more,
  .s3r-job.drop .s3r-lbl { display: none; }
  .s3r-job.hang .s3r-lbl { left: auto; right: 0; }
}

/* ── the phone: a timeline cannot be read, so the night is a log, one block per Synth ── */

@media (max-width: 760px) {
  .s3-night {
    --haze:
      radial-gradient(150% 21% at 76% 84%, rgba(250, 186, 124, 0.56), rgba(232, 136, 140, 0.24) 42%, rgba(160, 120, 200, 0.09) 62%, transparent 78%),
      radial-gradient(130% 26% at 14% 22%, rgba(70, 110, 220, 0.26), transparent 72%);
    --s3r-head: 430px;
  }
  .s3-night .show-sky::before,
  .s3-night .show-sky::after {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 34%, transparent 66%), var(--s3r-band);
            mask-image: linear-gradient(to bottom, #000 0, #000 34%, transparent 66%), var(--s3r-band);
  }
  .s3r-night::before { background: linear-gradient(to bottom, rgba(255, 190, 130, 0) 52%, rgba(255, 186, 128, 0.14) 74%, rgba(255, 190, 130, 0.3) 90%, rgba(255, 204, 156, 0.44) 100%); }
  .s3r-away { padding: 16px 16px 14px; }
  .s3r-ax,
  .s3r-over,
  .s3r-wk { display: none; }
  .s3r-sheet { padding-bottom: 0; }
  /* the dawn line lies down: the night above it, 07:00 below */
  .s3r-sheet::after { left: 16px; right: 16px; top: auto; bottom: -1px; width: auto; height: 2px; background: linear-gradient(90deg, rgba(255, 214, 160, 0.5), #ffe9c4); }

  .s3 .s3r-row { display: block; height: auto; padding: 14px 16px 13px; }
  .s3r-who { position: static; align-items: flex-start; gap: 12px; }
  .s3r-who .fc { width: 36px; height: 36px; margin-top: 2px; }
  .s3r-who p { display: block; }
  .s3r-who span { font-size: 13px; }
  /* the beat, kept as a strip under the name: close ticks every 15 minutes, wide ones every hour */
  .s3 .s3r-trk { margin-top: 12px; padding-top: 18px; }
  .s3r-trk::before { top: 0; height: 9px; background-position: 0 0, 0 4px; opacity: 0.8; }
  .s3 .s3r-job,
  .s3 .s3r-gate {
    position: static;
    display: grid;
    grid-template-columns: 46px 20px minmax(0, 1fr);
    align-items: baseline;
    width: auto;
    height: auto;
    padding: 3px 0;
  }
  .s3 .s3r-job.in::before { content: none; }
  .s3r-trk time { display: block; font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.04em; color: #9aa5b8; }
  .s3r-bar { position: static; width: 9px; height: 9px; border-radius: 3px; box-shadow: 0 0 10px -1px rgba(var(--t), 0.75); }
  .s3r-lbl,
  .s3r-gate span { position: static; font-size: 14px; line-height: 1.4; white-space: normal; }
  .s3r-gate time { color: #e6d29c; }
  .s3r-gate i { position: static; width: 9px; height: 9px; box-shadow: 0 0 0 1.5px #1b1608, 0 0 10px 2px rgba(226, 190, 110, 0.8); }

  .s3r-dawn { display: block; padding: 22px 16px 16px; box-shadow: none; }
  .s3r-pulse { margin-top: 20px; }
  .s3r-counts { display: block; margin-top: 0; }
  .s3r-counts > div,
  .s3r-counts > .s3r-gated,
  .s3r-counts > div:first-child { display: flex; height: 33px; padding: 9px 0 0; font-size: 14px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09); }
  .s3r-counts > .s3r-gated { box-shadow: none; }
  .s3r-counts dd { margin: 0 0 0 auto; font-size: 16px; line-height: 1.5; }
  .s3r-call { margin-top: 14px; padding: 14px 15px 15px; }
  .s3 .s3r-call .k { font-size: 11px; }
  .s3r-q { font-size: 16px; }
  .s3r-by { font-size: 13px; }

  .s3 .s3r-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .s3 .s3r-tiles > li { min-height: 0; padding: 16px 18px 16px; }
  .s3r-vz { margin-top: 0; padding-top: 14px; }
}