/*
  Mobile layout — Figma 251:312 "Coming soon — Mobile 390 (Hive bleed)".
  Design units inside the 390×1307 stage; the hive sits below the panel and
  the ink runs to the bottom of the page. Cells are 242 (= 480 × 0.504).
*/
.m-topbar { position: absolute; left: 0; top: 12px; width: 390px; height: 52px; padding: 0 20px; display: flex; align-items: center; }
.m-topbar .brand { gap: 8px; }
.m-topbar .brand__zee { width: 36px; height: 36px; }
.m-topbar .brand__word { font-size: 22px; letter-spacing: -0.33px; line-height: 27px; }
.m-topbar .chip { margin-left: auto; }

.m-panel { position: absolute; left: 12px; top: 76px; width: 366px; height: 559px; background: var(--ink); border-radius: 25px; }
.m-hive { position: absolute; left: 0; top: 571px; width: 390px; height: 736px; background: var(--ink); }
.m-fillet { position: absolute; top: 559px; width: 12px; height: 12px; }
.m-fillet--left { left: 0; }
.m-fillet--right { left: 378px; transform: scaleX(-1); }

.m-copy { position: absolute; left: 37.5px; top: 122px; width: 315px; display: flex; flex-direction: column; align-items: flex-start; gap: 14.4px; color: var(--cream); }
.m-chip { padding: 5.4px 10.8px; border-radius: 9px; font-size: 11.7px; letter-spacing: 0.234px; line-height: 14px; color: var(--muted); }
.m-h1 { font-size: 32.4px; font-weight: 500; line-height: 1.04; letter-spacing: -0.648px; }
.m-lede { font-size: 14.4px; font-weight: 400; line-height: 1.4; opacity: 0.9; }

.notify--stacked { flex-direction: column; align-items: stretch; width: 100%; gap: 14.4px; }
.notify--stacked .notify__input { width: 100%; height: 52.2px; border-radius: 9px; padding: 0 18px; font-size: 15.3px; }
.notify--stacked .notify__btn { width: 100%; height: 52.2px; border-radius: 9px; padding: 9px 9px 9px 18px; justify-content: space-between; font-size: 15.3px; }
.notify--stacked .notify__dot { width: 34.2px; height: 34.2px; }
.m-note { width: 100%; text-align: center; font-size: 11.7px; line-height: 14px; }

.m-comb { position: absolute; left: -19px; top: 571px; overflow: visible; }
.m-zee { position: absolute; left: 101.5px; top: 835px; width: 187px; height: 187px; }

.m-cell { width: 242px; height: 242px; }
.m-cell .cell__hit { inset: 2.2px 16.2px; }
.m-cell .hint { top: 78px; gap: 6.6px; }
.m-cell .hint svg { width: 39.6px; height: 39.6px; }
.m-cell .hint__name { font-size: 16.5px; line-height: 20px; }
.m-cell .hint__promise { font-size: 12.1px; line-height: 15px; }
/* Same 400×400 preview as desktop, scaled into the 242 cell. */
.m-cell .preview { left: 20.2px; top: 20.2px; transform: scale(0.504); transform-origin: 0 0; }

.m-footer { position: absolute; left: 0; top: 1274px; width: 390px; text-align: center; font-size: 12px; line-height: 15px; color: var(--mint); }