/* ============================================================
   managed-growth: six engine cards, animations rebuilt 1:1 from
   the live page in the uplane agent-log design language.
   Warm paper panels on band-art stages; slow, layout-stable motion.
   ============================================================ */

/* Hero actions use one measured, page-specific system. The bottom padding is
   intentional: the shared hero motif measures this group and places its rule
   at the group edge, leaving the buttons clear of the line. */
.sub-hero-dark .sub-ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 356px);
  gap: 10px;
  margin-top: 30px;
  padding-bottom: 18px;
}

@media (min-width: 901px) {
  .sub-hero-dark > .shd-inner > .sub-ctas {
    margin-top: 64px;
    padding-bottom: 0;
  }

  .sub-hero-dark > .shd-inner > .sub-ctas .btn {
    min-height: 44px;
  }
}
.sub-hero-dark .sub-ctas .btn {
  width: 100%;
  min-height: 42px;
  padding: 10px 18px;
  justify-content: center;
  border-radius: 8px;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: none;
}
.sub-hero-dark .sub-ctas .mg-hero-primary {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}
.sub-hero-dark .sub-ctas .mg-hero-primary:hover {
  color: var(--ink);
  background: #f4f6ff;
  border-color: #f4f6ff;
}
.sub-hero-dark .sub-ctas .mg-hero-secondary {
  color: #fff;
  background: rgba(8, 18, 78, .18);
  border-color: rgba(255, 255, 255, .56);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sub-hero-dark .sub-ctas .mg-hero-secondary:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .8);
}
@media (max-width: 440px) {
  .sub-hero-dark .sub-ctas {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

#team {
  --mg-line: rgba(47, 44, 43, .14);
  --mg-border: rgba(47, 44, 43, .09);
  --mg-paper: #F6F4F3;
  --mg-surface: #FCFAF9;
  --mg-enter: .7s;
  --mg-step: .9s;
}

.mg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 56px;
  /* rail tint: at --line these grid lines read about 2.5x heavier than the
     margin lines to their left and right */
  border: 1px solid rgba(10, 16, 60, .06);
  background: #fff;
}
@media (max-width: 880px) { .mg-grid { grid-template-columns: 1fr; } }

.mg-cell {
  padding: clamp(20px, 2.6vw, 36px);
  border-top: 1px solid rgba(10, 16, 60, .06);
  border-left: 1px solid rgba(10, 16, 60, .06);
  margin: -1px 0 0 -1px;
}

.mg-cell .mg-label {
  display: block;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.mg-cell h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 1.9vw, 27px);
  letter-spacing: -.012em;
  line-height: 1.16;
  color: var(--ink);
  margin-top: 10px;
}
.mg-cell > p {
  margin-top: 10px;
  /* 14.5px was off the ladder and read a step under the rest of the site
     (home #how / #solutions / #security and why-us #situations all set body
     prose at 15px). This section carried 18 more sentences at 13.5px below. */
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 56ch;
}
.mg-bullets { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
/* full sentences, so they take the 14px secondary-body rung rather than the
   13.5px they had -- the smallest prose anywhere on the site */
.mg-bullets li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.mg-bullets li b { font-weight: 500; color: var(--ink); }
.mg-bico {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, .12);
  border-radius: 7px;
  color: var(--ink);
}
.mg-bico svg { width: 13px; height: 13px; }

/* ---- the stage: squared band art + warm paper panel ---- */
.mg-stage {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.4vw, 30px);
  /* fixed, not vw-derived: every stage must resolve to the same height so the
     six background squares line up across the grid. panel A is trimmed to fit
     inside 430 - 2*30 padding, so no panel can push its stage past this. */
  min-height: 430px;
}
.mg-stage > img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.mg-panel {
  width: min(100%, 500px);
  container-type: inline-size;
  min-height: 330px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: var(--mg-paper);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(6, 10, 40, .14);
  padding: 26px 22px 28px;
  color: #2F2C2B;
  font-family: var(--sans);
  overflow: hidden;
}

.mg-panel > .mg-anim {
  width: 100%;
}

/* The published six-part choreography, mounted inside the new brand stage. */
.mg-panel--rive {
  aspect-ratio: 574 / 365;
  padding: 0;
  background: #F6F4F3;
}

.mg-panel--rive > .mg-anim {
  display: none;
}

.mg-rive-wrap,
.mg-rive-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.mg-rive-wrap {
  position: relative;
  overflow: hidden;
  background: #F6F4F3;
}

.mg-rive-canvas {
  vertical-align: top;
}

.mg-rive-brand {
  position: absolute;
  z-index: 3;
  left: 23.7%;
  top: 7.2%;
  width: 7.4%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(26, 68, 255, .08);
  pointer-events: none;
}

.mg-rive-brand svg {
  display: block;
  width: 38%;
  height: 62%;
  fill: var(--blue);
}

@media (max-width: 560px) {
  .mg-stage {
    /* keep the 430px floor here too: at 375px the pill wraps and panel A grows
       to ~387, so a 330 floor let each stage size to its own panel and the
       squares came out unequal (399/362/373/371/384/362). */
    aspect-ratio: auto;
    padding: 16px;
  }
}

/* ---- shared atoms ---- */

/* CENTRING THE GLYPH IN A BADGE.
   The mark is 1389.5 x 1985.28, an aspect of 0.6999, so a box that fits it can
   never be even against its badge on both axes: every pairing in this file
   leaves a fractional half-space (14 - 5 = 4.5, 14 - 7 = 3.5, 34 - 12 = 11,
   34 - 17 = 8.5) and grid centring snaps that to a whole pixel. Worse, it
   snaps in a different direction per axis -- measured 4.5 -> 5 across and
   3.5 -> 3 down -- which put the mark 0.5px right and 0.5px high inside a 14px
   disc. That is 3.6% of the badge and plainly visible at these sizes.

   So the mark is centred by transform instead. translate(-50%, -50%) resolves
   on the compositor at subpixel precision and is never snapped, which holds at
   every badge size and every card aspect rather than only at the ones whose
   arithmetic happens to come out even. Verified from rendered pixels:
   tmp/glyphcenter.js. */
.mg-chip,
.mg-post-glyph { position: relative; }

.mg-chip > svg,
.mg-post-glyph > svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mg-chip {
  width: 28px; height: 28px;
  flex: none;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid rgba(26, 68, 255, .18);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(6, 10, 40, .08);
}
.mg-chip svg { width: 12px; height: 17px; display: block; fill: var(--blue); }
.mg-chip.lg { width: 42px; height: 42px; border-radius: 11px; }
.mg-chip.lg svg { width: 16px; height: 23px; }

.mg-glow { position: relative; }
.mg-glow::after {
  content: none;
}
@keyframes mgBreath { 0%, 100% { opacity: .3; } 50% { opacity: .75; } }

/* One pointer for the whole page: plain black, no outline, and big enough
   to read at panel scale. It used to be brand blue with a white keyline,
   which made it compete with the blue the panels actually use for meaning. */
.mg-cursor {
  position: absolute;
  left: 0; top: 0;
  z-index: 6;
  width: 21px; height: 21px;
  filter: drop-shadow(0 1px 3px rgba(8, 12, 40, .22));
  transition: transform 1.15s var(--ease-in-out-quart);
  pointer-events: none;
}
.mg-cursor::after {
  content: "";
  position: absolute;
  left: -4px; top: -4px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(10, 10, 10, .45);
  opacity: 0;
  transform: scale(.4);
}
.mg-cursor.click::after { animation: mgClick .7s var(--ease-out-quint); }
@keyframes mgClick { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.25); } }

/* ---- A: strategic architecture (static) ---- */
.mg-a { --sa-hair: rgba(47, 44, 43, .13); }

