/* SMART MOBILITY — Dr KC's deck, as a web page.

   THE COLOURS ARE SAMPLED, NOT CHOSEN. Every one below was read out of the
   slides themselves with sharp, from the pixel it is used on, rather than
   eyeballed from a screenshot: the ground the title slides are printed on, the
   four numbered tiles, and the tint behind a service's cards. A palette
   guessed to "about right" is the thing that makes a web page look like a
   copy of a deck instead of the same document. */
:root {
  --mob-navy:  #0c1536;   /* the ground of every title slide */
  --mob-01:    #269a5d;   /* 01 Traffic Watch  · observe */
  --mob-02:    #77328b;   /* 02 Traffic Vector · measure */
  --mob-03:    #e84a25;   /* 03 Greenlight     · control */
  --mob-04:    #c91962;   /* 04 D'Reporter     · enforce */
  --mob-ink:   #0d1b2a;
  --mob-panel: #f2f2fa;   /* the light panel the deck lays its lists on */
}

/* the accent for anything inside a block that names its verb */
[data-verb="observe"] { --mc: var(--mob-01); }
[data-verb="measure"] { --mc: var(--mob-02); }
[data-verb="control"] { --mc: var(--mob-03); }
[data-verb="enforce"] { --mc: var(--mob-04); }

