/* Scout24 case figures and the intake demo, in the case-figures hand.
   Loaded after case-figures.css; only what this page needs beyond the shared set. */

.cf, .cfd { --case-ink: #0B7A78; }

/* ---------- A. every request lands on one designer ---------- */
.s24a { grid-template-columns: minmax(150px, .8fr) minmax(48px, .5fr) minmax(0, 1.1fr); max-width: 700px; }
.s24a .cf-chip { white-space: nowrap; }
.s24a__pile { position: relative; padding: 0 14px 0 0; }
.s24a__pile::before, .s24a__pile::after { /* the rest of the hundred, stacked behind */
  content: ""; position: absolute; inset: 0 14px 0 0; border-radius: 16px; background: var(--cf-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cf-rule) 55%, transparent), var(--cf-rest);
  transform: translate(6px, -6px); z-index: 1;
}
.s24a__pile::after { transform: translate(12px, -12px); background: var(--cf-soft); z-index: 0; }
.s24a__hi { margin: 0; }

@container (max-width: 699px) {
  .s24a { grid-template-columns: 1fr; max-width: 440px; }
  .s24a .cf-chip { white-space: normal; }
  .s24a__pile { margin: 0 12px; padding: 0; }
  .s24a__pile::before, .s24a__pile::after { inset: 0; transform: translate(4px, -4px); }
  .s24a__pile::after { transform: translate(8px, -8px); }
}

/* ---------- B. a team under one review standard ---------- */
.s24b { width: 100%; max-width: 820px; display: grid; }
.s24b__hi { justify-self: start; margin: 0 0 -30px 28px; min-width: min(320px, 70%); }
.s24b__team {
  list-style: none; margin: 0; padding: 62px 24px 24px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  background: var(--cf-card); border-radius: 12px; position: relative;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cf-rule) 55%, transparent), var(--cf-rest);
}
.s24b__team::before { /* the track the members sit on */
  content: ""; position: absolute; left: 32px; right: 32px; top: 66px; height: 1.5px; background: var(--cf-bar);
}
.s24b__m { position: relative; display: flex; flex-direction: column; padding-top: 20px; min-width: 0; }
.s24b__m::before {
  content: ""; position: absolute; top: 0; left: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cf-marker); box-shadow: 0 0 0 3px var(--cf-card);
}
.s24b__m--pool::before { background: var(--cf-card); box-shadow: 0 0 0 1.5px var(--cf-marker), 0 0 0 4px var(--cf-card); }
.s24b__m--pool .cf3__n { color: var(--cf-quiet); font-weight: 500; }
.s24b__brace {
  height: 30px; margin: 0 calc(12.5% - 4px); position: relative;
  border: 1.5px solid var(--cf-line); border-top: 0; border-radius: 0 0 16px 16px;
}
.s24b__std {
  justify-self: center; margin-top: -11px; padding: 0 14px; background: var(--cf-ground); position: relative;
  font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--cf-quiet);
}

@container (max-width: 699px) {
  .s24b { max-width: 440px; }
  .s24b__hi { margin: 0 -4px -26px 18px; min-width: 0; justify-self: stretch; }
  .s24b__team { grid-template-columns: 1fr; gap: 18px; margin: 0 8px 0 30px; padding: 50px 20px 22px; grid-area: 2 / 1; }
  .s24b__team::before { left: 24px; right: auto; top: 54px; bottom: 30px; width: 1.5px; height: auto; }
  .s24b__m { padding: 0 0 0 26px; }
  .s24b__m::before { top: 4px; left: 0; }
  .s24b__brace {
    grid-area: 2 / 1; justify-self: start; align-self: stretch; width: 18px; height: auto;
    margin: 54px 0 26px 6px; border: 1.5px solid var(--cf-line); border-right: 0; border-radius: 14px 0 0 14px;
  }
  .s24b__std { justify-self: start; margin: 18px 0 0; padding: 0; background: none; font-size: 13.5px; }
}

