/* Plan and Play — online case.
   Tokens and type come from the Figma file "Presentation" (Brand 1, Grey 3, Body/B4 …).
   Two layouts share one markup:
   - stage: a card at least 1200 px wide is laid out like the 1400 × 900 slide; every size is
     N × --s, where --s = card width / 1400, so the slide scales as a whole;
   - flow: narrower cards stack their content; --s is a fixed px value. */

:root {
  --black: #111;
  --black-1: #1f1f1f;
  --grey: #242424;
  --grey-1: #7d7879;
  --grey-2: #969092;
  --grey-3: #d9d7d8;
  --white: #fff;
  --brand-1: #d2ff4d;
  --brand-2: #826ff6;
  --error: #f66f6f;
  --page: #050505;
  --gap: 12px;
  --radius: 40px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--grey-3);
  font-family: Ubuntu, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }

main {
  display: grid;
  gap: var(--gap);
  padding: 0 var(--gap) var(--gap);
}

/* ---------- slide shell ---------- */

.slide {
  container: slide / inline-size;
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: var(--black);
  border-radius: var(--radius);
  overflow: hidden;
}
.in {
  --s: 1px;
  position: relative;
  isolation: isolate;
  padding: calc(64 * var(--s)) calc(48 * var(--s)) calc(48 * var(--s));
}
@container slide (min-width: 1200px) {
  .in { --s: calc(100cqi / 1400); min-height: calc(900 * var(--s)); }
}
@container slide (max-width: 1199px) {
  .in { padding: 64px 40px 48px; }
}
@container slide (max-width: 699px) {
  .in { --s: 0.875px; padding: 44px 20px 40px; }
}

/* hexagon pattern used on most slides: same box, rotation and offset as in Figma */
.pattern {
  position: absolute;
  z-index: -1;
  left: calc(-1097 * var(--s));
  top: calc(102 * var(--s));
  width: calc(2029.663 * var(--s));
  height: calc(1572.09 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pattern img {
  flex: none;
  max-width: none;
  width: calc(1100.163 * var(--s));
  height: calc(1787.042 * var(--s));
  transform: rotate(106.9deg);
}

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

.h {
  color: var(--brand-1);
  font-weight: 500;
  font-size: calc(52 * var(--s));
  line-height: calc(52 * var(--s));
  letter-spacing: 0;
}
.lead {
  margin-top: calc(24 * var(--s));
  max-width: calc(775 * var(--s));
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
  letter-spacing: 0.1px;
  color: var(--grey-3);
}
.lead.narrow { max-width: calc(751 * var(--s)); }

@container slide (max-width: 1199px) {
  .h { font-size: clamp(32px, 6.4cqi, 52px); line-height: 1.12; }
}

/* ---------- 01 cover ---------- */

.slide.cover { border-radius: 0 0 var(--radius) var(--radius); }
.cover .in {
  padding: 0;
  aspect-ratio: 1400 / 900;
  min-height: 0;
  background: linear-gradient(90deg, #121212 0%, rgba(15, 30, 31, 0.2) 44.767%, #121212 62%), var(--black);
}
.cover-media {
  position: absolute;
  left: calc(-17 * var(--s));
  top: 0;
  width: calc(1800 * var(--s));
  height: 100%;
  mix-blend-mode: exclusion;
}
.cover-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cover-media i { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); }
.cover-text {
  position: absolute;
  left: calc(877 * var(--s));
  top: calc(187 * var(--s));
  width: calc(470 * var(--s));
}
.cover h1 {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--s));
  color: var(--brand-1);
  font-weight: 500;
  font-size: calc(52 * var(--s));
  line-height: calc(52 * var(--s));
  white-space: nowrap;
}
.cover h1 .hex { flex: none; width: calc(35.5 * var(--s)); height: calc(41 * var(--s)); }
.cover-text p {
  margin-top: calc(16 * var(--s));
  max-width: calc(463 * var(--s));
  font-size: calc(16 * var(--s));
  line-height: calc(24 * var(--s));
  letter-spacing: 0.1px;
}

@container slide (max-width: 1199px) {
  .cover .in { aspect-ratio: auto; display: flex; flex-direction: column; }
  .cover-text { position: relative; order: -1; left: auto; top: auto; width: auto; padding: 56px 40px 40px; }
  .cover h1 { font-size: clamp(36px, 7cqi, 52px); line-height: 1; }
  .cover h1 .hex { width: 0.68em; height: 0.79em; }
  .cover-text p { font-size: 16px; line-height: 24px; max-width: 463px; }
  .cover-media {
    position: relative; left: auto; width: 100%; height: auto; aspect-ratio: 16 / 10;
    /* the photo fades in from the card colour instead of starting with a hard edge under the text */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  }
  .cover-media img { object-position: 26% 55%; }
}
@container slide (max-width: 699px) {
  .cover-text { padding: 48px 20px 32px; }
  .cover-media { aspect-ratio: 1 / 1; }
  .cover-media img { object-position: 22% 55%; }
}

/* ---------- 02 challenge ---------- */

.challenge .in { aspect-ratio: 1400 / 900; padding: 0; }
.challenge-text {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(172 * var(--s));
  width: calc(513 * var(--s));
}
.challenge .h { line-height: calc(60 * var(--s)); }
.challenge .lead { margin-top: calc(22 * var(--s)); max-width: calc(450 * var(--s)); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--s));
  margin-top: calc(20 * var(--s));
}
.chips li {
  padding: calc(6 * var(--s)) calc(16 * var(--s));
  border: 1px solid var(--grey-3);
  border-radius: calc(8 * var(--s));
  font-size: calc(14 * var(--s));
  line-height: calc(20 * var(--s));
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.challenge-media {
  position: absolute;
  right: calc(-269 * var(--s));
  top: calc(-62 * var(--s));
  width: calc(1463 * var(--s));
  height: calc(976 * var(--s));
}
.challenge-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.challenge-media .crop { display: none; }
.byline {
  position: absolute;
  left: calc(48 * var(--s));
  bottom: calc(28 * var(--s));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
  color: var(--white);
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
  letter-spacing: 0.1px;
}
.byline img { width: calc(7 * var(--s)); height: calc(8 * var(--s)); }

@container slide (max-width: 1199px) {
  .challenge .in { aspect-ratio: auto; padding: 64px 40px 40px; }
  .challenge-text { position: relative; left: auto; top: auto; width: auto; max-width: 560px; }
  .challenge .h { line-height: 1.12; }
  .challenge-media { position: relative; right: auto; top: auto; width: min(100%, 560px); height: auto; margin: 24px auto 0; }
  .challenge-media .wide { display: none; }
  .challenge-media .crop { display: block; height: auto; }
  .byline { position: relative; left: auto; bottom: auto; margin-top: 24px; }
}
@container slide (max-width: 699px) {
  .challenge .in { padding: 44px 20px 32px; }
}

/* ---------- 03 timeline ---------- */

.gantt-wrap { --g: var(--s); margin-top: calc(64 * var(--g)); }
.gantt {
  position: relative;
  width: calc(1304 * var(--g));
  height: calc(518 * var(--g));
}
.gantt .phase {
  position: absolute;
  left: calc(var(--x) * var(--g));
  top: 0;
  height: calc(56 * var(--g));
  display: flex;
  align-items: center;
  padding-left: calc(20 * var(--g));
  color: var(--white);
  font-weight: 500;
  font-size: calc(24 * var(--g));
  line-height: calc(34 * var(--g));
}
.gantt .phase::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: calc(4 * var(--g));
  height: 100%;
  background: var(--brand-2);
}
.gantt .phase::after {
  content: "";
  position: absolute;
  left: calc(1 * var(--g));
  top: calc(64 * var(--g));
  width: calc(2 * var(--g));
  height: calc(444.5 * var(--g));
  background: repeating-linear-gradient(to bottom, rgba(125, 120, 121, 0.2) 0 calc(2 * var(--g)), transparent calc(2 * var(--g)) calc(4 * var(--g)));
}
.gantt .task {
  position: absolute;
  left: calc(var(--x) * var(--g));
  top: calc((96 + var(--r) * 62) * var(--g));
  width: calc(var(--w) * var(--g));
  height: calc(50 * var(--g));
  display: flex;
  align-items: center;
  padding: 0 calc(16 * var(--g));
  border-radius: calc(8 * var(--g));
  background: var(--grey);
  color: var(--white);
  font-size: calc(18 * var(--g));
  line-height: calc(26 * var(--g));
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.gantt .task::before,
.gantt .task::after {
  content: "";
  position: absolute;
  top: calc(12 * var(--g));
  width: calc(2 * var(--g));
  height: calc(26 * var(--g));
  border-radius: 100px;
  background: var(--grey);
}
.gantt .task::before { left: calc(-4 * var(--g)); }
.gantt .task::after { right: calc(-4 * var(--g)); }

@container slide (max-width: 1199px) {
  .gantt-wrap {
    --g: 0.78px;
    margin: 40px -40px 0;
    padding: 0 40px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--grey) transparent;
  }
  .gantt { width: calc(1310 * var(--g)); }
}
@container slide (max-width: 699px) {
  .gantt-wrap { margin: 32px -20px 0; padding: 0 20px 8px; }
}

/* ---------- 04 research divider ---------- */

.divider .in { padding: 0; aspect-ratio: 1400 / 900; min-height: 0; }
.divider-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pill {
  --d: calc(100cqi / 1400);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 3 px wider and taller than the Figma pill on each side, so the pill baked into the background is covered */
  width: calc((var(--pw, 552) + 6) * var(--d));
  height: calc(170 * var(--d));
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--black-1);
  color: var(--brand-1);
  font-weight: 500;
  font-size: calc(100 * var(--d));
  line-height: 1;
  white-space: nowrap;
}

/* ---------- 05 market analysis ---------- */