.mob-page { background: #fff; color: var(--mob-ink); }
.mob__wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

/* ══════════ THE TITLE SLIDE ══════════════════════════════════════════════
   Slide 1: company above division, the name big, and the four services along
   the foot in their numbered boxes. */
.mobhero {
  background:
    radial-gradient(120% 90% at 82% 8%, #16234d 0%, transparent 60%),
    var(--mob-navy);
  color: #fff;
  padding: clamp(96px, 12vh, 150px) 0 clamp(44px, 7vh, 84px);
}
.mobhero__id { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(28px, 6vh, 64px); }
.mobhero__mark {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  background: var(--blue, #0078ff); border-radius: 12px;
}
.mobhero__mark img { width: 34px; height: auto; display: block; }
.mobhero__id b {
  display: block; font-size: 13px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.mobhero__id i {
  display: block; font-style: normal; font-size: 14px;
  color: rgba(255, 255, 255, 0.62); margin-top: 3px;
}
.mobhero__h1 {
  margin: 0; font-size: clamp(2.6rem, 7.4vw, 5.6rem); line-height: 0.98;
  letter-spacing: -0.03em; font-weight: 800;
}
.mobhero__sub {
  margin: 10px 0 0; font-size: clamp(1.1rem, 2.4vw, 1.85rem);
  color: rgba(255, 255, 255, 0.82); font-weight: 400;
}
.mobhero__meta {
  margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.45);
}
/* the four boxes. Four across, two on a tablet, one on a phone — never three,
   for the same reason as everywhere else on this page: the count is content. */
.mobhero__row {
  list-style: none; margin: clamp(30px, 6vh, 60px) 0 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mobhero__row li {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.mobhero__num {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
  color: var(--mc, #fff); margin-bottom: 6px;
}
.mobhero__row a { color: #fff; font-weight: 700; text-decoration: none; font-size: 15px; }
.mobhero__row a:hover { text-decoration: underline; }
@media (max-width: 900px) { .mobhero__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .mobhero__row { grid-template-columns: 1fr; } }

/* ══════════ A CONTENT SLIDE ══════════════════════════════════════════════
   The deck's white slide: a coloured dot, a letterspaced kicker, one large
   dark heading, then the content. */
.mobsec { padding: clamp(48px, 8vh, 96px) 0; }
.mobsec--tint { background: linear-gradient(180deg, #f7f9fd 0%, #fff 100%); }
.mobsec--suite { padding-bottom: clamp(28px, 4vh, 48px); }
.mobsec--dark {
  background: var(--mob-navy); color: #fff;
}
.mobkick {
  position: relative; margin: 0 0 10px; padding-left: 18px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue, #0078ff);
}
.mobkick::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 9px; height: 9px; border-radius: 50%; background: currentColor;
}
.mobkick--green  { color: var(--mob-01); }
.mobkick--purple { color: var(--mob-02); }
.mobkick--orange { color: var(--mob-03); }
.mobkick--crimson{ color: var(--mob-04); }
.mobkick--on-dark { color: #6ea8ff; }
.mobsec__h {
  margin: 0 0 clamp(16px, 2.4vw, 26px);
  font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -0.025em;
}
.mobsec__p { max-width: 62ch; line-height: 1.65; margin: 0 0 14px; }
.mobsec__note { max-width: 62ch; margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(13, 27, 42, 0.6); }
.mobsec__note--on-dark { color: rgba(255, 255, 255, 0.6); }
.mobsec__note a, .mobsec__p a { color: var(--blue, #0078ff); font-weight: 700; }
.mobsec--dark .mobsec__note a { color: #6ea8ff; }

/* the big numbers, set the size the deck sets them */
.mobstats {
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin: 0 0 clamp(18px, 3vw, 30px);
}
.mobstats--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin-top: 22px; }
.mobstat {
  padding: clamp(16px, 2vw, 22px);
  background: var(--mob-panel); border-radius: 14px;
}
.mobstat b {
  display: block; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--mc, var(--blue, #0078ff));
}
.mobstat span { display: block; margin-top: 8px; font-weight: 700; font-size: 14px; }
.mobstat i {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 13px; line-height: 1.5; color: rgba(13, 27, 42, 0.58);
}
.mobstat--green { --mc: var(--mob-01); }

/* the deck's bordered list panel */
.mobpanel {
  padding: clamp(16px, 2.2vw, 26px);
  background: var(--mob-panel); border-radius: 16px;
  margin: 0 0 clamp(16px, 2.4vw, 26px);
}
.mobsec--dark .mobpanel { background: rgba(255, 255, 255, 0.05); }
.mobpanel h3 { margin: 0 0 12px; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.mobpanel ul { margin: 0; padding-left: 1.2em; display: grid; gap: 9px; }
.mobpanel li { line-height: 1.6; color: rgba(13, 27, 42, 0.76); }

/* ══════════ THE RAIL OF FOUR ═════════════════════════════════════════════
   `.crail` / `.acard` come from chapter.css, so this is the same card in the
   same row as "The latest" — only what a press does is different. */
.mobrail { padding-top: 8px; }
.mobrail .rail__head { justify-content: flex-end; }
.mobcard {
  /* NO `--mc` FALLBACK ON THIS RULE. It had one, and it beat the four
     [data-verb] rules above — same specificity, later in the file — so every
     card came out the page blue and the deck's four colours never appeared.
     The fallback belongs in each var() that reads it, not on the element that
     the real value is supposed to arrive on. */
  border-top: 4px solid var(--mc, var(--blue, #0078ff));
  text-align: left;
  display: flex; flex-direction: column;

  /* THE CHAPTER CARD IS 3:4 BECAUSE IT CARRIES A PHOTOGRAPH. These carry
     words and no picture, and the ratio left two thirds of each one empty. */
  aspect-ratio: auto;
  height: auto;
}
/* four across at laptop width rather than three and a half: the track's
   content box is 1216px at 1440, and (1216 - 3 gaps) / 4 is 289px, so 20vw
   lands all four inside it without a scroll. Below that it scrolls, which is
   what the arrows and the drag are for. */
.mobrail .rail__item { width: clamp(14rem, 20vw, 18rem); }
.mobcard__kick { color: var(--mc) !important; font-weight: 800; letter-spacing: 0.14em; }
.mobcard__q {
  display: block; margin: 12px clamp(14px, 1.6vw, 20px) 0;
  padding-top: 10px; border-top: 1px dashed rgba(13, 27, 42, 0.16);
  font-size: 13.5px; font-style: italic; line-height: 1.5; color: var(--mc);
}
/* "Read it" turns into "Close" when the card is open, from the attribute
   rather than from a class — one source of truth for which card is open */
.mobcard__more {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin: 12px clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 18px);
  padding: 7px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--mc) 12%, transparent);
  color: var(--mc); font-size: 12.5px; font-weight: 800;
}
.mobcard__more::after { content: '▾'; font-size: 11px; }
.mobcard[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 32%, transparent); }
.mobcard[aria-expanded="true"] .mobcard__more { background: var(--mc); color: #fff; }
.mobcard[aria-expanded="true"] .mobcard__more::after { content: '▴'; }

/* ══════════ THE DROP-DOWN ════════════════════════════════════════════════
   Height is animated on this wrapper, and `overflow: hidden` lives here so
   the content inside never has to know it is being revealed. */
.mobdrop {
  overflow: hidden;
  transition: max-height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  margin-top: clamp(14px, 2vw, 22px);
  /* THE NAV BAR HANGS OVER THE TOP OF THE PAGE, and the blue disc hangs below
     the bar — together about 140px. `scrollIntoView({block:'start'})` puts the
     panel's top edge at y=0, which put its number and its name behind the
     logo. `scroll-margin-top` is the fix the browser already has for this: it
     tells the scroller where the top of this element really is, so nothing in
     the script has to know how tall the header happens to be today. */
  scroll-margin-top: 146px;
}
.mobdrop[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mobdrop { transition: none; } }
.mobdrop__in {
  position: relative;
  padding: clamp(18px, 2.6vw, 32px);
  background: color-mix(in srgb, var(--mc, #0078ff) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--mc, #0078ff) 22%, transparent);
  border-left: 5px solid var(--mc, #0078ff);
  border-radius: 16px;
}
.mobdrop__head { display: flex; align-items: flex-start; gap: clamp(12px, 1.8vw, 20px); }
.mobdrop__num {
  flex: none; width: 58px; height: 58px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--mc, #0078ff); color: #fff;
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
}
.mobdrop__h { margin: 4px 0 6px; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.1; }
.mobdrop__sum { margin: 0; font-weight: 700; color: rgba(13, 27, 42, 0.72); line-height: 1.55; }
.mobdrop__x {
  margin-left: auto; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(13, 27, 42, 0.14); background: #fff;
  font-size: 20px; line-height: 1; color: var(--mob-ink); cursor: pointer;
}
.mobdrop__x:hover { background: var(--mob-panel); }
.mobdrop__in > p { line-height: 1.68; margin: 14px 0 0; }
.mobdrop__in > p b { color: var(--mob-ink); }

/* in → out, the deck's one-line summary of a service */
.mobchain {
  margin: 16px 0 0; padding: 12px 14px;
  background: #fff; border: 1px dashed color-mix(in srgb, var(--mc) 32%, transparent);
  border-radius: 12px; font-size: 14px; line-height: 1.55;
}
.mobchain span { color: rgba(13, 27, 42, 0.72); }
.mobchain b { display: block; margin-top: 6px; color: var(--mc); }

.mobpoints { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.mobpoints li { position: relative; padding-left: 22px; line-height: 1.62; color: rgba(13, 27, 42, 0.78); }
.mobpoints li::before {
  content: ''; position: absolute; left: 3px; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--mc, var(--blue, #0078ff));
}
.mobpoints b { color: var(--mob-ink); }
.mobpoints a { color: var(--blue, #0078ff); font-weight: 700; }

/* ══════════ THE FOUR-STEP CHAIN, on the dark slide ═══════════════════════ */
.mobchain__row {
  list-style: none; margin: 0 0 clamp(20px, 3vw, 32px); padding: 0;
  display: grid; gap: clamp(10px, 1.4vw, 16px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: mobchain;
}
@media (max-width: 1000px) { .mobchain__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .mobchain__row { grid-template-columns: 1fr; } }
.mobchain__row li {
  padding: clamp(14px, 1.8vw, 20px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid var(--mc, #6ea8ff);
  border-radius: 14px;
  display: flex; flex-direction: column;
}
.mobchain__verb {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mc, #6ea8ff);
}
.mobchain__row h3 { margin: 0 0 8px; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.mobchain__in { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.66); }
.mobchain__out { margin: auto 0 0; font-size: 13px; font-weight: 800; color: var(--mc, #6ea8ff); }

.mobfoundation {
  padding: clamp(16px, 2.2vw, 26px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}
.mobfoundation > h3 { margin: 0 0 14px; font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.mobfoundation > div {
  display: grid; gap: clamp(14px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.mobfoundation h4 { margin: 0 0 6px; font-size: 15px; color: #6ea8ff; }
.mobfoundation p { margin: 0; font-size: 13.8px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); }

/* ══════════ the four steps of an engagement ══════════════════════════════ */
.mobrun {
  margin: 0 0 clamp(18px, 2.6vw, 28px); padding-left: 1.4em;
  display: grid; gap: 10px; line-height: 1.62; color: rgba(13, 27, 42, 0.78);
}
.mobrun b { color: var(--mob-ink); }

.ctarow--mob { margin-top: clamp(22px, 3.6vw, 36px); display: flex; gap: 12px; flex-wrap: wrap; }
.btn--ghost {
  background: transparent;
  color: var(--blue, #0078ff);
  border: 1.5px solid color-mix(in srgb, var(--blue, #0078ff) 40%, transparent);
}
.btn--ghost:hover { background: color-mix(in srgb, var(--blue, #0078ff) 8%, transparent); }

/* THE KICKER INSIDE A DROP-DOWN TAKES THE SERVICE'S COLOUR. It was inheriting
   the page's blue while the tile, the border and the bullets beside it were
   orange — one word in the wrong colour is the kind of thing that reads as a
   mistake rather than as a default. */
.mobdrop .mobkick { color: var(--mc, var(--blue, #0078ff)); }

/* FOUR CARDS OF THE SAME HEIGHT, with their buttons on one line.
   With `aspect-ratio` off, each card shrank to its own words and the row came
   out as four different heights with four buttons at four different places —
   a set of four that is meant to be read as a set should not look like four
   unrelated things. The rail item already stretches to the tallest, so the
   card fills it and the pill is pushed to the foot. */
.mobrail .acard { height: 100%; }
.mobcard__more { margin-top: auto; }

/* THE FOUR COLOURS, LIGHTENED FOR THE DARK SLIDE.
   The sampled values are made for a white page: on the deck's navy, #77328b
   MEASURE was a dark purple word on a dark blue ground — about 2:1, which is
   a decoration rather than a label. Each one is mixed towards white here, so
   it is recognisably the same colour and can actually be read: measured 5.5:1
   for the palest of the four against #0c1536, and better for the rest.

   Derived from the same variables rather than typed as four new hex values —
   change a service's colour once and both the light and dark uses follow.

   EVERY NAVY GROUND, not just the one I happened to be looking at. The first
   version scoped this to .mobsec--dark and left the title slide out — and the
   title slide is navy too, so 02 MEASURE was measured at 2.22:1 there while
   the same word further down the page was 5.5:1. Both grounds are listed, and
   the numbers below are what the browser reports, not what I expected.

   Measured against #0c1536 after the fix: observe 8.4, control 7.6, enforce
   5.9, measure 5.5 — the palest of the four is still over the 4.5 line. */
.mobsec--dark [data-verb="observe"], .mobhero [data-verb="observe"] { --mc: color-mix(in srgb, var(--mob-01) 62%, #fff); }
.mobsec--dark [data-verb="measure"], .mobhero [data-verb="measure"] { --mc: color-mix(in srgb, var(--mob-02) 62%, #fff); }
.mobsec--dark [data-verb="control"], .mobhero [data-verb="control"] { --mc: color-mix(in srgb, var(--mob-03) 62%, #fff); }
.mobsec--dark [data-verb="enforce"], .mobhero [data-verb="enforce"] { --mc: color-mix(in srgb, var(--mob-04) 62%, #fff); }

/* ══════════ THE SLIDES INSIDE A DROP-DOWN ════════════════════════════════
   Dr KC's own pages, at the size they were drawn. They are 16:9 and wide, so
   they get the full width of the panel and stack down it — one column, not a
   grid: these are pages to be read in order, not thumbnails to be browsed. */
.mobslides { margin: 18px 0 0; display: grid; gap: clamp(14px, 2vw, 22px); }
.mobslides__lead {
  margin: 0; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mc, #0078ff);
}
.mobslide { margin: 0; }
.mobslide a {
  display: block; border-radius: 12px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mc, #0078ff) 24%, transparent);
  box-shadow: 0 16px 40px -30px rgba(9, 20, 34, 0.7);
  background: #fff;
}
.mobslide a:hover { border-color: var(--mc, #0078ff); }
.mobslide a:focus-visible { outline: 3px solid var(--mc, #0078ff); outline-offset: 3px; }
/* height:auto with the intrinsic width/height on the tag: the box is reserved
   before the picture arrives, so opening a panel does not shove the page
   about as twenty-four slides load in */
.mobslide img { display: block; width: 100%; height: auto; }
.mobslide figcaption {
  margin-top: 7px; font-size: 13px; line-height: 1.5;
  color: rgba(13, 27, 42, 0.6);
}

/* the written version, folded away under the slides */
.mobmore { margin-top: clamp(18px, 2.4vw, 26px); }
.mobmore > summary {
  cursor: pointer; display: inline-block;
  padding: 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--mc, #0078ff) 10%, transparent);
  color: var(--mc, #0078ff); font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.06em;
}
.mobmore > summary::marker, .mobmore > summary::-webkit-details-marker { content: ''; display: none; }
.mobmore[open] > summary { background: var(--mc, #0078ff); color: #fff; }
.mobmore > div > p { line-height: 1.68; margin: 14px 0 0; }

/* ══════════ THE SUITE IS ITS OWN SLIDE ═══════════════════════════════════
   It and the problem section above it were both white with nothing between
   them, so two sections read as one — which is the seam Taufik drew a line
   across. Its own ground and a rule at the top, the way the deck separates
   slides by making them separate pages. */
.mobsec--suite {
  background: linear-gradient(180deg, #eef3fb 0%, #f7f9fd 100%);
  border-top: 1px solid rgba(13, 27, 42, 0.09);
  padding-top: clamp(44px, 7vh, 88px);
}

/* ══════════ THE SAME DROP-DOWNS ON /sovereign ════════════════════════════
   Four chips in a row rather than four cards in a rail, opening the same
   panels with the same script. The chip is the pillar's name and nothing
   else — these four have no number, no verb and no question, so a card would
   be mostly empty space pretending to be a card. */
.pol__toc--drops { display: flex; flex-wrap: wrap; gap: 10px; }
.poldrop__btn {
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(13, 27, 42, 0.14);
  background: #fff;
  color: var(--mob-ink, #0d1b2a);
  font: inherit; font-size: 14.5px; font-weight: 700;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.poldrop__btn::after { content: ' ▾'; opacity: 0.55; font-size: 11px; }
.poldrop__btn:hover { border-color: var(--blue, #0078ff); color: var(--blue, #0078ff); }
.poldrop__btn:focus-visible { outline: 3px solid var(--blue, #0078ff); outline-offset: 3px; }
.poldrop__btn[aria-expanded="true"] {
  background: var(--blue, #0078ff); border-color: var(--blue, #0078ff); color: #fff;
}
.poldrop__btn[aria-expanded="true"]::after { content: ' ▴'; opacity: 0.9; }

/* the panels sit in the reading column, so they take its width rather than
   the wider break-out the mobility page gives its slides */
/* room under an open panel too — with only a top margin it sat straight
   on top of "The Sovereign Compact" heading that follows it */
.pol .mobdrop { margin-top: 14px; margin-bottom: 26px; }
.pol .mobdrop__in { border-left-width: 5px; }