:root { --bg:#fff; --ink:#151515; --muted:#666; --line:#d8d8d8; --soft:#f5f5f5; --good:#176c3a; --bad:#a12b2b; --warn:#8a5a00; --accent:#1d63d5; font-family: Arial, Helvetica, sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; }
button, input, select { font:inherit; }
button, .button { cursor:pointer; }
.landing { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:64px; align-items:center; max-width:1100px; margin:auto; padding:48px 24px; }
h1 { font-size:clamp(36px,6vw,72px); line-height:1; letter-spacing:-.04em; margin:12px 0 24px; }
h2 { font-size:18px; margin:0 0 12px; }
p { line-height:1.5; }
.lede { font-size:20px; max-width:680px; }
.eyebrow, .sidebar nav p { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.08em; }
.muted, small { color:var(--muted); }
.flow { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:32px 0; }
.flow span { border:1px solid var(--line); padding:10px 12px; }
.auth-card { border:1px solid var(--line); padding:24px; }
.auth-error { border-left:3px solid var(--bad); background:#fdf3f3; color:var(--bad); padding:10px 12px; }
.tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:20px; }
.tabs button { border:0; background:none; padding:12px; }
.tabs button.active { border-bottom:2px solid var(--ink); font-weight:700; }
form { display:grid; gap:16px; }
label { display:grid; gap:7px; font-weight:600; }
input, select { width:100%; border:1px solid var(--line); padding:11px; background:#fff; color:var(--ink); }
.button { display:inline-block; width:max-content; border:1px solid var(--ink); background:#fff; color:var(--ink); padding:10px 14px; text-decoration:none; }
.button.primary { background:var(--ink); color:#fff; }
button:disabled { cursor:not-allowed; opacity:.5; }
.notice { width:max-content; max-width:100%; border:1px solid var(--accent); background:#eef5ff; padding:12px; margin:0 0 20px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:230px minmax(0,1fr); }
.sidebar { border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column; }
.brand { color:var(--ink); font-weight:800; text-decoration:none; margin-bottom:24px; }
.product-scope { display:grid; gap:10px; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:6px; }
.product-scope label { gap:4px; font-size:11px; color:var(--muted); }
.product-scope select { padding:8px; font-size:13px; font-weight:700; }
.product-scope>div { display:flex; justify-content:space-between; gap:8px; }
.product-scope .link-button { font-size:12px; }
.scope-state { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; }
.scope-state i { width:7px; height:7px; border-radius:50%; background:#aaa; }
.scope-state.connected { color:var(--good); }.scope-state.connected i { background:var(--good); }
.scope-empty { border:1px dashed var(--line); background:#fff; padding:10px; text-align:left; }
.sidebar nav { display:grid; gap:4px; }
.sidebar nav p { margin:18px 8px 4px; }
.sidebar nav button { display:flex; justify-content:space-between; align-items:center; gap:8px; border:0; background:none; padding:9px 10px; text-align:left; }
.sidebar nav button>b { min-width:22px; color:var(--muted); font-size:11px; font-weight:400; text-align:right; }
.sidebar nav button[aria-current="page"] { background:var(--soft); box-shadow:inset 2px 0 var(--accent); font-weight:700; }
.account { display:grid; gap:3px; margin-top:auto; padding-top:24px; overflow-wrap:anywhere; }
.link-button { border:0; background:none; color:var(--accent); padding:8px 0; text-align:left; }
.content { width:100%; max-width:1320px; padding:32px 40px 56px; }
.content header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }
.content h1 { font-size:36px; margin:4px 0 0; }
.list { border-top:1px solid var(--line); }
.list-row { width:100%; display:grid; grid-template-columns:110px minmax(0,1fr) 170px; gap:16px; align-items:center; border:0; border-bottom:1px solid var(--line); background:#fff; padding:16px 8px; text-align:left; }
.list-row:hover { background:var(--soft); }
.list-row span { display:grid; gap:5px; }
.list-row time { color:var(--muted); font-size:13px; text-align:right; }
.positive { color:var(--good); }.negative { color:var(--bad); }
.neutral { color:#7a5a00; }
.empty { border:1px dashed var(--line); padding:40px; }
.back { border:0; background:none; color:var(--accent); padding:0 0 20px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.detail-grid article, .metrics article, .two-col article, .guardrails { border:1px solid var(--line); padding:18px; }
.quote { font-size:20px; }
dl { margin:0; }.detail-grid dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.detail-grid dd { margin:0; text-align:right; }
.linked { grid-column:1/-1; border:1px solid var(--line); background:#fff; padding:16px; text-align:left; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.metrics.five { grid-template-columns:repeat(5,minmax(0,1fr)); }
.metrics strong { display:block; font-size:32px; }.metrics span { color:var(--muted); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.three-col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.three-col article,.explanation { border:1px solid var(--line); padding:18px; }
.explanation { margin-top:16px; }
.header-actions { display:flex; gap:12px; align-items:center; }
table { width:100%; border-collapse:collapse; }td { padding:10px 0; border-bottom:1px solid var(--line); }td:last-child { text-align:right; }
.session-meta { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); margin-bottom:24px; }.session-meta div { padding:14px; }.session-meta dt { color:var(--muted); font-size:12px; }.session-meta dd { margin:6px 0 0; }
.timeline { border-left:1px solid var(--line); margin-left:16px; }.timeline article { display:grid; grid-template-columns:32px 1fr; gap:12px; padding:0 0 20px; }.timeline article>b { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; margin-left:-16px; }.timeline article span { display:grid; gap:4px; }
.identity-guide { border:2px solid var(--ink); padding:20px; margin-bottom:20px; }.identity-guide>p { max-width:760px; }.identity-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }.identity-cards article { border:1px solid var(--line); padding:14px; }.identity-cards p { margin-bottom:0; }.identity-table { margin:28px 0; }.identity-table th { text-align:left; border-bottom:1px solid var(--line); padding:10px 0; }.identity-table th:not(:first-child),.identity-table td:not(:first-child) { padding-left:18px; }.steps details { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; }.steps summary { cursor:pointer; font-weight:700; }
.setup-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.setup-tabs article { border:1px solid var(--line); padding:14px; }.setup-tabs h3 { margin-top:0; }
.steps { list-style:none; padding:0; display:grid; gap:14px; }.steps li { display:flex; justify-content:space-between; align-items:start; gap:20px; border:1px solid var(--line); padding:18px; }.steps li>div { min-width:0; flex:1; }
.setup-lede { max-width:720px; margin:-8px 0 30px; color:var(--muted); font-size:18px; }
.setup-step { display:grid; grid-template-columns:42px minmax(0,1fr); gap:18px; border-top:1px solid var(--line); padding:28px 0; }
.setup-step:first-of-type { border-top:2px solid var(--ink); }
.setup-step.locked { color:var(--muted); }
.step-number { width:34px; height:34px; border:1px solid var(--ink); display:grid; place-items:center; font-weight:700; }
.locked .step-number { border-color:var(--line); }
.step-body { min-width:0; max-width:860px; }
.step-body>h2 { font-size:24px; margin-bottom:8px; }
.step-body>p { max-width:720px; }
.step-body h3 { font-size:14px; margin:24px 0 8px; }
.choice-grid { display:grid; gap:10px; margin:18px 0; }
.choice-grid.surfaces { grid-template-columns:repeat(4,minmax(0,1fr)); }
.choice-grid.stacks { grid-template-columns:repeat(3,minmax(0,1fr)); }
.choice-card { min-height:98px; display:grid; align-content:start; gap:8px; border:1px solid var(--line); background:#fff; padding:16px; text-align:left; color:var(--ink); }
.choice-card:hover { background:var(--soft); }
.choice-card[aria-pressed="true"] { border:2px solid var(--accent); padding:15px; background:#f5f9ff; }
.choice-card span { color:var(--muted); line-height:1.4; }
.choice-card:disabled { opacity:1; cursor:not-allowed; background:var(--soft); color:var(--muted); }
.choice-card small { align-self:end; color:var(--muted); font-size:10px; letter-spacing:.08em; }
.selection-explanation { background:var(--soft); border-left:3px solid var(--accent); padding:12px 14px; }
.connection-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.connection-form .button { align-self:end; }
.connection-created { border:1px solid var(--good); background:#f2faf5; display:flex; justify-content:space-between; gap:16px; padding:14px; margin-top:18px; }
.connection-created span { color:var(--good); }
.secret-callout { display:flex; justify-content:space-between; align-items:start; gap:16px; border:2px solid var(--good); background:#f2faf5; padding:16px; margin:20px 0; }
.secret-callout>div { min-width:0; display:grid; gap:8px; }
.secret-callout code { overflow-wrap:anywhere; color:var(--good); }
.secret-callout.warning { border-color:var(--bad); background:#fdf3f3; }.secret-callout.warning code { color:var(--bad); }
.copy-block { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; }
.copy-block pre { margin:0; }
.install-methods { display:flex; border-bottom:1px solid var(--line); margin-top:24px; }
.install-methods button { border:0; border-bottom:2px solid transparent; background:none; padding:11px 14px; }
.install-methods button[aria-pressed="true"] { border-bottom-color:var(--ink); font-weight:700; }
.install-panel { border:1px solid var(--line); border-top:0; padding:18px; }
.install-panel>p:first-child { margin-top:0; }
.verification { border:1px solid var(--line); margin:20px 0; }
.verification-row { display:flex; gap:14px; padding:16px; border-bottom:1px solid var(--line); }
.verification-row:last-child { border-bottom:0; }
.verification-row>b { font-size:22px; }
.verification-row>span { display:grid; gap:5px; }
.verification-row.complete>b { color:var(--good); }
.verification-row.waiting>b { color:var(--muted); }
.setup-actions { display:flex; flex-wrap:wrap; gap:10px; }
.text-link { display:inline-block; color:var(--accent); margin-top:18px; }
.step-body details { border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
.step-body summary,.existing-connections summary { cursor:pointer; font-weight:700; }
.existing-connections { border-top:2px solid var(--ink); padding:20px 0; margin-top:12px; }
.existing-connections>div { border-top:1px solid var(--line); margin-top:16px; }
.connection-row { display:grid; grid-template-columns:minmax(0,1fr) 150px auto; gap:16px; align-items:center; border-bottom:1px solid var(--line); padding:14px 4px; }
.connection-row>span { display:grid; gap:5px; }
.create-product { max-width:620px; border-top:2px solid var(--ink); padding-top:24px; }
.create-product>p { color:var(--muted); font-size:18px; }
.create-product form { margin:24px 0; }
pre { background:#111; color:#eee; padding:14px; overflow:auto; white-space:pre-wrap; word-break:break-word; }code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.secret code { display:block; overflow-wrap:anywhere; color:var(--good); }
.policy { max-width:700px; }.check { display:flex; grid-template-columns:auto 1fr; align-items:center; }.check input { width:auto; }
.guardrails ul { margin-bottom:0; }
.team-invite { border:1px solid var(--line); padding:20px; margin-bottom:28px; }
.team-invite form { grid-template-columns:minmax(0,1fr) 150px auto; align-items:end; }
.team-invite-secondary { margin-top:12px; }
.team-section { margin-top:28px; }
.team-list { border-top:1px solid var(--line); }
.team-row { display:grid; grid-template-columns:minmax(0,1fr) 150px 80px; gap:16px; align-items:center; border-bottom:1px solid var(--line); padding:14px 4px; }
.team-row>span:first-child { display:grid; gap:5px; }
.team-row>span:last-child { text-align:right; }
.compact-select { padding:8px; }
.link-button.danger { color:var(--bad); }
.page-context { max-width:780px; color:var(--muted); margin:-10px 0 24px; }
.metric-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); border:1px solid var(--line); margin-bottom:20px; }
.metric-strip article { min-width:0; padding:16px 18px; border-right:1px solid var(--line); }
.metric-strip article:last-child { border-right:0; }
.metric-strip strong { display:block; overflow-wrap:anywhere; font-size:24px; line-height:1.15; }
.metric-strip span { display:block; color:var(--muted); font-size:12px; margin-top:6px; }
.metric-strip .positive strong { color:var(--good); }.metric-strip .negative strong { color:var(--bad); }.metric-strip .neutral strong { color:var(--warn); }
.explorer-toolbar { display:grid; grid-template-columns:minmax(240px,1fr) minmax(150px,auto) minmax(150px,auto) minmax(150px,auto) auto; gap:10px; align-items:end; border:1px solid var(--line); background:var(--soft); padding:12px; margin-bottom:16px; }
.explorer-toolbar label { gap:5px; color:var(--muted); font-size:11px; }
.explorer-toolbar input,.explorer-toolbar select { min-height:40px; padding:9px 10px; font-size:13px; }
.explorer-search { min-width:0; }
.filter-reset { min-height:40px; padding:10px 6px; }
.explorer-table { min-width:0; border:1px solid var(--line); border-bottom:0; overflow-x:auto; }
.table-head,.table-row { min-width:880px; display:grid; gap:14px; align-items:center; }
.table-head { color:var(--muted); background:var(--soft); border-bottom:1px solid var(--line); padding:9px 12px; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.table-row { width:100%; border:0; border-bottom:1px solid var(--line); background:#fff; color:var(--ink); padding:14px 12px; text-align:left; }
.table-row:hover,.table-row:focus-visible { background:#f8faff; outline:none; box-shadow:inset 3px 0 var(--accent); }
.table-row>span { min-width:0; overflow-wrap:anywhere; }
.table-row time { color:var(--muted); font-size:12px; text-align:right; }
.primary-cell { display:grid; gap:5px; }.primary-cell strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.primary-cell small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feedback-columns { grid-template-columns:100px minmax(260px,2fr) minmax(150px,1fr) minmax(130px,.8fr) 100px; }
.interaction-columns { grid-template-columns:100px minmax(180px,1.5fr) 100px 65px 75px 105px 100px; }
.session-columns { grid-template-columns:minmax(190px,1.5fr) 90px 150px minmax(130px,1fr) 80px 105px; }
.session-feedback-summary { display:grid; gap:4px; }.session-feedback-summary small { white-space:normal; }
.status-pill { display:inline-flex; width:max-content; align-items:center; border:1px solid currentColor; border-radius:999px; padding:3px 8px; font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.status-success,.status-confirmed { color:var(--good); background:#f2faf5; }.status-failure { color:var(--bad); background:#fdf3f3; }.status-partial,.status-unclassified { color:var(--warn); background:#fff8e8; }
.filtered-empty { border:1px dashed var(--line); padding:44px 24px; text-align:center; }.filtered-empty .button { margin:auto; }
.load-error { max-width:620px; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:20px; align-items:start; }
.detail-main,.detail-sidebar { display:grid; gap:16px; }
.detail-section,.detail-sidebar>section,.review-card { border:1px solid var(--line); padding:20px; }
.detail-section>p:last-child { margin-bottom:0; }
.detail-sidebar { position:sticky; top:24px; }
.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:start; }
.section-heading h2 { margin-bottom:0; }.section-heading .eyebrow { margin-top:0; }
.review-card { display:grid; gap:24px; border-left:4px solid var(--warn); }.review-card.positive { border-left-color:var(--good); }.review-card.negative { border-left-color:var(--bad); }
.review-card>div { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.review-card .quote { margin:0; font-size:24px; line-height:1.4; }
.detail-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.linked { width:100%; border:1px solid var(--line); background:#fff; color:var(--ink); padding:12px 14px; text-align:left; }
.linked:hover { border-color:var(--accent); color:var(--accent); }
.context-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); }
.context-row>span { min-width:0; display:grid; gap:6px; padding:14px; border-right:1px solid var(--line); }.context-row>span:last-child { border-right:0; }.context-row strong { overflow-wrap:anywhere; }
.property-list { margin:0; }.property-list>div { display:grid; grid-template-columns:1fr 1fr; gap:12px; border-bottom:1px solid var(--line); padding:10px 0; }.property-list>div:last-child { border-bottom:0; }.property-list dt { color:var(--muted); }.property-list dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.privacy-note { border-left:3px solid var(--ink); background:var(--soft); padding:12px 14px; margin:0; color:var(--muted); font-size:13px; }
.object-id { display:block; color:var(--muted); overflow-wrap:anywhere; font-size:11px; }
.inline-empty { background:var(--soft); padding:18px; }.inline-empty p { margin:0 0 5px; }
.breakdown-grid article { min-width:0; }
.breakdown { display:grid; gap:14px; }.breakdown>div { display:grid; gap:6px; }.breakdown span { display:flex; justify-content:space-between; gap:8px; }.breakdown small { white-space:nowrap; }.breakdown i { display:block; height:6px; background:var(--soft); }.breakdown em { display:block; height:100%; background:var(--accent); }
.funnel,.investigations { border:1px solid var(--line); padding:20px; margin-bottom:16px; }
.funnel { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.funnel .eyebrow,.investigations .eyebrow { margin-top:0; }.funnel h2,.investigations h2 { margin-bottom:0; }
.funnel-steps { display:flex; gap:10px; align-items:center; }.funnel-steps button { min-width:125px; border:1px solid var(--line); background:#fff; padding:13px; text-align:left; }.funnel-steps button:hover { border-color:var(--accent); }.funnel-steps strong,.funnel-steps span { display:block; }.funnel-steps strong { font-size:22px; }.funnel-steps span { color:var(--muted); font-size:12px; margin-top:4px; }
.investigations { margin-top:16px; }.investigation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }.investigation-grid button,.investigation-grid article { display:grid; gap:8px; border:1px solid var(--line); background:#fff; color:var(--ink); padding:16px; text-align:left; }.investigation-grid button:hover { border-color:var(--accent); }.investigation-grid span,.investigation-grid small { color:var(--muted); }.investigation-grid strong { overflow-wrap:anywhere; }
.explanation.compact { color:var(--muted); font-size:13px; }
.session-timeline { border-left:1px solid var(--line); margin:20px 0 0 18px; }
.timeline-event { width:calc(100% + 18px); display:grid; grid-template-columns:34px minmax(0,1fr) 90px; gap:12px; align-items:start; border:0; background:#fff; color:var(--ink); margin-left:-18px; padding:0 0 22px; text-align:left; }
.timeline-event>b { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; border-radius:50%; }.timeline-event:hover>b { border-color:var(--accent); color:var(--accent); }
.timeline-content { min-width:0; display:grid; gap:6px; padding-top:2px; }.timeline-content>span { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }.timeline-event time { color:var(--muted); font-size:11px; text-align:right; padding-top:6px; }
.timeline-feedback { border-left:3px solid var(--warn); background:var(--soft); color:var(--ink); padding:8px 10px; font-style:normal; }.timeline-feedback.positive { border-left-color:var(--good); }.timeline-feedback.negative { border-left-color:var(--bad); }
.policy { max-width:900px; border-top:2px solid var(--ink); }.policy>section { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); gap:36px; border-bottom:1px solid var(--line); padding:26px 0; }.policy>section>div p { color:var(--muted); }.policy .eyebrow { margin-top:0; }.policy .guardrails { border:0; }.policy .guardrails ul { margin:0; }.form-footer { position:sticky; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--line); background:rgba(255,255,255,.96); padding:14px 0; }
@media (max-width:900px) { .metrics.five,.setup-tabs,.three-col,.choice-grid.stacks,.choice-grid.surfaces { grid-template-columns:1fr 1fr; } }
@media (max-width:1000px) { .explorer-toolbar { grid-template-columns:minmax(220px,1fr) 1fr 1fr; }.explorer-toolbar .explorer-search { grid-column:1/-1; }.detail-layout { grid-template-columns:1fr; }.detail-sidebar { position:static; grid-template-columns:1fr 1fr; }.detail-sidebar .object-id { grid-column:1/-1; }.funnel { align-items:start; flex-direction:column; } }
@media (max-width:760px) { .landing { grid-template-columns:1fr; gap:28px; }.app-shell { grid-template-columns:1fr; }.sidebar { border-right:0; border-bottom:1px solid var(--line); }.sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); }.sidebar nav p { grid-column:1/-1; }.account { margin-top:20px; }.content { padding:22px 16px; }.content header { align-items:start; flex-direction:column; }.header-actions { align-items:start; flex-direction:column; }.list-row { grid-template-columns:1fr; }.list-row time { text-align:left; }.detail-grid,.two-col,.three-col,.metrics,.metrics.five,.session-meta,.identity-cards,.setup-tabs,.choice-grid.surfaces,.choice-grid.stacks,.connection-form,.team-invite form,.detail-sidebar,.policy>section { grid-template-columns:1fr; }.metric-strip { grid-template-columns:1fr 1fr; }.metric-strip article:nth-child(2n) { border-right:0; }.explorer-toolbar { grid-template-columns:1fr; }.explorer-toolbar .explorer-search { grid-column:auto; }.context-row { grid-template-columns:1fr 1fr; }.context-row>span:nth-child(2) { border-right:0; }.context-row>span { border-bottom:1px solid var(--line); }.context-row>span:nth-last-child(-n+2) { border-bottom:0; }.funnel-steps { width:100%; align-items:stretch; flex-direction:column; }.funnel-steps i { display:none; }.funnel-steps button { width:100%; }.investigation-grid { grid-template-columns:1fr; }.form-footer { align-items:start; flex-direction:column; }.steps li { flex-direction:column; }.setup-step { grid-template-columns:34px minmax(0,1fr); gap:12px; }.secret-callout,.connection-created { flex-direction:column; }.copy-block,.connection-row,.team-row { grid-template-columns:1fr; }.team-row>span:last-child { text-align:left; } }