/* Product sections, linear.app rhythm: a two-column head (title left, one short paragraph right), one big product visual,
   then a quiet features row. The visuals are HTML mocks of the real window (app/…/web/cmd), scaled from a fixed scene. */

/* ───── section frame ───── */
.lx { max-width: 1280px; margin: 0 auto; padding: 160px 40px 0; }
.lx + .lx::before { content: ""; display: block; height: 1px; background: var(--line); margin: -96px 0 96px; }
@media (max-width: 900px) { .lx + .lx::before { margin: -60px 0 60px; } }
@media (max-width: 640px) { .lx + .lx::before { margin: -52px 0 52px; } }
.lx-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding-top: 0; }
.lx-head h2 { font: 560 48px/1.02 var(--display); letter-spacing: -.028em; text-wrap: balance; }
.lx-head p { font-size: 21px; line-height: 1.42; letter-spacing: -.012em; color: color-mix(in srgb, var(--fg) 66%, var(--bg)); max-width: 27em; text-wrap: pretty; padding-top: 4px; }
.lx-vis { position: relative; margin-top: 72px; }
.lx-feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px 40px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.lx-feats li { font-size: 14px; line-height: 1.5; color: var(--fg2); }
.lx-feats li:nth-child(2) { grid-column: 2; }
.lx-feats li b { display: flex; align-items: center; gap: 6px; color: var(--fg); font-weight: 550; letter-spacing: -.01em; margin-bottom: 2px; }
.lx-feats li span { display: block; max-width: 24em; }
.lx-feats .lx-fl { grid-row: span 2; font-size: 13px; color: var(--fg2); padding-top: 1px; }
.lx-feats kbd, .mk-scene kbd { font: 500 11px/1 var(--font); color: var(--fg2); padding: 3px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line2); }
.soon { font: 600 10px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; font-style: normal; color: var(--fg2); padding: 4px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); }

/* how it works keeps its three cards, under the new head */
#how .steps { margin-top: 72px; }

/* ───── video ───── */
.vid-frame { border-radius: 18px; overflow: hidden; background: var(--card2); box-shadow: 0 0 0 1px var(--line2), 0 30px 80px -30px rgba(0,0,0,.35); }
.vid-frame video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1016; background: var(--card2) center / cover no-repeat; }
.vid-frame figcaption { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font-size: 12.5px; color: var(--fg2); }
.vid-btn { position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20,20,22,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); opacity: .75; transition: opacity .2s; }
.vid-btn:hover, .vid-btn:focus-visible { opacity: 1; }
.vid-btn[hidden] { display: none; }
.vid-btn .i-play, .vid-btn.paused .i-pause { display: none; }
.vid-btn.paused .i-play { display: block; }
.lx-video .lx-vis { margin-bottom: 34px; overflow: visible; }
.lx-video .vid-frame { overflow: visible; }
.lx-video video { border-radius: 18px; }

/* ───── scaled scene ───── */
.mk-fit { position: relative; width: 100%; height: calc(var(--h, 700) * var(--s, 1) * 1px); border-radius: 22px; }

.mk-scene { position: absolute; left: 0; top: 0; width: calc(var(--w, 1240) * 1px); height: calc(var(--h, 700) * 1px); transform: scale(var(--s, 1)); transform-origin: 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
  --me: #ff453a; --ag: #0a84ff;
  --m-fg: #1d1d1f; --m-fg2: rgba(60,60,67,.62); --m-fg3: rgba(60,60,67,.34); --m-line: rgba(0,0,0,.08); --m-sel: rgba(0,0,0,.05); --m-card: rgba(0,0,0,.035);
  --m-glass: rgba(255,255,255,.72); --m-pnl: #ffffff; --m-solid: #1d1d1f; --m-solid-fg: #fff;
  --m-shadow: inset 0 0 0 .5px rgba(255,255,255,.7), 0 0 0 .5px rgba(0,0,0,.12), 0 24px 60px -12px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.05);
  --m-desk: radial-gradient(120% 90% at 75% 0%, #f4f4f7 0%, #e7e7ec 60%, #dcdce3 100%);
  color: var(--m-fg); }
