/* App mockups for the home pages (/ and /es/): the three "In the app" phones
   and the two family payment cards. Drawn in HTML so they stay sharp at any
   size, take the page's Sora and kit colours, and can be read in Spanish on
   /es/. They replaced shrunk store posters (app-store/*.png) and Apple's stock
   Apple Pay / Tap to Pay comps, which read as someone else's product.

   Same Friendship Bracelet language as _shared.css and the app's ratio board:
   round beads are children, lettered beads are teachers, a room is a bracelet.
   Money stays plain (docs/design-direction.md: whimsy stops at money). Names,
   centers and amounts are made up. */

/* ── The three screens ───────────────────────────────────────────────── */
.mk-screens {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px;
  margin: 56px auto 0; max-width: 960px;
}
@media (max-width: 860px) { .mk-screens { grid-template-columns: 1fr; max-width: 360px; } }
.mk-fig { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mk-fig figcaption { margin-top: 26px; max-width: 280px; }
.mk-fig .cap-t { font-size: 15px; font-weight: 600; color: var(--ink); }
.mk-fig .cap-s { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 4px; }

/* Phone. Small on purpose: 13px is the smallest text, so it reads at 1x. */
.mk-stage { position: relative; }
.mk-phone {
  position: relative; width: 264px; height: 540px;
  background: var(--ink); border-radius: 44px; padding: 9px;
  box-shadow: 5px 6px 0 var(--bk-pin), 0 18px 40px rgba(42,22,51,.12);
  text-align: left;
}
.mk-phone::before {
  content: ""; position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 24px; border-radius: 999px; background: #0a0810; z-index: 3;
}
.mk-scr {
  height: 100%; border-radius: 35px; overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column; color: var(--ink);
}
.mk-status { height: 46px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0; font-size: 13px; font-weight: 600; }
.mk-status i { width: 22px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; }
.mk-status i::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: currentColor; border-radius: 1px; }
.mk-top { padding: 4px 18px 12px; flex: none; }
.mk-back { font-size: 13px; color: var(--bk-link); font-weight: 600; }
.mk-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin-top: 2px; }
.mk-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.mk-body { flex: 1; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.mk-sheet {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 10px 12px; box-shadow: 2px 2px 0 var(--bk-pin);
}
.mk-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 2px 2px -2px; }
.mk-row { display: flex; align-items: center; gap: 10px; }
.mk-row > .grow { flex: 1; min-width: 0; }
.mk-name { font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-meta { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-av {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink);
}
.mk-btn {
  margin-top: auto; height: 46px; border-radius: 999px; border: 0;
  background: var(--bk-cta); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
  display: grid; place-items: center; position: relative;
}
/* Stamps — the app's status chips. */
.mk-stamp {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; border: 1px solid currentColor; white-space: nowrap;
}
.mk-stamp.ok { color: var(--paper-leaf); background: color-mix(in srgb, var(--paper-leaf) 10%, transparent); }
.mk-stamp.warn { color: #9A5B00; background: color-mix(in srgb, var(--paper-amber) 16%, transparent); }
.mk-stamp.due { color: var(--paper-primary-deep); background: var(--paper-primary-wash); }

/* A taped note lifted off the screen onto the page. */
.mk-note {
  position: absolute; z-index: 4; white-space: nowrap;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 9px 14px 9px 11px; display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--bk-hero-shadow) 70%, transparent), 0 10px 24px rgba(42,22,51,.10);
  transform: rotate(-2deg);
}
.mk-note small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.mk-note::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 54px; height: 16px;
  transform: translateX(-50%) rotate(3deg); background: rgba(233,200,120,.55); border-radius: 2px;
}
.mk-note .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; }
.mk-note .dot svg { width: 12px; height: 12px; }
@media (max-width: 420px) { .mk-note { transform: rotate(-2deg) scale(.94); } }

/* 1 · Drop-off: the wellness check, the step that sits between picking the
   child and Check In. The three taps are beads on the string up top. */
