/*
  MemoryBox site: page CSS only. Everything outside a visual comes from the kit (system.css and friends);
  this file holds what the kit lacks: the brand mark in the nav, the hero's small card, the facts lists,
  and the app's own screens drawn as live HTML (every class starts mb-), in the app's own colours
  (constants/theme.ts: paper, card, border, the four capture accents).
*/
:root {
  --mb-paper: #f6f0df;
  --mb-card: #f8f5ed;
  --mb-card-2: #fbf9f3;
  --mb-line: #d6c8a9;
  --mb-line-soft: #e6dcc4;
  --mb-ink: #241a0f;
  --mb-muted: #6f5d48;
  --mb-audio: #b64635;
  --mb-video: #965d2c;
  --mb-photo: #7e6720;
  --mb-text: #5f7231;
  --mb-shadow: 0 1px 0 rgb(36 26 15 / .05), 0 18px 40px -22px rgb(36 26 15 / .45);
}

/* ---------- the brand mark: the app icon beside the name ---------- */
.nav__logo { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.nav__logo .brand-icon { width: 32px; height: 32px; border-radius: 9px; flex: none; box-shadow: 0 0 0 1px rgb(36 26 15 / .08); }
.footer__name { font-size: clamp(30px, 1.5vw + 18px, 48px); gap: var(--s-4); }
.footer__name .brand-icon { width: clamp(32px, 1vw + 24px, 44px); height: auto; border-radius: 11px; }

/* ---------- text helpers the kit leaves to the page ---------- */
.hero__proof { font-size: var(--t-small); color: var(--muted); margin-top: var(--s-5); }
.app-intro { display: grid; gap: var(--s-4); justify-items: start; }
.app-intro p { font-size: var(--t-lead); line-height: 1.5; }
.split-copy { display: grid; gap: var(--s-5); align-content: start; justify-items: start; }
.split-copy .t-lead { max-width: 34ch; }
.facts { list-style: none; padding: 0; margin: 0; display: grid; width: 100%; max-width: 30rem; }
.facts li { padding-block: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-body); display: flex; gap: var(--s-3); align-items: baseline; }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: translateY(-2px); }
.statement .t-label { color: var(--muted); margin-bottom: var(--s-6); font-family: var(--font-text); }
.split-copy .form { width: 100%; max-width: 30rem; margin-top: var(--s-2); }

/* ---------- the hero's small card (the dealt collage's result card, in the brand) ---------- */
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-7); width: 300px; z-index: 2; }
.d-card { background: var(--mb-card-2); border-radius: 16px; padding: 14px 16px 10px; box-shadow: 0 0 0 1px rgb(36 26 15 / .07), 0 20px 40px -20px rgb(36 26 15 / .5); color: var(--mb-ink); font-family: var(--font-text); }
.d-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.d-card h5 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.005em; }
.d-note__line { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--mb-muted); border-top: 1px solid rgb(36 26 15 / .08); }
.d-note__line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e7ecd9; color: #45561f; font-style: normal; font-size: 11px; font-weight: 600; }
.d-note__line b { font-weight: 500; color: var(--mb-ink); }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 270px; } }

