/* Shared case-study kit: layout, type and every component used by Map DS, AI tools, Guidebook, Litmus and IG stories.
   One file for all five pages (with /cs/page.js). Pages add no styles of their own.

   Type scale (phones in brackets):
     h1        68 / 1.1  / 600   (44)
     h2        40 / 1.2  / 600   (30)
     h3        28 / 1.25 / 500   (22)   also slide headings (.dir-copy strong)
     h4        20 / 28   / 500   (18)   figure titles, exploration names
     body      16 / 24   / 400
     label     14 / 18   / caps, .05em   eyebrow, meta, problem/solution tags, placeholder tag, slide/step counters */

@font-face {
  font-family: "General Sans";
  src: url("/mapds/fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/mapds/fonts/GeneralSans-VariableItalic.woff2") format("woff2");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #222222;
  --ink-strong: #272727;
  --body: #4D4D4D;
  --muted: #909090;
  --bg: #ffffff;
  --card: #F9F9F9;
  --compare: #FAF5FF;
  --problem: #8B0002;
  --solution: #00640A;
  --tick: #00B318;
  --pill: #E1FCDA;
  --pill-ink: #095C00;
  --col: 900px;
}

/* ---------- dark theme (switch in the shared top bar) ---------- */
html[data-theme="dark"] {
  --ink: #ececec; --ink-strong: #f2f2f2; --body: #b3b7bc; --muted: #80868c; --bg: #111213; --card: #1c1d20;
  --compare: #1d1a24; --problem: #ff9a9c; --solution: #86dc94; --tick: #4ad662; --pill: #183019; --pill-ink: #a9e6a0;
  --anim-placeholder: #1c1d20; --panel-problem: #2a1718; --panel-solution: #13261a; --fade: 17,18,19;
  --hairline: rgba(255,255,255,.14); --btn-line: #3a3d41; --compare-head: #ffffff; --blog-hover: #222427; --read-hover: #ffffff;
  --ph-line: #34373b; --track: rgba(255,255,255,.14); --ex-bg: #1f1d25; --shimmer: rgba(255,255,255,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 40px; -webkit-text-size-adjust: 100%; }
body {
  font-family: "General Sans", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input { font-family: inherit; }
a { color: inherit; }

/* ---------- side nav ---------- */
.side { position: fixed; top: 56px; left: 37px; z-index: 5; }
.toc { display: flex; flex-direction: column; gap: 14px; }
.toc a {
  font-size: 12px; line-height: 16px; text-decoration: none; color: var(--ink);
  opacity: .45; transition: opacity .2s;
}
.toc a:hover, .toc a.active { opacity: 1; }
.toc a.active { font-weight: 500; }

/* ---------- column ---------- */
.page { width: min(var(--col), 100% - 32px); margin: 0 auto; padding: 56px 0 100px; } /* hero meta lines up with Back in the sidebar */

/* ---------- type ---------- */
.eyebrow, .meta, .ps h4, .ph-tag, .car-count, .car-badge { font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
.eyebrow, .meta { opacity: .5; } /* labels at 50% opacity */
.meta { display: flex; flex-wrap: wrap; align-items: center; }
.meta span + span::before {
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--muted); margin: 0 11px; vertical-align: middle; transform: translateY(-1px);
}
h1 { font-size: 68px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-strong); margin: 22px 0 40px; }
h2 { font-size: 40px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; text-wrap: balance; }
h3, .dir-copy strong { font-size: 28px; line-height: 1.25; font-weight: 500; color: var(--ink-strong); }
h3 { margin: 56px 0 24px; }
figcaption strong, .ex-copy h4 { display: block; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: 0; color: var(--ink-strong); margin: 0 0 4px; }
.body, figcaption, .dir-copy p, .ex-copy p, .reasons, .ph-desc { font-size: 16px; line-height: 24px; color: var(--body); }
.body { margin-bottom: 32px; }
.car-count { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- sections ---------- */
.hero { margin-top: 0; padding-bottom: 40px; } /* + the next section's 16px margin and 40px padding = 96px, same as between sections */
.section { padding: 40px 0; margin-top: 16px; } /* 40px padding top and bottom + 16px = 96px between units */
.hero > :last-child, .section > :last-child { margin-bottom: 0; } /* a trailing margin would make one gap bigger than the rest */
.eyebrow { margin-bottom: 24px; }
.caption-top { margin: 40px 0 16px; }
.block { margin-top: 112px; }
.block > h2 + h3 { margin-top: 48px; }
.sec-h3 { margin-top: 0; } /* section opens on an h3: no extra space above */
.body + .anim, h2 + .anim, .body + .grid, .reasons + .anim { margin-top: 20px; }

/* ---------- media slots ----------
   .anim is one slot, filled by any of:
     - a Map DS animation: data-anim="<name>" (js/player.js draws it on a canvas)
     - a motion embed (div + script HTML): data-embed="anim/<file>.html"
     - an <img> or <video> inside it (fills the slot, cropped to cover)
   Until then .ph shows a dashed placeholder with a .ph-tag and .ph-desc note. Height comes from an .r-* ratio. */
.anim {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 12px; background: var(--anim-placeholder, #e9e9e9);
}
.anim canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.anim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--shimmer, rgba(255,255,255,.9)) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: shimmer 1.4s linear infinite;
}
.anim.ready::after { display: none; }
@keyframes shimmer { to { background-position: -250% 0; } }
.anim.ph {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 20px 22px; background: var(--card); border: 1px dashed var(--ph-line, #d6d6d6);
}
.ph-tag { color: var(--muted); }
.ph-desc { color: var(--body); max-width: 520px; }
.anim > img, .anim > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.anim .smv-embed, .anim > iframe { position: absolute !important; inset: 0; width: 100%; height: 100%; border: 0; }
.anim.has-media { border: 0; padding: 0; }
.anim.has-media > .ph-tag, .anim.has-media > .ph-desc { display: none; }
.r-hero { aspect-ratio: 900 / 508; }
.r-wide { aspect-ratio: 900 / 491; }
.r-tool { aspect-ratio: 900 / 460; }
.r-video { aspect-ratio: 16 / 9; }
.r-tall { aspect-ratio: 364 / 442; }
.r-sq   { aspect-ratio: 1 / 1; }

/* soft gradient backdrop behind a slot (e.g. a feature video): three blurred blobs, colours and positions randomised per slot by page.js */
.glow { isolation: isolate; }
.glow.ph { border-color: transparent; }
.glow::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; filter: blur(48px) saturate(1.1); opacity: .6;
  background:
    radial-gradient(40% 50% at var(--x1, 20%) var(--y1, 30%), var(--c1, #e9d8ff), transparent 70%),
    radial-gradient(45% 55% at var(--x2, 80%) var(--y2, 70%), var(--c2, #d6f1ff), transparent 70%),
    radial-gradient(35% 45% at var(--x3, 60%) var(--y3, 20%), var(--c3, #ffe3d6), transparent 70%),
    var(--c0, #f7f7f7);
}
html[data-theme="dark"] .glow::before { opacity: .22; }

/* ---------- problem / solution ---------- */
.ps + .ps { margin-top: 80px; }
.ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.problem, .solution { border-radius: 14px; padding: 18px 20px 20px; }
.problem { background: var(--panel-problem, #FDF1F1); color: var(--problem); }
.solution { background: var(--panel-solution, #EEF8EF); color: var(--solution); }
.ps h4 { font-weight: 500; margin-bottom: 8px; }

/* ---------- bulleted list ---------- */
.reasons { margin-bottom: 32px; } /* same text → image gap as .body */
.reasons p { margin-bottom: 10px; }
.reasons ul { padding-left: 24px; display: grid; gap: 2px; }
.reasons li::marker { color: var(--muted); }

/* ---------- grids ---------- */
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
figure { min-width: 0; }
figcaption { margin-top: 16px; padding-right: 8px; }
.probs { margin-top: 64px; }
.probs h3 { margin: 0 0 24px; }

/* ---------- carousels ---------- */
.carousel { position: relative; }
/* contained in the text column: active slide starts at the text edge, the next one peeks in on the right */
.car-track {
  position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-right: calc(100% - var(--slide-w, 88%)); /* lets every slide snap to the left edge */
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel::after { /* white fade over the peeking slide so it blends into the page */
  content: ""; position: absolute; top: var(--tabs-h, 0px); right: 0; height: var(--anim-h, 100%); z-index: 1; pointer-events: none; /* image area only, so the arrows stay clear */
  width: calc(100% - var(--slide-w, 88%) + 24px);
  background: linear-gradient(90deg, rgba(var(--fade, 255,255,255),0) 0%, rgba(var(--fade, 255,255,255),.18) 35%, rgba(var(--fade, 255,255,255),.45) 65%, rgba(var(--fade, 255,255,255),.7) 100%);
}
.car-track::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .car-track { cursor: grab; } }
.car-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; } /* follows the cursor 1:1 */
.car-track > figure { flex: 0 0 var(--slide-w, 88%); scroll-snap-align: start; }
/* side slides: blur + darken through an overlay clipped to the frame, so edges stay crisp */
.car-track > figure .anim canvas, .car-track > figure .anim > .smv-embed { transition: filter .35s ease, transform .35s ease; }
.car-track > figure:not(.is-active) .anim canvas, .car-track > figure:not(.is-active) .anim > .smv-embed { filter: blur(4px) brightness(.86); transform: scale(1.04); } /* scale hides the blurred edge; the frame clips it */
.car-track > figure figcaption { transition: opacity .35s ease; }
.car-track > figure:not(.is-active) figcaption { opacity: 0; } /* keeps the n / m counter clear */
.carousel.dirs figcaption { max-width: 560px; }
/* controls: counter + small arrows at the bottom right, under the slide */
.car-ctrl {
  position: absolute; z-index: 2; right: 0; top: calc(var(--tabs-h, 0px) + var(--anim-h, 0px) + 12px);
  display: flex; align-items: center; gap: 4px;
}
.car-count { line-height: 24px; margin-right: 6px; }
.car-btn {
  width: 28px; height: 28px; border: 1px solid var(--btn-line, #dcdcdc); border-radius: 50%; background: var(--bg);
  display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background .2s, border-color .2s, color .2s;
}
.car-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.car-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* numbered tabs (data-tabs): a tab slider above the frame, top left; the highlight slides to the current slide */
.car-tabs {
  position: relative; display: flex; width: max-content; max-width: 100%; margin-bottom: 16px; padding: 4px;
  border-radius: 999px; background: var(--card); overflow-x: auto; scrollbar-width: none;
}
.car-tabs::-webkit-scrollbar { display: none; }
.car-tab {
  position: relative; z-index: 1; flex: none; min-width: 36px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none;
  font: 500 13px/1 "General Sans", sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; cursor: pointer; transition: color .25s;
}
.car-tab:hover { color: var(--ink); }
.car-tab[aria-selected="true"] { color: var(--bg); }
.car-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.car-tabs > i { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--ink); pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1); }
.car-ctrl.has-tabs .car-count { display: none; }
/* badge (data-badge="…"): marks a key carousel; pinned to the frame's top-left corner, the same on every slide */
.car-badge {
  position: absolute; z-index: 2; top: calc(var(--tabs-h, 0px) + 14px); left: 14px; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  background: rgba(255,255,255,.88); color: #1f1f1f; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.08); font-weight: 500;
}
.car-badge svg { flex: none; color: #F5A524; }
html[data-theme="dark"] .car-badge { background: rgba(17,18,19,.78); color: #f2f2f2; }

/* decision slide: square image beside its text, both carry equal weight */
.dir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: var(--card); border-radius: 12px; overflow: hidden; }
.dir .r-sq { border-radius: 12px 0 0 12px; }
.dir-copy { padding: 0 40px; }
.dir-copy strong { display: block; }
.dir-copy p { margin-top: 10px; }
.car-track > figure:not(.is-active) .dir-copy { opacity: .35; transition: opacity .35s ease; }

/* exploration slide: name + comment and the story frame sit together in the middle, on a flat purple-grey */
.ex.ph { display: grid; grid-template-columns: minmax(0, 300px) auto; justify-content: center; align-items: center; gap: 56px; padding: 0 32px; background: var(--ex-bg, #EEECF3); border-color: transparent; }
.ex-frames { position: relative; height: 78%; aspect-ratio: 9 / 16; align-self: center; }
.ex-frames > * {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden; opacity: 0; transition: opacity .3s ease;
  background: var(--bg); border: 2px solid var(--ink); display: grid; place-items: center; text-align: center;
  font-size: 14px; line-height: 20px; color: var(--body); padding: 12px;
}
.ex-frames > img { object-fit: cover; width: 100%; height: 100%; padding: 0; border: 0; }
.ex-frames > .on { opacity: 1; }

/* ---------- checklist ---------- */
.checks { list-style: none; margin-top: 28px; display: grid; gap: 16px; }
.checks li { position: relative; padding-left: 50px; color: var(--body); }
.checks li::before {
  content: ""; position: absolute; left: 6px; top: 1px; width: 22px; height: 22px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3.7 11.3 9 16.7 18.3 4.3' fill='none' stroke='%2300B318' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 44px; }
.stats strong { display: block; font-size: 64px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.stats > div > span { display: block; color: var(--body); margin-top: 6px; }

/* ---------- blog card ---------- */
.blog {
  position: relative; display: flex; align-items: center; min-height: 120px;
  background: var(--card); border-radius: 16px; overflow: hidden; text-decoration: none;
  transition: background .25s;
}
.blog::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 -12px 18px -14px rgba(0,0,0,.16);
}
.blog-text { padding: 24px; max-width: 420px; position: relative; z-index: 1; }
.blog p { font-size: 24px; line-height: 1.33; color: var(--body); }
.read-now {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  height: 40px; padding: 0 18px; border-radius: 20px;
  background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 500;
  transition: background .2s;
}
.blog:hover .read-now { background: var(--read-hover, #000); }
.blog img {
  position: absolute; left: 436px; top: 22px; width: 400px; height: auto;
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: rotate(-3deg); transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.blog:hover { background: var(--blog-hover, #F2F2F2); }
.blog:hover img { transform: rotate(0deg) translateY(-10px); }

/* ---------- comparison ---------- */
.compare { background: var(--compare); border-radius: 16px; padding: 22px 26px 18px 24px; margin-top: 16px; }
.compare .row {
  display: grid; grid-template-columns: 300px 258px 1fr; padding: 12px 0;
  border-top: .7px solid var(--hairline, rgba(0,0,0,.16));
}
.compare .row.head, .compare .row.head + .row { border-top: 0; }
.compare .row.head { padding-top: 0; }
.compare [role="rowheader"], .compare [role="columnheader"] { font-weight: 300; color: var(--compare-head, #000); }
.compare [role="cell"] { font-weight: 500; color: var(--body); }

/* ---------- pill marquees ---------- */
.marquee-group { display: grid; gap: 24px; }
.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.track { display: flex; gap: 10px; width: max-content; will-change: transform; animation: marquee var(--dur, 40s) linear infinite; }
.marquee.reverse .track { animation-direction: reverse; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 5px)); } }
.pill {
  flex: none; display: flex; align-items: center; gap: 12px; height: 69px; min-width: 161px;
  padding: 0 32px 0 12px; border-radius: 35px; background: var(--pill); color: var(--pill-ink); cursor: default;
}
.pill-img { flex: none; display: block; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; object-fit: cover;
  background: linear-gradient(135deg, hsl(var(--h, 120) 55% 78%), hsl(calc(var(--h, 120) + 40) 50% 66%)); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.pill b { display: block; font-size: 20px; line-height: 24px; font-weight: 600; }
.pill small { display: block; font-size: 16px; line-height: 20px; }

/* ---------- experimental: scroll-velocity marquees (mapds/js/experiments.js) ---------- */
.marquee.velocity .track { animation: none; }               /* JS drives the marquee instead */

/* ---------- room for the shared floating top bar (/nav.js) ---------- */
html.has-topnav { scroll-padding-top: 96px; }
html.has-topnav .page { padding-top: 132px; } /* 64px below the top bar */
html.has-topnav .side { top: 132px; }

/* ---------- responsive ---------- */
@media (max-width: 1160px) {
  .toc { display: none; }
  .side { display: none; }
}
@media (max-width: 860px) {
  br.wide { display: none; }
  .grid.three { grid-template-columns: 1fr 1fr; }
  .blog { flex-direction: column; align-items: stretch; }
  .blog img { position: relative; left: auto; top: auto; width: calc(100% - 48px); margin: 4px 24px -18%; transform: rotate(-3deg); } /* cut off by the card's bottom edge */
  .blog:hover img { transform: rotate(-3deg); }
  .compare .row { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .dir-copy { padding: 0 24px; }
  .dir-copy strong { font-size: 22px; }
  .ex.ph { gap: 28px; padding: 0 24px; }
}
@media (max-width: 640px) {
  .section { padding: 20px 0; margin-top: 10px; } /* 50px between sections on phones */
  .hero { padding-bottom: 20px; } /* hero → first section: 50px too */
  html.has-topnav .page { padding-top: 110px; } /* 48px below the top bar */
  h1 { font-size: 44px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; margin-top: 44px; }
  figcaption strong, .ex-copy h4 { font-size: 18px; line-height: 26px; }
  .block { margin-top: 80px; }
  .ps-cols { grid-template-columns: 1fr; gap: 24px; }
  .grid.two { grid-template-columns: 1fr; gap: 32px; }
  .grid.three { grid-template-columns: 1fr 1fr; gap: 24px 12px; } /* phones: two up, third below */
  .stats { grid-template-columns: 1fr; gap: 24px; }
  .stats strong { font-size: 48px; }
  .blog p { font-size: 20px; }
  .car-ctrl { position: relative; z-index: 2; top: auto; right: auto; justify-content: flex-end; margin-top: 8px; } /* phones: right under the caption (no desktop offset), above the fade */
  .compare { padding: 16px; font-size: 14px; }
  .car-badge { top: calc(var(--tabs-h, 0px) + 10px); left: 10px; height: 26px; font-size: 12px; }
  .dir { grid-template-columns: 1fr; }
  .dir .r-sq { border-radius: 12px 12px 0 0; }
  .dir-copy { padding: 20px; min-height: 170px; }
  .ex.ph { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: stretch; justify-items: start; gap: 12px; padding: 20px; aspect-ratio: auto; height: 470px; }
  .ex-frames { height: 300px; justify-self: center; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track, .anim::after { animation: none; }
  .car-track { scroll-behavior: auto; }
  .ex-frames > *, .car-tabs > i { transition: none; }
}