.mk-steps { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 2px 4px 0; }
.mk-steps::before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; background: var(--bk-string); }
.mk-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mk-step b {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; color: var(--ink); background: var(--card); border: 2px dashed var(--bk-string);
}
.mk-step.done b { border: 0; background: var(--pink); }
.mk-step.done:nth-child(2) b { background: var(--teal); }
.mk-step.now b { border: 0; background: var(--yellow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 35%, transparent); }
.mk-step.now { color: var(--ink); }
.mk-seg { display: grid; grid-template-columns: auto auto auto; gap: 6px; }
.mk-seg span {
  height: 34px; border-radius: 999px; display: grid; place-items: center; padding: 0 8px; white-space: nowrap;
  font-size: 12px; font-weight: 600; border: 1px solid var(--hairline); background: var(--card); color: var(--muted);
}
.mk-seg .on { background: var(--paper-leaf); border-color: var(--paper-leaf); color: #fff; }
.mk-field { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.mk-field + .mk-field { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 8px; }
.mk-field span { color: var(--muted); font-size: 13px; }
.mk-field b { font-weight: 600; }
/* The tap — a soft ring on the button about to be pressed. */
.mk-tap {
  position: absolute; right: 32px; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%; background: rgba(255,255,255,.35); box-shadow: 0 0 0 6px rgba(255,255,255,.18);
}

/* 2 · Ratios: one bracelet per room. */
.mk-alert {
  background: color-mix(in srgb, var(--yellow) 22%, var(--card)); border: 1px solid color-mix(in srgb, var(--paper-amber) 55%, transparent);
  border-radius: 10px; padding: 9px 11px; font-size: 13px; line-height: 1.35;
}
.mk-alert b { display: block; font-size: 13px; }
.mk-room { padding: 9px 12px 10px; }
.mk-room .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-room .rn { font-size: 14px; font-weight: 600; }
.mk-room .rn em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 13px; }
.mk-room .rt { font-size: 13px; font-weight: 600; white-space: nowrap; }
.mk-room .rt small { font-weight: 400; color: var(--muted); font-size: 12px; }
.mk-room.at .rt { color: #9A5B00; }
.mk-brace { display: flex; align-items: center; gap: 2px; margin-top: 7px; position: relative; flex-wrap: nowrap; }
.mk-brace::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1.5px; background: var(--bk-string); z-index: 0; }
.mk-brace i, .mk-brace b { position: relative; z-index: 1; border-radius: 50%; flex: none; }
.mk-brace i { width: 10px; height: 10px; background: var(--pink); }
.mk-brace i:nth-of-type(5n+2) { background: var(--teal); }
.mk-brace i:nth-of-type(5n+3) { background: var(--lavender); }
.mk-brace i:nth-of-type(5n+4) { background: var(--rose); }
.mk-brace i:nth-of-type(5n+5) { background: var(--yellow); }
.mk-brace i.empty { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--bk-string); }
.mk-brace b {
  width: 18px; height: 18px; background: var(--ink); color: var(--cream);
  font-size: 10px; font-weight: 700; display: grid; place-items: center; margin-right: 3px;
}
.mk-room.at .mk-brace i.empty { box-shadow: inset 0 0 0 1.5px var(--paper-amber); }
.mk-pill { display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 7px; margin-top: 6px; }

