/* NEUFACTORY — Dr KC's deck, as a web page.
 *
 * This page WEARS mobility.css. That file is not about traffic: it is the
 * shape of one of his decks — a title slide, a rail of numbered cards, a panel
 * that drops open under the one you pressed, and his own slides inside it.
 * NEUFactory is the same document in a different colour, so it links the same
 * stylesheet and changes the four variables that decide the colour, rather
 * than owning a second copy of four hundred rules that would drift.
 *
 * THE COLOURS ARE SAMPLED, NOT CHOSEN — read out of the slides with sharp,
 * from the pixels they are used on. This deck is one ground and one accent
 * rather than four service colours: #101030 under every title slide, #1860d8
 * for the numbers and rules, #1848a8 where it goes darker.
 */
:root {
  --mob-navy:  #101030;   /* the ground of every title and section slide */
  --mob-ink:   #12122a;
  --mob-panel: #f2f3fa;
  /* one accent, stepped, because the deck steps it rather than changing hue */
  --mob-01:    #1860d8;
  --mob-02:    #1848a8;
  --mob-03:    #3f7ce4;
  --mob-04:    #27356b;
}

/* the four modules, in the order the deck explains them */
[data-verb="recognise"] { --mc: var(--mob-01); }
[data-verb="measure"]   { --mc: var(--mob-02); }
[data-verb="survive"]   { --mc: var(--mob-03); }
[data-verb="decide"]    { --mc: var(--mob-04); }

/* the hero's wash, keyed to this deck's ground rather than the traffic one */
.fac-page .mobhero {
  background:
    radial-gradient(120% 90% at 82% 8%, #1b1b52 0%, transparent 60%),
    var(--mob-navy);
}

/* ══════════ SLIDE 2 — what we see, and what it costs ══════════
   Two columns, because that is how the slide argues it: a symptom on the left
   and the money it costs on the right. On a phone they stack into pairs, and
   the pair has to stay readable as a pair — so the cost keeps its label. */
.facwhat { display: grid; gap: 10px; margin-top: clamp(18px, 3vw, 28px); }
.facwhat__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2.4vw, 28px);
  align-items: start;
  padding: clamp(12px, 1.8vw, 18px) 0;
  border-top: 1px solid rgba(16, 16, 48, 0.12);
}
.facwhat__row:first-child { border-top: 0; }
.facwhat__see { font-weight: 700; font-size: clamp(14px, 1.6vw, 16px); }
.facwhat__cost { color: rgba(18, 18, 42, 0.68); font-size: clamp(13.5px, 1.5vw, 15px); }
.facwhat__head {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mob-01);
}
.facwhat__head + .facwhat__head { color: rgba(18, 18, 42, 0.45); }
@media (max-width: 680px) {
  .facwhat__row { grid-template-columns: 1fr; gap: 4px; }
  .facwhat__row--head { display: none; }
  .facwhat__cost::before {
    content: 'What it costs — '; font-weight: 800; color: rgba(18, 18, 42, 0.42);
  }
}

/* ══════════ SLIDE 3 — the four numbers, and whose they are ══════════
   THE ATTRIBUTION IS PART OF THE STAT. Three of these are McKinsey's and
   Siemens's, not NEUON's, and a percentage on a company's own website with no
   source under it is the kind of claim that gets a page distrusted. His slide
   attributes them; so does this. */
.facprize { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(12px, 2vw, 20px); }
.facprize__t {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px; padding: clamp(16px, 2.4vw, 24px);
}
.facprize__n { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.facprize__up { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }
.facprize__t b { display: block; margin-top: 10px; font-size: 15px; }
.facprize__t span { display: block; margin-top: 3px; font-size: 13.5px; opacity: 0.7; }
.facprize__from {
  display: block; margin-top: 12px; font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.5;
}
.facprize__ours {
  margin-top: clamp(18px, 3vw, 28px); font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.55; color: #fff;
  border-left: 3px solid var(--mob-01); padding-left: 16px;
}

/* ══════════ SLIDE 14 — five phases, and where he says we are ══════════ */
.facjourney { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.facphase {
  background: #fff; border: 1px solid rgba(16, 16, 48, 0.14); border-radius: 16px;
  padding: clamp(14px, 2vw, 20px); display: grid; gap: 6px; align-content: start;
}
.facphase__n {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--mob-01); color: #fff; font-weight: 800; font-size: 14px;
}
.facphase b { font-size: 15px; letter-spacing: 0.02em; }
.facphase span { font-size: 13.5px; line-height: 1.5; color: rgba(18, 18, 42, 0.66); }
.facphase__state {
  justify-self: start; margin-top: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(16, 16, 48, 0.08); color: rgba(18, 18, 42, 0.6);
}
.facphase[data-state="Delivered"] .facphase__state { background: #e6f7ee; color: #0e7a48; }
.facphase[data-state="In scope"] .facphase__state { background: #e8f0ff; color: #1848a8; }

/* ══════════ SLIDE 22 — six phases and their days ══════════ */
.facbuild { display: grid; gap: 10px; }
.facstep {
  display: grid; grid-template-columns: 34px 1fr auto; gap: clamp(10px, 1.6vw, 18px);
  align-items: start; padding: clamp(12px, 1.7vw, 16px) 0;
  border-top: 1px solid rgba(16, 16, 48, 0.12);
}
.facstep:first-child { border-top: 0; }
.facstep__n {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--mob-panel); color: var(--mob-02); font-weight: 800;
}
.facstep b { display: block; font-size: 15px; }
.facstep span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: rgba(18, 18, 42, 0.66); }
.facstep__d { font-size: 13px; font-weight: 800; color: var(--mob-01); white-space: nowrap; padding-top: 8px; }
@media (max-width: 560px) {
  .facstep { grid-template-columns: 34px 1fr; }
  .facstep__d { grid-column: 2; padding-top: 0; }
}

/* the pairs used by "the engine underneath" and "who this is for" */
.facgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 2vw, 18px); }
.facgrid > div {
  background: #fff; border: 1px solid rgba(16, 16, 48, 0.14); border-radius: 16px;
  padding: clamp(14px, 2vw, 20px);
}
.facgrid b { display: block; font-size: 15px; margin-bottom: 4px; }
.facgrid span { font-size: 13.5px; line-height: 1.55; color: rgba(18, 18, 42, 0.66); }

/* the line the deck ends its "who for" slide on, in his own quotation marks */
.facsaid {
  margin-top: clamp(18px, 3vw, 26px); font-size: clamp(16px, 2.2vw, 21px);
  line-height: 1.5; font-style: italic; color: rgba(18, 18, 42, 0.78);
  border-left: 3px solid var(--mob-01); padding-left: 18px; max-width: 46rem;
}