/* ---------- C. one intake, ranked into a queue ---------- */
.s24c {
  width: 100%; max-width: 880px; display: grid; align-items: center;
  grid-template-columns: minmax(0, .95fr) auto minmax(0, 1.25fr); column-gap: 56px;
}
.s24c__in .cf__k { margin: 0 0 14px 2px; }
.s24c__pile { position: relative; height: 172px; }
.s24c .s24c__chip {
  position: absolute; left: 0; right: 10px; height: 36px; min-height: 0; padding: 0 12px; font-size: 13px;
  flex-direction: row; justify-content: flex-start; gap: 9px; text-align: left; white-space: nowrap; line-height: 1;
}
.s24c__chip:nth-child(1) { top: 0; transform: rotate(-1.6deg); }
.s24c__chip:nth-child(2) { top: 32px; left: 8px; right: 2px; transform: rotate(1deg); }
.s24c__chip:nth-child(3) { top: 64px; transform: rotate(-.7deg); }
.s24c__chip:nth-child(4) { top: 96px; left: 6px; right: 4px; transform: rotate(1.3deg); color: var(--cf-quiet); }
.s24c__chip:nth-child(5) { top: 128px; transform: rotate(-1.1deg); color: var(--cf-quiet); }
.s24c__gate { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 28px; }
.s24c__gate::before, .s24c__gate::after { /* in from the pile, out to the queue */
  content: ""; position: absolute; top: 28px; width: 50px; height: 1.5px; background: var(--cf-line);
}
.s24c__gate::before { right: calc(100% + 4px); }
.s24c__gate::after { left: calc(100% + 4px); }
.s24c__d {
  position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--cf-card);
  display: grid; place-items: center; color: var(--cf-marker);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cf-rule) 55%, transparent), var(--cf-rest);
}
.s24c__d::after { /* arrowhead into the queue */
  content: ""; position: absolute; left: calc(100% + 47px); top: 50%; width: 7px; height: 7px;
  border: solid var(--cf-marker); border-width: 1.5px 1.5px 0 0; transform: translate(0, -50%) rotate(45deg);
}
.s24c__d svg { width: 22px; height: 22px; }
.s24c__l { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--cf-text); margin-top: 12px; }
.s24c__q { font-family: var(--cf-mono); font-size: 12px; line-height: 1.4; color: var(--cf-quiet); margin-top: 4px; }
.s24c__out { display: grid; }
.s24c__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.s24c__list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--cf-text);
}
.s24c__seq {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--cf-ink); color: #fff;
  display: grid; place-items: center; font-family: var(--cf-mono); font-size: 12px; font-weight: 500; letter-spacing: 0;
}
.s24c__park { margin: -12px 22px 0 22px; padding-top: 26px; position: relative; z-index: 1; background: var(--cf-soft); }
.s24c__row {
  display: flex; align-items: baseline; gap: 12px; margin-top: 8px;
  font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--cf-quiet);
}
.s24c__tag { margin-left: auto; font-family: var(--cf-mono); font-size: 12px; color: var(--cf-quiet); white-space: nowrap; }

@container (max-width: 699px) {
  .s24c { grid-template-columns: 1fr; max-width: 440px; row-gap: 0; }
  .s24c__pile { height: 172px; margin: 0 10px 0 0; }
  .s24c__gate { flex-direction: row; justify-content: flex-start; gap: 12px; margin: 44px 0 44px 0; padding-left: calc(50% - 28px); text-align: left; flex-wrap: wrap; }
  .s24c__gate::before, .s24c__gate::after { top: auto; left: 50%; right: auto; width: 1.5px; height: 32px; }
  .s24c__gate::before { bottom: calc(100% + 6px); }
  .s24c__gate::after { top: calc(100% + 6px); }
  .s24c__d { flex: none; }
  .s24c__d::after { left: 50%; top: calc(100% + 36px); transform: translate(-50%, 0) rotate(135deg); }
  .s24c__l, .s24c__q { margin: 0; }
  .s24c__gate > .s24c__l { align-self: center; }
  .s24c__q { flex-basis: 100%; margin: -34px 0 0 68px; }
  .s24c__prio { margin: 0 4px; }
  .s24c__park { margin: -12px 20px 0; }
}

