/* Multi-platform Ads proposal: components on top of the v4 app tokens */
.mp-plat{display:flex;align-items:center;gap:10px;min-width:0}
.mp-plat .ds-body{font-weight:500}
.mp-grid{display:grid;gap:16px;grid-template-columns:1fr}
@container main (min-width:48rem){.mp-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.mp-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.mp-g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mp-tile{border:1px solid var(--border);border-radius:16px;background:var(--background);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.mp-tile.sel{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.mp-tile.dim{opacity:.6}
.mp-tile .row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mp-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;line-height:20px}
.mp-kv dt{color:var(--muted-foreground)}.mp-kv dd{margin:0;color:var(--foreground);font-variant-numeric:tabular-nums}
.mp-fit{display:inline-flex;gap:3px;align-items:center}
.mp-fit i{width:8px;height:8px;border-radius:2px;background:var(--muted)}
.mp-fit i.on{background:var(--primary)}
.mp-fit.g i.on{background:var(--success)}
.mp-fit.w i.on{background:var(--warning)}
.mp-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.mp-table th{font:500 12px/16px var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted-foreground);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.mp-table td{padding:12px;border-top:1px solid var(--border);vertical-align:top}
.mp-table tr:first-child td{border-top:0}
.mp-table td.n,.mp-table th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-table tr.dim td{opacity:.6}
.mp-table tr.hl td{background:color-mix(in oklab,var(--primary) 5%,transparent)}
.mp-split{display:flex;height:28px;border-radius:10px;overflow:hidden;gap:2px;background:var(--background)}
.mp-split>span{display:flex;align-items:center;padding:0 10px;font:600 12.5px/1 var(--font-sans,Inter);color:#fff;white-space:nowrap;overflow:hidden}
.mp-split .core{background:var(--primary)}
.mp-split .test{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--primary) 55%,#fff) 0 6px,color-mix(in oklab,var(--primary) 45%,#fff) 6px 12px);color:var(--foreground)}
.mp-split .free{background:var(--muted);color:var(--muted-foreground)}
.mp-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted-foreground)}
.mp-legend b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mp-test{border:1px solid var(--border);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:var(--background)}
.mp-test .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.mp-rule{border-left:3px solid var(--primary);padding:2px 0 2px 12px}
.mp-prog{position:relative;height:8px;border-radius:999px;background:var(--muted);overflow:hidden}
.mp-prog>i{position:absolute;inset:0 auto 0 0;background:var(--primary);border-radius:999px}
.mp-prog.g>i{background:var(--success)}.mp-prog.w>i{background:var(--warning)}
.mp-check{display:flex;flex-direction:column}
.mp-check>div{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border);align-items:flex-start}
.mp-check>div:first-child{border-top:0;padding-top:0}
.mp-st{flex:none;width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--font-sans,Inter);margin-top:1px}
.mp-st.ok{background:color-mix(in oklab,var(--success) 14%,transparent);color:var(--success)}
.mp-st.todo{background:color-mix(in oklab,var(--warning) 14%,transparent);color:var(--warning)}
.mp-st.wait{background:var(--muted);color:var(--muted-foreground)}
.mp-st.us{background:color-mix(in oklab,var(--primary) 12%,transparent);color:var(--primary)}
.mp-st.no{background:color-mix(in oklab,var(--destructive) 12%,transparent);color:var(--destructive)}
.mp-tree{font-size:13.5px;line-height:20px}
.mp-tree .lvl{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--background)}
.mp-tree .lvl+.lvl{margin-top:8px}
.mp-tree .in{margin-left:18px;position:relative}
.mp-tree .in:before{content:"";position:absolute;left:-12px;top:-8px;bottom:50%;border-left:1px solid var(--border-strong,#ccc);border-bottom:1px solid var(--border-strong,#ccc);width:10px;border-bottom-left-radius:6px}
.mp-tree .obj{font:600 11.5px/16px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--primary)}
.mp-tree code,.mp-code{font:12.5px/18px var(--font-mono);color:var(--foreground);background:var(--muted);padding:1px 5px;border-radius:5px}
.mp-tree ul{margin:6px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.mp-tree li{display:contents}
.mp-tree li span:first-child{color:var(--muted-foreground);white-space:nowrap}
.mp-note{border-radius:14px;padding:12px 14px;background:var(--muted);font-size:14px;line-height:20px;color:var(--foreground)}
.mp-note.warn{background:color-mix(in oklab,var(--warning) 10%,var(--background))}
.mp-note.info{background:color-mix(in oklab,var(--primary) 7%,var(--background))}
.mp-note.bad{background:color-mix(in oklab,var(--destructive) 8%,var(--background))}
.mp-note.good{background:color-mix(in oklab,var(--success) 9%,var(--background))}
.mp-assets{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.mp-asset{display:flex;flex-direction:column;gap:6px}
.mp-asset .frame{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--muted);position:relative}
.mp-asset .frame svg{display:block;width:100%;height:100%}
.mp-asset .lab{font-size:12.5px;line-height:16px;color:var(--muted-foreground)}
.mp-asset .lab b{color:var(--foreground);font-weight:500}
.mp-ratio{position:absolute;left:6px;top:6px;font:600 10.5px/1 var(--font-mono);background:rgba(0,0,0,.6);color:#fff;padding:3px 5px;border-radius:5px}
.mp-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mp-play:after{content:"";width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));margin-left:4px}
.mp-dur{position:absolute;right:6px;bottom:6px;font:600 10.5px/1 var(--font-mono);background:rgba(0,0,0,.6);color:#fff;padding:3px 5px;border-radius:5px}
.mp-chips{display:flex;flex-wrap:wrap;gap:6px}
.mp-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:13px;line-height:18px;background:var(--background)}
.mp-chip.on{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 8%,var(--background));color:var(--primary)}
.mp-chip.off{color:var(--muted-foreground);text-decoration:line-through}
.mp-big{font:600 32px/36px var(--font-sans,Inter);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mp-big small{font-size:16px;font-weight:500;color:var(--muted-foreground);letter-spacing:0}
.mp-vs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.mp-vs>div{background:var(--background);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.mp-bars{display:flex;flex-direction:column;gap:10px}
.mp-bars .b{display:grid;grid-template-columns:150px 1fr 120px;gap:12px;align-items:center;font-size:14px}
.mp-bars .t{height:12px;border-radius:999px;background:var(--muted);position:relative;overflow:hidden}
.mp-bars .t i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--primary)}
.mp-bars .t i.ci{background:color-mix(in oklab,var(--primary) 25%,transparent)}
.mp-bars .t .m{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--foreground)}
.mp-sep{height:1px;background:var(--border);margin:4px 0}
.mp-mini{font-size:12.5px;line-height:17px;color:var(--muted-foreground)}
.mp-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.mp-tabs a{padding:8px 12px;font-size:14px;color:var(--muted-foreground);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:8px;align-items:center}
.mp-tabs a.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}
.mp-row{display:flex;gap:12px;align-items:center;justify-content:space-between}
.mp-stack{display:flex;flex-direction:column;gap:12px}
.mp-stack.s{gap:6px}
.mp-flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mp-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.mp-ladder>div{background:var(--background);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.mp-ladder>div.now{background:color-mix(in oklab,var(--primary) 6%,var(--background))}
/* ---------- ad previews ---------- */
.pv{border:1px solid var(--border);border-radius:16px;background:#fff;overflow:hidden;font-family:Inter,system-ui,sans-serif;color:#0d0d0d}
.pv-cap{font-size:12px;color:var(--muted-foreground);margin-top:8px;line-height:16px}
/* ChatGPT */
.pv-gpt{background:#fff;padding:16px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:21px}
.pv-gpt .u{align-self:flex-end;background:#f2f2f2;border-radius:18px;padding:8px 14px;max-width:80%}
.pv-gpt .a{color:#0d0d0d}
.pv-gpt .a p{margin:0 0 8px}
.pv-gpt .spons{border:1px solid #e6e6e6;border-radius:14px;padding:10px;display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}
.pv-gpt .spons .img{width:72px;height:72px;border-radius:10px;overflow:hidden}
.pv-gpt .spons .lbl{font-size:11.5px;color:#8a8a8a;display:flex;gap:6px;align-items:center}
.pv-gpt .spons .t{font-weight:600;font-size:14px;line-height:19px}
.pv-gpt .spons .b{font-size:13px;line-height:18px;color:#444}
.pv-gpt .bar{border:1px solid #e6e6e6;border-radius:24px;padding:10px 14px;color:#9b9b9b;font-size:14px}
/* Reddit */
.pv-rd{padding:12px 14px;font-size:14px;line-height:20px;background:#fff}
.pv-rd .h{display:flex;gap:8px;align-items:center;font-size:12px;color:#576f76}
.pv-rd .av{width:24px;height:24px;border-radius:999px;background:#0a66c2;color:#fff;font:700 11px/24px Inter;text-align:center}
.pv-rd .ti{font-weight:600;font-size:16px;line-height:21px;margin:8px 0}
.pv-rd .im{border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.pv-rd .ft{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12.5px;color:#576f76}
.pv-rd .cta{background:#0045ac;color:#fff;border-radius:999px;padding:6px 14px;font-weight:600;font-size:13px}
/* Meta feed */
.pv-ig{font-size:13.5px;line-height:18px;background:#fff}
.pv-ig .h{display:flex;gap:8px;align-items:center;padding:10px 12px}
.pv-ig .av{width:30px;height:30px;border-radius:999px;background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);padding:2px}
.pv-ig .av i{display:block;width:100%;height:100%;border-radius:999px;background:#fff;border:2px solid #fff}
.pv-ig .im{aspect-ratio:4/5}
.pv-ig .cta{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #efefef;font-weight:600;color:#0095f6}
.pv-ig .tx{padding:8px 12px 12px}
/* Nextdoor */
.pv-nd{font-size:14px;line-height:20px;padding:12px 14px;background:#fff}
.pv-nd .h{display:flex;gap:10px;align-items:center}
.pv-nd .av{width:36px;height:36px;border-radius:10px;background:#1b8a5a;color:#fff;font:700 13px/36px Inter;text-align:center}
.pv-nd .im{border-radius:12px;overflow:hidden;aspect-ratio:1.91/1;margin:10px 0}
.pv-nd .cta{border:1px solid #d0d5d0;border-radius:999px;padding:6px 14px;font-weight:600;display:inline-block}
/* Google search */
.pv-gs{padding:14px 16px;font-size:14px;line-height:20px;background:#fff}
.pv-gs .sp{font-weight:700;font-size:12px}
.pv-gs .t{color:#1a0dab;font-size:18px;line-height:24px;margin:4px 0}
.pv-gs .u{font-size:12.5px;color:#202124}
/* Phone frame for vertical video */
.pv-phone{width:200px;border-radius:26px;border:6px solid #111;overflow:hidden;aspect-ratio:9/16;position:relative;background:#222;margin:0 auto}
.pv-phone .ov{position:absolute;left:10px;right:44px;bottom:14px;color:#fff;font-size:11.5px;line-height:15px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.pv-phone .ov b{display:block;font-size:12px}
.pv-phone .cta{margin-top:6px;background:#fe2c55;border-radius:4px;padding:5px 8px;font-weight:700;text-align:center}
.pv-phone .side{position:absolute;right:8px;bottom:60px;display:flex;flex-direction:column;gap:12px}
.pv-phone .side i{width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.85)}
/* ---------- phone page ---------- */
.mp-phone-wrap{max-width:390px}
/* side drawer */
.mp-scrim{position:fixed;inset:40px 0 0 0;background:rgba(15,15,20,.38);z-index:60}
.mp-drawer{position:fixed;top:40px;right:0;bottom:0;width:min(560px,100%);background:var(--background);z-index:61;box-shadow:-20px 0 60px rgba(0,0,0,.18);overflow:auto;display:flex;flex-direction:column}
.mp-drawer>header{padding:20px 24px 14px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.mp-drawer>.body{padding:18px 24px;display:flex;flex-direction:column;gap:18px}
.mp-drawer>footer{margin-top:auto;padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:var(--background)}
.mp-drawer h3{font:600 14px/20px var(--font-sans,Inter);margin:0 0 6px}
.mp-x{width:32px;height:32px;border-radius:999px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted-foreground);font-size:18px;flex:none}
.mp-hint{font-size:13px;line-height:18px;color:var(--muted-foreground)}
.mp-field{border:1px solid var(--border-strong,#d1d5db);border-radius:12px;padding:9px 12px;font-size:14.5px;line-height:20px;background:var(--background);display:flex;justify-content:space-between;gap:10px}
.mp-field .cnt{font:12.5px var(--font-mono);color:var(--muted-foreground);white-space:nowrap}
.mp-field.warn{border-color:var(--warning);background:color-mix(in oklab,var(--warning) 6%,var(--background))}
.mp-sec{display:flex;flex-direction:column;gap:10px}
.mp-sec>.h{display:flex;align-items:center;gap:10px}
.mp-num{flex:none;width:24px;height:24px;border-radius:999px;background:var(--secondary);color:var(--muted-foreground);font:600 12.5px/24px var(--font-mono);text-align:center}
.mp-num.ok{background:color-mix(in oklab,var(--success) 14%,transparent);color:var(--success)}
.mp-num.on{background:var(--primary);color:#fff}
.mp-num.todo{background:color-mix(in oklab,var(--warning) 14%,transparent);color:var(--warning)}
.mp-phone-page main .mx-auto{max-width:100%!important}
.mp-sec+.mp-sec{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.mp-table [data-slot=badge]{white-space:nowrap}
.mp-split>span{min-width:max-content}.mp-split>span.free{min-width:0}
.mp-list>.r{display:grid;grid-template-columns:minmax(190px,1.15fr) 120px minmax(0,2.6fr);gap:16px;padding:14px 20px;border-top:1px solid var(--border);align-items:start}
.mp-list>.r:first-child{border-top:0}
.mp-list>.r.h{padding:10px 20px;font:500 12px/16px var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted-foreground)}
.mp-list>.r.dim{opacity:.62}
.mp-list>.r.hl{background:color-mix(in oklab,var(--primary) 5%,transparent)}
.mp-list .ds-body{white-space:nowrap}
.mp-list .grp{padding:16px 20px 4px;font-weight:600;font-size:14px;border-top:1px solid var(--border)}
.mp-list .grp:first-child{border-top:0}
.mp-tree li span:last-child{min-width:0;overflow-wrap:anywhere}.mp-tree code{overflow-wrap:anywhere}
.mp-drawer ul,.mp-card-ul{list-style:disc}
.mp-tree ul{grid-template-columns:minmax(0,auto) minmax(0,1fr)}.mp-tree li span:first-child{white-space:normal;max-width:150px;overflow-wrap:anywhere}