/* ---------- the phone ---------- */
.mb-phone { width: 336px; padding: 9px; border-radius: 50px; background: #1d150d; box-shadow: 0 0 0 1px rgb(255 255 255 / .06) inset, 0 40px 70px -30px rgb(36 26 15 / .55), 0 0 0 1px rgb(36 26 15 / .2); }
.mb-screen { border-radius: 41px; overflow: hidden; min-height: 760px; color: var(--mb-ink); font-family: var(--font-text); }
.mb-paper {
  background-color: var(--mb-paper);
  background-image:
    linear-gradient(rgb(36 26 15 / .045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(36 26 15 / .045) 1px, transparent 1px);
  background-size: 22px 22px;
}
.mb-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 4px; font-size: 13px; font-weight: 500; }
.mb-status__icons { display: inline-flex; gap: 4px; align-items: center; }
.mb-status__icons i { display: block; width: 15px; height: 9px; border-radius: 2px; background: var(--mb-ink); }
.mb-status__icons i:first-child { width: 14px; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 0; }
.mb-status__icons i:nth-child(2) { width: 12px; height: 9px; border-radius: 6px 6px 0 0; }
.mb-status__icons i:last-child { width: 22px; height: 10px; border-radius: 3px; }

/* the hero places the phone in the frame: inset from the top, never out to a side; the frame cuts its foot */
.hero__art > .ly-piece--main.mb-phone { left: auto; right: clamp(40px, 9%, 80px); top: var(--s-8); width: 336px; }
@media (max-width: 1023px) { .hero__art > .ly-piece--main.mb-phone { right: auto; left: calc(50% - 150px); top: var(--s-6); width: 300px; } }
@media (max-width: 639px) { .hero__art > .ly-piece--main.mb-phone { left: calc(50% - 140px); top: var(--s-5); width: 280px; } }

.mb-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px 8px; }
.mb-head__title { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.mb-head__sub { margin: 4px 0 0; font-size: 12px; color: var(--mb-muted); max-width: 18ch; line-height: 1.35; }
.mb-head__icons { display: flex; gap: 6px; align-items: flex-start; }
.mb-ico { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--mb-line); display: grid; place-items: center; position: relative; }
.mb-ico--bell::before { content: ""; width: 11px; height: 11px; border-radius: 6px 6px 2px 2px; border: 1.6px solid var(--mb-ink); border-bottom-width: 2px; }
.mb-ico--bell::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--mb-audio); }
.mb-ico--write::before { content: ""; width: 11px; height: 11px; border: 1.6px solid var(--mb-ink); border-radius: 2px; }
.mb-ico--avatar { background: var(--mb-ink); border-color: var(--mb-ink); color: var(--mb-paper); font-size: 13px; font-weight: 500; }
.mb-stories { display: flex; gap: 14px; padding: 6px 18px 12px; }
.mb-story { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--mb-muted); }
.mb-story b { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--mb-ink); color: var(--mb-paper); font-weight: 500; font-size: 14px; box-shadow: 0 0 0 2px var(--mb-paper), 0 0 0 3.5px var(--mb-ink); }
.mb-story--new b { background: transparent; color: var(--mb-ink); box-shadow: none; border: 1.5px dashed var(--mb-line); font-size: 20px; font-weight: 400; }

/* ---------- a memory card, as the feed draws it ---------- */
.mb-card { margin: 0 12px 12px; padding: 14px 14px 12px; border-radius: 20px; background: var(--mb-card); border: 1px solid var(--mb-line-soft); }
.mb-card__by { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mb-card__by > span:nth-child(2) { display: grid; line-height: 1.25; }
.mb-card__by b { font-weight: 500; }
.mb-card__by small { color: var(--mb-muted); font-size: 11.5px; }
.mb-av { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--mb-ink); color: var(--mb-paper); font-size: 13px; font-weight: 500; }
.mb-av--alt { background: #8a6a3f; }
.mb-av--alt2 { background: var(--mb-text); }
.mb-av--alt3 { background: var(--mb-audio); }
.mb-pill { margin-left: auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--mb-line); color: var(--mb-ink); }
.mb-card__title { margin: 12px 0 0; font-family: var(--font-display); font-size: 19px; line-height: 1.2; letter-spacing: -0.005em; }
.mb-card__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin-top: 12px; filter: none; }
.mb-card__acts { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--mb-muted); }
.mb-heart { width: 15px; height: 13px; position: relative; display: inline-block; }
.mb-heart::before { content: ""; position: absolute; inset: 0; background: var(--mb-muted); clip-path: path("M7.5 13 1.2 6.8A3.6 3.6 0 0 1 7.5 2.1a3.6 3.6 0 0 1 6.3 4.7Z"); }
.mb-heart.is-on::before { background: var(--mb-audio); }
.mb-bubble { width: 14px; height: 12px; border: 1.5px solid var(--mb-muted); border-radius: 7px 7px 7px 2px; margin-left: 10px; display: inline-block; }

