/* ===========================================================================
   use-cases.css — the shared template for every /use-cases/<stage> page, per
   BRIEF-use-case-pages.md. One skeleton, one set of components; the only thing
   that changes per stage is the accent colour, passed in as --stage.

   Linked after site.css.
   =========================================================================== */

.uc { --stage: var(--plum); }
.uc--school { --stage: var(--school); }
.uc--work   { --stage: var(--work); }

/* The design runs a 1080px measure, narrower than the site's 1180px. */
.wrap--uc { max-width: 1080px; }

.sec--hero { padding-top: 64px; padding-bottom: 56px; }
.sec--work { padding-top: 64px; padding-bottom: 72px; }
.sec--dive { padding-top: 68px; padding-bottom: 68px; }
.sec--dark { padding-top: 64px; padding-bottom: 68px; }
.sec--pair { padding-top: 64px; padding-bottom: 24px; }
.sec--cta  { padding-top: 40px; padding-bottom: 72px; }

.eyebrow--stage { color: var(--stage); }

/* --- Stage rail: the lifelong line, and the page's only breadcrumb -------- */
.srail { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 36px; }
.srail__stage { display: flex; align-items: center; gap: 8px; opacity: .45; text-decoration: none; }
a.srail__stage { opacity: .6; transition: opacity .15s ease; }
a.srail__stage:hover { opacity: 1; }
.srail__stage--current {
  opacity: 1;
  background: #fff;
  border: 1.5px solid var(--stage);
  border-radius: 999px;
  padding: 6px 14px;
}
.srail__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.srail__label { font: 600 12.5px var(--ui); color: var(--ink); }
.srail__join { width: 56px; height: 2px; margin: 0 12px; opacity: .5; flex: none; }

/* --- Hero: the claim on the left, what goes in on the right --------------- */
.uc-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: end; }
.uc-hero__claim { display: flex; flex-direction: column; gap: 18px; }
.uc-hero h1 {
  font: 700 clamp(31px, 4vw, 48px)/1.06 var(--display);
  color: var(--ink);
  letter-spacing: -.015em;
  /* site.css hyphenates headings for German compounds; at this size it split
     "sub-ject" in English. Hyphenation earns its place only when space is tight. */
  hyphens: manual;
}
.uc-hero__intro { margin: 0; font: 400 17px/1.65 var(--ui); color: var(--body); max-width: 540px; }

.goesin { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.goesin__label {
  font: 600 10.5px var(--ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.goesin__rows { display: flex; flex-direction: column; gap: 8px; }
.goesin__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 10px;
  padding: 10px 14px;
}
.goesin__k { font: 700 13px var(--display); color: var(--stage); flex: none; width: 88px; }
.uc--work .goesin__k { width: 104px; }
/* German labels run longer than their English counterparts; without this they
   wrap to two lines against a one-line value. */
[lang="de"] .goesin__k { width: 108px; }
.goesin__v { font: 400 13px/1.5 var(--ui); color: var(--body); }

/* --- Worked example: three numbered steps, chat-style -------------------- */
.uc h2 {
  margin: 10px 0 0;
  font: 700 clamp(24px, 2.8vw, 32px)/1.15 var(--display);
  color: var(--ink);
  letter-spacing: -.01em;
  max-width: 600px;
  text-wrap: balance;
}
/* .h2--onDark in site.css is a single class and loses to `.uc h2` above, which
   would set ink text on the ink band — invisible, and invisible in a way no
   markup check catches. Restate it at matching specificity. */
.uc .h2--onDark { color: var(--cream); }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 40px; align-items: stretch; }
.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cream);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 22px;
}
.step__head { display: flex; align-items: center; gap: 10px; }
.step__num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--stage);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 13px var(--display);
  flex: none;
}
.step__title { font: 700 15px var(--display); color: var(--ink); }
.bubble {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 12px 12px 12px 3px;
  padding: 13px 16px;
  font: 400 14px/1.55 var(--ui);
  color: var(--ink);
}
.bubble--plain { border-radius: 12px; }
.bubble--sema { border: 1.5px solid var(--plum); }
.bubble__src {
  display: block;
  font: 600 10px var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stage);
  margin-top: 6px;
}
.bubble__title { font: 700 14px var(--display); color: var(--ink); }
.bubble__title span { font: 400 13px var(--ui); color: var(--plum); }
.bubble__meta { font: 400 12px/1.5 var(--ui); color: var(--muted); margin-top: 6px; }
.bubble__count { font: 600 11px var(--ui); color: var(--plum); margin-top: 4px; }
.bubble__quote { font: 600 15px/1.5 var(--display); color: var(--ink); }
.sema-row { display: flex; gap: 10px; align-items: flex-start; }
.sema-row .sema-mark { margin-top: 2px; }
.step__src { font: 600 10.5px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--stage); }
.step__note { font: 400 12.5px/1.55 var(--ui); color: var(--body); }
.step__meta { font: 400 12.5px/1.5 var(--ui); color: var(--muted); }
.step__meta em { color: var(--plum); font-weight: 600; font-style: normal; }
.step__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.step__ok { font: 600 11px var(--ui); color: var(--teal); white-space: nowrap; }
.step__body { font: 400 12.5px/1.55 var(--ui); color: var(--body); margin-top: 6px; }