.mk-scene > * { position: absolute; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-scene {
  --m-fg: #f5f5f7; --m-fg2: rgba(235,235,245,.6); --m-fg3: rgba(235,235,245,.3); --m-line: rgba(255,255,255,.08); --m-sel: rgba(255,255,255,.07); --m-card: rgba(255,255,255,.04);
  --m-glass: rgba(34,34,38,.72); --m-pnl: #18181b; --m-solid: #f5f5f7; --m-solid-fg: #111113;
  --m-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 0 0 .5px rgba(0,0,0,.6), 0 30px 70px -10px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);
  --m-desk: radial-gradient(120% 90% at 75% 0%, #26262b 0%, #17171a 58%, #111113 100%); } }
:root[data-theme="dark"] .mk-scene {
  --m-fg: #f5f5f7; --m-fg2: rgba(235,235,245,.6); --m-fg3: rgba(235,235,245,.3); --m-line: rgba(255,255,255,.08); --m-sel: rgba(255,255,255,.07); --m-card: rgba(255,255,255,.04);
  --m-glass: rgba(34,34,38,.72); --m-pnl: #18181b; --m-solid: #f5f5f7; --m-solid-fg: #111113;
  --m-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 0 0 .5px rgba(0,0,0,.6), 0 30px 70px -10px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);
  --m-desk: radial-gradient(120% 90% at 75% 0%, #26262b 0%, #17171a 58%, #111113 100%); }

.mk-scene .m-ring { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--me); flex: none; }
.mk-scene mark { background: color-mix(in srgb, #ffd60a 40%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.mk-desk { background: var(--m-desk); border-radius: 22px; overflow: hidden; }
.mk-plain { background: transparent; }

/* ───── the pull, behind the window ───── */
.dk-mb { left: 0; right: 0; top: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: .5px solid var(--m-line); background: color-mix(in srgb, var(--m-pnl) 40%, transparent); }
.dk-mb > span { display: flex; align-items: center; gap: 16px; }
.dk-mb b { width: 14px; height: 14px; border-radius: 4px; background: var(--m-fg); opacity: .8; }
.dk-mb i { width: 34px; height: 6px; border-radius: 3px; background: var(--m-fg3); }
.dk-mb .dk-st i { width: 16px; }
.dk-mb em { font-style: normal; font-size: 12.5px; color: var(--m-fg); font-variant-numeric: tabular-nums; }
.dk-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--m-fg); position: relative; }
.dk-dot::after { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--me); box-shadow: 0 0 6px rgba(255,69,58,.7); }
.dk-line { left: 1145px; top: 24px; width: 3px; height: 470px; border-radius: 2px; background: var(--m-fg); opacity: .8; }
.dk-pill { left: 1146px; top: 494px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 7px 14px; border-radius: 20px; background: var(--m-solid); color: var(--m-solid-fg); white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.dk-pill b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-pill small { font-size: 10.5px; opacity: .6; font-variant-numeric: tabular-nums; }
.dk-rows { left: 1036px; top: 120px; display: flex; flex-direction: column; gap: 92px; align-items: flex-end; width: 100px; }
.dk-rows span { font-size: 12px; font-weight: 500; color: var(--m-fg2); white-space: nowrap; }

/* ───── the window: two glass islands ───── */
.m-win { left: 36px; top: 62px; width: 1010px; display: flex; flex-direction: column; gap: 10px; }
.m-isl { position: relative; border-radius: 22px; background: var(--m-glass); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: var(--m-shadow); }
.w-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 0; }
.w-filters { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--m-card); }
.w-filters span { font-size: 13px; font-weight: 500; color: var(--m-fg2); padding: 5px 10px; border-radius: 8px; }
.w-filters span.m-on { color: var(--m-fg); background: var(--m-sel); box-shadow: inset 0 0 0 .5px var(--m-line); }
.w-filters i { font-style: normal; color: var(--m-fg3); margin-left: 3px; font-variant-numeric: tabular-nums; }
.w-live { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 9px; font-size: 12.5px; font-weight: 500; color: var(--m-fg); background: var(--m-card); box-shadow: inset 0 0 0 .5px var(--m-line); }
.w-live svg { color: var(--ag); }
.lring { width: 13px; height: 13px; border-radius: 50%; background: conic-gradient(var(--ag) 0 62%, color-mix(in srgb, var(--ag) 22%, transparent) 62% 100%); -webkit-mask: radial-gradient(circle, transparent 4.4px, #000 4.6px); mask: radial-gradient(circle, transparent 4.4px, #000 4.6px); }

.w-strip { position: relative; height: 190px; overflow: hidden; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
.w-rail { position: absolute; left: 0; right: 0; top: 74px; height: 1px; background: var(--m-line); }
.w-day { position: absolute; left: 10px; top: 65px; font-size: 11px; font-weight: 600; color: var(--m-fg2); padding: 2px 7px; border-radius: 7px; background: var(--m-pnl); box-shadow: inset 0 0 0 .5px var(--m-line); }
.m-mo { position: absolute; top: 18px; width: 176px; margin: 0; }
.m-mo .m-th { height: 112px; }
.m-mo figcaption { margin-top: 10px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.m-mo figcaption b { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.m-mo figcaption small { font-size: 11.5px; color: var(--m-fg2); font-variant-numeric: tabular-nums; }
.m-mo.m-sel .m-th { box-shadow: 0 0 0 2.5px var(--ag), 0 6px 18px rgba(0,0,0,.18); }
.m-mo.m-fade { opacity: .55; }
.m-gap { position: absolute; top: 65px; transform: translateX(-50%); font-size: 11.5px; color: var(--m-fg2); padding: 2px 7px; border-radius: 7px; background: var(--m-pnl); box-shadow: inset 0 0 0 .5px var(--m-line); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* thumbnails: tiny real-looking app windows */
.m-th { position: relative; border-radius: 11px; overflow: hidden; background: var(--m-pnl); box-shadow: 0 0 0 .5px var(--m-line), 0 4px 14px rgba(0,0,0,.1); }
.m-th .m-ring { position: absolute; left: 9px; bottom: 9px; background: var(--m-pnl); border-radius: 50%; }
.th-call { background: #1c1c1f; display: flex; gap: 6px; padding: 14px 12px; align-items: stretch; }
.th-call .m-av { flex: 1; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; }
.th-call .m-a1 { background: linear-gradient(160deg, #6d5bd0, #3c2f8a); }
.th-call .m-a2 { background: linear-gradient(160deg, #3a3a40, #26262b); font-size: 11px; font-weight: 500; color: rgba(255,255,255,.7); }
.th-call.m-sm { width: 132px; height: 84px; padding: 10px; flex: none; border-radius: 10px; }
.th-call.m-sm .m-av { font-size: 11px; }
.th-inv { background: var(--m-card); display: grid; place-items: center; }
.th-inv .m-paper { width: 112px; height: 92px; margin-top: 18px; border-radius: 5px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; color: #1d1d1f; }
.th-inv .m-paper b { font-size: 9px; font-weight: 700; }
.th-inv .m-paper i { height: 4px; border-radius: 2px; background: #e4e4e8; }
.th-inv .m-paper i.m-s { width: 60%; }
.th-inv .m-paper em { font-style: normal; font-size: 9px; font-weight: 700; align-self: flex-end; }
.th-doc { padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; }
.th-doc i { height: 5px; border-radius: 3px; background: var(--m-line); }
.th-doc i.m-h { width: 50%; height: 8px; background: var(--m-fg3); margin-bottom: 4px; }
.th-doc i.m-s { width: 70%; }
.th-sync { background: #1c1c1f; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 10px; }
.th-sync span { border-radius: 5px; background: linear-gradient(160deg, #3c3c44, #2a2a30); }
.th-sync span:nth-child(1) { background: linear-gradient(160deg, #3d7f6e, #1f4a40); }
.th-sync span:nth-child(4) { background: linear-gradient(160deg, #8a5b3a, #4d3020); }
.th-mail { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.th-mail i { height: 12px; border-radius: 4px; background: var(--m-card); box-shadow: inset 0 0 0 .5px var(--m-line); }

/* bottom island */
.w-q { display: flex; align-items: center; gap: 11px; height: 50px; padding: 0 18px; border-bottom: .5px solid var(--m-line); color: var(--m-fg2); font-size: 16px; }
.w-q span { flex: 1; letter-spacing: -.01em; }
.w-q kbd { font-size: 11px; }
.w-det { display: flex; gap: 18px; align-items: flex-start; padding: 16px 20px 14px; }
.w-say { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.w-say b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.w-say span { font-size: 13.5px; color: var(--m-fg2); }
.w-say small { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--m-fg); }
.w-say small svg { color: var(--m-fg2); }
.w-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--m-fg2); font-variant-numeric: tabular-nums; }
.w-meta span { display: inline-flex; align-items: center; gap: 6px; }
.w-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px; }
.w-col { border-radius: 14px; background: var(--m-card); box-shadow: inset 0 0 0 .5px var(--m-line); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.w-col > small { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--m-fg3); padding: 4px 8px 6px; }
.m-td, .m-rn { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 9px; border-radius: 9px; font-size: 13px; letter-spacing: -.01em; }
.m-td span { flex: 1; }
.m-td em, .m-rn em { font-style: normal; font-size: 11.5px; color: var(--m-fg2); font-variant-numeric: tabular-nums; }
.m-td.m-on { background: var(--m-sel); }
.m-rn { height: 44px; }
.m-rn > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.m-rn b { font-weight: 500; font-size: 13px; }
.m-rn small { font-size: 11.5px; color: var(--m-fg2); }
.rring { width: 16px; height: 16px; flex: none; border-radius: 50%; background: conic-gradient(var(--ag) 0 var(--p), color-mix(in srgb, var(--ag) 20%, transparent) var(--p) 100%); -webkit-mask: radial-gradient(circle, transparent 5.4px, #000 5.7px); mask: radial-gradient(circle, transparent 5.4px, #000 5.7px); }
.rdone { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--ag); color: #fff; display: grid; place-items: center; }
.w-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 16px; }
.m-kept { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--m-fg2); }
.m-acts { display: flex; align-items: center; gap: 12px; }
.m-launch { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px 0 14px; border-radius: 9px; background: var(--m-solid); color: var(--m-solid-fg); font-size: 13.5px; font-weight: 600; }
.m-launch svg { opacity: .6; }
.m-sep { width: 1px; height: 16px; background: var(--m-line); }
.m-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--m-fg2); }
.m-more kbd { color: var(--m-fg2); }

/* ───── standalone panels (search · run · launch) ───── */
.m-pnl { border-radius: 20px; background: var(--m-pnl); box-shadow: var(--m-shadow); overflow: hidden; }
/* search + spotted */
.p-search { left: 0; top: 0; width: 720px; height: 520px; }
.w-q.m-big { height: 58px; font-size: 18px; color: var(--m-fg); padding: 0 22px; }
.w-q.m-big svg { color: var(--m-fg2); }
.w-q.m-big span { flex: none; }
.m-cur { display: inline-block; width: 2px; height: 20px; background: var(--ag); border-radius: 1px; margin-left: -9px; animation: mk-blink 1.1s steps(1) infinite; }
@keyframes mk-blink { 50% { opacity: 0; } }
.sr-chips { display: flex; align-items: center; gap: 8px; padding: 14px 18px 8px; flex-wrap: nowrap; }
.sr-chips .m-pc, .sr-chips .m-ac { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 5px; border-radius: 15px; background: var(--m-card); box-shadow: inset 0 0 0 .5px var(--m-line); font-size: 13px; white-space: nowrap; }
.sr-chips .m-ac { padding-left: 8px; }
.sr-chips .m-pc i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #6d5bd0, #3c2f8a); }
.sr-chips b { font-weight: 500; }
.sr-chips em { font-style: normal; color: var(--m-fg3); font-size: 12px; font-variant-numeric: tabular-nums; }
.sr-row { display: flex; gap: 14px; align-items: center; margin: 2px 10px; padding: 12px 12px; border-radius: 12px; }
.sr-row.m-on { background: var(--m-sel); }
.sr-row > svg { flex: none; }
.sr-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sr-row b { font-size: 13.5px; font-weight: 600; }
.sr-row b small { font-weight: 400; color: var(--m-fg2); margin-left: 6px; font-size: 13px; }
.sr-row q { quotes: none; font-size: 13.5px; color: var(--m-fg); opacity: .86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-row time { font-size: 12px; color: var(--m-fg2); white-space: nowrap; font-variant-numeric: tabular-nums; align-self: flex-start; padding-top: 2px; }
.sr-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 22px; font-size: 12px; color: var(--m-fg3); border-top: .5px solid var(--m-line); font-variant-numeric: tabular-nums; }
.p-spot { left: 740px; top: 56px; width: 480px; height: 410px; padding: 10px; }
.sp-h { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 12px 10px; }
.sp-h b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sp-h small { font-size: 12px; color: var(--m-fg2); }
.m-sp { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; }
.m-sp.m-on { background: var(--m-sel); }
.m-sp > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-sp b { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.m-sp small { font-size: 12.5px; color: var(--m-fg2); }
.m-sp em { font-style: normal; font-size: 12px; color: var(--m-fg2); }
.sp-proof { margin: 14px 12px 0; padding: 14px 16px; border-radius: 14px; background: var(--m-card); box-shadow: inset 0 0 0 .5px var(--m-line); display: flex; flex-direction: column; gap: 6px; }
.sp-proof small { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--m-fg3); }
.sp-proof q { quotes: none; font-size: 14px; line-height: 1.45; }
.sp-proof span { font-size: 12px; color: var(--m-fg2); }

/* run view */
.p-run { left: 60px; top: 10px; width: 1120px; height: 420px; }
.rv-h { display: flex; align-items: center; gap: 13px; padding: 18px 20px 16px; }
.rv-h > span:nth-of-type(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-h b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.rv-h small { font-size: 13px; color: var(--m-fg2); }
.rv-h .m-back { color: var(--m-fg2); }
.rv-h .m-ag { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--ag); }
.btn-s { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 9px; font-size: 13px; font-weight: 500; background: var(--m-card); box-shadow: inset 0 0 0 .5px var(--m-line); }
.btn-s kbd { font-size: 10.5px; padding: 2px 4px; }
.rv-prog { margin: 0 20px; height: 2px; border-radius: 1px; background: var(--m-line); overflow: hidden; }
.rv-prog i { display: block; height: 100%; width: 62%; background: var(--ag); border-radius: 1px; }
.rv-body { display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px; padding: 18px 20px; }
.rv-steps { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rv-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px; border-radius: 11px; color: var(--m-fg3); }
.rv-steps li > i { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px currentColor; position: relative; }
.rv-steps li > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rv-steps b { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.rv-steps small { font-size: 12.5px; }
.rv-steps time { font-size: 12px; font-variant-numeric: tabular-nums; }
.rv-steps li.m-done { color: var(--m-fg2); }
.rv-steps li.m-done b { color: var(--m-fg); }
.rv-steps li.m-done > i { background: var(--ag); box-shadow: none; }
.rv-steps li.m-done > i::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 3px; height: 6.5px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.rv-steps li.m-run { color: var(--m-fg2); background: var(--m-sel); }
.rv-steps li.m-run b { color: var(--m-fg); }
.rv-steps li.m-run > i { box-shadow: none; border: 1.6px solid color-mix(in srgb, var(--ag) 25%, transparent); border-top-color: var(--ag); animation: mk-spin .9s linear infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }
.rv-out { border-radius: 14px; background: var(--m-card); box-shadow: inset 0 0 0 .5px var(--m-line); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; }
.rv-out > small { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--m-fg3); }
.rv-out p:first-of-type { font-size: 12.5px; color: var(--m-fg2); padding-bottom: 8px; border-bottom: .5px solid var(--m-line); }
.rv-out p:first-of-type b { font-weight: 500; color: var(--m-fg); }
.rv-out .m-cur { height: 16px; margin-left: 2px; vertical-align: -3px; }

/* launch + ⌘K */
.p-doc { left: 0; top: 0; width: 760px; height: 520px; display: flex; flex-direction: column; }
.dc-h { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; border-bottom: .5px solid var(--m-line); }
.dc-h > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.dc-h b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.dc-h small { font-size: 13px; color: var(--m-fg2); }
.dc-body { flex: 1; padding: 20px 26px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.55; max-width: 620px; }
.dc-meta { font-size: 13px; color: var(--m-fg2); line-height: 1.7; padding-bottom: 10px; border-bottom: .5px solid var(--m-line); }
.dc-meta b { display: inline-block; width: 64px; font-weight: 500; color: var(--m-fg2); }
.dc-foot { display: flex; align-items: center; gap: 14px; justify-content: flex-end; padding: 14px 20px 16px; border-top: .5px solid var(--m-line); }
.p-k { left: 720px; top: 60px; width: 440px; padding: 8px; border-radius: 16px; }
.k-h { padding: 8px 12px 8px; font-size: 12.5px; color: var(--m-fg2); }
.k-i { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-radius: 9px; font-size: 14px; }
.k-i svg { color: var(--m-fg2); flex: none; }
.k-i.m-on { background: var(--m-sel); }
.k-i .kk, .k-i kbd.ret { margin-left: auto; display: inline-flex; gap: 3px; }
.k-i kbd.ret { padding: 3px 4px; }
.k-sep { display: block; height: .5px; background: var(--m-line); margin: 6px 8px; }
.k-q { margin: 6px -8px -8px; padding: 13px 20px; border-top: .5px solid var(--m-line); font-size: 13.5px; color: var(--m-fg3); }

/* ───── responsive ───── */
@media (max-width: 900px) {
  .lx { padding: 104px 24px 0; }
  .lx-head { grid-template-columns: 1fr; gap: 16px; }
  .lx-head h2 { font-size: 38px; }
  .lx-head p { font-size: 18px; }
  .lx-vis { margin-top: 44px; }
  .lx-feats { grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 44px; }
  .lx-feats .lx-fl { grid-column: 1 / -1; grid-row: auto; }
  .lx-feats li:nth-child(2) { grid-column: auto; }
  #how .steps { margin-top: 44px; }
}
@media (max-width: 640px) {
  .lx { padding: 88px 16px 0; }
  .lx-head h2 { font-size: 31px; letter-spacing: -.025em; }
  .lx-head p { font-size: 16.5px; }
  .lx-vis { margin-top: 32px; }
  .mk-fit { border-radius: 16px; }
  .lx-feats { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .vid-frame, .lx-video video { border-radius: 12px; }
  .vid-frame figcaption { bottom: -40px; }
  .lx-video .lx-vis { margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) { .m-cur, .rv-steps li.m-run > i { animation: none; } }
@media (max-width: 747px) { .mk-fit { overflow-x: clip; } .mk-scene .p-spot { left: 236px; top: 548px; } .mk-scene .p-k { left: 276px; top: 300px; } }