.insights { margin-top: calc(64 * var(--s)); }
.insights h3 {
  font-weight: 400;
  font-size: calc(32 * var(--s));
  line-height: calc(44 * var(--s));
  color: var(--grey-3);
  padding-bottom: calc(24 * var(--s));
  border-bottom: 1px solid var(--grey);
}
.insight-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(24 * var(--s));
  margin-top: calc(24 * var(--s));
}
.insight-cards li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(406 * var(--s));
  padding: 0 calc(16 * var(--s));
  border-radius: 4px;
  background: rgba(31, 31, 31, 0.7);
  text-align: center;
}
.insight-cards li.first { background: #1b1b1b; }
.insight-cards img { width: calc(40 * var(--s)); height: calc(40 * var(--s)); margin-bottom: calc(24 * var(--s)); }
.insight-cards h4 {
  color: var(--white);
  font-weight: 700;
  font-size: calc(24 * var(--s));
  line-height: calc(34 * var(--s));
}
.insight-cards p {
  margin-top: calc(8 * var(--s));
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
  letter-spacing: 0.1px;
}
@container slide (max-width: 1199px) {
  .insight-cards li { min-height: 0; padding: 48px 20px; }
}
@container slide (max-width: 899px) {
  .insight-cards { grid-template-columns: 1fr; }
}

/* ---------- 06 user research ---------- */

.interviews-card {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(150 * var(--s));
  width: calc(418 * var(--s));
  height: calc(702 * var(--s));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(32 * var(--s));
  border-radius: 4px;
  background: var(--brand-1);
  color: var(--black);
  overflow: hidden;
}
.interviews-card .bubble {
  position: absolute;
  left: calc(-7 * var(--s));
  top: calc(-27.5 * var(--s));
  width: calc(201 * var(--s));
  height: calc(201 * var(--s));
}
.interviews-card h3 {
  font-weight: 700;
  font-size: calc(24 * var(--s));
  line-height: calc(34 * var(--s));
}
.interviews-card p {
  margin-top: calc(8 * var(--s));
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
  letter-spacing: 0.1px;
  max-width: calc(330 * var(--s));
}
.methods li {
  position: absolute;
  left: calc((530 + var(--i) * 80) * var(--s));
  top: calc((279 + var(--i) * 128) * var(--s));
  width: calc(530 * var(--s));
  padding: calc(12 * var(--s)) calc(16 * var(--s));
  border-radius: calc(8 * var(--s));
  background: var(--black-1);
}
.methods h4 {
  color: var(--grey-3);
  font-weight: 700;
  font-size: calc(24 * var(--s));
  line-height: calc(34 * var(--s));
}
.methods p {
  margin-top: calc(4 * var(--s));
  color: var(--grey-2);
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
  letter-spacing: 0.1px;
}
.links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(900 * var(--s));
  pointer-events: none;
}
.links path { fill: none; stroke: var(--grey-2); stroke-width: 1.2; }

@container slide (max-width: 1199px) {
  /* the bubble sits in the top corner, cut by the card edge as in Figma; the text starts ~36 px below its tail */
  .interviews-card { position: relative; left: auto; top: auto; width: auto; height: auto; margin-top: 32px; padding: 174px 32px 32px; }
  .interviews-card .bubble { left: -6px; top: -22px; width: 160px; height: 160px; }
  .interviews-card p { max-width: 460px; }
  .methods { display: grid; gap: 12px; margin-top: 12px; }
  .methods li { position: relative; left: auto; top: auto; width: auto; }
  .links { display: none; }
}
@container slide (max-width: 699px) {
  .interviews-card { padding: 132px 24px 28px; }
  .interviews-card .bubble { left: -5px; top: -16px; width: 116px; height: 116px; }
}

/* ---------- 07 voice of the coaches ---------- */

.quotes {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(24 * var(--s));
  margin-top: calc(97 * var(--s));
}
.quotes .col { display: grid; gap: calc(24 * var(--s)); width: calc(518 * var(--s)); }
.quotes .col + .col { width: calc(369 * var(--s)); margin-top: calc(157 * var(--s)); }
.quotes blockquote {
  padding: calc(24 * var(--s)) calc(48 * var(--s));
  border-radius: 4px;
  background: var(--black-1);
}
.quotes blockquote::before,
.quotes blockquote::after {
  content: "";
  display: block;
  width: calc(32 * var(--s));
  height: calc(32 * var(--s));
  background: url("assets/svg/quote.svg") center / contain no-repeat;
}
.quotes blockquote::before { transform: scaleY(-1); margin-bottom: calc(4 * var(--s)); }
.quotes blockquote::after { transform: scaleX(-1); margin: calc(4 * var(--s)) 0 0 auto; }
.quotes p {
  font-size: calc(16 * var(--s));
  line-height: calc(24 * var(--s));
  letter-spacing: 0.1px;
}
@container slide (max-width: 1199px) {
  .quotes { flex-direction: column; align-items: stretch; max-width: 620px; margin: 40px auto 0; gap: 16px; }
  .quotes .col, .quotes .col + .col { width: auto; margin: 0; gap: 16px; }
  .quotes blockquote { padding: 24px 32px; }
}
@container slide (max-width: 699px) {
  .quotes blockquote { padding: 20px 24px; }
}

/* ---------- 08 personas ---------- */

.persona {
  position: absolute;
  width: calc(640 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(16 * var(--s));
  padding: calc(24 * var(--s));
  border-radius: 4px;
  background: rgba(31, 31, 31, 0.7);
}
.persona.p1 { left: calc(48 * var(--s)); top: calc(175 * var(--s)); }
.persona.p2 { left: calc(713 * var(--s)); top: calc(325 * var(--s)); }
.persona .photo {
  width: calc(122 * var(--s));
  height: calc(122 * var(--s));
  border-radius: 50%;
  object-fit: cover;
}
.persona.p1 .photo { margin-bottom: calc(25 * var(--s)); }
.persona h3 {
  color: var(--grey-1);
  font-weight: 700;
  font-size: calc(24 * var(--s));
  line-height: calc(34 * var(--s));
}
.persona > p {
  margin-top: calc(-8 * var(--s));
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
  letter-spacing: 0.1px;
}
.jtbd {
  align-self: stretch;
  padding: calc(16 * var(--s));
  border: 1px solid var(--grey-1);
  border-radius: 4px;
  background: var(--brand-1);
}
.jtbd span {
  display: block;
  color: var(--grey);
  opacity: 0.3;
  font-weight: 700;
  font-size: calc(24 * var(--s));
  line-height: calc(34 * var(--s));
}
.jtbd p {
  margin-top: calc(4 * var(--s));
  color: var(--black-1);
  font-weight: 500;
  font-size: calc(20 * var(--s));
  line-height: calc(28 * var(--s));
}
@container slide (max-width: 1199px) {
  .personas .in { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .personas .h { grid-column: 1 / -1; margin-bottom: 24px; }
  .persona { position: relative; left: auto !important; top: auto !important; width: auto; }
  .persona.p1 .photo { margin-bottom: 0; }
}
@container slide (max-width: 899px) {
  .personas .in { grid-template-columns: 1fr; }
}

/* ---------- 09 expanding features ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(24 * var(--s));
  height: calc(570 * var(--s));
  margin-top: calc(64 * var(--s));
}
.feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 calc(24 * var(--s));
  border-radius: 4px;
  background: rgba(31, 31, 31, 0.7);
}
.feature.big { grid-row: 1 / 3; padding: calc(24 * var(--s)); }
.feature img { width: calc(40 * var(--s)); height: calc(40 * var(--s)); margin-bottom: calc(24 * var(--s)); }
.feature h3 {
  color: var(--white);
  font-weight: 700;
  font-size: calc(24 * var(--s));
  line-height: calc(34 * var(--s));
}
.feature p {
  margin-top: calc(8 * var(--s));
  max-width: calc(600 * var(--s));
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
  letter-spacing: 0.1px;
}
@container slide (max-width: 1199px) {
  .feature-grid { height: auto; margin-top: 40px; }
  .feature, .feature.big { padding: 40px 24px; }
}
@container slide (max-width: 799px) {
  .feature-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .feature.big { grid-row: auto; }
}

/* ---------- 10 customer journey map ---------- */

.cjm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--s));
  margin-top: calc(24 * var(--s));
}
.cjm-tabs button {
  padding: calc(6 * var(--s)) calc(16 * var(--s));
  border: 1px solid var(--grey-1);
  border-radius: calc(8 * var(--s));
  background: transparent;
  color: var(--grey-2);
  font-size: calc(14 * var(--s));
  line-height: calc(20 * var(--s));
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.cjm-tabs button:hover { color: var(--grey-3); border-color: var(--grey-3); }
.cjm-tabs button[aria-selected="true"] { color: var(--black); background: var(--brand-1); border-color: var(--brand-1); }
.cjm-tabs button:focus-visible, .cjm-scroller:focus-visible, .wf-strip:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 3px; }

.cjm-scroller {
  --k: calc(1.6 * var(--s));
  display: flex;
  gap: calc(32 * var(--s));
  margin: calc(16 * var(--s)) calc(-48 * var(--s)) 0;
  padding: 0 calc(48 * var(--s)) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 calc(48 * var(--s));
  scrollbar-width: none;
}
.cjm-scroller::-webkit-scrollbar { display: none; }
@container slide (max-width: 1199px) {
  .cjm-scroller { --k: 1.4px; margin: 16px -40px 0; padding: 0 40px 4px; scroll-padding: 0 40px; gap: 20px; }
}
@container slide (max-width: 699px) {
  .cjm-scroller { --k: 1.3px; margin: 16px -20px 0; padding: 0 20px 4px; scroll-padding: 0 20px; }
}