/* top pill: white card + solid blue uplane mark, soft brand halo */
.mg-a .mg-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .07);
  border-radius: 14px;
  padding: 10px 18px 9px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--mg-ink, #2F2C2B);
  box-shadow:
    0 1px 3px rgba(6, 10, 40, .06),
    0 10px 24px rgba(26, 68, 255, .16),
    0 22px 48px rgba(26, 68, 255, .10);
}
.mg-a .mg-pill::before {
  content: "";
  position: absolute;
  inset: -9px -11px;
  z-index: -1;
  border-radius: 24px;
  background: rgba(26, 68, 255, .26);
  filter: blur(16px);
}
.mg-a .mg-chip {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(26, 68, 255, .10), 0 6px 16px rgba(26, 68, 255, .30);
}
.mg-a .mg-chip svg { width: 12px; height: 17px; display: block; fill: #fff; }

/* connector tree: rounded elbows, matching the reference */
.mg-tree { position: relative; height: 24px; }
.mg-tree i { position: absolute; }
.mg-tree .t-v {
  left: 50%; top: 0;
  width: 1px; height: 8px;
  background: var(--sa-hair);
}
.mg-tree .t-bus {
  left: calc(16.6667% - 3.333px);
  right: calc(16.6667% - 3.333px);
  top: 8px;
  height: 16px;
  border: 1px solid var(--sa-hair);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
}
.mg-tree .t-d2 {
  left: 50%; top: 8px;
  width: 1px; height: 16px;
  background: var(--sa-hair);
}

.mg-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mg-mini {
  min-width: 0;
  background: var(--mg-surface);
  border: 1px solid var(--mg-border);
  border-radius: 12px;
  padding: 10px 6px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.mg-mini > :last-child { margin-top: auto; margin-bottom: auto; }
/* Same rule as the source pills: every tag is its column's width, so the
   three read as one row of boxes rather than three different labels. */
.mg-tag {
  display: block;
  width: calc(100% - 4px);
  max-width: calc(100% - 4px);
  margin: -20px auto 10px;
  text-align: center;
  white-space: nowrap;
  background: #EFEDEB;
  border: 1px solid rgba(47, 44, 43, .07);
  border-radius: 8px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: #4A4744;
  white-space: nowrap;
}

/* --- audiences --- */
/* No clip and no edge mask. The five rows fit exactly, so the window's top and
   bottom gutters are just the mini's auto margins (~8px), which now reads the
   same as the 9px left/right gutter — the old 20%/80% fade made the first and
   last row look pushed away from the card edge. Dropping overflow also lets the
   elevated row keep its shadow instead of being sliced at the border. */
.mg-audwin {
  padding: 0 3px;
}
.mg-audlist { display: flex; flex-direction: column; gap: 1px; }
.mg-audlist .row {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 29px;
  padding: 0 4px 0 0;
  border-radius: 9px;
  opacity: .42;
}
.mg-audlist .row i {
  width: 3px; height: 15px;
  border-radius: 2px;
  background: rgba(47, 44, 43, .3);
  flex: none;
}
.mg-audlist .row span {
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: #2F2C2B;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* the longest label, "Price sensitivity" at weight 500, needs 70.4px; this
     leaves it ~5px of slack inside the elevated row so it never ellipsises */
  padding-right: 2px;
}
.mg-audlist .row b {
  margin-left: auto; flex: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(47, 44, 43, .10);
  position: relative;
}
/* centred off the box's own middle rather than an asymmetric inset, and
   smaller: at inset 3px/2.6px the tick sat low and right of centre */
.mg-audlist .row b::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 4.6px; height: 2.4px;
  border-left: 1.3px solid rgba(47, 44, 43, .38);
  border-bottom: 1.3px solid rgba(47, 44, 43, .38);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.mg-audlist .row.done { opacity: .72; }
.mg-audlist .row.done i { background: #9FE0BE; }
.mg-audlist .row.done b { background: rgba(46, 158, 85, .14); }
.mg-audlist .row.done b::after { border-color: #5FBF87; }
/* The scanned row pops by widening out to the card's full content box rather
   than translating right — a translate pushed it past the clip edge, which is
   what sliced the pill and ellipsised its label. */
.mg-audlist .row.on {
  opacity: 1;
  background: #fff;
  margin: 0 -3px;
  padding-left: 9px;
  padding-right: 4px;
  box-shadow: 0 1px 3px rgba(6, 10, 40, .06), 0 6px 18px rgba(6, 10, 40, .07);
}
.mg-audlist .row.on i {
  background: #12A150;
  margin-left: -3px;
}
.mg-audlist .row.on span { font-weight: 500; }
.mg-audlist .row.on b { background: rgba(46, 158, 85, .16); }
.mg-audlist .row.on b::after { border-color: #12A150; border-left-width: 1.6px; border-bottom-width: 1.6px; }

/* --- top ads --- */
/* 3 whole rows (3*46.5 + 2*5 = 149.5) so the grid ends on a tile edge instead
   of fading out mid-row. The 3px inline padding narrows the tiles to 49.5 and
   lifts the side gutter to 9px, which now matches the ~8px the mini's auto
   margins leave above and below — previously the sides were 6px against a
   fade that read as a much deeper top and bottom. */
.mg-adgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 46.5px;
  gap: 5px;
  width: 100%;
  height: 149.5px;
  padding: 0 3px;
  overflow: hidden;
  margin: 0 auto;
}
.mg-adtile {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  opacity: .4;
  filter: grayscale(.55);
}
.mg-adtile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-adtile.hot {
  opacity: 1;
  filter: none;
  box-shadow: 0 2px 8px rgba(6, 10, 40, .16), 0 10px 22px rgba(6, 10, 40, .10);
  z-index: 2;
}

/* --- real-time trends --- */
.mg-ring {
  position: relative;
  width: 46px; height: 46px;
  margin: 12px auto 8px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 6px rgba(26, 68, 255, .16),
    0 0 0 12px rgba(26, 68, 255, .05),
    0 4px 14px rgba(26, 68, 255, .10);
}
.mg-ring-mark svg { width: 15px; height: 21px; display: block; fill: var(--mg-ink, #2F2C2B); }
.mg-trendwin {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%);
}
.mg-trendlist { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mg-trendlist span {
  font-size: 10.5px;
  line-height: 1.2;
  padding: 5px 12px;
  border-radius: 8px;
  color: rgba(47, 44, 43, .55);
  white-space: nowrap;
  max-width: 100%;
}
.mg-trendlist span.on {
  background: #fff;
  color: #2F2C2B;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(6, 10, 40, .06), 0 6px 18px rgba(6, 10, 40, .07);
}
.mg-trendlist span.fade { color: rgba(47, 44, 43, .3); }

/* ---- B: high-volume asset generation (static) ---- */
.mg-b { position: relative; display: flex; flex-direction: column; }
/* Three equal cells, not three shrink-to-fit pills. The labels are different
   lengths, so a flex row made three different boxes AND put their centres
   wherever the text happened to end -- which is why the connector legs, pinned
   at a hard 16.67%, came down beside the pills instead of out of them. With a
   3x1fr grid the centres are arithmetic: 1/6, 1/2 and 5/6 of the row once the
   gaps are taken out, and the connector below reads the same numbers. */
.mg-srcrow {
  --src-gap: 7px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--src-gap);
  width: 100%;
}
.mg-srcpill {
  display: grid;
  place-items: center;
  min-width: 0;
  background: #EDEBE9;
  border: 1px solid rgba(47, 44, 43, .06);
  border-radius: 8px;
  padding: 6px 7px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: #3C3936;
  text-align: center;
  white-space: nowrap;
}

/* Converging lines: two rounded elbows and a drop, all three landing ON the
   hub rather than stopping above it. The elbows' bottom rail runs at the hub's
   vertical centre, so they enter the circle from the left and the right dead
   centre; the drop stops at the hub's top edge, centred. --hub-r is half the
   circle, and is what the hub's own negative margin pulls back. */
.mg-conv {
  --src-gap: 7px;
  --hub-r: 21px;
  position: relative;
  height: 54px;
}
.mg-conv i { position: absolute; }
.mg-conv .c-bus {
  left: calc((100% - 2 * var(--src-gap)) / 6);
  right: calc((100% - 2 * var(--src-gap)) / 6);
  top: 0; bottom: 0;
  border: 1px solid var(--sa-hair, rgba(47, 44, 43, .13));
  border-top: 0;
  border-radius: 0 0 18px 18px;
}
.mg-conv .c-v {
  left: 50%; top: 0;
  width: 1px; height: calc(100% - var(--hub-r));
  background: var(--sa-hair, rgba(47, 44, 43, .13));
}

/* central hub: circular brand node */
.mg-hub {
  width: 42px; height: 42px;
  margin: -21px auto 0;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  background: var(--blue);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 6px rgba(26, 68, 255, .10),
    0 0 20px 7px rgba(26, 68, 255, .17),
    0 6px 20px rgba(26, 68, 255, .20);
}
.mg-hubmark svg { width: 13px; height: 18px; display: block; fill: #fff; }

/* publish stage */
.mg-stage-b {
  margin-top: 16px;
  background: #F1F0EE;
  border: 1px solid rgba(47, 44, 43, .05);
  border-radius: 12px;
  padding: 9px;
}
.mg-stream { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
/* The post chrome is a frame around someone else's picture, so it should not
   be the brightest thing in the figure. At pure #fff the header and footer are
   26% of each card's height and they read as a white border drawn around the
   ad rather than as the surface the ad is sitting on -- the panel behind them
   is #F6F4F3, so #fff was the lightest tone anywhere in the section. #FBFAF9
   still sits ~6L above that panel, which the 1px hairline and the card's own
   shadow carry the rest of the way, and the ad becomes the brightest element
   in its own card. */
.mg-post {
  min-width: 0;
  background: #F8F6F5;
  border: 1px solid rgba(47, 44, 43, .07);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(6, 10, 40, .05), 0 6px 16px rgba(6, 10, 40, .06);
}
.mg-post-h { display: flex; align-items: center; gap: 4px; padding: 5px 5px 4px; }
.mg-post-glyph {
  width: 14px; height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
  display: grid;
  place-items: center;
}
.mg-post-glyph svg { width: 5px; height: 7px; display: block; fill: #fff; }
.mg-post-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mg-post-meta b { font-size: 6.5px; font-weight: 700; color: #14120F; }
/* The handle's second line is a suggestive bar, not copy. At 5.5px (4px on
   the .ev cards) no string is legible, and what shipped here was the literal
   placeholder "Add some description" -- readable enough on a retina screen to
   be read as an unfinished page. A grey bar says "there is a caption here"
   without asserting one, and it is the wireframe language this page already
   speaks two cards to the left (.wf-line, .wf-copy i). */
.mg-post-meta i {
  display: block;
  width: 30px;
  height: 3px;
  margin-top: 3px;
  border-radius: 2px;
  background: rgba(47, 44, 43, .16);
}
.mg-post-media { position: relative; aspect-ratio: 1; background: #F3F1EF; }
.mg-post-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-post-f { display: flex; align-items: center; gap: 5px; padding: 5px 5px 6px; }
.mg-post-f svg { width: 9px; height: 9px; display: block; }
.mg-post-f .i-heart { fill: #FF3040; }
.mg-post-f .i-line { fill: none; stroke: #14120F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-post-f .i-mark { fill: #14120F; margin-left: auto; }

@media (max-width: 900px) {
  .mg-srcpill { font-size: 9.5px; padding: 5px 5px; }
  .mg-post-meta i { display: none; }
}

/* ---- C: high-conversion ecosystem (static) ---- */
.mg-c { position: relative; display: flex; flex-direction: column; }

.mg-thumbstrip {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .07);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 1px 3px rgba(6, 10, 40, .05), 0 8px 20px rgba(6, 10, 40, .07);
}
.mg-thumbrow { display: flex; gap: 4px; }
.mg-thumbrow img {
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: 6px;
  opacity: .42;
  filter: grayscale(.5);
}
.mg-thumbrow img.lead { opacity: 1; filter: none; }

.mg-ab { position: relative; height: 48px; }
.mg-ab .ab-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  stroke: var(--sa-hair, rgba(47, 44, 43, .13));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.mg-ab .ab-a,
.mg-ab .ab-b {
  position: absolute;
  bottom: -3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .1);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #2F2C2B;
  box-shadow: 0 1px 3px rgba(6, 10, 40, .06);
  z-index: 2;
}
.mg-ab .ab-a { left: calc(25% - 11px); }
.mg-ab .ab-b { left: calc(75% - 11px); }

.mg-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.mg-wf {
  min-width: 0;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .07);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(6, 10, 40, .05), 0 10px 26px rgba(6, 10, 40, .07);
}
.wf-top {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 8px;
  background: #FAF9F8;
  border-bottom: 1px solid rgba(47, 44, 43, .05);
}
.wf-dot { width: 12px; height: 6px; border-radius: 3px; background: rgba(47, 44, 43, .13); flex: none; }
.wf-url { flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(47, 44, 43, .09); }
.wf-pill { width: 9px; height: 6px; border-radius: 3px; background: rgba(47, 44, 43, .11); flex: none; }

.wf-body { display: flex; gap: 8px; padding: 9px 8px; align-items: flex-start; }
.wf-body.col { flex-direction: column; align-items: stretch; }
.wf-copy { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.wf-copy.center { align-items: center; }
.wf-copy.center .wf-row { justify-content: center; }
.wf-line, .wf-copy i { height: 5px; border-radius: 3px; background: rgba(47, 44, 43, .1); display: block; }
.wf-row { display: flex; gap: 4px; }
.w20 { width: 20px; } .w22 { width: 22px; } .w24 { width: 24px; } .w26 { width: 26px; }
.w28 { width: 28px; } .w30 { width: 30px; } .w34 { width: 34px; }
.w40 { width: 40%; } .w52 { width: 52%; }
.wf-cta { width: 26px; height: 9px; border-radius: 4px; background: rgba(47, 44, 43, .14); }
.wf-cta.ghost { background: rgba(47, 44, 43, .07); }
.wf-media {
  width: 62px;
  aspect-ratio: 1;
  flex: none;
  border-radius: 6px;
  background: #DFE3EC;
  display: grid;
  place-items: center;
}
.wf-media.wide { width: 100%; aspect-ratio: 16/9; }
.wf-media svg { width: 18px; height: 18px; display: block; }

.wf-foot { padding: 0 8px 10px; }
.wf-sep { display: block; height: 1px; background: rgba(47, 44, 43, .06); margin-bottom: 8px; }
.wf-chips { display: flex; gap: 4px; justify-content: center; }
.wf-chips i { width: 16px; height: 6px; border-radius: 3px; background: rgba(47, 44, 43, .08); }

.mg-dock {
  position: relative;
  z-index: 3;
  width: max-content;
  max-width: 100%;
  margin: -22px auto 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .06);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(6, 10, 40, .10), 0 14px 32px rgba(6, 10, 40, .14);
}
.mg-dock > span {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .07);
  display: grid;
  place-items: center;
  flex: none;
}
.mg-dock > span svg { display: block; }
.mg-dock .plus {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--blue);
  background: #F4F6FF;
  border-color: rgba(26, 68, 255, .12);
}
.mg-pointer {
  position: absolute;
  right: -4px; bottom: -9px;
  width: 21px; height: 21px;
  filter: drop-shadow(0 1px 3px rgba(8, 12, 40, .22));
}

@media (max-width: 900px) {
  .mg-thumbrow img { width: 26px; height: 26px; }
  .mg-dock > span { width: 26px; height: 26px; }
}

/* ---- D: high-frequency steering (static) ---- */
.mg-d { position: relative; display: flex; flex-direction: column; align-items: center; }
.mg-d .d-feed {
  width: 1px; height: 12px;
  background: var(--sa-hair, rgba(47, 44, 43, .18));
  display: block;
}
.mg-d .mg-hub { margin: 0 auto; width: 52px; height: 52px; }
.mg-d .mg-hubmark svg { width: 16px; height: 22px; }
.mg-d .d-stub {
  width: 1px; height: 17px;
  margin-top: 4px;
  background: var(--sa-hair, rgba(47, 44, 43, .18));
  display: block;
}
.mg-d .d-stub.s2 { height: 16px; margin-top: 0; position: relative; }
.mg-d .d-stub.s2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: rgba(47, 44, 43, .18);
}

.mg-togglewrap {
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .06);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 1px 3px rgba(6, 10, 40, .05), 0 8px 22px rgba(6, 10, 40, .08);
}
.mg-toggles { display: flex; gap: 6px; }
.tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.008em;
  white-space: nowrap;
}
.tg i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
/* The legend mirrors its series: Scaling is the Uplane blue curve, while
   the testing curves remain purple. */
.tg-b { background: var(--blue); color: #fff; }
.tg-b i { background: #fff; }
.tg-v { background: #F3EDFD; color: #6D4ABF; }
.tg-v i { background: #6D4ABF; }

.mg-chart {
  width: 100%;
  max-width: 308px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .07);
  border-radius: 12px;
  padding: 7px;
  box-shadow: 0 1px 3px rgba(6, 10, 40, .05), 0 12px 30px rgba(6, 10, 40, .08);
}
.mg-chartinner {
  position: relative;
  border-radius: 9px;
  background: #FDFCFC;
  padding: 6px 6px 0;
}

/* The goal the steering is steering towards, and the point the winning line
   crosses it — without these the chart is three lines and no argument. */
.mg-chart .thr,
.mg-chart .mark {
  stroke: rgba(47, 44, 43, .34);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.mg-target {
  position: absolute;
  top: 6%;
  left: 76%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .09);
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #14120F;
  box-shadow: 0 1px 3px rgba(6, 10, 40, .07);
}
.mg-target b { width: 3px; height: 11px; border-radius: 2px; background: #17B15E; flex: none; }
.mg-chart svg { display: block; width: 100%; height: 132px; }
.mg-chart .grid line { stroke: rgba(47, 44, 43, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mg-chart .ln { fill: none; stroke-width: 1.7; vector-effect: non-scaling-stroke; stroke-linecap: round; }
/* Scaling uses the Uplane blue across the curve, legend and area fill. */
.mg-chart .ln-blue { stroke: var(--blue); }
/* Three tests on their own tracks in purple tones, and the one line that
   scales carrying a wash under it so the winner is unmistakable. The tests
   used to sit flat along the bottom, where they read as grid artefacts. */
.mg-chart .ln-v { stroke-width: 1.3; }
.mg-chart .ln-v.v1 { stroke: #9E86D8; opacity: .8; }
.mg-chart .ln-v.v2 { stroke: #B7A4E4; opacity: .68; }
.mg-chart .ln-v.v3 { stroke: #8067C6; opacity: .72; }
.mg-chart .ln-blue { stroke-width: 2.1; }
.mg-chart .ar { stroke: none; }
.mg-chart .ar-blue { fill: url(#mgdFade); }
.mg-chart .dot { stroke: #fff; stroke-width: 1.2; }
.mg-chart .dot-blue { fill: var(--blue); }
.mg-chart .dot-v.v1 { fill: #9E86D8; }
.mg-chart .dot-v.v2 { fill: #B7A4E4; }
.mg-chart .dot-v.v3 { fill: #8067C6; }
.mg-axis { display: flex; gap: 4px; justify-content: space-between; padding: 7px 0 8px; }
.mg-axis i { flex: 1 1 0; height: 4px; border-radius: 3px; background: rgba(47, 44, 43, .06); }

.mg-d .mg-cursor {
  position: absolute;
  left: 87.6%; top: 30.6%;
  right: auto; bottom: auto;
  width: 21px; height: 21px;
  transition: none;
  filter: drop-shadow(0 1px 3px rgba(8, 12, 40, .22));
}
.mg-cursor svg { width: 100%; height: 100%; display: block; }

/* ---- E: optimization and learning engine (static) ---- */
.mg-e { position: relative; display: flex; }
/* The fan box is near-square, not landscape. At 348/300 the three variants had
   to overlap each other to fit their staircase; at 335/316 they clear with an
   even gap, which is what makes the A/B read as three separate tests.
   316 is the ceiling: stage 430 less its 2x30 padding less the panel's 54. */
.mg-fan {
  position: relative;
  width: 100%;
  max-width: 335px;
  margin: 0 auto;
  aspect-ratio: 335 / 316;
}
.mg-fanlines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.mg-fanlines path {
  fill: none;
  stroke: var(--sa-hair, rgba(47, 44, 43, .18));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.mg-fanlines circle { fill: #fff; stroke: rgba(47, 44, 43, .18); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* the branch that won is the only filled terminal in the fan */
.mg-fanlines circle.win { fill: var(--blue); stroke: none; }

.fan-hero, .fan-v { position: absolute; }
.fan-hero { left: 0; top: 26.1%; width: 33.9%; }
.fan-v { width: 21.1%; }
.fan-v1 { left: 59.6%; top: 0; }
.fan-v2 { left: 65%; top: 35.5%; }
.fan-v3 { left: 79%; top: 70%; }
/* the poster's avatar is a squircle in the source art, not a disc */
.mg-e .mg-post-glyph { border-radius: 4px; }
.mg-e .mg-post.ev .mg-post-glyph { border-radius: 3px; }

.mg-e .mg-post { position: relative; }
.mg-e .mg-post.eh {
  box-shadow: 0 2px 6px rgba(6, 10, 40, .09), 0 16px 38px rgba(6, 10, 40, .16);
}
.mg-e .mg-post.ev { box-shadow: 0 1px 3px rgba(6, 10, 40, .05), 0 8px 20px rgba(6, 10, 40, .09); }
.mg-e .mg-post-h { padding: 5px 5px 4px; }
.mg-e .mg-post.ev .mg-post-h { padding: 3px 3px 2px; }
.mg-e .mg-post.ev .mg-post-glyph { width: 9px; height: 9px; }
.mg-e .mg-post.ev .mg-post-glyph svg { width: 3.2px; height: 4.5px; }
.mg-e .mg-post.ev .mg-post-meta b { font-size: 5px; }
/* the small cards carry the same bar, scaled with them */
.mg-e .mg-post.ev .mg-post-meta i { width: 21px; height: 2px; margin-top: 2px; }

.mg-post-ok {
  margin-left: auto;
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #17B15E;
  display: grid;
  place-items: center;
}
.mg-post-ok svg { width: 9px; height: 9px; display: block; }
/* Size belongs to the card, colour belongs to .muted. These were one rule, so
   the tick could only be green at 14px: moving the green to a variant card
   drew a 14px disc inside a 3px-padded header and overflowed it. */
.mg-e .mg-post.ev .mg-post-ok { width: 9px; height: 9px; }
.mg-e .mg-post.ev .mg-post-ok svg { width: 6px; height: 6px; }
.mg-post-ok.muted { background: rgba(47, 44, 43, .22); }

.mg-e .mg-post-media { aspect-ratio: 1; }
.mg-e .mg-post-media .tint { transition: none; }
/* Real creatives, not one photo hue-rotated 165/22/78 degrees. Rotating the
   hue of a product shot that far turns the product an impossible colour,
   which is what made the A/B fan look broken. */
.mg-e .mg-post-f { padding: 4px 5px 5px; gap: 4px; }
.mg-e .mg-post.ev .mg-post-f { padding: 2px 3px 3px; gap: 3px; }
.mg-e .mg-post-f svg { width: 8px; height: 8px; }
.mg-e .mg-post.ev .mg-post-f svg { width: 5.5px; height: 5.5px; }

/* ---- F: reporting & insights (static) ---- */
/* Measured off the reference art, as shares of the artwork's width:
   card 72 | gap 9.3 | chips 18.7, with the bell 13.7 across, centred on the
   card's right edge and the stem tangent to the bell's right side. Held in
   cqw rather than px because the panel runs 391-500 wide depending on the
   viewport, and fixed pixels only landed these ratios at exactly 500. */
.mg-f {
  position: relative;
  display: block;
  padding-right: 28cqw;
  --mg-stub: 2.45cqw;
  /* The bell's diameter is declared here, not on .dash-bell, because the stem's
     head is derived from it (see .mg-notes::before). Two places used to carry
     the bell's size independently and the mobile pair drifted 48px apart. */
  --bell-w: 13.7cqw;
  /* .mg-notes' top and the stem's head are one number now. They were `37%` and
     a hard-coded `18.4cqw`, which only agree at one panel width: .mg-f's height
     is content-driven (the dashboard sets it) while the bell is sized in cqw,
     so the two drift as the panel's aspect changes and the stem's head leaves
     the bell. Both read this. */
  --notes-top: 18.4cqw;
  /* half a chip, so the stem stops on the last branch rather than past it */
  --stem-drop: 13px;
}

.mg-dash {
  display: flex;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .07);
  border-top: 2px solid rgba(26, 68, 255, .45);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(6, 10, 40, .06), 0 14px 34px rgba(6, 10, 40, .10);
}

.dash-side {
  width: 33%;
  max-width: 20.18cqw;
  flex: none;
  background: #FAFAF9;
  border-right: 1px solid rgba(47, 44, 43, .06);
  padding: 1.75cqw 1.54cqw;
  display: flex;
  flex-direction: column;
}
.dash-side .dl { display: flex; align-items: center; gap: 0.88cqw; margin-bottom: 1.97cqw; }
.dash-side .dl svg { width: 1.75cqw; height: 2.41cqw; display: block; fill: var(--blue); }
.dash-side .dl b { font-size: 8px; font-weight: 600; letter-spacing: -.02em; color: #14120F; }

/* Nav rows carry a disclosure caret on the sections that nest, and the live
   row a blue marker, so the rail reads as a product and not as six bars. */
.dash-nav { display: flex; flex-direction: column; gap: 1.32cqw; }
.dash-nav + .dash-nav { margin-top: 1.54cqw; }
.dn { display: flex; align-items: center; gap: 0.88cqw; }
.dn i { display: block; height: 1.1cqw; border-radius: 3px; background: rgba(47, 44, 43, .09); flex: 1 1 auto; }
.dn.w82 i { flex: 0 1 82%; }
.dn.w74 i { flex: 0 1 74%; }
.dn.w66 i { flex: 0 1 66%; }
.dn s {
  flex: none;
  width: 1.1cqw; height: 1.1cqw;
  margin-left: auto;
  text-decoration: none;
  background: rgba(47, 44, 43, .22);
  clip-path: polygon(0 34%, 50% 72%, 100% 34%, 100% 56%, 50% 94%, 0 56%);
}
.dn.on i { background: rgba(26, 68, 255, .3); }
.dn.on::before {
  content: "";
  flex: none;
  width: 0.66cqw; height: 0.66cqw;
  border-radius: 50%;
  background: var(--blue);
}
.dash-user { display: flex; align-items: center; gap: 0.88cqw; margin-top: auto; padding-top: 2.19cqw; }
.dash-user b { flex: none; width: 2.19cqw; height: 2.19cqw; border-radius: 50%; background: rgba(47, 44, 43, .11); }
.dash-user u { flex: 0 1 58%; height: 0.88cqw; border-radius: 2px; background: rgba(47, 44, 43, .08); text-decoration: none; }

.dash-main { flex: 1 1 auto; min-width: 0; padding: 2.19cqw 3.51cqw 2.19cqw 2.19cqw; background: #FCFBFB; }
/* Title over subtitle on the left, control pill on the right — a page header,
   where three bars on one line read as a toolbar. */
.dash-top { display: flex; align-items: flex-start; gap: 1.32cqw; margin-bottom: 1.97cqw; }
.dash-top .dt-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.88cqw; }
.dash-top .dt-l { display: block; width: 54%; height: 1.1cqw; border-radius: 3px; background: rgba(47, 44, 43, .11); }
.dash-top .dt-s { display: block; width: 34%; height: 0.88cqw; border-radius: 2px; background: rgba(47, 44, 43, .06); }
.dash-top .dt-p { width: 4.39cqw; height: 1.97cqw; border-radius: 5px; background: rgba(47, 44, 43, .1); flex: none; }

.dash-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1cqw; margin-bottom: 1.97cqw; }
.dash-cards .kc {
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .06);
  border-radius: 6px;
  padding: 1.32cqw 1.1cqw;
  display: flex;
  flex-direction: column;
  gap: 0.88cqw;
}
.kc-h { display: flex; align-items: center; gap: 0.66cqw; }
.kc-h b { width: 1.75cqw; height: 1.75cqw; border-radius: 50%; background: none; border: 1px solid rgba(47, 44, 43, .16); flex: none; }
.kc-h u { flex: 1 1 auto; min-width: 0; height: 0.88cqw; border-radius: 2px; background: rgba(47, 44, 43, .1); text-decoration: none; }
/* the overflow affordance every real metric tile carries */
.kc-h s {
  flex: none;
  margin-left: 0.66cqw;
  width: 1.75cqw; height: 0.44cqw;
  text-decoration: none;
  background-image: radial-gradient(circle, rgba(47, 44, 43, .28) 45%, transparent 47%);
  background-size: 3px 2px;
  background-repeat: repeat-x;
}
.kc-l { display: block; height: 0.88cqw; border-radius: 2px; background: rgba(47, 44, 43, .08); }
.kc-l.w70 { width: 70%; } .kc-l.w45 { width: 45%; }
.kc-p { display: block; width: 3.07cqw; height: 1.32cqw; border-radius: 3px; background: rgba(47, 44, 43, .11); }

.dash-chart {
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .06);
  border-radius: 7px;
  padding: 1.54cqw;
}
.dash-chart .dch { display: block; width: 42%; height: 1.54cqw; border-radius: 3px; background: rgba(47, 44, 43, .11); margin-bottom: 1.1cqw; }
.dash-chart svg { display: block; width: 100%; height: 18.86cqw; }
.dash-chart .area { fill: url(#dashFade); }
.dash-chart .line { fill: none; stroke: var(--blue); stroke-width: 1.55; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.dash-chart .base { stroke: rgba(47, 44, 43, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-axis { display: flex; gap: 0.66cqw; margin-top: 1.1cqw; }
.dash-axis i { flex: 1 1 0; height: 0.88cqw; border-radius: 2px; background: rgba(47, 44, 43, .07); }

/* The bell is the loudest object in the frame on purpose: it is the moment the
   report leaves the product. At 38px it read as a UI button; it wants to sit
   across the card's corner at roughly a seventh of the artwork's width. */
.dash-bell {
  position: absolute;
  top: -1px;
  right: 21.15cqw;
  z-index: 3;
  width: var(--bell-w); aspect-ratio: 1;
  border-radius: 50%;
  background: #E4E3E4;
  border: 4px solid #F6F4F3;
  display: grid;
  place-items: center;
}
.dash-bell svg { width: 6cqw; height: 6cqw; display: block; }

.mg-notes {
  position: absolute;
  right: 0;
  top: var(--notes-top);
  width: 18.7cqw;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* The stem hangs off the bell's right edge and stops on the last branch, so it
   is never a line with a free end.

   Its head is the bell's vertical CENTRE, not the bell's bottom. The stem's x
   is the bell's right edge (chip width + stub, see the locked trio below), and
   a circle only reaches that x at one point: its centre height. Starting the
   head at the bell's bottom instead put it half a bell -- 26.6px at a 391px
   panel -- below the only point it could touch, so the branch tree read as
   floating beside the bell rather than leaving it.

   Both terms are cqw and share --notes-top with .mg-notes, so the head tracks
   the bell at every panel width instead of at one. */
.mg-notes::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--mg-stub));
  top: calc(var(--bell-w) / 2 - var(--notes-top) - 1px);
  bottom: var(--stem-drop);
  width: 1px;
  background: rgba(47, 44, 43, .18);
}
/* Destinations are chips, not cards: a flat grey fill with no rule and no lift,
   so the dashboard keeps the only shadow in the frame. */
.note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #F0EEED;
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #2F2C2B;
}
.note::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--mg-stub));
  top: 50%;
  width: var(--mg-stub);
  height: 1px;
  background: rgba(47, 44, 43, .18);
}
.note svg { width: 13px; height: 13px; display: block; flex: none; }

/* Three sizes below are locked to each other, not chosen independently: the
   bell's right offset must equal the chip width plus the branch stub, or the
   stem stops being tangent to the bell and starts floating beside it.
   88 = 80 + 8, and the desktop pair (98 = 86 + 12) obeys the same rule. */
/* Narrow screens give this artwork about 176px to work in, so every px the
   chips and bell take comes straight out of the dashboard. These four sizes
   are locked to each other, not chosen independently:
     padding-right = chip width + branch stub + half the bell
   which is what keeps the bell centred on the card's edge and the stem tangent
   to it. The desktop pair obeys the same rule (128 = 86 + 11 + 31).
   The dashboard still ends up narrow here; the standing fix is to drop the
   chips into a row under the card below 560px rather than beside it. */
@media (max-width: 900px) {
  /* --bell-w feeds both the bell and the stem's head, so they cannot drift.
     --stem-drop follows the smaller chip here (8px text + 8px padding), or the
     stem stops short of the last branch and leaves that stub hanging. */
  .mg-f { padding-right: 49cqw; --mg-stub: 4cqw; --bell-w: 17cqw; --stem-drop: 9px; }
  .mg-notes { width: 36cqw; }
  .note { font-size: 8px; padding: 4px 5px; gap: 4px; border-radius: 6px; }
  .note svg { width: 10px; height: 10px; }
  .dash-bell { right: 40cqw; border-width: 2.5px; }
  .dash-bell svg { width: 7.5cqw; height: 7.5cqw; }
}

/* ---- launch control timeline ---- */
/* overflow: hidden keeps the open card's shadow and the artwork inside the
   section frame. The section head is the split one in the process block
   below, so no centring rule belongs here. */
#timeline { overflow: hidden; }
.mg-launch {
  --launch-progress: 0%;
  position: relative;
  margin-top: 58px;
  border: 1px solid rgba(10, 16, 60, .11);
  background: #fff;
  overflow: hidden;
  overflow-anchor: none;
}
.mg-launch::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(10, 16, 60, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 16, 60, .025) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 38%, transparent 62%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, transparent 38%, transparent 62%, #000 100%);
}
.mg-launch-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(10, 16, 60, .09);
  background: rgba(255, 255, 255, .94);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mg-launch-live,
.mg-launch-target {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.mg-launch-live { color: var(--ink); }
.mg-launch-live > i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #48C486;
  box-shadow: 0 0 0 4px rgba(72, 196, 134, .11);
  animation: mgLaunchLive 2.8s var(--ease-micro) infinite;
}
@keyframes mgLaunchLive { 50% { opacity: .42; } }
.mg-launch-target { color: rgba(10, 16, 60, .48); }
.mg-launch-target b { color: var(--ink); font-weight: 500; }
.mg-launch-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 22px 22px 20px;
  border-bottom: 1px solid rgba(10, 16, 60, .09);
  background: rgba(247, 248, 251, .82);
}
.mg-launch-track {
  position: absolute;
  left: calc(7.143% + 22px);
  right: calc(7.143% + 22px);
  top: 51px;
  height: 1px;
  background: rgba(10, 16, 60, .13);
  overflow: hidden;
}
.mg-launch-track > i {
  display: block;
  width: var(--launch-progress);
  height: 100%;
  background: var(--blue);
  box-shadow: 0 0 8px rgba(26, 68, 255, .28);
  transition: width 1s var(--ease-in-out-quart);
}
.mg-launch-rail button {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: rgba(10, 16, 60, .42);
  cursor: pointer;
}
.mg-launch-rail button small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mg-launch-rail button b {
  margin-top: 26px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .45s var(--ease-micro);
}
.mg-launch-rail button > i {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(10, 16, 60, .24);
  box-shadow: 0 0 0 4px #F7F8FB;
  transform: translateX(-50%);
  transition: background .45s, border-color .45s, box-shadow .45s;
}
.mg-launch-rail button.is-complete,
.mg-launch-rail button.is-active { color: var(--ink); }
.mg-launch-rail button.is-complete > i {
  background: #A9E8CB;
  border-color: #78D5AA;
}
.mg-launch-rail button.is-active { color: var(--blue); }
.mg-launch-rail button.is-active > i {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px #F7F8FB, 0 0 0 7px rgba(26, 68, 255, .09);
}
.mg-launch-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: 18px;
  min-height: 438px;
  padding: 22px;
  background: rgba(255, 255, 255, .9);
  overflow-anchor: none;
}
.mg-launch-stage.is-changing > * {
  opacity: 0;
  transform: translateY(12px);
}
.mg-launch-brief,
.mg-launch-telemetry {
  min-width: 0;
  border-radius: 16px;
  transition: opacity .68s var(--ease-out-quint), transform .68s var(--ease-out-quint);
}
.mg-launch-brief {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 24px;
  background: #F6F4F3;
  border: 1px solid rgba(47, 44, 43, .07);
  box-shadow: 0 18px 44px rgba(6, 10, 40, .09);
}
.mg-launch-briefhead {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mg-launch-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: 0 0 36px;
}
.mg-launch-mark::before,
.mg-launch-mark::after,
.mg-launch-mark > i {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.mg-launch-mark::before {
  inset: 2px;
  border: 1px solid rgba(26, 68, 255, .22);
  animation: mgLaunchOrbit 8s linear infinite;
}
.mg-launch-mark::after {
  width: 13px; height: 13px;
  border: 2px solid var(--blue);
  border-right-color: transparent;
  animation: mgLaunchSpin 1.1s steps(8) infinite;
}
.mg-launch-mark > i {
  width: 4px; height: 4px;
  top: 1px; left: 16px;
  background: var(--blue);
  box-shadow: 0 0 0 3px #F6F4F3;
}
@keyframes mgLaunchOrbit { to { transform: rotate(360deg); } }
@keyframes mgLaunchSpin { to { transform: rotate(360deg); } }
.mg-launch-briefhead > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.mg-launch-briefhead small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(47, 44, 43, .48);
}
.mg-launch-briefhead b {
  font-size: 17px;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.mg-launch-briefhead em {
  margin-left: auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(47, 44, 43, .08);
  color: #2E9E55;
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mg-launch-summary {
  max-width: 58ch;
  margin-top: 20px;
  color: #54504D;
  font-size: 13.5px;
  line-height: 1.55;
}
.mg-launch-ops {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}
.mg-launch-op {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 8px 11px;
  border-radius: 10px;
  background: #FCFAF9;
  border: 1px solid rgba(47, 44, 43, .055);
  opacity: .58;
  transform: translateY(7px);
  transition: opacity .65s var(--ease-out-quint), transform .65s var(--ease-out-quint);
}
.mg-launch:not(.is-paused) .mg-launch-op:nth-child(1) { transition-delay: .12s; }
.mg-launch:not(.is-paused) .mg-launch-op:nth-child(2) { transition-delay: .28s; }
.mg-launch:not(.is-paused) .mg-launch-op:nth-child(3) { transition-delay: .44s; }
.mg-launch-op.is-done,
.mg-launch-op.is-running { opacity: 1; transform: none; }
.mg-launch-op > i {
  position: relative;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(47, 44, 43, .32);
}
.mg-launch-op.is-done > i {
  background: #E7F7EF;
  border: 1px solid #B8E7D0;
}
.mg-launch-op.is-done > i::after {
  content: "";
  position: absolute;
  left: 3px; top: 2px;
  width: 6px; height: 3px;
  border-left: 1.5px solid #2E9E55;
  border-bottom: 1.5px solid #2E9E55;
  transform: rotate(-45deg);
}
.mg-launch-op.is-running > i {
  border: 2px solid rgba(26, 68, 255, .18);
  border-top-color: var(--blue);
  animation: mgLaunchSpin 1.05s steps(8) infinite;
}
.mg-launch-op span { font-size: 12.5px; color: #2F2C2B; }
.mg-launch-op small {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(47, 44, 43, .46);
}
.mg-launch-op.is-done small { color: #2E9E55; }
.mg-launch-op.is-running small { color: var(--blue); }
.mg-launch-progress { margin-top: auto; padding-top: 22px; }
.mg-launch-progress > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
}
.mg-launch-progress > span b { font-weight: 500; }
.mg-launch-progress > span small {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(47, 44, 43, .5);
}
.mg-launch-progress > i {
  display: block;
  height: 2px;
  margin-top: 9px;
  background: rgba(47, 44, 43, .1);
  overflow: hidden;
}
.mg-launch-progress > i > b {
  display: block;
  width: var(--stage-progress, 38%);
  height: 100%;
  background: var(--blue);
  transition: width 1.15s var(--ease-in-out-quart);
}
.mg-launch-telemetry {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px;
  background: #0A1242;
  color: #fff;
  box-shadow: 0 18px 44px rgba(6, 10, 40, .16);
}
.mg-launch-telemetry::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: radial-gradient(rgba(255, 255, 255, .28) .7px, transparent .7px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.mg-launch-telemetry > * { position: relative; z-index: 1; }
.mg-launch-telemetry-head,
.mg-launch-chart-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mg-launch-telemetry-head {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.mg-launch-telemetry-head small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #A9E8CB;
}
.mg-launch-telemetry-head small i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #65D6A1;
}
.mg-launch-chart {
  display: flex;
  flex: 1;
  min-height: 180px;
  flex-direction: column;
  margin-top: 20px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
}
.mg-launch-chart-meta span {
  font-size: 11px;
  color: rgba(255, 255, 255, .66);
}
.mg-launch-chart-meta b {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.mg-launch-bars {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 6px;
  min-height: 100px;
  margin-top: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: repeating-linear-gradient(to top, rgba(255, 255, 255, .065) 0 1px, transparent 1px 28px);
}
.mg-launch-bars i {
  position: relative;
  flex: 1;
  height: var(--v);
  min-height: 5px;
  background: linear-gradient(180deg, #65D6A1 0%, #39BBFF 52%, #4265FF 100%);
  opacity: .82;
  transform: scaleY(.12);
  transform-origin: bottom;
  transition: transform 1.15s var(--ease-out-quint);
}
.mg-launch-bars.is-ready i { transform: scaleY(1); }
.mg-launch-bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 22%);
}
.mg-launch-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 14px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
}
.mg-launch-metrics span {
  min-width: 0;
  padding: 11px;
  background: #0D174B;
}
.mg-launch-metrics small {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, .46);
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg-launch-metrics b {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.mg-launch-output {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  color: #2F2C2B;
}
.mg-launch-output span {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(47, 44, 43, .48);
}
.mg-launch-output strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg-launch-output > i {
  color: #2E9E55;
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}
.mg-launch-foot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding: 10px 22px;
  border-top: 1px solid rgba(10, 16, 60, .09);
  background: #fff;
}
.mg-launch-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mg-launch-controls button {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(10, 16, 60, .12);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  transition: background .4s var(--ease-micro), color .4s var(--ease-micro), transform .4s var(--ease-micro);
}
.mg-launch-controls button:hover:not(:disabled) { background: var(--blue); color: #fff; transform: translateY(-1px); }
.mg-launch-controls button:disabled { opacity: .26; cursor: default; }
.mg-launch-controls span {
  min-width: 43px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: rgba(10, 16, 60, .42);
}
.mg-launch-controls span b { color: var(--ink); font-weight: 500; }
.mg-launch-auto {
  height: 2px;
  overflow: hidden;
  background: rgba(10, 16, 60, .08);
}
.mg-launch-auto i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}
.mg-launch.is-auto .mg-launch-auto i { animation: mgLaunchAuto 7.2s linear forwards; }
.mg-launch.is-paused .mg-launch-auto i { animation-play-state: paused; }
@keyframes mgLaunchAuto { to { transform: scaleX(1); } }
.mg-launch-foot .btn { border-radius: 8px; }
@media (max-width: 900px) {
  .mg-launch-rail { overflow-x: auto; grid-template-columns: repeat(7, minmax(110px, 1fr)); scrollbar-width: none; }
  .mg-launch-rail::-webkit-scrollbar { display: none; }
  .mg-launch-track { left: 76px; right: 76px; min-width: 650px; }
  .mg-launch-stage { grid-template-columns: 1fr; }
  .mg-launch-telemetry { min-height: 360px; }
}
@media (max-width: 600px) {
  .mg-launch { margin-top: 42px; }
  .mg-launch-head { padding-inline: 16px; }
  .mg-launch-target { display: none; }
  .mg-launch-rail { padding-inline: 10px; }
  .mg-launch-stage { padding: 12px; }
  .mg-launch-brief { padding: 20px; }
  .mg-launch-briefhead { align-items: flex-start; }
  .mg-launch-briefhead em { display: none; }
  .mg-launch-op { grid-template-columns: 18px minmax(0, 1fr); }
  .mg-launch-op small { display: none; }
  .mg-launch-metrics { grid-template-columns: 1fr; }
  .mg-launch-foot { grid-template-columns: auto 1fr; gap: 14px; }
  .mg-launch-auto { display: none; }
}

/* ---- how we work: the process card row ----
   Rebuilt 2026-08-02 from the word-tab + stage split, which left the whole
   lower-left quadrant of the section empty once the tab list ran out of rows.
   The row component itself moved out to assets/process-cards.css on 2026-08-03
   when enterprise-software took it too -- read its header for the anatomy and
   the two hard constraints it holds. This file keeps the section frame and the
   head. */
#timeline {
  border-top: 1px solid rgba(10, 16, 60, .07);
  border-bottom: 1px solid rgba(10, 16, 60, .07);
  /* No section tint: the page canvas runs edge to edge here so the vertical
     rails stay continuous through the section instead of being painted over. */
  background: transparent;
}
#timeline.sub-section {
  padding-block: clamp(96px, 9vw, 140px);
}

/* ---- head: signpost and headline left, standfirst and CTA on the right ----
   The one section head on this page that is not centred. The process section
   owns the page's second CTA, and a centred head would have parked it under
   the cards where the previous build had it, 500px below the copy it belongs
   to. `align-items: end` sits the CTA on the headline's last baseline. */
/* 1.38 : .62 with a 44px gap is 720px for the headline at the 1088px text
   column. Measured: "live growth in two weeks." sets 652px at the 60px top of
   --fs-h2, so anything under ~680px breaks it after "two" and the headline
   runs to three lines. */
.pc-head {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(258px, .62fr);
  align-items: end;
  gap: clamp(22px, 2.9vw, 44px);
  margin-bottom: clamp(46px, 4.8vw, 68px);
}
.pc-head-main .h2 {
  margin-top: 16px;
}
/* The turn is its own line, the way the hero sets its h1: at 60px the two
   halves are 420px and 583px, and left to wrap they broke after "two". */
.pc-head-main .h2 .serif-i {
  display: block;
}
.pc-head-aside {
  padding-bottom: 6px;
}
/* Not a .lead: a lead sits under an h2 and runs the section width. This is a
   margin note beside the headline in a 340px column, so it takes --fs-body. */
.pc-standfirst {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.66;
  color: var(--muted);
}
.pc-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.pc-cta svg {
  transition: transform .2s var(--ease-micro);
}
.pc-cta:hover svg {
  transform: translateX(4px);
}

/* The row itself is assets/process-cards.css + assets/process-cards.js:
   enterprise-software runs the same component in its #implementation section
   (DESIGN-BOOK 25), so the anatomy, the fixed-height stage and the measured
   paint hides live in one file. What stays here is this page's business: the
   section frame above, the two-column head, and the head's own breakpoint. */
@media (max-width: 1080px) {
  .pc-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
  }
  .pc-head-main .h2 .serif-i {
    display: inline;
  }
  .pc-head-aside {
    padding-bottom: 0;
  }
  .pc-standfirst {
    max-width: 62ch;
  }
}


/* ---- platform comparison cards ---- */
#compare {
  background: transparent;
}
/* Centred like every other section head on the page, rather than anchored
   left on its own. The head carries .section-head.center too, so the shared
   treatment does the work; these only set the widths. */
#compare .mg-compare-head {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: 48px;
}
#compare .mg-compare-head .h2 {
  max-width: 18ch;
  margin-inline: auto;
}
#compare .mg-compare-head .lead {
  max-width: 620px;
  margin-inline: auto;
}
/* Built in the home page's "Two ways to work with us" card language
   (index.html #solutions): band-art media header with a serif word chip, an
   uppercase kicker with a blue index, the sans h3 scale, hairline rows, and a
   footer line. Same tokens throughout -- 16px radius, var(--line) frame,
   0 24px 54px shadow -- so the two sections read as one component family.
   The two differences from #solutions are content-driven: the rows here are
   dt/dd metric pairs rather than a tick list (there is nothing to tick on the
   agency side), and only the Uplane card carries a CTA, because only one of
   the two is an offer. */
.mg-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
}
.mg-compare-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--card, #fff);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 19px 42px rgba(7, 16, 48, .085);
}

/* the outer rails belong to the page frame, not to the cards */
.mg-compare-card:first-child { border-left: 0; }
.mg-compare-card:last-child { border-right: 0; }

/* ---- media header ---- */
.mg-compare-media {
  position: relative;
  flex: 0 0 auto;
  min-height: clamp(240px, 24vw, 320px);
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.mg-compare-card.is-agency .mg-compare-media {
  background-image: url('../assets/backgrounds/14.jpg');
  /* The old way, drained of colour. Same band-art family as every other frame
     on the site, so the two cards are the same kind of object, but desaturated
     to near-grey: the contrast between the halves is carried by the artwork
     itself instead of by an arbitrary choice of two different photographs.

     Reviewed 2026-08-03: "shift it toward a brighter, more muted grey, using a
     subtle filter rather than a heavy one." saturate(.12) is a near-total kill
     that left the frame reading as a dark grey slab. .28 keeps a trace of the
     original blue so it still belongs to the band-art family, brightness goes
     1.02 -> 1.12 and contrast .95 -> .88 to open the midtones -- brighter and
     flatter, which is what "muted" asks for, rather than darker and duller.

     Reviewed 2026-08-04, superseding the trace of blue: fully black and white,
     and brighter again. saturate(.28) -> grayscale(1) kills the last of the
     chroma (measured max channel spread 68 -> 1), and brightness 1.12 -> 1.32
     with contrast .88 -> .84 lifts the mean composited luminance 103 -> 124
     without clipping the highlights (p95 lands at 151). Measured:
     tmp/mediatone.js. */
  filter: grayscale(1) contrast(.84) brightness(1.32);
}
.mg-compare-card.is-uplane .mg-compare-media {
  background-image: url('../assets/backgrounds/managed-growth-uplane-card.jpg');
}
.mg-compare-media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* No tint and no scrim, matching #solutions: the chip's own text-shadow is
   what keeps it legible, and the artwork gets to be artwork. */
.mg-compare-chip {
  position: absolute;
  left: clamp(26px, 3vw, 38px);
  bottom: 20px;
  z-index: 2;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(3, 8, 35, .32);
}
/* The agency artwork is now brighter than it was (grayscale + brightness 1.32),
   which took this chip's composited contrast to 5.17:1 against the 5.7:1 floor
   in DESIGN-BOOK 16.3. A scrim is not available here -- the note above rules it
   out -- so the shadow carries it instead: a tight dark pass under the letter
   plus a wider soft one restores 6.10:1 without becoming an outline. Only the
   agency card: the Uplane artwork is unchanged and its chip still clears the
   floor on its own. Measured: tmp/chipcontrast.js. */
.mg-compare-card.is-agency .mg-compare-chip {
  text-shadow: 0 1px 3px rgba(3, 8, 35, .62), 0 2px 14px rgba(3, 8, 35, .5);
}

/* ---- copy ---- */
.mg-compare-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
}
.mg-compare-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mg-compare-card.is-uplane .mg-compare-kicker { color: var(--blue); }
/* #solutions makes both index numbers blue, because both of its cards are
   offers. Here blue carries the comparison, so the agency index stays grey and
   only Uplane's is blue -- otherwise the one spot of colour on a deliberately
   drained card is the wrong signal. */
.mg-compare-kicker .number {
  color: rgba(10, 16, 60, .42);
}
.mg-compare-card.is-uplane .mg-compare-kicker .number {
  color: var(--blue);
}
/* Serif at 500 on the card headline scale. It was sans 450 at 33px, which is
   exactly the mismatch #solutions fixed on the home page -- it made the card
   read as a different brand from every other card on the site. */
.mg-compare-card h3 {
  max-width: 15ch;
  margin: 18px 0 14px;
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--ink);
}
.mg-compare-card > .mg-compare-copy > p {
  max-width: 440px;
  min-height: 75px;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.mg-compare-card dl {
  margin: 26px 0 0;
  border-top: 1px solid var(--line);
}
.mg-compare-card dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
}
.mg-compare-card dt {
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}
.mg-compare-card dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}
.mg-compare-card.is-uplane dd {
  color: var(--blue);
}
.mg-compare-card.is-agency dd {
  color: var(--muted);
}

/* ---- footer ---- */
/* the CTA moved out to its own section, so the net-effect line is the only
   thing here and takes the full card width instead of half of it */
.mg-compare-footer {
  display: block;
  margin-top: auto;
  padding-top: 28px;
}
.mg-compare-fit {
  display: block;
  max-width: none;
  min-height: 62px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.mg-compare-fit strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-weight: 500;
}
/* no rule under the label: the arrow is the affordance (DESIGN-BOOK 14.3) */
.mg-compare-card .more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.mg-compare-card .more svg {
  transition: transform .2s var(--ease-micro);
}
.mg-compare-card .more:hover svg {
  transform: translateX(3px);
}

@media (max-width: 760px) {
  #compare .mg-compare-head {
    margin-bottom: 34px;
  }
  .mg-compare-grid {
    grid-template-columns: 1fr;
  }
  .mg-compare-card > .mg-compare-copy > p {
    min-height: 0;
  }
  .mg-compare-fit {
    min-height: 0;
  }
  .mg-compare-media {
    min-height: clamp(180px, 42vw, 236px);
  }
}
@media (max-width: 440px) {
  .mg-compare-copy {
    padding: 22px;
  }
  .mg-compare-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .mg-compare-card dl > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 14px 0;
  }
  .mg-compare-card dd {
    text-align: left;
  }
}

/* equalize card header/description heights across the grid */
@media (min-width: 881px) {
  .mg-cell h3 { min-height: 2.4em; }
  .mg-cell > p { min-height: calc(3 * 1.62em); }
}


/* ============================================================
   CTA closing band. Same frame as the home page closing section: squared,
   spanning the outer rails, artwork under a top-down gradient with the
   ken-burns breath, everything centred in .closing-inner. The quote takes
   the home page testimonial's treatment, in white since it sits on art.
   ============================================================ */
.cta-closing .cta-quote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.4;
  letter-spacing: -.012em;
  color: #fff;
}
.cta-closing .cta-who { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
.cta-closing .cta-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.cta-closing .cta-who span { text-align: left; font-family: var(--sans); font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.cta-closing .cta-who strong { display: block; font-weight: 500; color: #fff; }
.cta-closing .capture { margin-top: 30px; }

/* ---- the "start scaling smarter" CTA ----
   This head used to carry a lone `.btn btn-blue` with an off-system 8px radius.
   It now takes the site's capture pill, same component as both closing bands, in
   its on-white `--light` tone. Outside a `.closing` the component is a
   full-width flex row with no centring, which is what `.closing .capture`
   supplies for the band variants, so the centred head restores it here. */
.section-head .capture {
  display: inline-flex;
  margin: 30px auto 0;
  text-align: left;
}