/* the waveform and the player */
.mb-wave { display: flex; align-items: center; gap: 3px; height: 34px; margin-top: 12px; }
.mb-wave i { flex: 1 1 0; border-radius: 3px; background: var(--mb-line-soft); height: 40%; }
.mb-wave i:nth-child(3n) { height: 75%; } .mb-wave i:nth-child(4n+1) { height: 55%; } .mb-wave i:nth-child(5n) { height: 92%; } .mb-wave i:nth-child(7n+2) { height: 30%; }
.mb-wave i:nth-child(-n+6) { background: var(--mb-ink); }
.mb-wave--wide i:nth-child(-n+9) { background: var(--mb-ink); }
.mb-player { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mb-play { width: 40px; height: 40px; border-radius: 50%; background: var(--mb-ink); flex: none; position: relative; }
.mb-play::after { content: ""; position: absolute; left: 15px; top: 12px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--mb-paper); }
.mb-track { flex: 1; height: 5px; border-radius: 3px; background: var(--mb-line-soft); position: relative; }
.mb-track span { position: absolute; inset: 0 74% 0 0; border-radius: inherit; background: var(--mb-ink); }
.mb-time { font-size: 11.5px; color: var(--mb-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-chip { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: #efe5cd; color: var(--mb-ink); white-space: nowrap; }
.mb-chip--quiet { background: transparent; border: 1px solid var(--mb-line); color: var(--mb-muted); }
.mb-label { margin: 0; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-muted); font-weight: 500; }
.mb-spacer { flex: 1; }

/* ---------- the app frame: the list beside the open memory (sections-library.md, app-frame) ---------- */
.mb-app { --fx-bg: var(--mb-card-2); --fx-surface: var(--mb-paper); --fx-ink: var(--mb-ink); --fx-muted: var(--mb-muted); --fx-accent: var(--mb-audio); --ui-radius: 20px; font-family: var(--font-text); }
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--mb-shadow); overflow: hidden; }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}
.mb-list { background: var(--mb-paper); min-height: 100%; }
.mb-list__bar { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; }
.mb-list__bar b { font-family: var(--font-display); font-style: italic; font-size: 22px; font-weight: 500; }
.mb-list__count { font-size: 12px; color: var(--mb-muted); }
.mb-search { font-size: 12px; color: var(--mb-muted); border: 1px solid var(--mb-line); border-radius: 999px; padding: 6px 14px 6px 28px; background: var(--mb-card-2) radial-gradient(circle at 13px 50%, transparent 4px, var(--mb-muted) 4.5px, var(--mb-muted) 5.6px, transparent 6px) no-repeat; }
.mb-tabs { display: flex; gap: 6px; padding: 0 20px 12px; border-bottom: 1px solid var(--u-line); }
.mb-tabs span { font-size: 12px; padding: 5px 11px; border-radius: 999px; color: var(--mb-muted); }
.mb-tabs .is-on { background: var(--mb-ink); color: var(--mb-paper); }
.mb-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--u-line); font-size: 13.5px; }
.mb-row.is-on { background: var(--mb-card-2); box-shadow: inset 3px 0 0 var(--mb-audio); }
.mb-row b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row small { color: var(--mb-muted); font-size: 12px; }
.mb-thumb { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; display: block; }
.mb-thumb--voice { background: #f2dcd5; position: relative; }
.mb-thumb--voice::before { content: ""; position: absolute; inset: 13px 12px; background: repeating-linear-gradient(90deg, var(--mb-audio) 0 3px, transparent 3px 6px); clip-path: polygon(0 35%, 17% 35%, 17% 0, 34% 0, 34% 20%, 51% 20%, 51% 10%, 68% 10%, 68% 40%, 85% 40%, 85% 25%, 100% 25%, 100% 75%, 85% 75%, 85% 60%, 68% 60%, 68% 90%, 51% 90%, 51% 80%, 34% 80%, 34% 100%, 17% 100%, 17% 65%, 0 65%); }
.mb-thumb--text { background: #e4e9d5; position: relative; }
.mb-thumb--text::before { content: ""; position: absolute; inset: 14px 12px; background: repeating-linear-gradient(var(--mb-text) 0 2px, transparent 2px 6px); }
.mb-open { background: var(--mb-card-2); min-height: 100%; padding: 18px 28px 0; }
.mb-open__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.mb-open__bar .mb-pill { margin-left: 0; }
.mb-back { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--mb-line); position: relative; }
.mb-back::after { content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px; border-left: 1.6px solid var(--mb-ink); border-bottom: 1.6px solid var(--mb-ink); transform: rotate(45deg); }
.mb-more { width: 22px; height: 4px; background: radial-gradient(circle, var(--mb-ink) 1.8px, transparent 2.2px) 0 0 / 8px 4px repeat-x; }
.mb-open__title { margin: 16px 0 14px; font-family: var(--font-display); font-size: 30px; line-height: 1.12; letter-spacing: -0.01em; }
.mb-open__media { border-radius: 18px; overflow: hidden; border: 1px solid var(--mb-line-soft); background: var(--mb-card); }
.mb-open__media img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 45%; }
.mb-open__player { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.mb-open__player .mb-wave { margin: 0; height: 30px; flex: 1; }
.mb-open .mb-label { margin-top: 18px; }
.mb-open__text { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--mb-ink); max-width: 56ch; }
.mb-comment { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--mb-paper); font-size: 13px; }
.mb-comment b { font-weight: 500; }
.mb-comment p { margin: 2px 0 0; color: var(--mb-ink); }
@media (max-width: 639px) {
  .mb-open { padding: 14px 16px 0; }
  .mb-open__title { font-size: 24px; }
  .mb-open__media img { aspect-ratio: 4 / 3; }
}