.cjm {
  position: relative;
  flex: none;
  width: calc(759 * var(--k));
  height: calc(589 * var(--k));
  border: 1px solid var(--grey-1);
  border-radius: calc(19.9 * var(--k));
  background: var(--black);
  color: var(--white);
  font-family: Jost, Ubuntu, sans-serif;
  scroll-snap-align: start;
}
.cjm-label {
  position: absolute;
  left: calc(56 * var(--k));
  top: calc(var(--y) * var(--k));
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  text-align: center;
  font-size: calc(10.02 * var(--k));
  line-height: 1.2;
}
.cjm-label.good { color: var(--brand-1); }
.cjm-label.bad { color: var(--error); }
.cjm-target {
  position: absolute;
  left: calc(94.7 * var(--k));
  top: calc(24 * var(--k));
  width: calc(612.6 * var(--k));
  height: calc(59.3 * var(--k));
  display: flex;
  align-items: center;
  padding-left: calc(15.5 * var(--k));
  border-radius: calc(5.9 * var(--k));
  background: var(--black-1);
  font-size: calc(17.68 * var(--k));
}
.cjm-row {
  position: absolute;
  left: calc(93.7 * var(--k));
  top: calc(var(--y) * var(--k));
  height: calc(58.94 * var(--k));
  display: grid;
  grid-template-columns: repeat(6, calc(83.69 * var(--k)));
  column-gap: calc(22.4 * var(--k));
  align-items: center;
}
.cjm-row.tall { height: calc(106.09 * var(--k)); }
.cjm-row li {
  position: relative;
  min-height: calc(54.22 * var(--k));
  display: flex;
  align-items: center;
  padding: calc(1.18 * var(--k)) calc(4.72 * var(--k));
  border-radius: calc(2.36 * var(--k));
  background: var(--black-1);
  box-shadow: 0 calc(1.18 * var(--k)) calc(2.36 * var(--k)) rgba(0, 0, 0, 0.1);
  font-size: calc(8.25 * var(--k));
  line-height: 1.3;
}
.cjm-row.tall li { min-height: calc(106.09 * var(--k)); }
.cjm-row li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(100% + 9 * var(--k));
  top: 50%;
  width: calc(6.15 * var(--k));
  height: calc(4.34 * var(--k));
  transform: translateY(-50%);
  background: url("assets/svg/cjm-arrow.svg") center / contain no-repeat;
}
.cjm-chart {
  position: absolute;
  left: calc(33 * var(--k));
  width: calc(675.4 * var(--k));
  background: var(--black-1);
  border-radius: calc(2.36 * var(--k));
  --step: 16.3;
  --zero: 50;
}
.cjm-chart.sat { top: calc(364.66 * var(--k)); height: calc(108.44 * var(--k)); }
.cjm-chart.imp { top: calc(482.53 * var(--k)); height: calc(79.57 * var(--k)); --step: 22.22; --zero: 76.3; --base: 1; }
.cjm-chart .axis-name {
  position: absolute;
  left: calc(22.8 * var(--k));
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: calc(10.02 * var(--k));
  white-space: nowrap;
}
.cjm-chart .tick {
  position: absolute;
  left: calc(46.6 * var(--k));
  top: calc((var(--zero) - (var(--v) - var(--base, 0)) * var(--step)) * 1%);
  transform: translate(-50%, -50%);
  color: var(--grey-2);
  font-size: calc(10.02 * var(--k));
  line-height: 1;
}
.cjm-chart .tick::after {
  content: "";
  position: absolute;
  left: calc(50% + 14.7 * var(--k));
  top: 50%;
  width: calc(604.7 * var(--k));
  height: calc(1.18 * var(--k));
  transform: translateY(-50%);
  background: var(--grey-2);
}
.cjm-chart .dot {
  position: absolute;
  left: calc((103.7 + var(--c) * 105.95) * var(--k));
  top: calc((var(--zero) - (var(--v) - var(--base, 0)) * var(--step)) * 1%);
  width: calc(11.79 * var(--k));
  height: calc(11.79 * var(--k));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #7c7b75;
}
.cjm-chart.sat .dot[style*="--v:1"] { background: #9cd53f; }
.cjm-chart.sat .dot[style*="--v:-1"] { background: #d5a23f; }
.cjm-chart.imp .dot[style*="--v:3"] { background: #3fd557; }
.cjm-chart.imp .dot[style*="--v:2"] { background: #d5c63f; }

/* ---------- 11 wireframes ---------- */

.wf-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(294 * var(--s));
  height: calc(463.5 * var(--s));
}
.wf-strip .wf { position: absolute; top: 0; height: 100%; width: auto; max-width: none; }
.wf-strip .wf:nth-child(2) { left: calc(163 * var(--s)); }
.wf-strip .wf:nth-child(3) { left: calc(450 * var(--s)); }
.wf-strip .wf:nth-child(4) { left: calc(736 * var(--s)); }
.wf-strip .wf:nth-child(5) { left: calc(1022 * var(--s)); }
.wf-strip .edge { opacity: 0.2; }
.wf-strip .edge.left { left: 0; }
.wf-strip .edge.right { right: 0; }

@container slide (max-width: 1199px) {
  .wf-strip {
    position: relative;
    top: auto;
    height: auto;
    display: flex;
    gap: 20px;
    margin: 40px -40px 0;
    padding: 0 40px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 40px;
    scrollbar-width: none;
  }
  .wf-strip::-webkit-scrollbar { display: none; }
  .wf-strip .wf { position: static; flex: none; width: 240px; height: auto; scroll-snap-align: start; }
  .wf-strip .edge { display: none; }
}
@container slide (max-width: 699px) {
  .wf-strip { margin: 32px -20px 0; padding: 0 20px 8px; scroll-padding: 0 20px; gap: 14px; }
  .wf-strip .wf { width: 220px; }
}

/* ---------- architecture: screen structure and user flow (not in Figma) ---------- */

.ia {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(24 * var(--s));
  margin-top: calc(36 * var(--s));
}
.ia-tab {
  display: flex; align-items: center; gap: calc(10 * var(--s));
  height: calc(56 * var(--s)); padding: 0 calc(18 * var(--s));
  border-radius: calc(8 * var(--s)); background: var(--grey);
  color: var(--white); font-weight: 500; font-size: calc(18 * var(--s)); line-height: calc(26 * var(--s));
}
.ia-tab img { width: calc(18 * var(--s)); height: calc(18 * var(--s)); }
.ia-tab.plus { box-shadow: inset 0 0 0 1px var(--brand-1); }
.ia-col ul { position: relative; display: grid; gap: calc(8 * var(--s)); margin-top: calc(8 * var(--s)); padding-left: calc(28 * var(--s)); }
.ia-col ul::before { content: ""; position: absolute; left: calc(14 * var(--s)); top: calc(-10 * var(--s)); bottom: calc(26 * var(--s)); width: 1px; background: var(--grey-1); }
.ia-col li { position: relative; padding: calc(10 * var(--s)) calc(14 * var(--s)); border-radius: calc(8 * var(--s)); background: var(--black-1); }
.ia-col li::before { content: ""; position: absolute; left: calc(-14 * var(--s)); top: calc(22 * var(--s)); width: calc(14 * var(--s)); height: 1px; background: var(--grey-1); }
.ia-col b { display: block; color: var(--white); font-weight: 500; font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
.ia-col span { display: block; margin-top: calc(2 * var(--s)); color: var(--grey-2); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
.ia-col em { display: inline-block; margin-top: calc(6 * var(--s)); color: var(--brand-1); font-style: normal; font-size: calc(13 * var(--s)); line-height: calc(18 * var(--s)); }
.ia-col em::before { content: "→ "; }
.ia-col li.off { background: transparent; box-shadow: inset 0 0 0 1px var(--grey); }
.ia-col li.off b { color: var(--grey-1); font-weight: 400; font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
.ia-bottom { display: grid; grid-template-columns: 1.55fr 1fr; gap: calc(24 * var(--s)); margin-top: calc(24 * var(--s)); }
.ia-box { padding: calc(16 * var(--s)) calc(24 * var(--s)) calc(18 * var(--s)); border-radius: calc(8 * var(--s)); }
.ia-box.event { background: var(--black-1); box-shadow: inset 0 0 0 1px var(--brand-1); }
.ia-box.system { background: transparent; box-shadow: inset 0 0 0 1px var(--grey-1); }
.ia-box h3 { color: var(--white); font-weight: 700; font-size: calc(20 * var(--s)); line-height: calc(28 * var(--s)); }
.ia-note { margin-top: calc(2 * var(--s)); color: var(--grey-2); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
.ia-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--s)); margin-top: calc(14 * var(--s)); }
.ia-chips span { padding: calc(6 * var(--s)) calc(14 * var(--s)); border-radius: calc(16 * var(--s)); background: var(--grey); color: var(--grey-3); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
.ia-chips i { font-style: normal; color: var(--brand-1); }
.ia-actions { margin-top: calc(12 * var(--s)); color: var(--grey-2); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
.ia-box.system ul { display: grid; gap: calc(6 * var(--s)); margin-top: calc(10 * var(--s)); }
.ia-box.system li { color: var(--grey-3); font-size: calc(15 * var(--s)); line-height: calc(22 * var(--s)); }
.ia-box.system li::before { content: ""; display: inline-block; width: calc(6 * var(--s)); height: calc(6 * var(--s)); margin: 0 calc(10 * var(--s)) calc(2 * var(--s)) 0; border-radius: 50%; background: var(--grey-1); }
@container slide (min-width: 1200px) {
  .arch .in { padding-bottom: calc(40 * var(--s)); }
}
@container slide (max-width: 1199px) {
  .ia { grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 32px; }
  .ia-bottom { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
}
@container slide (max-width: 699px) {
  .ia { grid-template-columns: 1fr; }
}

.fl-node {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  width: calc(230 * var(--s));
  min-height: calc(104 * var(--s));
  padding: calc(16 * var(--s)) calc(18 * var(--s));
  border-radius: calc(8 * var(--s));
  background: var(--black-1);
  z-index: 2;
}
.fl-node b { display: block; color: var(--white); font-weight: 500; font-size: calc(17 * var(--s)); line-height: calc(24 * var(--s)); }
.fl-node span { display: block; margin-top: calc(4 * var(--s)); color: var(--grey-2); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
.fl-node.start { box-shadow: inset 0 0 0 1px var(--brand-1); }
.fl-node.decision { display: flex; align-items: center; background: var(--black); box-shadow: inset 0 0 0 1px var(--brand-1); border: 1px dashed var(--brand-1); box-shadow: none; }
.fl-node.decision b { color: var(--brand-1); }
.fl-node.system { background: transparent; border: 1px dashed var(--grey-1); }
.fl-node.system b { color: var(--grey-3); }
.fl-from { display: none; }
.fl-label { position: absolute; left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s)); transform: translateY(-50%); z-index: 2; color: var(--grey-2); font-size: calc(13 * var(--s)); line-height: calc(18 * var(--s)); white-space: nowrap; }
.fl-label.l { transform: translate(-100%, -50%); }
.fl-label.up { transform: translateY(-100%); }
.fl-links path { stroke: var(--grey-2); }
.fl-legend { position: absolute; left: calc(48 * var(--s)); top: calc(400 * var(--s)); display: grid; gap: calc(10 * var(--s)); }
.fl-legend li { display: flex; align-items: center; gap: calc(10 * var(--s)); color: var(--grey-2); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
.fl-legend li::before { content: ""; width: calc(28 * var(--s)); height: calc(18 * var(--s)); border-radius: calc(4 * var(--s)); background: var(--black-1); }
.fl-legend li.start::before { box-shadow: inset 0 0 0 1px var(--brand-1); }
.fl-legend li.decision::before { background: transparent; border: 1px dashed var(--brand-1); }
.fl-legend li.system::before { background: transparent; border: 1px dashed var(--grey-1); }
@container slide (max-width: 1199px) {
  .fl { display: grid; gap: 28px; margin-top: 32px; max-width: 520px; }
  .fl-node { position: relative; left: auto; top: auto; width: auto; min-height: 0; padding: 16px 18px; }
  .fl-node + .fl-node::before {
    content: ""; position: absolute; left: 24px; top: -28px; width: 1px; height: 28px; background: var(--grey-1);
  }
  .fl-node.branch { margin-left: 28px; }
  .fl-node.branch::before { left: -4px !important; }
  .fl-from { display: block; margin-bottom: 4px; color: var(--grey-1); font-style: normal; font-size: 13px; line-height: 18px; }
  .fl-node b { font-size: 17px; line-height: 24px; }
  .fl-node span { font-size: 14px; line-height: 20px; }
  .fl-label, .fl-links { display: none; }
  .fl-legend { position: static; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; }
  .fl-legend li { font-size: 14px; }
  .fl-legend li::before { width: 24px; height: 16px; }
}

/* ---------- 13 color palette ---------- */

.swatches {
  display: flex;
  gap: calc(24 * var(--s));
  margin-top: calc(56 * var(--s));
}
.swatch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(24 * var(--s));
  width: calc(624 * var(--s));
  flex: none;
}
.swatch-grid li,
.swatch-brand {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: calc(100 * var(--s));
  padding: 0 calc(16 * var(--s)) calc(16 * var(--s));
  border-radius: 8px;
  background: var(--c);
  color: var(--white);
  font-weight: 500;
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
}
.swatch-grid li.wide { grid-column: 1 / -1; }
.swatch-grid li.outline { border: 1px solid var(--white); }
.swatch-grid li.light, .swatch-brand.light { color: var(--black); }
.swatch-brand {
  width: calc(640 * var(--s));
  height: auto;
  margin-left: calc(16 * var(--s));
  padding-right: calc(32 * var(--s));
}
@container slide (max-width: 1199px) {
  .swatches { flex-direction: column; margin-top: 40px; }
  .swatch-grid { width: auto; gap: 12px; }
  .swatch-grid li { height: 88px; }
  .swatch-brand { width: auto; height: 200px; margin: 0; padding-right: 16px; }
}

/* ---------- 14 iconography ---------- */

.icon-grid {
  position: absolute;
  left: calc(186 * var(--s));
  top: calc(246 * var(--s));
  width: calc(1028 * var(--s));
  display: flex;
  flex-wrap: wrap;
  gap: calc(28 * var(--s));
  padding: calc(32 * var(--s));
}
.icon-grid li {
  display: grid;
  place-items: center;
  width: calc(96 * var(--s));
  height: calc(96 * var(--s));
  border-radius: 8px;
  background: var(--black-1);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.icon-grid img { width: calc(32 * var(--s)); height: calc(32 * var(--s)); }
.icon-grid img.tall { height: calc(34.13 * var(--s)); }
@container slide (max-width: 1199px) {
  .icon-grid { position: relative; left: auto; top: auto; width: auto; justify-content: center; gap: 16px; padding: 0; margin-top: 40px; }
  .icon-grid li { width: 80px; height: 80px; }
  .icon-grid img { width: 30px; height: 30px; }
  .icon-grid img.tall { height: 32px; }
}
@container slide (max-width: 699px) {
  .icon-grid { gap: 10px; }
  .icon-grid li { width: 64px; height: 64px; }
  .icon-grid img { width: 26px; height: 26px; }
  .icon-grid img.tall { height: 28px; }
}

/* ---------- 15 logo ---------- */

.logo-mark {
  position: absolute;
  left: calc(478 * var(--s));
  top: calc(246 * var(--s));
  width: calc(444 * var(--s));
  height: calc(444 * var(--s));
}
.logo-note {
  position: absolute;
  display: grid;
  gap: calc(8 * var(--s));
}
.logo-note.shape { left: calc(957 * var(--s)); top: calc(150 * var(--s)); padding-left: calc(18 * var(--s)); }
.logo-note.color { left: calc(48 * var(--s)); top: calc(665 * var(--s)); }
.logo-note h3 {
  color: var(--grey-3);
  font-weight: 700;
  font-size: calc(20 * var(--s));
  line-height: calc(28 * var(--s));
}
.logo-note p {
  width: calc(377 * var(--s));
  font-size: calc(16 * var(--s));
  line-height: calc(24 * var(--s));
}
.logo-note.shape p { width: calc(310 * var(--s)); }   /* Figma breaks these lines by hand; these widths give the same breaks */
.logo-note.color p { width: calc(364 * var(--s)); }
.logo-note em { font-style: normal; color: var(--brand-1); }
.links.lime path { stroke: var(--brand-1); stroke-width: 1; }
@container slide (max-width: 1199px) {
  .logo .in { display: flex; flex-direction: column; }
  .logo-mark { position: relative; left: auto; top: auto; width: min(320px, 72%); height: auto; aspect-ratio: 1; margin: 40px auto 8px; }
  .logo-note, .logo-note.shape, .logo-note.color { position: relative; left: auto; top: auto; padding: 0; margin-top: 32px; }
  .logo-note p, .logo-note.shape p, .logo-note.color p { width: auto; max-width: 460px; }
}

/* ---------- 16 typography ---------- */

.glyphs {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--grey-3);
  font-weight: 700;
  font-size: calc(909.375 * var(--s));
  line-height: 1;
  pointer-events: none;
  overflow: hidden;
}
.glyphs span { position: absolute; opacity: 0.05; transform: translateY(-50%); }
.glyphs .g-upper { left: calc(360 * var(--s)); top: calc(472 * var(--s)); }
.glyphs .g-lower { left: calc(1017.8 * var(--s)); top: calc(490.19 * var(--s)); }
.type-name {
  margin-top: calc(40 * var(--s));
  color: var(--grey-3);
  font-size: calc(140 * var(--s));
  line-height: calc(140 * var(--s));
  letter-spacing: 0.1px;
}
.letters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--s));
  width: calc(552 * var(--s));
  margin-top: calc(40 * var(--s));
}
.letters li {
  display: grid;
  place-items: center;
  width: calc(72 * var(--s));
  height: calc(72 * var(--s));
  border-radius: 4px;
  background: var(--black-1);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  color: var(--grey-3);
  font-weight: 500;
  font-size: calc(32 * var(--s));
}
.letters li.num { width: calc(152 * var(--s)); }
@container slide (max-width: 1199px) {
  .glyphs { font-size: min(130cqi, 900px); }
  .glyphs .g-upper { display: none; }
  .glyphs .g-lower { left: auto; right: -0.04em; top: 58%; }
  .type-name { margin-top: 32px; font-size: clamp(72px, 17cqi, 140px); line-height: 1; }
  .letters { width: auto; max-width: 552px; margin-top: 32px; }
}
@container slide (max-width: 699px) {
  .letters { gap: 6px; }
  .letters li { width: 44px; height: 44px; font-size: 20px; }
  .letters li.num { width: 94px; }
}

/* ---------- 18 optimization through user feedback ---------- */
/* In Figma the two tests are small images with text baked in. Here the screens stay images and the notes are text,
   and each test gets the full width so the screens and notes can be read. */

.test {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(72 * var(--s));
  margin-top: calc(64 * var(--s));
  padding: calc(40 * var(--s)) calc(56 * var(--s));
  border: 1px solid var(--grey-3);
  border-radius: 8px;
  background: #151719;
}
.test + .test { margin-top: calc(24 * var(--s)); }
.test-shot.one { width: calc(240 * var(--s)); }
.test-shot.two { width: calc(460 * var(--s)); }
.test-notes { max-width: calc(640 * var(--s)); margin: 0; }
.test-notes dt {
  color: var(--grey-2);
  font-size: calc(16 * var(--s));
  line-height: calc(24 * var(--s));
}
.test-notes dd {
  margin: calc(4 * var(--s)) 0 calc(32 * var(--s));
  color: var(--white);
  font-size: calc(20 * var(--s));
  line-height: calc(28 * var(--s));
}
.test-notes dd:last-child { margin-bottom: 0; }
.test-notes dd.bad { color: var(--error); }
.test-result { display: flex; flex-wrap: wrap; gap: calc(12 * var(--s)); margin-top: calc(8 * var(--s)) !important; }
.test-result span {
  display: grid;
  gap: calc(2 * var(--s));
  min-width: calc(196 * var(--s));
  padding: calc(16 * var(--s)) calc(20 * var(--s));
  border: 1px solid transparent;
  border-radius: calc(16 * var(--s));
  background: var(--black-1);
  font-size: calc(16 * var(--s));
  line-height: calc(20 * var(--s));
}
.test-result b { font-weight: 400; font-size: calc(32 * var(--s)); line-height: calc(40 * var(--s)); }
.test-result .ok { color: var(--brand-1); border-color: var(--brand-1); }
.test-result .fail { color: var(--error); }
@container slide (max-width: 1199px) {
  .test { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; padding: 32px; }
  .test + .test { margin-top: 16px; }
  .test-shot { justify-self: center; }
  .test-shot.one { width: min(240px, 70%); }
  .test-shot.two { width: min(460px, 100%); }
  .test-notes { max-width: none; }
}
@container slide (max-width: 699px) {
  .test { padding: 24px 20px; }
  .test-result span { min-width: 0; flex: 1; }
}

/* ---------- 19–27 design realization: shared parts ---------- */
/* Phones on these slides are cut out of a 2× render of the Figma slide (.vis) and sit at the same
   coordinates; titles, notes and connector lines are live on top. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vis {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s));
  max-width: none;
}
.note {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  display: grid;
  gap: calc(8 * var(--s));
  z-index: 1;
}
.note.pad { padding-left: calc(18 * var(--s)); }
.note h3 { color: var(--grey-3); font-weight: 700; font-size: calc(20 * var(--s)); line-height: calc(28 * var(--s)); }
.note p { width: calc(377 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
.note.wide p { width: calc(371 * var(--s)); }
.step-label {
  position: absolute;
  right: calc(48 * var(--s));
  top: calc(68 * var(--s));
  color: var(--grey-1);
  font-weight: 700;
  font-size: calc(32 * var(--s));
  line-height: calc(44 * var(--s));
}
.h.with-icon { display: flex; align-items: center; gap: calc(8 * var(--s)); margin-top: calc(-14 * var(--s)); }
.h.with-icon img { width: calc(80 * var(--s)); height: calc(80 * var(--s)); flex: none; }
.panel-left { position: absolute; left: 0; top: 0; bottom: 0; width: calc(933 * var(--s)); background: #202020; }
.panel-lime { position: absolute; right: 0; top: 0; bottom: 0; width: calc(707 * var(--s)); background: var(--brand-1); }
.links { z-index: 1; }

@container slide (max-width: 1199px) {
  .figure-slide .vis { position: relative; left: auto; top: auto; display: block; width: min(100%, calc(var(--w) * 1px)); margin: 32px auto 0; }
  .note, .note.pad { position: relative; left: auto; top: auto; padding: 0; margin-top: 28px; }
  .note p, .note.wide p { width: auto; max-width: 560px; }
  .figure-slide .links { display: none; }
  .step-label { position: static; margin-top: 4px; font-size: 24px; line-height: 32px; }
  .h.with-icon { margin-top: 0; }
  .h.with-icon img { width: 56px; height: 56px; }
  .panel-left, .panel-lime { display: none; }
}

/* 21 calendar */
.cal-switch { display: none; }
.cal-col { position: absolute; left: calc(var(--x) * var(--s)); top: calc(164 * var(--s)); width: calc(328 * var(--s)); margin: 0; }
.cal-col img { width: calc(274 * var(--s)); margin-left: calc(26 * var(--s)); max-width: none; }
.cal-col figcaption { margin-top: calc(11 * var(--s)); text-align: center; }
.cal-col h3 { color: var(--white); font-weight: 700; font-size: calc(20 * var(--s)); line-height: calc(28 * var(--s)); }
.cal-col p { margin-top: calc(8 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
@container slide (max-width: 1199px) {
  .cal-switch { display: flex; gap: 8px; margin-top: 32px; }
  .cal-switch button {
    flex: 1; max-width: 120px; height: 40px; border: 1px solid var(--grey-1); border-radius: 20px;
    background: transparent; color: var(--grey-2); font-size: 15px; cursor: pointer;
  }
  .cal-switch button[aria-selected="true"] { background: var(--brand-1); border-color: var(--brand-1); color: var(--black); }
  .cal-col { position: relative; left: auto; top: auto; width: auto; margin-top: 24px; display: none; }
  .cal-col.is-on { display: block; }
  .cal-col img { width: min(274px, 76%); margin: 0 auto; }
  .cal-col figcaption { margin-top: 16px; }
  .cal-col h3 { font-size: 20px; line-height: 28px; }
  .cal-col p { font-size: 16px; line-height: 24px; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* 23 step 2: the two phones side by side in the narrow layout too */
@container slide (max-width: 1199px) {
  .step2 .in { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; }
  .step2 .step-label, .step2 .note { flex: 0 0 100%; }
  .step2 .vis { width: min(294px, calc(50% - 8px)); margin: 32px 0 0; }
}

/* 25 session ready */
.ready-head {
  position: absolute;
  left: calc(490 * var(--s));
  top: calc(67 * var(--s));
  width: calc(419 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ready-head img { width: calc(45 * var(--s)); height: calc(45 * var(--s)); margin-top: calc(-2 * var(--s)); }
.ready-head h2 { margin-top: calc(14 * var(--s)); color: var(--grey-3); font-weight: 700; font-size: calc(20 * var(--s)); line-height: calc(28 * var(--s)); }
.ready-head p { margin-top: calc(8 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
@container slide (max-width: 1199px) {
  .ready-head { position: relative; left: auto; top: auto; width: auto; }
  .ready-head img { width: 40px; height: 40px; }
  .ready-head h2 { font-size: 24px; line-height: 32px; }
  .ready-head p { font-size: 16px; line-height: 24px; max-width: 420px; }
  .ready-head br.fb { display: none; }
}

/* 26 teams */
@container slide (max-width: 1199px) {
  .team-strip { display: flex; gap: 14px; margin: 32px -40px 0; padding: 0 40px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 40px; scrollbar-width: none; }
  .team-strip::-webkit-scrollbar { display: none; }
  .team-strip .vis { flex: none; width: 220px; margin: 0; scroll-snap-align: start; }
  .team-strip .vis.edge { display: none; }
}
@container slide (max-width: 699px) {
  .team-strip { margin: 28px -20px 0; padding: 0 20px 8px; scroll-padding: 0 20px; }
}

/* 27 attendance */
.narrow-only { display: none !important; }
@container slide (max-width: 1199px) {
  .wide-only { display: none !important; }
  .narrow-only { display: block !important; }
}
.phone.att-phone { position: absolute; left: calc(188 * var(--s)); top: calc(115 * var(--s)); width: calc(316 * var(--s)); }
.att-hint { position: absolute; left: calc(188 * var(--s)); top: calc(800 * var(--s)); width: calc(316 * var(--s)); text-align: center; color: var(--grey-2); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
@container slide (max-width: 1199px) {
  .attendance .in { display: flex; flex-direction: column; align-items: center; }
  .phone.att-phone { position: relative; left: auto; top: auto; width: min(316px, 82%); }
  .att-hint { position: static; width: auto; margin-top: 12px; font-size: 14px; }
  .attendance .vis { border-radius: 16px; width: min(100%, 360px); }
}

/* ---------- phone frame and app screens ---------- */
/* The frame follows the Figma mockup (395 × 832: light ring, black ring, 360 × 800 screen).
   Screen parts are sized in units of the 360-wide Figma screen: N × --u. */

.phone { container-type: inline-size; position: relative; aspect-ratio: 395 / 832; }
.phone::before {
  --k: calc(100cqi / 395);
  content: "";
  position: absolute;
  left: calc(5 * var(--k)); top: calc(6 * var(--k));
  width: calc(382 * var(--k)); height: calc(820 * var(--k));
  border-radius: calc(46 * var(--k));
  background: linear-gradient(160deg, #c9d0c3, #a9b2a3 40%, #bcc4b6);
}
.phone::after {
  --k: calc(100cqi / 395);
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(11 * var(--k)); top: calc(11 * var(--k));
  width: calc(370 * var(--k)); height: calc(810 * var(--k));
  border-radius: calc(39 * var(--k));
  background: #000;
}
.phone-screen {
  --k: calc(100cqi / 395);
  position: absolute;
  left: calc(16 * var(--k)); top: calc(16 * var(--k));
  width: calc(360 * var(--k)); height: calc(800 * var(--k));
  border-radius: calc(34 * var(--k));
  overflow: hidden;
  clip-path: inset(0 round calc(34 * var(--k)));   /* also clips the blurred nav bar, which overflow alone does not */
  z-index: 1;
  background: var(--black);
  container-type: inline-size;
}
.phone-screen > * { --u: calc(100cqi / 360); }

.u-screen { position: absolute; inset: 0; display: none; overflow: hidden; background: var(--black); color: var(--white); font-family: Ubuntu, system-ui, sans-serif; text-align: left; }
.u-screen.is-on { display: block; }
.u-screen button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.u-screen button:focus-visible, .u-check:focus-visible, .u-radio:focus-visible { outline: calc(2 * var(--u)) solid var(--brand-1); outline-offset: calc(2 * var(--u)); }
.u-screen img { max-width: none; }

.u-status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  height: calc(52 * var(--u)); padding: 0 calc(24 * var(--u)) calc(10 * var(--u));
  display: flex; align-items: flex-end; justify-content: space-between;
  font-family: Roboto, Ubuntu, sans-serif; font-weight: 500; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u));
}
.u-status.dark { background: var(--black-1); }
.u-sys {
  width: calc(46 * var(--u)); height: calc(17 * var(--u));
  background:
    url("assets/ui/wifi.svg") 0 0 / calc(17 * var(--u)) calc(17 * var(--u)) no-repeat,
    url("assets/ui/signal.svg") calc(16 * var(--u)) 0 / calc(17 * var(--u)) calc(17 * var(--u)) no-repeat,
    url("assets/ui/battery.svg") calc(38 * var(--u)) calc(1 * var(--u)) / calc(8 * var(--u)) calc(15 * var(--u)) no-repeat;
}
.u-ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; }
.u-title { font-weight: 500; font-size: calc(24 * var(--u)); line-height: calc(34 * var(--u)); white-space: nowrap; }
.u-back { width: calc(32 * var(--u)); height: calc(32 * var(--u)); display: grid; place-items: center; }
.u-back img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

.u-bar { position: absolute; top: calc(52 * var(--u)); left: 0; right: 0; padding: calc(16 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); }
.u-bar .u-title { padding: 0 calc(8 * var(--u)); }
.u-bar-simple { position: absolute; top: calc(52 * var(--u)); left: 0; right: 0; height: calc(64 * var(--u)); padding: 0 calc(24 * var(--u)) 0 calc(20 * var(--u)); display: flex; align-items: center; justify-content: space-between; }

.u-head { position: absolute; top: calc(52 * var(--u)); left: 0; right: 0; z-index: 2; padding: calc(16 * var(--u)) 0; background: var(--black-1); border-bottom: calc(1 * var(--u)) solid var(--white); }
.u-head-row { display: flex; align-items: center; justify-content: space-between; height: calc(32 * var(--u)); margin: calc(16 * var(--u)) calc(16 * var(--u)) 0; }
.u-head-row .u-ic { margin-right: calc(8 * var(--u)); }
.u-head-row.start { justify-content: flex-start; gap: calc(8 * var(--u)); }
/* prototype: one top-bar position on every screen (Figma puts the back arrow 16 px lower under the dark headers) */
.proto-phone .u-head-row { margin-top: 0; }
.u-head > .u-title { display: block; margin: calc(8 * var(--u)) calc(24 * var(--u)) 0; }
.u-teamline, .u-meta { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(24 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0.1px; }
.u-teamline { margin-top: calc(8 * var(--u)); padding-top: calc(8 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.u-teamline img, .u-meta img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; }
.u-meta { margin-top: calc(10 * var(--u)); }
.u-head-row + .u-meta { margin-top: calc(24 * var(--u)); }
.u-meta i { width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: var(--white); }

.u-scroll, .u-body { position: absolute; top: calc(var(--top) * var(--u)); left: 0; right: 0; padding: 0 calc(16 * var(--u)); }
.u-scroll { bottom: 0; overflow-y: auto; padding-bottom: calc(110 * var(--u)); scrollbar-width: none; overscroll-behavior: contain; }
.u-scroll::-webkit-scrollbar { display: none; }
.u-home .u-scroll { padding-top: calc(16 * var(--u)); }

.u-subhead { display: block; margin: calc(24 * var(--u)) 0 calc(8 * var(--u)); color: var(--grey-2); font-weight: 700; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
.u-tabs { display: flex; }
.u-tabs button { flex: 1; height: calc(32 * var(--u)); margin: calc(8 * var(--u)) 0; border-radius: calc(16 * var(--u)); color: var(--grey-2); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0.1px; }
.u-tabs button.on { background: var(--brand-1); color: var(--black); cursor: default; }
.u-inputs { display: grid; gap: calc(12 * var(--u)); }
.u-seg ~ .u-inputs { margin-top: calc(24 * var(--u)); }
.u-pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.u-input {
  display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u));
  min-height: calc(56 * var(--u)); padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: calc(16 * var(--u)); background: var(--black-1);
}
.u-input > div { display: flex; flex-direction: column; min-width: 0; }
.u-input .lbl { color: var(--grey-2); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: 0.1px; }
.u-input .val { color: var(--grey-3); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0.1px; }
.u-area { min-height: calc(128 * var(--u)); align-items: flex-start; padding-top: calc(16 * var(--u)); }
.u-chip { padding: calc(4 * var(--u)) calc(16 * var(--u)); border: calc(1 * var(--u)) solid var(--grey-3); border-radius: calc(8 * var(--u)); color: var(--grey-3); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.u-btn-dark { width: 100%; height: calc(48 * var(--u)); display: flex !important; align-items: center; justify-content: center; gap: calc(4 * var(--u)); border-radius: calc(8 * var(--u)) !important; background: var(--black-1) !important; color: var(--brand-1) !important; font-size: calc(14 * var(--u)) !important; line-height: calc(20 * var(--u)); }
.u-btn-dark img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.u-btn-dark.small { width: calc(194 * var(--u)); margin: calc(16 * var(--u)) auto 0; border-radius: calc(16 * var(--u)) !important; }
.u-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u)); background: linear-gradient(to bottom, rgba(17, 17, 17, 0), var(--black) 35%); }
.u-btn { width: 100%; height: calc(48 * var(--u)); border-radius: calc(16 * var(--u)) !important; background: var(--brand-1) !important; color: var(--black) !important; font-size: calc(14 * var(--u)) !important; line-height: calc(20 * var(--u)); }
.u-btn:hover, .u-btn-dark:hover, .u-link:hover { filter: brightness(1.08); }

.u-seg { display: flex; gap: calc(8 * var(--u)); height: calc(64 * var(--u)); }
.u-seg button { flex: 1; border-radius: calc(8 * var(--u)); background: var(--black-1); color: var(--grey-2); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0.1px; }
.u-seg button[aria-checked="true"] {
  padding: calc(4 * var(--u)); border: calc(2 * var(--u)) solid var(--brand-1); border-radius: calc(12 * var(--u));
  background: var(--brand-1); background-clip: content-box; color: var(--black);
}
.u-seg button[aria-disabled="true"] { cursor: default; }

/* new event: a session asks for a name, a match for the opponent */
.u-new[data-type="session"] .for-match, .u-new[data-type="match"] .for-session { display: none; }
.u-input .ph { color: var(--grey-2); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0.1px; }
.u-btn:disabled { opacity: 0.5; cursor: default; filter: none; }

/* pickers: a field that opens a bottom sheet */
.u-input.u-pick { width: 100%; padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--black-1); text-align: left; }
.u-input.u-pick:hover { background: var(--grey); }
.u-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); min-width: 0; }
.u-sheet { position: absolute; inset: 0; z-index: 5; visibility: hidden; pointer-events: none; transition: visibility 0s .3s; }
.u-sheet.open { visibility: visible; pointer-events: auto; transition: none; }
.u-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity .3s; }
.u-sheet.open .u-scrim { opacity: 1; }
.u-sheet-box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: 0 calc(8 * var(--u)) calc(20 * var(--u));
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0; background: var(--black);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3));
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.u-sheet.open .u-sheet-box { transform: none; }
html.still .u-sheet, html.still .u-scrim, html.still .u-sheet-box, html.still .u-status, html.still .u-snack, html.still .u-check::before, html.still .u-radio::before, html.still .u-tab-ind { transition: none !important; }
html.still .proto-phone * { animation: none !important; }
html.still .u-home[data-state="before"] .u-plus::after { box-shadow: 0 0 0 calc(4 * var(--u)) rgba(210, 255, 77, 0.35); }
.u-screen:has(.u-sheet.open) .u-status { z-index: 6; opacity: 0.5; background: none; }
.u-handle { display: flex; justify-content: center; padding: calc(16 * var(--u)); }
.u-handle::before { content: ""; width: calc(32 * var(--u)); height: calc(4 * var(--u)); border-radius: 100px; background: var(--grey-2); }
.u-sheet-title { padding: 0 calc(16 * var(--u)); font-weight: 700; font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }
.u-options { display: grid; gap: calc(8 * var(--u)); }
.u-options li { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(8 * var(--u)); }
.u-options li:has(.u-radio:checked) { background: var(--grey); }
.u-options label { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0.1px; cursor: pointer; }
.u-options li > img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(8 * var(--u)); }
.u-radio { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin: 0; cursor: pointer; background: none; border: 0; }
.u-radio::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(-8 * var(--u)); border-radius: 50%; background: var(--grey-1); transition: background-color .15s; }
.u-radio:checked::before { background: var(--brand-1); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--brand-1), inset 0 0 0 calc(2 * var(--u)) var(--black); }
.u-sheet-foot { display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--u)); padding: 0 calc(8 * var(--u)) calc(4 * var(--u)); }
.u-link.small { height: calc(40 * var(--u)); gap: calc(8 * var(--u)); }
.u-link.small img { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

.u-empty { margin-top: calc(64 * var(--u)); text-align: center; }
.u-empty-title { font-weight: 500; font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); }
.u-empty-text { width: calc(318 * var(--u)); margin: calc(8 * var(--u)) auto 0; color: var(--grey-3); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }

.u-drills-head { display: flex; align-items: center; justify-content: space-between; height: calc(38 * var(--u)); margin-top: calc(24 * var(--u)); }
.u-drills-head .u-subhead { margin: 0; }
.u-link { display: flex !important; align-items: center; gap: calc(4 * var(--u)); color: var(--brand-1) !important; font-size: calc(14 * var(--u)) !important; line-height: calc(20 * var(--u)); }
.u-link img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.u-drills { display: grid; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.u-drills li { display: flex; align-items: center; justify-content: space-between; height: calc(56 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--black-1); box-shadow: 0 0 0 calc(1 * var(--u)) transparent; transition: box-shadow 1.2s; }
.u-drills li.flash { box-shadow: 0 0 0 calc(1 * var(--u)) var(--brand-1); transition: none; }
.u-drills li div { display: flex; flex-direction: column; justify-content: space-between; width: calc(216 * var(--u)); height: calc(40 * var(--u)); }
.u-drills b, .u-drills span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.1px; }
.u-drills b { color: var(--grey-3); font-weight: 500; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
.u-drills span { color: var(--grey-2); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
.u-drills img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* home */
.u-home[data-state="before"] .after, .u-home[data-state="after"] .before { display: none; }
.u-stats { display: flex; gap: calc(4 * var(--u)); }
.u-stats > div { flex: 1; padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--black-1); color: var(--brand-1); }
.u-stats b { display: block; font-weight: 400; font-size: calc(32 * var(--u)); line-height: calc(44 * var(--u)); }
.u-stats span { font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); }
.u-card { position: relative; overflow: hidden; display: flex; flex-direction: column; height: calc(192 * var(--u)); margin-top: calc(4 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--black-1); }
.u-card::before { content: ""; position: absolute; left: calc(248 * var(--u)); top: calc(-171 * var(--u)); width: calc(351 * var(--u)); height: calc(570 * var(--u)); background: url("assets/ui/card-hex.svg") center / contain no-repeat; pointer-events: none; }
.u-card.main { padding: calc(17 * var(--u)) calc(16 * var(--u)); background: var(--brand-1); color: var(--black); }
.u-card.main::before { display: none; }
.u-team { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: 0.1px; }
.u-team img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; }
.u-time { position: relative; margin-top: calc(2 * var(--u)); font-weight: 700; font-size: calc(30 * var(--u)); line-height: calc(44 * var(--u)); }
.u-foot { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: var(--grey-2); font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); letter-spacing: 0.1px; }
.u-foot em { padding: calc(4 * var(--u)) calc(12 * var(--u)); border: calc(1 * var(--u)) solid var(--white); border-radius: 100px; color: var(--white); font-style: normal; }
.u-card.main .u-foot { color: var(--black); }
.u-card.main .u-foot em { border-color: var(--black); background: var(--black); color: var(--brand-1); }
.u-home .u-subhead { margin: calc(24 * var(--u)) 0 0; padding: calc(4 * var(--u)) 0; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
.u-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(8 * var(--u));
  background: rgba(36, 36, 36, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 -1px 2.5px rgba(0, 0, 0, 0.25);
}
.u-nav > span, .u-nav > button:not(.u-plus) { flex: 1; display: flex; justify-content: center; padding: calc(30 * var(--u)) 0 calc(34 * var(--u)); }
.u-nav > span img, .u-nav > button:not(.u-plus) img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.u-nav .u-plus { position: relative; width: calc(64 * var(--u)); display: flex; justify-content: center; }
.u-nav .u-plus img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.u-home[data-state="before"] .u-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(32 * var(--u)); height: calc(32 * var(--u));
  margin: calc(-16 * var(--u)) 0 0 calc(-16 * var(--u)); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(210, 255, 77, 0.7); animation: u-pulse 1.8s infinite;
}
@keyframes u-pulse { 70% { box-shadow: 0 0 0 calc(14 * var(--u)) rgba(210, 255, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(210, 255, 77, 0); } }
.u-snack {
  position: absolute; left: 50%; bottom: calc(88 * var(--u)); z-index: 3;
  height: calc(48 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(8 * var(--u));
  background: var(--brand-1); color: var(--black); font-family: Roboto, Ubuntu, sans-serif; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0.25px; white-space: nowrap;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15), 0 1px 1.5px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translate(-50%, calc(8 * var(--u))); transition: opacity .25s, transform .25s; pointer-events: none;
}
.u-snack.show { opacity: 1; transform: translate(-50%, 0); }

/* edit attendance */
.u-att .u-head { padding: calc(16 * var(--u)) 0 calc(24 * var(--u)); }
.u-all {
  position: absolute; top: calc(246 * var(--u)); left: calc(16 * var(--u)); right: calc(16 * var(--u));
  display: flex; align-items: center; justify-content: flex-end; gap: calc(4 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  border: calc(1 * var(--u)) solid var(--grey-2); border-radius: calc(8 * var(--u));
  font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); cursor: pointer;
}
.u-check { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin: 0; cursor: pointer; background: none; border: 0; }
.u-check::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(-8 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--grey-1); transition: background-color .15s; }
.u-check:checked::before { background: var(--brand-1) url("assets/ui/check.svg") center / calc(16 * var(--u)) no-repeat; }
.u-players { display: grid; gap: calc(8 * var(--u)); }
.u-players li { position: relative; display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)) 0; border-radius: calc(8 * var(--u)); background: var(--black-1); }
/* the lime outline of a ticked player lies over the photo, not under it (Lev, 08.11.2026) */
.u-players li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--brand-1); opacity: 0; transition: opacity .15s; pointer-events: none; }
.u-players li:has(.u-check:checked)::after { opacity: 1; }
.u-players li > img, .u-photo2 { width: calc(72 * var(--u)); height: calc(72 * var(--u)); flex: none; object-fit: cover; object-position: top; align-self: flex-end; }
.u-photo2 { position: relative; }
.u-photo2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.u-players li > span:not(.u-photo2) { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--grey-2); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0.1px; }
.u-players b { color: var(--grey-3); font-weight: 500; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-absent { margin: calc(32 * var(--u)) 0 calc(8 * var(--u)); color: var(--error); font-weight: 700; font-size: calc(24 * var(--u)); line-height: calc(34 * var(--u)); }

/* ---------- prototype: event screen (BBE file) ---------- */

/* event: a session on the schedule, three tabs (BBE 3016:138656, 3016:138719, 3016:138779, 3016:138546) */
.ue-event [hidden] { display: none !important; }
.ue-event .u-head { padding-bottom: calc(24 * var(--u)); }
.ue-event .u-head > .u-title + .u-meta { margin-top: calc(16 * var(--u)); }
.ue-event .u-meta i { background: var(--grey-3); }
.ue-event .u-scroll { padding-bottom: calc(32 * var(--u)); }
.ue-event .u-subhead { margin: 0; }
.ue-panel { display: grid; gap: calc(16 * var(--u)); margin-top: calc(16 * var(--u)); }
.ue-box { display: grid; gap: calc(8 * var(--u)); }

/* session info */
.ue-event .u-chip { padding: calc(5 * var(--u)) calc(15 * var(--u)); letter-spacing: 0.1px; }   /* 32 high, the border inside as in Figma */
.ue-text { color: var(--grey-3); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0.1px; }
.ue-files { display: grid; gap: calc(8 * var(--u)); }
.ue-files li { display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(56 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--black-1); }
.ue-files img { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--white); object-fit: cover; }
.ue-files div { flex: 1; min-width: 0; height: calc(40 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; letter-spacing: 0.1px; white-space: nowrap; }
.ue-files b, .ue-files span { overflow: hidden; text-overflow: ellipsis; }
.ue-files b { color: var(--grey-3); font-weight: 400; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
.ue-files span { color: var(--grey-2); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }

/* plan */
.ue-event .u-drills { margin-top: 0; }

/* attendance, after the session */
.ue-event .ue-edit { height: calc(40 * var(--u)); margin-top: calc(4 * var(--u)); gap: calc(12 * var(--u)); border-radius: calc(16 * var(--u)) !important; }
.ue-event .ue-edit img { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.ue-present { margin: calc(16 * var(--u)) 0 calc(8 * var(--u)); color: var(--brand-1); font-weight: 700; font-size: calc(24 * var(--u)); line-height: calc(34 * var(--u)); }
.ue-role { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); }
.ue-role > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ue-trial {
  flex: none; display: flex; align-items: center; gap: calc(4 * var(--u));
  padding: calc(1 * var(--u)) calc(11 * var(--u)) calc(1 * var(--u)) calc(7 * var(--u));
  border: calc(1 * var(--u)) solid var(--black); border-radius: 100px; background: var(--brand-1);
  color: var(--black); font-style: normal; font-size: calc(10 * var(--u)); line-height: calc(16 * var(--u)); white-space: nowrap;
}
.ue-trial img { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }

/* attendance, before the session (Figma puts the icon 8 units left of centre; kept) */
.ue-alert { padding-top: calc(51 * var(--u)); text-align: center; }
.ue-alert img { width: calc(59.9287 * var(--u)); height: calc(69.1992 * var(--u)); margin-left: calc(126.38 * var(--u)); }
.ue-alert-title { margin-top: calc(16.8 * var(--u)); font-weight: 500; font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); }
.ue-alert-text { width: calc(268 * var(--u)); margin: calc(8 * var(--u)) auto 0; color: var(--grey-3); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0.1px; }

/* ---------- prototype: calendar screen (BBE file) ---------- */

/* calendar: day, week and month views (BBE file) */
.uc-screen[data-state="before"] .after { display: none; }

/* date switcher pill under the tabs */
.uc-date { display: flex; align-items: center; justify-content: space-between; margin-top: calc(16 * var(--u)); }
.uc-pick { display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(8 * var(--u)); border-radius: 100px; background: var(--white); color: var(--black); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0.1px; white-space: nowrap; }
.uc-pick img, .uc-help { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }

/* event cards that open the event: the kit's .u-card on a <button> */
.uc-screen button.u-card { width: 100%; padding: calc(16 * var(--u)); background: var(--black-1); text-align: left; }
.uc-screen button.u-card:hover { filter: brightness(1.08); }

/* day: one column of cards */
.uc-list { display: grid; gap: calc(4 * var(--u)); margin-top: calc(16 * var(--u)); }
.uc-list .u-card { margin-top: 0; }

/* week: a row of cards per day, scrolled sideways */
.uc-week { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(32 * var(--u)); margin-top: calc(16 * var(--u)); }
.uc-week .u-subhead { margin: 0 0 calc(4 * var(--u)); letter-spacing: 0.1px; }
.uc-row {
  display: flex; gap: calc(16 * var(--u)); margin: 0 calc(-16 * var(--u)); padding: 0 calc(16 * var(--u));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 calc(16 * var(--u));
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.uc-row::-webkit-scrollbar { display: none; }
.uc-row:focus-visible { outline: calc(2 * var(--u)) solid var(--brand-1); outline-offset: calc(-2 * var(--u)); }
.uc-screen .u-card.uc-h { flex: none; width: calc(304 * var(--u)); height: calc(168 * var(--u)); margin-top: 0; scroll-snap-align: start; }
.u-card.uc-h::before { left: calc(240 * var(--u)); top: calc(-201.36 * var(--u)); }
.u-card.uc-plain::before { display: none; }

/* month: a 7-column grid, marks for the events of each day */
.uc-month { margin: calc(24 * var(--u)) calc(-16 * var(--u)) 0; }
.uc-wk { display: grid; grid-template-columns: repeat(7, 1fr); height: calc(88 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--white); }   /* Figma draws the line inside the 88 */
.uc-month .uc-cell {
  display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u));
  width: 100%; min-width: 0; height: 100%; padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u)); overflow: hidden;
  color: var(--white); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u));
}
.uc-month .uc-cell.out { color: var(--grey-2); }
.uc-month button.uc-cell:hover { background: var(--black-1); }
.uc-dots { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: calc(4 * var(--u)); width: 100%; }
.uc-dots i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--grey-3); }
.uc-dots i.l { background: var(--brand-1); }
.uc-dots i.v { background: var(--brand-2); }

