/* about.css — page-local to About: the "by the numbers" strip, the founder-story
   timeline, and the era device mockups (paper → iOS 1.0 → 2.0 → web). Ported
   from About 10MB.html's <style>. */

.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 28px 0 0; max-width: 66ch; }
.num-card { padding: 18px 16px; background: var(--tmb-surface); border: 1px solid var(--tmb-border); border-radius: var(--tmb-radius-xl); box-shadow: var(--tmb-shadow-xs); }
.num-card .v { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--tmb-brand-dark-from); font-variant-numeric: tabular-nums; line-height: 1; }
.num-card .k { margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--tmb-fg-3); line-height: 1.35; }
@media (max-width: 720px) { .nums { grid-template-columns: repeat(2, 1fr); } }

/* founder story timeline */
.prose .story-intro { font-size: 17px; line-height: 1.72; color: var(--tmb-fg-2); margin: 16px 0 0; max-width: 62ch; text-wrap: pretty; }
.prose .story-intro em { color: var(--tmb-fg-1); font-style: italic; }
.story-time { position: relative; margin: 38px 0 0; padding-left: 38px; }
.story-time::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 34px; width: 2px; background: linear-gradient(var(--tmb-brand-light-from), var(--tmb-brand-dark-from)); border-radius: 2px; }
.era { position: relative; padding-bottom: 48px; }
.era:last-child { padding-bottom: 8px; }
.era::before { content: ""; position: absolute; left: -38px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--tmb-surface); border: 3px solid var(--tmb-brand-light-to); box-shadow: 0 0 0 4px var(--tmb-bg), var(--tmb-glow-brand-sm); }
.era .yr { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tmb-brand-light-to); font-variant-numeric: tabular-nums; }
.era .era-h { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--tmb-fg-1); margin: 6px 0 0; }
.era .era-p { font-size: 15.5px; line-height: 1.7; color: var(--tmb-fg-2); margin: 10px 0 0; max-width: 58ch; text-wrap: pretty; }
.era .era-p em { color: var(--tmb-fg-1); font-style: italic; }
.era .era-visual { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.mk-tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 12.5px; font-weight: 600; color: var(--tmb-fg-3); }
.mk-tag i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

