/* App analytics concept: page-specific styles. Loads after concepts.css. */
.aa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* hero */
.aa-live,.aa-cohort{color:var(--text)}
.aa-live{overflow:hidden}
.aa-hbody{padding:16px 18px 16px}
.aa-live .feed li{padding:7px 0}
.aa-split{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text2)}
.aa-fbar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px}
.aa-fbar i{display:block}
.aa-fkey{grid-column:1 / -1;display:flex;gap:14px;flex-wrap:wrap}
.aa-fkey span{display:inline-flex;align-items:center;gap:6px}
.aa-fkey b{color:var(--text);font-weight:600}
.aa-fkey i{width:8px;height:8px;border-radius:2px}
@media (max-width:560px){ .aa-hbody{padding:12px 14px 14px} }

/* 1. app metrics strip */
.aa-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--tile)}
.aa-kpi{display:grid;gap:2px;padding:12px 14px 10px}
.aa-kpi+.aa-kpi{border-left:1px solid var(--line)}
.aa-kpi .lbl{font-size:12.5px;color:var(--text2)}
.aa-kpi b{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aa-kpi .dl{font-size:12px;font-weight:600;color:var(--up-ink,var(--good))}
.aa-kpi svg{width:100%;height:28px;display:block;margin-top:6px}
.aa-sub{margin-top:18px;margin-bottom:6px}
.aa-sub h3{font-size:14px}
@media (max-width:980px){
  .aa-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .aa-kpi:nth-child(4){border-left:0}
  .aa-kpi:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .aa-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aa-kpi{border-left:0!important;border-top:1px solid var(--line)}
  .aa-kpi:nth-child(-n+2){border-top:0}
  .aa-kpi:nth-child(even){border-left:1px solid var(--line)!important}
  .aa-kpi:last-child{grid-column:1/-1}
  .aa-kpi b{font-size:19px}
}

/* 2. customer journey */
.aa-points{list-style:none;padding:0;margin-top:20px;display:grid;gap:10px}
.aa-points li{position:relative;padding-left:26px;color:var(--text2)}
.aa-points li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;background:var(--accent-wash2)}
.aa-points li::after{content:"";position:absolute;left:4.5px;top:calc(.35em + 3px);width:4px;height:7px;border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(45deg)}
.aa-more{margin-top:24px}
.aa-steps{list-style:none;padding:0;display:grid;position:relative}
.aa-steps::before{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:2px;background:var(--line)}
.aa-steps li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:14px;align-items:center;padding:9px 0;position:relative}
.aa-dot{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--tile)}
.aa-what{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aa-pl{font-size:11px;font-weight:650;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:999px;padding:0 7px;line-height:18px}
.aa-detail{font-size:12.5px;color:var(--text2);margin-top:1px}
.aa-when{text-align:right;font-size:12px;color:var(--muted);display:grid;gap:1px;white-space:nowrap}
.aa-when b{font-size:14px;color:var(--text)}
.aa-jsum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:10px;padding-top:14px;gap:10px}
.aa-jsum dt{font-size:12px;color:var(--text2)}
.aa-jsum dd{font-size:19px;font-weight:600;letter-spacing:-.01em}

/* 3. retention cohorts */
.aa-cohort{padding:22px}
.aa-cohort .th h3{font-size:15px}
.aa-seg{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--tile2)}
.aa-seg button{font:inherit;font-size:13px;font-weight:550;color:var(--text2);background:none;border:0;border-radius:8px;padding:5px 12px;cursor:pointer}
.aa-seg button[aria-pressed=true]{background:var(--tile);color:var(--text);box-shadow:0 1px 2px #0b123d1f}
.aa-ret{display:flex;gap:28px;margin:4px 0 16px}
.aa-ret dt{font-size:12.5px;color:var(--text2)}
.aa-ret dd{font-size:24px;font-weight:600;letter-spacing:-.02em}
.aa-grid-wrap{overflow-x:auto}
.aa-grid{width:100%;border-collapse:separate;border-spacing:3px;font-size:13px;table-layout:fixed}
.aa-grid thead th{font-size:12px;font-weight:550;color:var(--muted);text-align:center;padding:2px 0 6px}
.aa-grid thead th:first-child,.aa-grid tbody th{text-align:left;width:128px}
.aa-grid tbody th{font-weight:600;padding-right:8px;white-space:nowrap}
.aa-grid tbody th small{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.aa-grid td{text-align:center;border-radius:6px;height:38px;background:color-mix(in srgb,var(--s1) var(--a),var(--tile2));color:var(--text);font-weight:550;font-variant-numeric:tabular-nums}
.aa-grid td.hi{color:#fff}
.aa-grid td.na{background:transparent}
.aa-cap{margin-top:10px}
@media (max-width:640px){
  .aa-cohort{padding:16px 12px}
  .aa-seg{margin-left:0;width:100%}
  .aa-seg button{flex:1;padding:6px 4px}
  .aa-ret{gap:18px}
  .aa-ret dd{font-size:20px}
  .aa-grid{border-spacing:2px;font-size:11px}
  .aa-grid thead th:first-child,.aa-grid tbody th{width:58px}
  .aa-grid tbody th{font-size:11.5px;padding-right:2px}
  .aa-grid tbody th small{font-size:10px}
  .aa-grid tbody th small{white-space:normal}
  .aa-grid td{height:32px;border-radius:4px}
  .aa-grid tr>:nth-child(n+8){display:none}
}

/* 4. setup code */
.aa-code{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.aa-code>div{min-width:0}
.aa-code-h{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:8px}
.aa-code .codebox{margin:0;white-space:pre}
@media (max-width:860px){ .aa-code{grid-template-columns:minmax(0,1fr)} .aa-code .codebox{font-size:12px} }

.related .ccard .viz svg{width:100%;height:56px;display:block}

/* the retention band follows the identity band directly, with no page strip between them */
main.lpmain>section#retention.band{margin-top:0;border-top:0}
@media (max-width:720px){ main.lpmain>section#retention.band{margin-top:0} }