/* ---------- D. evidence into hypotheses, then build ---------- */
.s24d .cf4__units { min-width: 0; }
.s24d .cf-chip { white-space: nowrap; }
@container (max-width: 699px) { .s24d .cf-chip { white-space: normal; } }

/* ---------- E. the landing-page test machine ---------- */
.s24e__k { margin: 0 0 0 4px; }
.s24e .cf3__plan { margin-top: 56px; }
.s24e .cf3__step--hi .cf-hi { margin: -62px -12px -34px; }
.s24e__ab { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.s24e__ab i { display: block; height: 6px; border-radius: 3px; background: var(--cf-bar); width: 58%; }
.s24e__ab i.win { width: 86%; background: var(--cf-ink); }

@container (max-width: 699px) {
  .s24e__k { margin: 0 0 16px 30px; }
  .s24e__k { margin-bottom: 16px; }
  .s24e .cf3__plan { margin-top: 0; grid-area: 2 / 1; }
  .s24e .cf3__step--hi .cf-hi { margin: 0 -40px 0 -8px; }
  .s24e .cf3__return { grid-area: 2 / 1; }
}

/* ---------- F. the system and the relaunch, through the team ---------- */
.s24f {
  width: 100%; max-width: 860px; display: grid; align-items: center;
  grid-template-columns: minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.15fr); column-gap: 44px;
}
.s24f__lead, .s24f__team { position: relative; }
.s24f__out .cf-hi__n + .cf-hi__n { margin-top: 4px; }
.s24f__team::before, .s24f__out::before { /* the hand-off line, with its arrowhead */
  content: ""; position: absolute; right: calc(100% + 2px); top: 50%; width: 40px; height: 1.5px; background: var(--cf-line);
}
.s24f__team::after, .s24f__out::after {
  content: ""; position: absolute; left: -9px; top: 50%; width: 7px; height: 7px;
  border: solid var(--cf-marker); border-width: 1.5px 1.5px 0 0; transform: translate(0, -50%) rotate(45deg);
}

@container (max-width: 699px) {
  .s24f { grid-template-columns: 1fr; max-width: 420px; row-gap: 40px; }
  .s24f__lead { margin-right: 40px; }
  .s24f__team { margin: 0 20px 0 20px; }
  .s24f__out { margin: 0 -2px 0 12px; }
  .s24f__team::before, .s24f__out::before { right: auto; left: 50%; top: auto; bottom: calc(100% + 2px); width: 1.5px; height: 38px; border: 0; background: var(--cf-line); }
  .s24f__team::after, .s24f__out::after { left: 50%; top: -9px; transform: translate(-50%, 0) rotate(135deg); }
}

