/* Product mockups (15 Oct 2026). James: "We need a different mockup for Marketing, Onboarding, Platform,
   Pay. View the ones already existing on the home page for inspiration, but improve." Each page now has
   its own composition built from its real screen (the home page's "A look inside" cards), instead of
   one dashboard with different numbers:
     Marketing   a phone with a social ad, beside the campaign's onboarding report
     Onboarding  the claimant's own journey on a phone (eligibility, ID, signature) and a live panel
     Platform    the case record: the cohort, one claimant's timeline and documents, a bulk update
     Pay         the payouts table, a claimant's "you've been paid" notification and the activity
   Everything is drawn in design units (--u): 1200 across on wide screens, 700 across on narrow ones,
   where each piece takes its narrow place (--nx, --ny, --nw) or hides (.m2--wide). */

.m2 { position: relative; container-type: inline-size; margin-top: clamp(2.75rem, 5vw, 4.5rem); }
.m2__stage {
  --u: calc(100cqw / 1200);
  position: relative;
  height: calc(var(--u) * var(--h, 640));
  color: #e8eaee;
  font-size: calc(var(--u) * 13);
  line-height: 1.35;
  letter-spacing: -.005em;
}
.m2__el {
  --pw: var(--w, 300);
  position: absolute;
  left: calc(var(--u) * var(--x, 0));
  top: calc(var(--u) * var(--y, 0));
  width: calc(var(--u) * var(--w, 300));
}
@container (max-width: 720px) {
  .m2__stage { --u: calc(100cqw / 700); height: calc(var(--u) * var(--nh, 900)); }
  .m2__el {
    --pw: var(--nw, var(--w, 300));
    left: calc(var(--u) * var(--nx, var(--x, 0)));
    top: calc(var(--u) * var(--ny, var(--y, 0)));
    width: calc(var(--u) * var(--nw, var(--w, 300)));
  }
  .m2--wide { display: none; }
}
.m2__stage p { margin: 0; }
.m2__stage ol, .m2__stage ul { margin: 0; padding: 0; list-style: none; }
.m2__glow {
  position: absolute; inset: 10% 5% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 55%, rgb(0 98 254 / .16), rgb(0 98 254 / 0) 70%);
}
.m2-cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 1.25rem;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
  color: #8a9098;
}

/* ---------- surfaces ---------- */
.m2-win {
  overflow: hidden;
  border: 1px solid #262a31;
  border-radius: calc(var(--u) * 14);
  background: linear-gradient(180deg, #14171c, #101216);
  box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 80) rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .06);
}
.m2-bar {
  display: flex; align-items: center; gap: calc(var(--u) * 7);
  height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 14);
  border-bottom: 1px solid #22262c; background: #121418;
}
.m2-bar > i { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: #2b3038; }
.m2-url {
  margin: 0 auto; padding: calc(var(--u) * 4) calc(var(--u) * 14);
  border-radius: 99px; background: #1a1d22; color: #8a9098;
  font-family: var(--mono); font-size: calc(var(--u) * 11);
}
.m2-card {
  border: 1px solid #262a31; border-radius: calc(var(--u) * 12);
  background: #15181d;
  box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 60) rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .05);
  padding: calc(var(--u) * 16);
}
/* Phone: a current iPhone (16 Pro proportions, 71.5 x 149.6 mm). Everything is sized in hundredths of the
   phone's width (--p), so the frame keeps its proportions at any size: titanium band, thin black bezel, screen with
   rounded corners, Dynamic Island, status bar, home indicator and side buttons. */