/* bottom navigation: the kit lays out the buttons; the current tab and Profile do nothing */
.u-nav > button:not([data-go]) { cursor: default; }
.proto-phone .u-nav > button:not([data-go]):active { scale: 1; }

/* ---------- prototype: team screens (BBE file) ---------- */

/* team, players (+ player card), team attendance — BBE file */

/* light top bar with the back arrow and the more icon (Team): row y 68–100 */
.ut-bar { position: absolute; top: calc(52 * var(--u)); left: 0; right: 0; height: calc(64 * var(--u)); padding: 0 calc(16 * var(--u)); display: flex; align-items: center; justify-content: space-between; }
.ut-bar .u-ic { margin-right: calc(8 * var(--u)); }
/* the title on the back-arrow row of a dark header ("‹ Players") */
.u-head-row .ut-bar-title { flex: 1; min-width: 0; padding-left: calc(4 * var(--u)); }
/* team line under a 64-unit bar: text row at y 140–164, border at y 187–188 as in Figma */
.u-teamline.ut-teamline { margin-top: calc(32 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u)); }   /* 7: Figma draws the white border inside the box */
.u-teamline.ut-teamline img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }

/* team */
.ut-team { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.ut-team img { width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; object-fit: cover; }
.ut-menu {
  display: flex; gap: calc(40 * var(--u)); margin-top: calc(24 * var(--u)); padding: calc(12 * var(--u)) calc(28 * var(--u));
  border-radius: calc(16 * var(--u)); background: var(--brand-1); color: var(--black);
  font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: 0.1px;
}
.u-screen .ut-menu button { width: calc(64 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); white-space: nowrap; }
.u-screen .ut-menu button:hover { opacity: 0.7; }
.u-screen .ut-menu button:focus-visible { outline-color: var(--black); }
.ut-menu img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(4 * var(--u)); }
.ut-menu + .u-stats { margin-top: calc(24 * var(--u)); }