/* ---------- the demo: the intake ---------- */
.cfd .intake.cfd__g { background: var(--cf-ground); border: 0; border-radius: 12px; padding: clamp(20px, 5vw, 44px); container-type: inline-size; }
.cfi { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.08fr); align-items: start; column-gap: 0; }
.cfd .cfi__k { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; font-weight: 500; color: var(--cf-quiet); margin: 0 0 10px; padding: 0 18px; }
.cfi__count {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cf-soft);
  display: inline-grid; place-items: center; font-family: var(--cf-mono); font-size: 11.5px; color: var(--cf-quiet);
}
.cfi__inbox {
  padding: 16px 0 8px; background: var(--cf-card); border-radius: 12px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cf-rule) 55%, transparent), var(--cf-rest);
}
.cfi__list { display: flex; flex-direction: column; min-height: 44px; }
.cfi__gate {
  position: relative; align-self: start; margin: 118px 12px 0; padding: 7px 12px; border-radius: 999px;
  font-family: var(--cf-mono); font-size: 12px; line-height: 1.3; color: var(--cf-quiet); white-space: nowrap;
  background: var(--cf-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cf-rule) 55%, transparent);
}
.cfi__gate::before, .cfi__gate::after { content: ""; position: absolute; top: 50%; width: 14px; height: 1.5px; background: var(--cf-line); }
.cfi__gate::before { right: 100%; }
.cfi__gate::after { left: 100%; }
.cfi__out { display: grid; }
.cfi__prio {
  position: relative; z-index: 2; padding: 18px 0 10px; background: var(--cf-card); border-radius: 16px;
  box-shadow: 0 0 0 1px var(--cf-rule), var(--cf-lift);
}
.cfi__park {
  position: relative; z-index: 1; margin: -12px 10px 0; padding: 26px 0 8px; background: var(--cf-soft); border-radius: 12px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cf-rule) 55%, transparent), var(--cf-rest);
}
.cfi__list:empty, .cfi__list:not(:has(.req)) { /* empty slots, drawn */
  margin: 0 18px 8px; min-height: 0; height: 36px;
  background: linear-gradient(var(--cf-soft), var(--cf-soft)) 0 8px / 70% 7px no-repeat,
              linear-gradient(var(--cf-soft), var(--cf-soft)) 0 24px / 46% 7px no-repeat;
}
.cfi__park .cfi__list:empty, .cfi__park .cfi__list:not(:has(.req)) {
  background: linear-gradient(var(--cf-bar), var(--cf-bar)) 0 8px / 62% 7px no-repeat,
              linear-gradient(var(--cf-bar), var(--cf-bar)) 0 24px / 40% 7px no-repeat;
  opacity: .6;
}

.cfd .req {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 10px 18px;
  border: 0 !important; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; text-align: left;
  font: 500 14px/1.3 var(--font, Inter, system-ui, sans-serif); color: var(--cf-text);
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.cfd .req + .req { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cf-rule) 45%, transparent); }
.cfd .req::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cf-marker); }
.cfd [data-inbox] .req:hover { background: color-mix(in srgb, var(--cf-soft) 70%, transparent); transform: none; }
.cfd .req:focus-visible, .cfd .cfd__reset:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: -2px; }
.cfd .req.is-prio { cursor: default; font-weight: 600; font-size: 15px; }
.cfd .req.is-prio::before { display: none; }
.cfd .req__seq {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cf-ink); color: #fff;
  display: inline-grid; place-items: center; font-family: var(--cf-mono); font-size: 11.5px; font-weight: 500;
}
.cfd .req.is-park { opacity: 1; cursor: default; color: var(--cf-quiet); }
.cfd .req.is-park::before { background: var(--cf-card); box-shadow: 0 0 0 1.5px var(--cf-marker); }
.cfd .req.is-park { font-size: 13.5px; }
.cfd .req.is-park::after { flex: none; white-space: nowrap; font-family: var(--cf-mono); font-size: 12px; color: var(--cf-quiet); }
.cfd .cfd__note { font-size: 13.5px; line-height: 1.55; color: var(--cf-quiet); margin-top: 22px; max-width: 60ch; }

@container (max-width: 619px) {
  .cfd .intake .cfd__top { align-items: flex-start; }
  .cfi { grid-template-columns: minmax(0, 1fr); }
  .cfi__inbox { margin-right: 14px; }
  .cfi__gate { justify-self: center; margin: 30px 0; }
  .cfi__gate::before, .cfi__gate::after { left: 50%; right: auto; width: 1.5px; height: 22px; }
  .cfi__gate::before { top: auto; bottom: 100%; }
  .cfi__gate::after { top: 100%; }
  .cfi__out { margin-left: 14px; }
  .cfd .req { padding: 10px 16px; }
  .cfd .cfi__k { padding: 0 16px; }
}
@media (pointer: coarse) { .cfd .req { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .cfd .req { transition: none; } }