/* 3 · Tuition at a glance. */
.mk-glance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-glance .mk-sheet { padding: 9px 11px; }
.mk-glance .n { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.mk-glance .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mk-glance .wide { grid-column: 1 / -1; }
.mk-bar { height: 8px; border-radius: 999px; background: var(--hairline); overflow: hidden; margin-top: 7px; display: flex; }
.mk-bar span { background: var(--paper-leaf); }
.mk-bar span + span { background: var(--teal); }
.mk-fams { padding: 2px 12px; }
.mk-fams .mk-row { padding: 8px 0; }
.mk-fams .mk-row + .mk-row { border-top: 1px solid var(--hairline); }
.mk-fams .mk-av { width: 30px; height: 30px; font-size: 12px; }

/* ── Family payment cards ─────────────────────────────────────────────── */
.pay-card .mk-art { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 360px; padding: 8px 0 4px; position: relative; }

/* Paying tuition: the invoice as the family sees it. */
.mk-inv {
  width: 100%; max-width: 380px; position: relative; color: var(--ink);
  background: var(--card); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 22px 22px 20px; box-shadow: 4px 5px 0 var(--bk-pin), 0 16px 40px rgba(42,22,51,.08);
  transform: rotate(-0.8deg);
}
.mk-inv::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 22px;
  transform: translateX(-50%) rotate(-2deg); background: rgba(233,200,120,.55); border-radius: 2px;
}
.mk-inv .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mk-inv .who { font-size: 13px; color: var(--muted); }
.mk-inv .what { font-size: 16px; font-weight: 600; margin-top: 1px; }
.mk-inv .lines { margin: 14px 0 0; font-size: 14px; }
.mk-inv .lines div { display: flex; justify-content: space-between; padding: 5px 0; }
.mk-inv .lines span { color: var(--muted); }
.mk-inv .total { border-top: 1.5px solid var(--ink); margin-top: 6px; padding-top: 10px !important; font-weight: 600; font-size: 17px; }
.mk-inv .total span { color: var(--ink) !important; }
.mk-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.mk-methods div {
  border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 6px 8px; text-align: center;
  font-size: 13px; font-weight: 600; line-height: 1.2; background: var(--bg);
}
.mk-methods svg { width: 20px; height: 20px; display: block; margin: 0 auto 4px; color: var(--muted); }
.mk-methods .on { border: 1.5px solid var(--ink); background: var(--card); }
.mk-methods .on svg { color: var(--ink); }
.mk-methods small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.mk-auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 14px; }
.mk-auto small { display: block; font-size: 12px; color: var(--muted); }
.mk-toggle { width: 42px; height: 25px; border-radius: 999px; background: var(--paper-leaf); position: relative; flex: none; }
.mk-toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; }
.mk-inv .mk-btn { margin-top: 16px; height: 44px; }

/* Pay at pickup: a family's card meeting the staff iPhone. Our own drawing,
   not Apple's Tap to Pay screens, so it reads as an idea that is coming. */
.mk-tap2p { position: relative; width: 360px; height: 350px; }
.mk-tap2p .mk-phone {
  position: absolute; left: 14px; top: 14px; width: 190px; height: 330px; border-radius: 34px; padding: 7px;
  background: #4a3858; box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transform: rotate(-4deg);
}
.mk-tap2p .mk-phone::before { top: 14px; width: 60px; height: 18px; }
.mk-tap2p .mk-scr { border-radius: 27px; align-items: center; text-align: center; padding: 50px 14px 16px; }
.mk-tap2p .who { font-size: 12px; color: var(--muted); }
.mk-tap2p .amt { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; }
.mk-tap2p .for { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mk-tap2p .rings { width: 74px; height: 74px; margin: 22px auto 10px; color: var(--paper-primary); }
.mk-tap2p .hold { font-size: 13px; font-weight: 600; }
.mk-tap2p .x { margin-top: auto; width: 34px; height: 34px; border-radius: 50%; background: var(--hairline); display: grid; place-items: center; color: var(--muted); font-size: 16px; }
.mk-card {
  position: absolute; right: 0; top: 0; width: 168px; height: 106px; border-radius: 12px;
  background: var(--yellow); color: var(--ink); padding: 14px 16px;
  transform: rotate(-16deg);
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
}
.mk-card .chip { width: 26px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #e9d6a8, #c9a85a); }
.mk-card .num { position: absolute; left: 16px; bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; }
.mk-card .cl { position: absolute; right: 14px; top: 12px; width: 20px; height: 20px; color: var(--ink); opacity: .75; }
/* The pay cards sit in a 1fr grid; let them shrink below their drawings. */
.payments .pay-card { min-width: 0; }
@media (max-width: 560px) {
  .payments .pay-card { padding: 28px 20px; }
  .pay-card .mk-art { min-height: 0; }
  .mk-tap2p { zoom: .74; }
  .mk-inv { padding: 18px 14px 16px; }
  .mk-methods { gap: 6px; }
  .mk-methods div { font-size: 12px; padding: 8px 4px; }
}