/* label / value rows (About team, player card) */
.ut-info { display: grid; gap: calc(8 * var(--u)); margin: 0; }
.ut-info > div { display: flex; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--black-1); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0.1px; }
.ut-info dt, .ut-info dd { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-info dt { color: var(--grey-2); }
.ut-info dd { color: var(--grey-3); text-align: right; }

/* players */
.ut-group { margin: calc(32 * var(--u)) 0 calc(8 * var(--u)); color: var(--white); font-weight: 700; font-size: calc(24 * var(--u)); line-height: calc(34 * var(--u)); }
.ut-group:first-child { margin-top: 0; }
/* a row that opens the player card: the button carries the .u-players li layout */
.u-players li.ut-tap { padding: 0; }
.u-screen .ut-prow { width: 100%; display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)) 0; border-radius: calc(8 * var(--u)); text-align: left; }
.u-screen .ut-prow:hover { background: var(--grey); }
.ut-prow > img { width: calc(72 * var(--u)); height: calc(72 * var(--u)); flex: none; object-fit: cover; object-position: top; align-self: flex-end; }
.ut-prow > span { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--grey-2); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0.1px; }
.ut-pos { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); }
.ut-pos > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-trial {
  flex: none; display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(1 * var(--u)) calc(11 * var(--u)) calc(1 * var(--u)) calc(7 * var(--u));   /* Figma 2/12/2/8 with the stroke inside */
  border: calc(1 * var(--u)) solid var(--black); border-radius: 100px; background: var(--brand-1); color: var(--black);
  font-style: normal; font-size: calc(10 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: 0;
}
.ut-trial img { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }

/* player card sheet */
.u-sheet-box.ut-sheet { padding: 0 0 calc(16 * var(--u)); }
.ut-pcard {
  position: relative; overflow: hidden; align-self: center; width: calc(328 * var(--u)); height: calc(200 * var(--u)); padding: calc(16 * var(--u));
  border-radius: calc(16 * var(--u)); background: var(--brand-1); color: var(--black);
}
.ut-pcard::before { content: ""; position: absolute; left: calc(-220 * var(--u)); top: calc(-110 * var(--u)); width: calc(350.735 * var(--u)); height: calc(569.714 * var(--u)); background: url("assets/ui/ut-card-hex.svg") center / contain no-repeat; pointer-events: none; }
.ut-pcard-photo { position: absolute; left: calc(168 * var(--u)); top: calc(56 * var(--u)); width: calc(144 * var(--u)); height: calc(144 * var(--u)); object-fit: cover; }
.ut-pcard p { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-pcard-name { font-weight: 700; font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }
.ut-pcard-pos { margin-top: calc(4 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0.1px; }
.ut-pcard-num { margin-top: calc(4 * var(--u)); font-weight: 700; font-size: calc(40 * var(--u)); line-height: calc(56 * var(--u)); }
.ut-sheet-body { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: 0 calc(16 * var(--u)); }
.ut-actions { display: flex; gap: calc(12 * var(--u)); }
.u-screen .ut-act { flex: 1; height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); border-radius: calc(16 * var(--u)); color: var(--brand-1); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.u-screen .ut-act.on { background: var(--brand-1); color: var(--black); }
.u-screen .ut-act:hover { filter: brightness(1.08); }
.ut-act img { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

/* team attendance */
.ut-month { padding: calc(8 * var(--u)) 0; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0.1px; }
.ut-month em { color: var(--brand-1); font-style: normal; }
.ut-month + .u-stats { margin-top: calc(4 * var(--u)); }
.ut-att .u-subhead { margin-top: calc(32 * var(--u)); }
/* stat rows: the text block is centred in y 8–72 of the 80-unit row */
.u-players.ut-stat li > span:not(.u-photo2) { gap: calc(2 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.ut-line { display: flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap; }
.ut-line i { flex: none; width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: var(--grey-3); }

/* ---------- prototype: motion ---------- */

/* the pill under the active tab slides between tabs */
.proto-phone .u-tabs { position: relative; }
.proto-phone .u-tabs > button { position: relative; z-index: 1; background: none; transition: color .25s, scale .15s ease; }
.proto-phone .u-tab-ind {
  position: absolute; left: 0; top: calc(8 * var(--u)); height: calc(32 * var(--u)); width: calc(100% / var(--n, 2));
  border-radius: calc(16 * var(--u)); background: var(--brand-1);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.proto-phone .u-tabs.no-anim .u-tab-ind { transition: none; }

/* press feedback: everything tappable gives a little */
.proto-phone .u-screen button, .proto-phone .u-screen [role="button"] { transition: scale .15s ease, color .25s, background-color .25s, opacity .25s; }
.proto-phone .u-screen button:not(:disabled):active { scale: 0.97; }
.proto-phone .u-screen [role="button"]:active, .proto-phone .u-screen button.u-card:active { scale: 0.98; }
.proto-phone .u-screen [role="button"] { cursor: pointer; }
.proto-phone .u-screen [role="button"]:focus-visible { outline: calc(2 * var(--u)) solid var(--brand-1); outline-offset: calc(2 * var(--u)); }
.u-check::before, .u-radio::before { transition: background-color .15s, transform .15s; }
.u-check:active::before, .u-radio:active::before { transform: scale(0.85); }

/* content that appears: a short rise and fade */
@keyframes u-rise { from { opacity: 0; transform: translateY(calc(8 * var(--u))); } }
@keyframes u-tick { from { opacity: 0; transform: translateY(calc(10 * var(--u))); } }
.proto-phone .u-new .u-inputs, .proto-phone [data-panel], .proto-phone [data-att] { animation: u-rise .3s cubic-bezier(.2, .8, .2, 1); }
.proto-phone .u-home[data-state="after"] .u-card.main.after { animation: u-rise .45s cubic-bezier(.2, .8, .2, 1) .1s both; }
.proto-phone .u-home[data-state="after"] .u-stats b.after { animation: u-tick .4s cubic-bezier(.2, .8, .2, 1) .2s both; }

/* Edit attendance inside the prototype: the header is 16 units shorter there */
.proto-phone .u-att .u-all { top: calc(230 * var(--u)); }

/* ---------- prototype section ---------- */

.proto-stage { display: flex; align-items: flex-start; gap: calc(96 * var(--s)); margin-top: calc(48 * var(--s)); padding-left: calc(120 * var(--s)); }
.proto-phone { flex: none; width: calc(380 * var(--s)); }
.proto-side { width: calc(560 * var(--s)); padding-top: calc(24 * var(--s)); }
.proto-hint { color: var(--grey-2); font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
.proto-hint b { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--white); color: var(--black); }
.proto-steps { display: grid; gap: calc(8 * var(--s)); margin-top: calc(24 * var(--s)); counter-reset: step; }
.proto-steps li {
  position: relative; padding: calc(16 * var(--s)) calc(20 * var(--s)) calc(16 * var(--s)) calc(64 * var(--s));
  border-radius: 8px; background: rgba(31, 31, 31, 0.7); color: var(--grey-1); counter-increment: step;
  transition: background-color .25s, color .25s;
}
.proto-steps li::before {
  content: counter(step); position: absolute; left: calc(20 * var(--s)); top: calc(16 * var(--s));
  width: calc(28 * var(--s)); height: calc(28 * var(--s)); display: grid; place-items: center; border-radius: 50%;
  border: 1px solid currentColor; font-size: calc(14 * var(--s));
}
.proto-steps h3 { font-weight: 700; font-size: calc(20 * var(--s)); line-height: calc(28 * var(--s)); }
.proto-steps p { display: none; margin-top: calc(6 * var(--s)); color: var(--grey-3); font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
.proto-steps li.is-done { color: var(--grey-3); }
.proto-steps li.is-done::before { content: "✓"; border-color: var(--brand-1); color: var(--brand-1); }
.proto-steps li.is-current { background: var(--black-1); color: var(--white); box-shadow: inset 0 0 0 1px var(--brand-1); }
.proto-steps li.is-current::before { background: var(--brand-1); border-color: var(--brand-1); color: var(--black); }
.proto-steps li.is-current p { display: block; }
.proto-restart {
  margin-top: calc(24 * var(--s)); padding: calc(10 * var(--s)) calc(20 * var(--s));
  border: 1px solid var(--grey-1); border-radius: calc(8 * var(--s)); background: transparent; color: var(--grey-3);
  font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); cursor: pointer;
}
.proto-restart:hover { border-color: var(--grey-3); }
@container slide (max-width: 1199px) {
  .proto-stage { flex-direction: column; align-items: center; gap: 32px; margin-top: 40px; padding: 0; }
  .proto-phone { width: min(340px, 86%); }
  .proto-side { width: 100%; max-width: 560px; padding: 0; }
  .proto-hint, .proto-steps p { font-size: 16px; line-height: 24px; }
  .proto-steps li { padding: 14px 16px 14px 56px; }
  .proto-steps li::before { left: 16px; top: 14px; width: 26px; height: 26px; font-size: 13px; }
  .proto-steps h3 { font-size: 18px; line-height: 26px; }
  .proto-restart { padding: 10px 18px; font-size: 14px; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .u-home[data-state="before"] .u-plus::after { animation: none; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(210, 255, 77, 0.35); }
  .u-sheet, .u-scrim, .u-sheet-box, .proto-phone .u-tab-ind { transition: none; }
  .proto-phone .u-new .u-inputs, .proto-phone [data-panel], .proto-phone [data-att], .proto-phone .u-home[data-state="after"] .u-card.main.after, .proto-phone .u-home[data-state="after"] .u-stats b.after { animation: none; }
}

/* ---------- 29 success metrics ---------- */

.metric-rows {
  position: absolute;
  left: calc(48 * var(--s));
  top: 50%;
  transform: translateY(-50%);
  width: calc(1304 * var(--s));
  display: grid;
  gap: calc(32 * var(--s));
  justify-items: center;
}
.metric-row { display: flex; gap: calc(32 * var(--s)); width: 100%; }
.metric-row.two { width: auto; }
.metric-row li {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--s));
  padding: calc(32 * var(--s)) calc(24 * var(--s));
  border-radius: 4px;
  background: rgba(31, 31, 31, 0.7);
}
.metric-row.two li { flex: none; width: calc(480 * var(--s)); }
.metric-row img { flex: none; width: calc(40 * var(--s)); height: calc(40 * var(--s)); }
.metric-row h3 { color: var(--white); font-weight: 700; font-size: calc(24 * var(--s)); line-height: calc(34 * var(--s)); }
.metric-row p { margin-top: calc(8 * var(--s)); font-size: calc(18 * var(--s)); line-height: calc(26 * var(--s)); letter-spacing: 0.1px; }
@container slide (max-width: 1199px) {
  .metric-rows { position: relative; left: auto; top: auto; transform: none; width: auto; margin-top: 40px; gap: 16px; justify-items: stretch; }
  .metric-row, .metric-row.two { width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .metric-row.two li { width: auto; }
  .metric-row li { padding: 28px 24px; gap: 20px; }
}
@container slide (max-width: 699px) {
  .metric-row, .metric-row.two { grid-template-columns: 1fr; }
}

/* ---------- takeaways (not in Figma; built like the cards above) ---------- */

.takeaway-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(32 * var(--s));
  margin-top: calc(72 * var(--s));
}
.takeaway-grid li {
  padding: calc(32 * var(--s)) calc(32 * var(--s)) calc(36 * var(--s));
  border-radius: 4px;
  background: rgba(31, 31, 31, 0.7);
}
.takeaway-grid .num { display: block; color: var(--brand-1); font-weight: 500; font-size: calc(32 * var(--s)); line-height: calc(44 * var(--s)); }
.takeaway-grid h3 { margin-top: calc(16 * var(--s)); color: var(--white); font-weight: 700; font-size: calc(24 * var(--s)); line-height: calc(34 * var(--s)); }
.takeaway-grid p { margin-top: calc(8 * var(--s)); max-width: calc(560 * var(--s)); font-size: calc(18 * var(--s)); line-height: calc(26 * var(--s)); letter-spacing: 0.1px; }
@container slide (max-width: 1199px) {
  .takeaway-grid { margin-top: 40px; gap: 16px; }
  .takeaway-grid li { padding: 28px 24px 32px; }
}
@container slide (max-width: 699px) {
  .takeaway-grid { grid-template-columns: 1fr; }
}

/* ---------- 30 thank you ---------- */

.slide.thanks { border-radius: var(--radius) var(--radius) 0 0; background: var(--brand-1); }
.thanks .in { aspect-ratio: 1400 / 640; min-height: 0; padding: 0; display: grid; place-items: center; }
.thanks-text { color: var(--grey); font-weight: 500; font-size: calc(150 * var(--s)); line-height: 1; white-space: nowrap; }
@container slide (max-width: 1199px) {
  .thanks .in { aspect-ratio: 1400 / 640; }
  .thanks-text { font-size: 10.7cqi; }
}
main:has(> .thanks:last-child) { padding-bottom: 0; }

/* ---------- small screens: page shell ---------- */

@media (max-width: 699px) {
  :root { --gap: 8px; --radius: 24px; }
}

/* still frames: ?shot=<section id> keeps one section on the page */
html.shot main > .slide:not(.is-shot) { display: none; }
html.shot main { padding-top: var(--gap); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- portfolio shell (04.11.2026) ----------
   My name and the six stages on top, no solid band: a soft fade, so slides pass under the real top edge.
   It steps away on scroll down and comes back on scroll up (site/shell/shell.js). */
.pp-bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: var(--sh-top) var(--sh-pad) 30px;   /* the name's place from site/shell/top.css */
  background: linear-gradient(rgb(5 5 5 / .82), rgb(5 5 5 / 0));
  font: 500 14px/16px Ubuntu, system-ui, sans-serif;
}
.pp-bar a { color: var(--grey-2); text-decoration: none; transition: color .25s; }
.pp-bar a:hover { color: var(--brand-1); }
.pp-bar .pp-name { color: var(--white); }
.pp-stages { display: flex; gap: 22px; }
.pp-stages a.on { color: var(--white); }
@media (max-width: 760px) { .pp-stages { display: none; } }
html.still .pp-bar, html.shot .pp-bar, html.shot .sh-next, html.shot .sh-foot { display: none; }

/* cover: my role, one quiet line under the caption (04.11.2026) */
.cover-text .cover-role { margin-top: calc(20 * var(--s)); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); color: var(--grey-2); }
@container slide (max-width: 1199px) { .cover-text .cover-role { margin-top: 14px; font-size: 14px; line-height: 20px; } }

/* text (04.11.2026): headings break into even lines, paragraphs never end on a lone word */
.slide h1, .slide h2, .slide h3 { text-wrap: balance; }
.slide p, .slide li { text-wrap: pretty; }

/* No word alone on the last line (Lev's rule, checked with site/scripts/check-orphans.mjs at 320–1920 px; 08.11.2026).
   "pretty" alone left two-line items with one word at the end, so short text — list items, notes, labels — balances its lines. */
.slide :is(li, dd, dt, h4, figcaption), .slide .fl-node span, .slide .ok { text-wrap: balance; }