.cx-surfaces{background:var(--ap-bg)}.cx-surfaces__grid{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:24px;gap:24px}@media(max-width:960px){.cx-surfaces__grid{grid-template-columns:1fr}}.cx-surfaces__card{position:relative;padding:28px;background:#fff;border:1px solid var(--ap-line);border-radius:var(--ap-radius);box-shadow:0 6px 20px -10px rgba(15,23,42,.08);overflow:hidden}.cx-surfaces__card--panel:before{content:"";position:absolute;inset:0;background:radial-gradient(100% 60% at 100% 0,rgba(59,130,246,.08),transparent 70%);pointer-events:none}.cx-surfaces__card--pill:before{content:"";position:absolute;inset:0;background:radial-gradient(100% 60% at 0 0,rgba(236,72,153,.08),transparent 70%);pointer-events:none}.cx-surfaces__card-head{position:relative;display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}.cx-surfaces__card-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;flex-shrink:0}.cx-surfaces__card-icon--panel{background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(99,102,241,.14));color:#3b82f6}.cx-surfaces__card-icon--pill{background:linear-gradient(135deg,rgba(236,72,153,.14),rgba(168,85,247,.14));color:#ec4899}.cx-surfaces__card-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}.cx-surfaces__card-tag--panel{background:rgba(59,130,246,.1);color:#1d4ed8}.cx-surfaces__card-tag--pill{background:rgba(236,72,153,.1);color:#be185d}.cx-surfaces__card-title{font-family:var(--ap-font-display);font-weight:800;font-size:20px;color:var(--ap-ink);letter-spacing:-.015em;line-height:1.25;margin:0}.cx-surfaces__card-body{position:relative;font-size:14.5px;line-height:1.6;color:var(--ap-ink-soft);margin:0 0 20px}.cx-surfaces__panel-mock{position:relative;padding:14px;background:var(--ap-bg-alt);border:1px solid var(--ap-line);border-radius:12px}.cx-surfaces__panel-mock-head{padding-bottom:10px;border-bottom:1px dashed var(--ap-line);margin-bottom:10px}.cx-surfaces__panel-mock-tabs{display:inline-flex;gap:4px;padding:3px;background:#fff;border-radius:8px;border:1px solid var(--ap-line)}.cx-surfaces__panel-mock-tab{padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--ap-muted);border-radius:6px}.cx-surfaces__panel-mock-tab--active{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff}.cx-surfaces__panel-mock-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.cx-surfaces__panel-mock-rows li{padding:10px 12px;background:#fff;border:1px solid var(--ap-line);border-radius:8px}.cx-surfaces__panel-mock-row-title{font-size:13px;font-weight:700;color:var(--ap-ink);line-height:1.3}.cx-surfaces__panel-mock-row-body{font-size:11.5px;color:var(--ap-muted);margin-top:2px;line-height:1.4}.cx-surfaces__pill-mock{position:relative;background:var(--ap-bg-alt);border:1px solid var(--ap-line);border-radius:12px;overflow:hidden}.cx-surfaces__pill-mock-browser{padding:8px 12px;background:#f1f5f9;border-bottom:1px solid var(--ap-line)}.cx-surfaces__pill-mock-tabs{display:inline-flex;gap:6px}.cx-surfaces__pill-mock-tab-active{padding:4px 12px;background:#fff;border-radius:8px 8px 0 0;font-size:11px;font-weight:700;color:var(--ap-ink);border:1px solid var(--ap-line);border-bottom:none}.cx-surfaces__pill-mock-tab{padding:4px 10px;font-size:13px;font-weight:800;color:var(--ap-muted)}.cx-surfaces__pill-mock-pill{display:inline-flex;align-items:center;gap:3px;padding:4px 6px 4px 8px;background:#fff;border:1px solid var(--ap-line);border-radius:999px;box-shadow:0 6px 14px -6px rgba(15,23,42,.18);margin:14px 18px 0}.cx-surfaces__pill-mock-logo{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#a855f7);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.cx-surfaces__pill-mock-logo-dot{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px hsla(0,0%,100%,.25)}.cx-surfaces__pill-mock-btn{padding:4px 10px;font-size:11px;font-weight:700;border-radius:999px}.cx-surfaces__pill-mock-btn--purple{background:rgba(168,85,247,.1);color:#7c3aed}.cx-surfaces__pill-mock-btn--blue{background:rgba(59,130,246,.1);color:#1d4ed8}.cx-surfaces__pill-mock-btn--emerald{background:rgba(16,185,129,.1);color:#059669}.cx-surfaces__pill-mock-btn--pink{background:rgba(236,72,153,.1);color:#be185d}.cx-surfaces__pill-mock-legend{padding:14px 18px 18px;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px;gap:10px}.cx-surfaces__pill-mock-legend-item{display:flex;align-items:flex-start;gap:8px}.cx-surfaces__pill-mock-legend-item--purple .cx-surfaces__pill-mock-legend-dot{background:#a855f7}.cx-surfaces__pill-mock-legend-item--blue .cx-surfaces__pill-mock-legend-dot{background:#3b82f6}.cx-surfaces__pill-mock-legend-item--emerald .cx-surfaces__pill-mock-legend-dot{background:#10b981}.cx-surfaces__pill-mock-legend-item--pink .cx-surfaces__pill-mock-legend-dot{background:#ec4899}.cx-surfaces__pill-mock-legend-dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex-shrink:0}.cx-surfaces__pill-mock-legend-label{font-size:12px;font-weight:700;color:var(--ap-ink);line-height:1.2}.cx-surfaces__pill-mock-legend-desc{font-size:11px;color:var(--ap-muted);margin-top:1px;line-height:1.35}.cx-surfaces__note{margin:28px auto 0;max-width:720px;text-align:center;font-size:13.5px;color:var(--ap-muted);line-height:1.6}.cx-surfaces__note strong{color:var(--ap-ink);font-weight:700}