/* Era 1 · paper */
.mk-paper { position: relative; width: 100%; max-width: 430px; background: #fbf6ea; border-radius: 6px; padding: 18px 20px 20px; box-shadow: var(--tmb-shadow-lg), inset 0 0 0 1px rgba(120,90,40,.10); transform: rotate(-1.5deg); transition: transform .35s var(--tmb-ease-out); font-family: 'Caveat', 'Plus Jakarta Sans', cursive; }
.mk-paper:hover { transform: rotate(0deg); }
.mk-paper::after { content: ""; position: absolute; left: 44px; top: 0; bottom: 0; width: 1.5px; background: rgba(200,50,50,.30); }
.pp-head { margin-bottom: 14px; padding-left: 8px; }
.pp-title { font-size: 27px; font-weight: 700; color: #26324e; line-height: 1; }
.pp-sub { font-size: 15px; color: #8a8f99; margin-top: 1px; }
.pp-body { display: flex; gap: 12px; padding-left: 8px; }
.pp-hours { display: flex; flex-direction: column; gap: 6px; padding-top: 1px; }
.pp-hours span { height: 30px; display: flex; align-items: center; font-size: 16px; color: #9a8f7a; line-height: 1; }
.pp-rows { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pp-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 30px; }
.pp-cell { border: 1.5px solid rgba(38,50,78,.5); border-radius: 3px; }
.pp-cell.f1 { background: rgba(30,58,138,.55); border-color: rgba(30,58,138,.6); }
.pp-cell.f2 { background: rgba(176,120,40,.5); border-color: rgba(176,120,40,.55); }
.pp-cell.f3 { background: rgba(71,85,105,.42); }
.pp-cell.f4 { background: rgba(21,128,61,.4); border-color: rgba(21,128,61,.5); }
.pp-row:nth-child(odd) .pp-cell:nth-child(3n) { transform: rotate(.9deg); }
.pp-row:nth-child(even) .pp-cell:nth-child(2n) { transform: rotate(-.8deg); }

/* shared phone */
.mk-stage { display: inline-block; padding: 18px 30px; border-radius: 26px; background: radial-gradient(circle at 50% 26%, rgba(0,159,255,.09), transparent 68%); }
.mk-stage.v2 { background: radial-gradient(circle at 50% 26%, rgba(139,92,246,.13), transparent 68%); }
.mk-phone { position: relative; width: 206px; background: #111319; border-radius: 30px; padding: 8px; box-shadow: var(--tmb-shadow-xl); transition: transform .35s var(--tmb-ease-out); }
.mk-phone:hover { transform: translateY(-5px); }
.mk-phone .scr { position: relative; height: 418px; border-radius: 23px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.mk-phone .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 78px; height: 18px; background: #111319; border-radius: 0 0 11px 11px; z-index: 4; }
.v1-top { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 10px; font-weight: 700; color: #111; flex-shrink: 0; }
.v1-top .dots { display: flex; gap: 3px; }
.v1-top .dots i { width: 4px; height: 4px; border-radius: 50%; background: #111; }
.v1-nav { padding: 7px 13px 9px; border-bottom: 1px solid #e5e5ea; font-size: 16px; font-weight: 700; color: #111; letter-spacing: -.01em; flex-shrink: 0; }
.v1-grid { flex: 1; padding: 11px 13px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 4px; }
.v1-b { border-radius: 3px; background: #e9e9ee; }
.v1-b.a { background: #007aff; }
.v1-b.b { background: #34c759; }
.v1-b.c { background: #ff9500; }
.v1-b.d { background: #8e8e93; }
.v1-tab { height: 44px; border-top: 1px solid #e5e5ea; display: flex; align-items: center; justify-content: space-around; flex-shrink: 0; }
.v1-tab i { width: 22px; height: 22px; border-radius: 6px; background: #c7c7cc; }
.v1-tab i.on { background: #007aff; }
.mk-phone.v2 .scr { background: #0c1424; }
.v2-top { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.v2-top .dots { display: flex; gap: 3px; }
.v2-top .dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.v2-hero { padding: 12px 14px 20px; background: linear-gradient(135deg, #0ea5e9, #7c3aed); color: #fff; }
.v2-hero .t { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.v2-hero .s { font-size: 10.5px; opacity: .85; margin-top: 2px; }
.v2-seg { margin: -12px 13px 0; background: #16233c; border-radius: 11px; padding: 3px; display: flex; gap: 3px; position: relative; z-index: 1; }
.v2-seg span { flex: 1; text-align: center; font-size: 9.5px; font-weight: 700; color: #7c8bab; padding: 6px 0; border-radius: 8px; }
.v2-seg span.on { background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; }
.v2-grid { flex: 1; padding: 14px 13px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 6px; }
.v2-b { border-radius: 8px; background: #16233c; }
.v2-b.f { background: linear-gradient(135deg, #22d3ee, #0ea5e9); box-shadow: 0 3px 9px -2px rgba(14,165,233,.6); }
.v2-b.w { background: linear-gradient(135deg, #818cf8, #6366f1); box-shadow: 0 3px 9px -2px rgba(99,102,241,.55); }
.v2-b.br { background: linear-gradient(135deg, #c084fc, #a855f7); box-shadow: 0 3px 9px -2px rgba(168,85,247,.55); }
.v2-b.m { background: linear-gradient(135deg, #4ade80, #22c55e); box-shadow: 0 3px 9px -2px rgba(34,197,94,.5); }
.v2-foot { padding: 11px 15px; background: #0a1120; display: flex; justify-content: space-between; flex-shrink: 0; }
.v2-foot .st .k { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #7c8bab; }
.v2-foot .st .v { font-size: 15px; font-weight: 800; color: #fff; margin-top: 2px; letter-spacing: -.02em; white-space: nowrap; }

/* Era 4 · browser (current) */
.mk-browser { width: 100%; max-width: 500px; border-radius: 15px; overflow: hidden; background: var(--tmb-surface); border: 1px solid var(--tmb-border); box-shadow: var(--tmb-shadow-xl); transition: transform .35s var(--tmb-ease-out); }
.mk-browser:hover { transform: translateY(-5px); }
.bw-bar { height: 40px; background: var(--tmb-surface-soft); border-bottom: 1px solid var(--tmb-border); display: flex; align-items: center; gap: 13px; padding: 0 15px; }
.bw-dots { display: flex; gap: 6px; }
.bw-dots i { width: 11px; height: 11px; border-radius: 50%; }
.bw-dots i:nth-child(1) { background: #ff5f57; }
.bw-dots i:nth-child(2) { background: #febc2e; }
.bw-dots i:nth-child(3) { background: #28c840; }
.bw-url { flex: 1; max-width: 260px; height: 23px; background: var(--tmb-bg); border: 1px solid var(--tmb-border); border-radius: 999px; display: flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 11px; color: var(--tmb-fg-3); font-weight: 600; }
.bw-url svg { width: 11px; height: 11px; color: var(--tmb-fg-4); flex-shrink: 0; }
.bw-body { padding: 20px; }
.dc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.dc-head .t { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--tmb-fg-1); }
.dc-head .d { font-size: 12px; font-weight: 600; color: var(--tmb-fg-3); }
.dc-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.dc-b { aspect-ratio: 1; border-radius: 28%; }
.dc-b.focus { background: linear-gradient(135deg, var(--tmb-brand-light-from), var(--tmb-brand-light-to)); box-shadow: 0 4px 11px -3px rgba(0,159,255,.42); }
.dc-b.work { background: var(--tmb-brand-dark-from); box-shadow: 0 4px 9px -3px rgba(10,42,115,.32); }
.dc-b.break { background: linear-gradient(135deg, #c084fc, #a855f7); box-shadow: 0 4px 11px -3px rgba(168,85,247,.4); }
.dc-b.move { background: #22c55e; box-shadow: 0 4px 9px -3px rgba(34,197,94,.38); }
.dc-b.meal { background: #f59e0b; box-shadow: 0 4px 9px -3px rgba(245,158,11,.38); }
.dc-b.empty { background: var(--tmb-block-empty); }
.dc-foot { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--tmb-border); display: flex; gap: 28px; }
.dc-foot .st .k { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tmb-fg-3); }
.dc-foot .st .v { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* join / invite */
.prose .join { margin: 42px 0 0; padding: 26px 28px; border-radius: var(--tmb-radius-2xl); background: linear-gradient(135deg, rgba(0,191,255,.10), rgba(0,62,160,.06)); border: 1px solid rgba(0,159,255,.22); }
.prose .join p { font-size: 16.5px; line-height: 1.65; color: var(--tmb-fg-1); margin: 0; max-width: 60ch; font-weight: 500; }
.prose .join p strong { font-weight: 800; }
.prose .join-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; height: 50px; padding: 0 26px; border-radius: var(--tmb-radius-pill); background: var(--tmb-grad-dark); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 16px 36px -12px rgba(0,62,160,.5); transition: transform .18s var(--tmb-ease-out), box-shadow .2s; }
.prose .join-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -12px rgba(0,62,160,.62); }
.prose .join-btn svg { width: 18px; height: 18px; }

@media (max-width: 520px) { .mk-paper, .mk-browser { max-width: 100%; } .mk-stage { padding: 14px; } }