/* ---------- the four capture cards ---------- */
#record .panel { --p-h: 300px; }
@media (max-width: 639px) { #record .panel { --p-h: 196px; } }
.mb-sheet { background: var(--mb-card-2); border-radius: 22px; box-shadow: var(--mb-shadow); padding: 18px 18px 22px; text-align: center; font-family: var(--font-text); color: var(--mb-ink); }
.mb-sheet__title { margin: 0; font-weight: 500; font-size: 17px; }
.mb-sheet__sub { margin: 4px 0 12px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mb-muted); }
.mb-rec { border: 1px solid var(--mb-line-soft); border-radius: 18px; padding: 16px 16px 18px; display: grid; justify-items: center; gap: 8px; background: #fffdf8; }
.mb-rec__time { margin: 0; font-size: 44px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.mb-rec__state { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-muted); }
.mb-rec__state i { width: 8px; height: 8px; border-radius: 50%; background: var(--mb-audio); }
.mb-rec__wave { display: flex; gap: 4px; align-items: center; height: 34px; width: 100%; margin-top: 6px; }
.mb-rec__wave i { flex: 1; border-radius: 3px; background: var(--mb-audio); height: 60%; }
.mb-rec__wave i:nth-child(3n) { height: 90%; } .mb-rec__wave i:nth-child(4n+1) { height: 45%; } .mb-rec__wave i:nth-child(n+16) { background: var(--mb-line-soft); height: 14%; }
.mb-rec__limit { width: 100%; height: 4px; border-radius: 2px; background: var(--mb-line-soft); overflow: hidden; margin-top: 6px; }
.mb-rec__limit span { display: block; height: 100%; background: var(--mb-audio); }
.mb-rec__left { margin: 0; font-size: 12px; color: var(--mb-muted); font-variant-numeric: tabular-nums; }
.mb-rec__pause { width: 52px; height: 52px; border-radius: 50%; background: var(--mb-ink); margin-top: 6px; position: relative; }
.mb-rec__pause::before, .mb-rec__pause::after { content: ""; position: absolute; top: 17px; width: 5px; height: 18px; border-radius: 2px; background: var(--mb-paper); left: 19px; }
.mb-rec__pause::after { left: 28px; }

.mb-video, .mb-crop, .mb-note-page { background: var(--mb-card-2); border-radius: 22px; box-shadow: var(--mb-shadow); padding: 12px; font-family: var(--font-text); color: var(--mb-ink); }
.mb-video__frame, .mb-crop__frame { position: relative; border-radius: 14px; overflow: hidden; background: #1d150d; }
.mb-video__frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mb-video__play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgb(255 255 255 / .9); }
.mb-video__play::after { content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--mb-ink); }
.mb-video__len { position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 500; color: #fff; background: rgb(29 21 13 / .72); padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.mb-video__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 6px 4px; font-size: 14px; }
.mb-video__row b { font-weight: 500; }
.mb-crop__frame { padding: 0; }
.mb-crop__frame img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 35%; opacity: .62; }
.mb-crop__box { position: absolute; inset: 9% 12% 11% 12%; box-shadow: 0 0 0 999px rgb(29 21 13 / .38); outline: 1.5px solid rgb(255 255 255 / .92); overflow: hidden; background: url(../img/photo-f76806502-960.jpg) center 35% / 133% auto no-repeat; }
.mb-crop__box i { position: absolute; width: 16px; height: 16px; border: 3px solid #fff; }
.mb-crop__box i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.mb-crop__box i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; }
.mb-crop__box i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; }
.mb-crop__box i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.mb-crop__bar, .mb-note-page__bar { display: flex; align-items: center; gap: 16px; padding: 12px 6px 4px; font-size: 13px; color: var(--mb-muted); }
.mb-crop__bar b, .mb-note-page__bar b { margin-left: auto; color: var(--mb-paper); background: var(--mb-ink); font-weight: 500; padding: 6px 14px; border-radius: 999px; }
.mb-note-page { padding: 18px 20px 12px; background-color: #fffdf6; background-image: repeating-linear-gradient(transparent 0 25px, rgb(95 114 49 / .16) 25px 26px); background-position: 0 70px; }
.mb-note-page__date { margin: 0; font-size: 11.5px; color: var(--mb-text); font-weight: 500; }
.mb-note-page__title { margin: 6px 0 8px; font-family: var(--font-display); font-size: 22px; line-height: 1.2; }
.mb-note-page__text { margin: 0; font-size: 14px; line-height: 26px; color: var(--mb-ink); }
.mb-note-page__text::after { content: ""; display: inline-block; width: 1.5px; height: 17px; background: var(--mb-audio); margin-left: 2px; vertical-align: -3px; }

/* ---------- Circles ---------- */
.frame--split.frame--lit { aspect-ratio: auto; }
.mb-circle, .mb-settings { background: var(--mb-card-2); border-radius: 24px; box-shadow: var(--mb-shadow); padding: 20px; font-family: var(--font-text); color: var(--mb-ink); }
.mb-circle__head { display: flex; align-items: center; gap: 12px; }
.mb-circle__head > div { display: grid; }
.mb-circle__head b { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.1; }
.mb-circle__head small { font-size: 12.5px; color: var(--mb-muted); margin-top: 3px; }
.mb-circle__badge { width: 48px; height: 48px; border-radius: 14px; background: var(--mb-audio); color: var(--mb-paper); display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; }
.mb-circle__invite { margin: 16px 0 6px; padding: 14px; border-radius: 16px; background: var(--mb-paper); }
.mb-circle__invite p { margin: 0 0 10px; font-weight: 500; font-size: 14px; }
.mb-circle__invite div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mb-circle__invite span { text-align: center; font-size: 12.5px; padding: 8px 4px; border-radius: 10px; background: var(--mb-card-2); border: 1px solid var(--mb-line-soft); }
.mb-circle__invite span:first-child { background: var(--mb-ink); color: var(--mb-paper); border-color: var(--mb-ink); }
.mb-member { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--mb-line-soft); font-size: 14px; }
.mb-member b { font-weight: 500; }
.mb-role { font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: #efe5cd; }
.mb-role--owner { background: var(--mb-ink); color: var(--mb-paper); }
.mb-role--quiet { background: transparent; color: var(--mb-muted); }

/* ---------- Lifestory steps ---------- */
#lifestories .panel { --p-h: 260px; }
@media (max-width: 639px) { #lifestories .panel { --p-h: 220px; } }
.mb-form, .mb-ask, .mb-years { background: var(--mb-card-2); border-radius: 20px; box-shadow: var(--mb-shadow); padding: 16px; font-family: var(--font-text); color: var(--mb-ink); }
.mb-form__title { margin: 0 0 10px; font-family: var(--font-display); font-size: 19px; }
.mb-form__label { margin: 8px 0 4px; font-size: 11px; color: var(--mb-muted); }
.mb-form__field { margin: 0; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--mb-ink); font-size: 14px; display: flex; align-items: center; }
.mb-form__field i { width: 1.5px; height: 16px; background: var(--mb-audio); margin-left: 2px; }
.mb-form__field--quiet { border-color: var(--mb-line); color: var(--mb-muted); border-width: 1px; }
.mb-form__btn { display: block; margin-top: 14px; text-align: center; padding: 10px; border-radius: 999px; background: var(--mb-ink); color: var(--mb-paper); font-weight: 500; font-size: 14px; }
.mb-ask__q { margin: 8px 0 14px; font-family: var(--font-display); font-size: 21px; line-height: 1.25; }
.mb-ask__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mb-ask__btns b, .mb-ask__btns span { text-align: center; padding: 10px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.mb-ask__btns b { background: var(--mb-audio); color: #fff8ee; }
.mb-ask__btns span { border: 1px solid var(--mb-line); }
.mb-ask__next { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--mb-line-soft); font-size: 12.5px; color: var(--mb-muted); line-height: 1.45; }
.mb-years__rail { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--mb-line-soft); font-size: 12.5px; color: var(--mb-muted); font-variant-numeric: tabular-nums; }
.mb-years__rail span { padding: 3px 8px; border-radius: 8px; }
.mb-years__rail .is-on { background: var(--mb-ink); color: var(--mb-paper); }
.mb-years__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; font-size: 13.5px; }
.mb-years__item img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.mb-years__item div { display: grid; }
.mb-years__item b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-years__item small { color: var(--mb-muted); font-size: 12px; }
.mb-years__phases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mb-years__phases span { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--mb-line); color: var(--mb-muted); }
.mb-years__phases .is-on { background: #e4e9d5; border-color: transparent; color: #3e4c1f; }

/* ---------- Privacy & Security ---------- */
.mb-settings__kicker { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-muted); }
.mb-settings__title { margin: 2px 0 6px; font-family: var(--font-display); font-size: 26px; line-height: 1.15; }
.mb-settings__label { margin: 16px 0 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mb-muted); font-weight: 500; }
.mb-set { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--mb-paper); margin-bottom: 6px; }
.mb-set > div { display: grid; gap: 3px; }
.mb-set b { font-weight: 500; font-size: 14px; }
.mb-set small { font-size: 12px; color: var(--mb-muted); line-height: 1.4; }
.mb-set--danger b { color: var(--mb-audio); }
.mb-switch { width: 44px; height: 26px; border-radius: 13px; background: var(--mb-line); position: relative; flex: none; }
.mb-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.mb-chev { width: 8px; height: 8px; border-right: 1.6px solid var(--mb-muted); border-top: 1.6px solid var(--mb-muted); transform: rotate(45deg); margin-right: 4px; }