.payoff {
  margin-top: 28px;
  background: rgba(110,67,112,.05);
  border: 1px solid rgba(110,67,112,.18);
  border-radius: 14px;
  padding: 20px 26px;
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.payoff__lead { font: 700 15px var(--display); color: var(--plum); flex: none; }
.payoff__text { font: 400 14.5px/1.6 var(--ui); color: var(--ink); }

/* --- Deep dive ----------------------------------------------------------- */
.dive { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
/* Not sticky: a heading that slides against its own text while you read it was
   called out as distracting on the philosophy page; the same holds here. */
.dive__head { display: flex; flex-direction: column; gap: 14px; }
.dive__head h2 { margin: 0; max-width: none; font-size: clamp(23px, 2.5vw, 30px); }
.dive__head p { margin: 0; font: 400 15px/1.65 var(--ui); color: var(--body); }
.dive__cards { display: flex; flex-direction: column; gap: 16px; }

.card { background: #fff; border: 1px solid var(--cream-line); border-radius: 14px; padding: 22px 24px; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card__title { font: 700 16px var(--display); color: var(--ink); }
.card__tag { font: 600 10.5px var(--ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.card__body { font: 400 13px/1.55 var(--ui); color: var(--body); margin-top: 6px; }
.pills { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pill2 {
  font: 600 12.5px var(--ui);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: 999px;
  padding: 6px 14px;
}
.pill2--open { color: var(--muted); border-style: dashed; }
.kv { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.kv__row { display: flex; gap: 12px; align-items: baseline; }
.kv__k { font: 600 12px var(--ui); color: var(--stage); flex: none; width: 92px; }
.kv__v { font: 400 13px var(--ui); color: var(--body); }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.twocol__t { font: 600 12.5px var(--ui); }
.twocol__d { font: 400 12.5px/1.55 var(--ui); color: var(--body); margin-top: 4px; }

/* --- Development timeline (work) ----------------------------------------- */
.tl { display: flex; flex-direction: column; }
.tl__row {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr) auto;
  gap: 16px;
  align-items: baseline;
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 12px;
  padding: 16px 20px;
}
.tl__row--now { border: 1.5px solid var(--plum); }
.tl__when { font: 700 13px var(--display); color: var(--muted); }
.tl__when--on { color: var(--plum); }
.tl__what { font: 400 14px/1.5 var(--ui); color: var(--body); }
.tl__row--now .tl__what { color: var(--ink); }
.tl__ctx { font: 600 11px var(--ui); color: var(--muted); background: var(--cream); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.tl__ctx--on { color: var(--plum); background: rgba(110,67,112,.08); }
.tl__ctx--now { color: #fff; background: var(--plum); }
.tl__join { width: 2px; height: 18px; background: var(--lilac); margin-left: 38px; }

/* --- The one dark band --------------------------------------------------- */
.dark__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 36px; }
.glass2 { background: rgba(247,245,240,.06); border: 1px solid rgba(247,245,240,.16); border-radius: 14px; padding: 24px; }
.glass2__t { font: 700 15px var(--display); color: var(--cream); }
.glass2__s { font: 400 12.5px/1.5 var(--ui); color: rgba(247,245,240,.6); margin-top: 3px; }
.glass2__out { margin-top: 16px; background: var(--cream); border-radius: 10px; padding: 13px 16px; }
.glass2__outT { font: 700 14px var(--display); color: var(--ink); }
.glass2__outD { font: 400 12.5px/1.5 var(--ui); color: var(--body); margin-top: 3px; }
.dark__foot { margin-top: 22px; font: 400 13px/1.6 var(--ui); color: rgba(247,245,240,.65); max-width: 720px; }

.match2 { display: flex; flex-direction: column; gap: 10px; margin-top: 36px; max-width: 720px; }
.match2__row {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  gap: 14px;
  align-items: baseline;
  background: rgba(247,245,240,.06);
  border: 1px solid rgba(247,245,240,.14);
  border-radius: 11px;
  padding: 14px 18px;
}
.match2__row--none { background: transparent; border: 1px dashed rgba(247,245,240,.3); }
.match2__mark { font: 700 15px var(--display); }
.match2__mark--yes { color: var(--mint); }
.match2__mark--part { color: var(--amber); }
.match2__mark--no { color: rgba(247,245,240,.5); }
.match2__req { font: 500 14.5px var(--ui); color: var(--cream); }
.match2__row--none .match2__req { color: rgba(247,245,240,.7); }
.match2__n { font: 400 12px var(--ui); color: rgba(247,245,240,.55); white-space: nowrap; }

/* --- Closing pair -------------------------------------------------------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.pair__label { font: 600 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.pair__keep { background: #fff; border: 1px solid var(--cream-line); border-radius: 16px; padding: 28px; }
.checks { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.check { display: flex; gap: 11px; font: 400 14px/1.6 var(--ui); color: var(--body); }
.check__mark { color: var(--teal); font-weight: 700; flex: none; }
.pair__fwd {
  background: rgba(110,67,112,.06);
  border: 1px solid rgba(110,67,112,.2);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pair__fwd p { margin: 0; font: 400 14.5px/1.65 var(--ui); color: var(--ink); }
.pair__link {
  align-self: flex-start;
  font: 600 14px var(--ui);
  color: var(--plum);
  text-decoration: none;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
  margin-top: auto;
}
.pair__link:hover { color: var(--plum-dark); }

/* --- CTA banner ---------------------------------------------------------- */
.ctabar {
  background: var(--plum);
  border-radius: 20px;
  padding: 44px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.ctabar__t { font: 700 clamp(21px, 2.4vw, 26px)/1.2 var(--display); color: #fff; max-width: 560px; }

@media (max-width: 900px) {
  .sec--hero { padding-top: 40px; padding-bottom: 40px; }
  .sec--work, .sec--dive, .sec--dark { padding-top: 48px; padding-bottom: 48px; }
  .sec--pair { padding-top: 48px; padding-bottom: 16px; }
  .sec--cta  { padding-top: 28px; padding-bottom: 52px; }

  .srail { margin-bottom: 26px; }
  .srail__join { width: 20px; margin: 0 6px; }
  .srail__label { font-size: 11.5px; }
  .srail__stage--current { padding: 5px 11px; }

  /* Touch targets: the rail's stage links sit at 14px and the next-stage link
     at 22px, both under the 24px WCAG 2.5.8 asks of a standalone link. */
  a.srail__stage { padding: 6px 0; }
  .pair__link { display: inline-block; padding: 4px 0; }
  .uc-hero { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .uc-hero h1 { hyphens: auto; }
  .payoff { flex-wrap: wrap; padding: 18px 20px; }
  .steps3 { grid-template-columns: 1fr; }
  .dive { grid-template-columns: 1fr; gap: 26px; }
  .dark__grid { grid-template-columns: 1fr; }
  .twocol { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .ctabar { padding: 30px 26px; }
  .tl__row { grid-template-columns: 66px minmax(0,1fr); row-gap: 8px; }
  .tl__ctx { grid-column: 2; justify-self: start; }
}