.m2-phone { --p: calc(var(--u) * var(--pw, 300) / 100); position: relative; }
.m2-phone__frame {
  position: relative; aspect-ratio: 71.5 / 149.6; padding: calc(var(--p) * .85); border-radius: calc(var(--p) * 17.5);
  background: linear-gradient(150deg, #5b6069 0%, #2a2d33 22%, #44484f 48%, #1f2125 74%, #50545c 100%);
  box-shadow: 0 calc(var(--u) * 34) calc(var(--u) * 90) rgb(0 0 0 / .6), 0 calc(var(--u) * 8) calc(var(--u) * 24) rgb(0 0 0 / .4);
}
.m2-phone__frame::before, .m2-phone__frame::after { content: ""; position: absolute; width: calc(var(--p) * .9); border-radius: calc(var(--p) * 1); background: #34373d; }
.m2-phone__frame::before { /* action button, then volume up and down */
  left: calc(var(--p) * -.75); top: calc(var(--p) * 22); height: calc(var(--p) * 7.5);
  box-shadow: 0 calc(var(--p) * 14) 0 0 #34373d, 0 calc(var(--p) * 30) 0 0 #34373d, 0 calc(var(--p) * 9.5) 0 0 #34373d00;
}
.m2-phone__frame::after { right: calc(var(--p) * -.75); top: calc(var(--p) * 36); height: calc(var(--p) * 22); } /* side button */
.m2-phone__bezel { height: 100%; padding: calc(var(--p) * 2.5); border-radius: calc(var(--p) * 16.7); background: #020203; box-shadow: inset 0 0 0 calc(var(--p) * .3) #0d0e10; }
.m2-phone__screen {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: calc(var(--p) * 14.2); background: #0c0e11; color: #e8eaee;
}
.m2-phone__island { position: absolute; z-index: 2; top: calc(var(--p) * 2.6); left: 50%; width: calc(var(--p) * 29.5); height: calc(var(--p) * 8.6); margin-left: calc(var(--p) * -14.75); border-radius: 99px; background: #000; }
.m2-phone__status {
  flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(var(--p) * 13.6);
  padding: calc(var(--p) * .6) calc(var(--p) * 7.2) 0 calc(var(--p) * 9.6); font-size: calc(var(--p) * 4); font-weight: 600; letter-spacing: -.01em; color: #fff;
}
.m2-phone__icons { display: flex; align-items: center; gap: calc(var(--p) * 1.3); }
.m2-phone__icons svg { display: block; height: calc(var(--p) * 3.1); width: auto; fill: currentColor; }
.m2-phone__body { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.m2-phone__home { flex: none; height: calc(var(--p) * 6.2); display: grid; place-items: center; }
.m2-phone__home::after { content: ""; width: calc(var(--p) * 31); height: calc(var(--p) * 1.25); border-radius: 99px; background: rgb(255 255 255 / .82); }
.m2-phone__body > .m2-pad { flex: 1; display: flex; flex-direction: column; }
.m2-push { margin-top: auto !important; }
.m2-pad { padding: calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 18); }

/* ---------- type ---------- */
.m2-xs { font-size: calc(var(--u) * 11); color: #8a9098; }
.m2-mono { font-family: var(--mono); font-size: calc(var(--u) * 10.5); letter-spacing: .08em; text-transform: uppercase; color: #7d838c; }
.m2-s { font-size: calc(var(--u) * 12.5); color: #a9aeb6; }
.m2-m { font-size: calc(var(--u) * 14); }
.m2-l { font-size: calc(var(--u) * 18); letter-spacing: -.02em; }
.m2-xl { font-size: calc(var(--u) * 26); font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.m2-num { font-variant-numeric: tabular-nums; }
.m2-w { color: #fff; }
.m2-b { font-weight: 500; }
.m2-blue { color: #8fb4ff; }
.m2-ok { color: #6fd6a0; }

/* ---------- bits ---------- */
.m2-row { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.m2-sp { margin-left: auto; }
.m2-rule { height: 1px; background: #22262c; margin: calc(var(--u) * 12) 0; }
.m2-chip {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: 99px;
  background: #1d2128; color: #c9ccd2; font-size: calc(var(--u) * 11); white-space: nowrap;
}
.m2-chip--blue { background: rgb(0 98 254 / .16); color: #a9c4ff; }
.m2-chip--ok { background: rgb(111 214 160 / .12); color: #8fe0b5; }
.m2-chip--warn { background: rgb(255 196 112 / .12); color: #f2c98d; }
.m2-chip > i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: currentColor; }
.m2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
  height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 16); border-radius: 99px;
  background: var(--blue); color: #fff; font-size: calc(var(--u) * 13); font-weight: 500; white-space: nowrap;
}
.m2-btn--ghost { background: #1d2128; color: #e8eaee; }
.m2-btn--full { display: flex; width: 100%; }
.m2-av {
  display: inline-grid; place-items: center; flex: none;
  width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%;
  background: #232832; color: #c9ccd2; font-size: calc(var(--u) * 10.5); font-weight: 500;
}
.m2-av--blue { background: rgb(0 98 254 / .22); color: #a9c4ff; }
.m2-tick {
  display: inline-grid; place-items: center; flex: none;
  width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: 50%;
  background: rgb(111 214 160 / .16); color: #8fe0b5; font-size: calc(var(--u) * 10.5); line-height: 1;
}
.m2-tick--blue { background: rgb(0 98 254 / .2); color: #a9c4ff; }
.m2-tick--off { background: #1d2128; color: #6b7079; }
.m2-track { display: block; height: calc(var(--u) * 6); border-radius: 99px; background: #1f2329; overflow: hidden; }
.m2-track > i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, #0062fe, #8fb4ff); }
.m2-field {
  display: block; margin-top: calc(var(--u) * 6); padding: calc(var(--u) * 9) calc(var(--u) * 12);
  border: 1px solid #2a2f37; border-radius: calc(var(--u) * 8); background: #111317;
  font-size: calc(var(--u) * 12.5); color: #e8eaee;
}
.m2-dots { display: grid; grid-template-columns: repeat(var(--c, 12), 1fr); gap: calc(var(--u) * 5); }
.m2-dots > i { aspect-ratio: 1; border-radius: 50%; background: #2b3a55; }
.m2-dots > i.on { background: #8fb4ff; }
.m2-dots > i.w { background: #fff; }
.m2-step { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.m2-step > span { flex: 1; height: calc(var(--u) * 3); border-radius: 99px; background: #262a31; }
.m2-step > span.on { background: #0062fe; }
.m2-table { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 12.5); }
.m2-table th { padding: 0 calc(var(--u) * 10) calc(var(--u) * 9); text-align: left; font-weight: 400; font-family: var(--mono); font-size: calc(var(--u) * 10); letter-spacing: .08em; text-transform: uppercase; color: #6f757e; }
.m2-table td { padding: calc(var(--u) * 9) calc(var(--u) * 10); border-top: 1px solid #1f2329; color: #c9ccd2; white-space: nowrap; }
.m2-table tr.is-sel td { background: rgb(0 98 254 / .07); }
.m2-table td.r, .m2-table th.r { text-align: right; }
.m2-box { display: inline-grid; place-items: center; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: calc(var(--u) * 4); border: 1px solid #3a3f47; font-size: calc(var(--u) * 9); }
.m2-box.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.m2-tl { position: relative; display: grid; gap: calc(var(--u) * 14); }
.m2-tl::before { content: ""; position: absolute; left: calc(var(--u) * 8.5); top: calc(var(--u) * 6); bottom: calc(var(--u) * 6); width: 1px; background: #262a31; }
.m2-tl li { position: relative; display: flex; gap: calc(var(--u) * 12); align-items: flex-start; }
.m2-ad-img {
  position: relative; aspect-ratio: 1.15; border-radius: calc(var(--u) * 10); overflow: hidden;
  background: radial-gradient(80% 70% at 50% 40%, #12305f, #0d1422 70%);
  display: grid; place-items: center;
}
/* a handwritten signature: pen strokes and a tapered underline, drawn in the SVG itself */
.m2-sig { display: block; width: 100%; height: calc(var(--u) * 66); margin: calc(var(--u) * 2) 0; color: #f2f4f7; }
.m2-ring { width: calc(var(--u) * 86); height: calc(var(--u) * 86); }
.m2-ring circle { fill: none; stroke-width: 9; }
.m2-ring .bg { stroke: #1f2329; }
.m2-ring .fg { stroke: #0062fe; stroke-linecap: round; }

/* Platform: cohort list, record, documents; on narrow screens the documents column steps aside */
.m2-pf { display: grid; grid-template-columns: calc(var(--u) * 290) minmax(0, 1fr) calc(var(--u) * 250); }
@container (max-width: 720px) {
  .m2-pf { grid-template-columns: calc(var(--u) * 270) minmax(0, 1fr); }
  .m2-pf__side { display: none; }
}