/* ---------- the first-run screen beside the waitlist ---------- */
.mb-phone--flat { width: 100%; }
.mb-phone--flat .mb-screen { min-height: 640px; }
.mb-first { padding: 22px 22px 0; display: grid; justify-items: center; text-align: center; }
.mb-first__title { margin: 8px 0 8px; font-family: var(--font-display); font-size: 27px; line-height: 1.15; letter-spacing: -0.01em; }
.mb-first__sub { margin: 0; font-size: 13.5px; color: var(--mb-muted); line-height: 1.5; max-width: 30ch; }
.mb-first__ideas { display: grid; gap: 8px; width: 100%; margin-top: 22px; }
.mb-first__ideas span { padding: 12px 14px; border-radius: 14px; background: var(--mb-card-2); border: 1px solid var(--mb-line-soft); font-size: 14px; text-align: left; }
.mb-first__ideas span:first-child { border-color: var(--mb-ink); box-shadow: inset 3px 0 0 var(--mb-audio); }
.mb-first__rec { width: 88px; height: 88px; border-radius: 50%; margin-top: 28px; background: var(--mb-audio); display: grid; place-items: center; box-shadow: 0 0 0 10px rgb(182 70 53 / .14); }
.mb-first__rec i { width: 18px; height: 28px; border-radius: 9px; border: 3px solid #fff8ee; position: relative; }
.mb-first__hint { margin: 16px 0 0; font-size: 12.5px; color: var(--mb-muted); }

/* the inverse ground keeps the brand: the footer's icon tile on dark */
.ground-inverse .nav__logo .brand-icon { box-shadow: 0 0 0 1px rgb(246 239 220 / .12); }

/* ---------- statement: the sentence set large, the app's three first-story ideas under it ---------- */
.statement .mo-wh__text { font-size: clamp(34px, 3.6vw + 12px, 68px); line-height: 1.12; max-width: 19ch; }
.prompt-row { list-style: none; padding: 0; margin: var(--s-8) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.prompt-row li { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-md); background: var(--mb-card-2); border: 1px solid var(--line); font-size: var(--t-body); }
.prompt-row__ico { width: 44px; height: 44px; border-radius: 12px; flex: none; position: relative; }
.prompt-row__ico--job { background: #f2dcd5; }
.prompt-row__ico--job::before { content: ""; position: absolute; inset: 15px 11px 12px; border: 2px solid var(--mb-audio); border-radius: 3px; }
.prompt-row__ico--job::after { content: ""; position: absolute; left: 17px; top: 11px; width: 10px; height: 5px; border: 2px solid var(--mb-audio); border-bottom: 0; border-radius: 3px 3px 0 0; }
.prompt-row__ico--photo { background: #efe5cd; }
.prompt-row__ico--photo::before { content: ""; position: absolute; inset: 12px; border: 2px solid var(--mb-photo); border-radius: 4px; }
.prompt-row__ico--photo::after { content: ""; position: absolute; left: 15px; bottom: 15px; width: 14px; height: 7px; background: var(--mb-photo); clip-path: polygon(0 100%, 35% 20%, 60% 70%, 78% 40%, 100% 100%); }
.prompt-row__ico--recipe { background: #e4e9d5; }
.prompt-row__ico--recipe::before { content: ""; position: absolute; left: 12px; right: 12px; top: 20px; height: 12px; border: 2px solid var(--mb-text); border-top: 0; border-radius: 0 0 10px 10px; }
.prompt-row__ico--recipe::after { content: ""; position: absolute; left: 10px; right: 10px; top: 18px; height: 2px; background: var(--mb-text); border-radius: 1px; }
@media (max-width: 1023px) { .prompt-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .prompt-row li { padding: var(--s-4); } }

/* ---------- fragments that run out of their frame's foot: the picture takes the height ---------- */
.mb-video, .mb-crop { display: flex; flex-direction: column; }
.mb-video__row { padding: 4px 6px 12px; }
.mb-crop__bar { padding: 2px 6px 12px; order: 0; }
.mb-video__frame, .mb-crop__frame { flex: 1 1 auto; min-height: 0; }
.mb-video__frame img, .mb-crop__frame img { height: 100%; aspect-ratio: auto; }
.mb-crop__box { inset: 9% 12% 22% 12%; }
.mb-sheet, .mb-circle, .mb-settings, .mb-form, .mb-ask, .mb-years, .mb-note-page { overflow: hidden; }
/* the crop tool: one photograph, darkened outside the box (the box's own shadow), never drawn twice */
.mb-crop__frame img { opacity: 1; }
.mb-crop__box { background: none; box-shadow: 0 0 0 999px rgb(29 21 13 / .5); }
.mb-note-page__text:not(:last-of-type)::after { display: none; }
.mb-note-page__text--next { margin-top: 26px; }

/* ---------- check round 1: two boxes deep, plain prompt list, the waitlist phone on the ground ---------- */
/* the phone is one box: its bezel is a border, its screen the paper inside it */
.mb-phone { padding: 0; border: 9px solid #1d150d; border-radius: 50px; overflow: hidden; }
.mb-screen { border-radius: 0; background: none; overflow: visible; }
.mb-phone.mb-paper { background-color: var(--mb-paper); }
/* the recorder and the invite block: no second box inside the card */
.mb-rec { border: 0; background: none; padding: 8px 0 0; }
.mb-circle__invite { background: none; padding: 14px 0; margin: 14px 0 4px; border-top: 1px solid var(--mb-line-soft); border-bottom: 1px solid var(--mb-line-soft); border-radius: 0; }
/* the three first-story ideas: a plain numbered list on hairlines, no boxes */
.prompt-row li { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--s-5) 0 0; }
.prompt-row__ico { width: 40px; height: 40px; }
/* the waitlist phone stands on the page ground, its foot cut by the section with the stage's fade */
.waitlist-art { position: relative; min-height: 0; height: 100%; overflow: hidden; display: flex; justify-content: center;
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 96px), transparent calc(100% - 4px)); mask: linear-gradient(to bottom, #000 calc(100% - 96px), transparent calc(100% - 4px)); }
.waitlist-art .mb-phone { width: min(360px, 100%); height: max-content; flex: none; align-self: flex-start; }
.mb-list__bar { flex-wrap: nowrap; }
.app .mb-row b { white-space: normal; overflow: visible; text-overflow: clip; }

/* sections that need two screens where their cards stack (layout-v4.md: the one page-CSS rule on a section) */
@media (min-width: 640px) and (max-width: 1279px) { #lifestories { --h: 2; } }
@media (max-width: 639px) { #lifestories { --hm: 2; } }
/* 1024 to 1279: the answers in two columns under the heading, so the questions stay one screen */
@media (min-width: 1024px) and (max-width: 1279px) {
  #faq .grid--top > .span-5 { grid-column: 1 / -1; }
  #faq .faq.span-6 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--s-6); }
}
/* check round 2: the hero phone shows one card where the frame is short; the app window's text kept as divs */
@media (max-width: 1279px) { .hero__art .mb-card + .mb-card { display: none; } }
@media (max-width: 639px) { .hero__art .mb-stories { display: none; } }
.mb-open__title, .mb-open__text, .mb-label { display: block; }
.mb-comment div > div { margin-top: 2px; }
.legal-row { display: inline-flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
/* check round 3: the hero phone's feed drawn flat (rows on hairlines), so the frame, the phone and its text
   stay two boxes deep; the smallest phones keep the logo, the button and the menu on one line */
.hero__art .mb-card { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--mb-line-soft); margin: 0 18px; padding: 14px 0 12px; }
.hero__art .mb-card__photo { border-radius: 12px; }
@media (max-width: 400px) {
  .nav__logo { font-size: 18px; gap: 8px; }
  .nav__logo .brand-icon { width: 28px; height: 28px; }
  .nav__actions .btn { padding-inline: 14px; font-size: 15px; }
}
@media (max-width: 340px) { .nav__actions .btn { padding-inline: 12px; font-size: 14px; } .nav__logo { font-size: 17px; } }
/* 320 to 359: the nav's button waits in the menu (the hero's own button is right under the bar), and the two
   splits whose text wraps longest get the second phone screen they need */
@media (max-width: 359px) {
  .nav:not(.is-open) .nav__actions { display: none; }
  #privacy, #circles { --hm: 2; }
}