/* AI CCTV detail additions. Keep the shared solution header and existing sections intact. */
.ai-detail {
  --muted:#626975;
  padding:84px 0;
  scroll-margin-top:100px;
  color:var(--ink,#11131a);
  background:var(--paper,#fff);
}
.ai-detail.ai-detail-reports { background:#f6f8ff; }
.ai-detail .ai-detail-shell {
  display:grid;
  grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);
  column-gap:clamp(32px,4vw,72px);
  row-gap:32px;
  align-items:start;
  width:min(1400px,calc(100% - 80px));
  margin-inline:auto;
}
.ai-detail .ai-detail-copy,
.ai-detail .ai-detail-content,
.ai-detail .ai-metric,
.ai-detail .ai-report,
.ai-detail .ai-privacy-item { min-width:0; }
.ai-detail .ai-detail-symbols { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.ai-detail .ai-kicker { margin:0 0 18px; color:var(--blue,#435bff); font-size:13px; font-weight:750; letter-spacing:.07em; line-height:1.5; }
.ai-detail .ai-detail-copy h2 { margin:0; font-size:clamp(32px,2.8vw,40px); font-weight:800; letter-spacing:-.035em; line-height:1.25!important; word-break:keep-all; overflow-wrap:break-word; }
.ai-detail .ai-detail-copy h2 em { color:var(--blue,#435bff); font-style:normal; }
.ai-detail .ai-detail-lead { margin:22px 0 0; max-width:36ch; color:var(--muted,#626975); font-size:16px; line-height:1.75; word-break:keep-all; overflow-wrap:break-word; }
.ai-detail .ai-detail-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:100%;
  min-height:48px;
  margin-top:24px;
  padding:12px 18px;
  border:1px solid var(--blue,#435bff);
  border-radius:8px;
  color:var(--blue,#435bff);
  background:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  white-space:normal;
  text-align:center;
}
.ai-detail .ai-detail-action:hover { background:#eef0ff; }
.ai-detail :focus-visible { outline:3px solid var(--blue,#435bff); outline-offset:4px; }
.ai-detail ::selection { color:#fff; background:var(--blue,#435bff); }
.ai-detail .ai-icon { display:block; flex:none; width:28px; height:28px; fill:none; stroke:var(--blue,#435bff); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ai-detail .ai-icon-circle { display:flex; align-items:center; justify-content:center; flex:none; width:48px; height:48px; border-radius:50%; background:#edf2ff; }
.ai-detail .ai-detail-note { grid-column:1/-1; margin:22px 0 0; color:var(--muted,#626975); font-size:15px; line-height:1.7; word-break:keep-all; overflow-wrap:break-word; }

.ai-detail .ai-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ai-detail .ai-metric { display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:12px; row-gap:8px; min-height:142px; padding:20px; border:1px solid var(--line,#e6e7ea); border-radius:12px; background:#fff; }
.ai-detail .ai-metric > .ai-icon-circle { grid-row:1/span 2; }
.ai-detail .ai-metric > div { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.ai-detail .ai-metric > div h3,
.ai-detail .ai-metric > div p { grid-column:auto; }
.ai-detail .ai-metric > .ai-icon { grid-row:1/span 2; width:48px; height:48px; padding:10px; border-radius:50%; background:#edf2ff; }
.ai-detail .ai-metric h3 { grid-column:2; margin:0; font-size:18px; font-weight:750; letter-spacing:-.025em; line-height:1.4; word-break:keep-all; overflow-wrap:break-word; }
.ai-detail .ai-metric p { grid-column:2; margin:0; color:var(--muted,#626975); font-size:16px; line-height:1.65; word-break:keep-all; overflow-wrap:break-word; }

.ai-detail .ai-report-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.ai-detail .ai-report { display:flex; flex-direction:column; padding:20px 18px; border:1px solid #e0e5f0; border-radius:12px; background:#fff; font-variant-numeric:tabular-nums; }
.ai-detail .ai-report > header,
.ai-detail .ai-report-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:14px; }
.ai-detail .ai-report-label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 14px; color:var(--blue,#435bff); font-size:14px; font-weight:750; line-height:1.5; }
.ai-detail .ai-example { display:inline-flex; flex:none; padding:3px 6px; border-radius:4px; color:#626975; background:#f1f3f8; font-size:12px; font-weight:600; line-height:1.5; white-space:nowrap; }
.ai-detail .ai-report h3 { margin:12px 0 0; color:var(--ink,#11131a); font-size:18px; font-weight:750; letter-spacing:-.025em; line-height:1.45; word-break:keep-all; overflow-wrap:break-word; }
.ai-detail .ai-report-period { margin:8px 0 0; color:var(--muted,#626975); font-size:14px; line-height:1.6; }
.ai-detail .ai-report-brand { margin:0 0 12px; color:var(--ink,#11131a); font-size:13px; font-weight:800; letter-spacing:.05em; line-height:1.4; }
.ai-detail .ai-report-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line,#e6e7ea); }
.ai-detail .ai-report-stats > div { min-width:0; }
.ai-detail .ai-report-stats > div > span { color:var(--muted); font-size:12px; line-height:1.5; }
.ai-detail .ai-report-stats small { display:block; color:var(--muted,#626975); font-size:12px; line-height:1.5; }
.ai-detail .ai-report-stats strong { display:block; margin-top:7px; color:var(--ink,#11131a); font-size:20px; font-weight:800; line-height:1.3; letter-spacing:-.025em; overflow-wrap:anywhere; }
.ai-detail .ai-report-stats strong small { display:inline; margin-left:2px; color:inherit; }
.ai-detail .ai-report-stats > div:first-child strong { font-size:18px; }
.ai-detail .ai-daily-chart { display:block; width:100%; height:auto; margin-top:24px; overflow:visible; }
.ai-detail .ai-daily-chart text { fill:#626975; font-family:inherit; font-size:17px; }
.ai-detail .ai-gender { display:flex; align-items:center; gap:12px; margin-top:18px; }
.ai-detail .ai-gender > svg { display:block; flex:0 1 44%; width:44%; max-width:140px; height:auto; }
.ai-detail .ai-gender > svg text { font-family:inherit; font-size:18px; }
.ai-detail .ai-gender-legend { flex:1; min-width:0; }
.ai-detail .ai-gender-legend p { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 8px; margin:8px 0; color:var(--muted,#626975); font-size:14px; line-height:1.5; }
.ai-detail .ai-gender-legend b { color:var(--ink,#11131a); font-size:16px; font-weight:750; }
.ai-detail .ai-gender-legend p { flex-wrap:nowrap; }
.ai-detail .ai-gender-legend i { flex:none; width:8px; height:8px; border-radius:50%; align-self:center; }
.ai-detail .ai-legend-primary { background:var(--blue,#435bff); }
.ai-detail .ai-legend-secondary { background:#aebcff; }
.ai-detail .ai-gender-legend b { margin-left:auto; }
.ai-detail .ai-age-bars { display:grid; gap:11px; margin:22px 0 0; padding:0; list-style:none; }
.ai-detail .ai-age-bars li { display:grid; grid-template-columns:minmax(42px,max-content) minmax(0,1fr) minmax(32px,max-content); align-items:center; gap:8px; color:var(--muted,#626975); font-size:13px; line-height:1.4; }
.ai-detail .ai-age-bars b { color:var(--ink,#11131a); font-size:13px; text-align:right; }
.ai-detail .ai-age-track { height:7px; overflow:hidden; border-radius:4px; background:#edf0f6; }
.ai-detail .ai-age-track i { display:block; width:var(--share,0%); height:100%; border-radius:inherit; background:var(--blue,#435bff); }
.ai-detail .ai-age-scale { display:flex; justify-content:space-between; margin:8px 40px 0 50px; color:var(--muted); font-size:11px; }
.ai-detail .ai-space-map { display:block; width:100%; height:auto; margin-top:20px; }
.ai-detail .ai-space-map text { fill:#626975; font-family:inherit; font-size:17px; }
.ai-detail .ai-density-legend { display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--muted,#626975); font-size:13px; line-height:1.5; }
.ai-detail .ai-density-legend i { display:block; flex:1; height:8px; border-radius:4px; background:linear-gradient(90deg,#e9efff,#a3b5ff,var(--blue,#435bff)); }
.ai-detail .ai-report-caption { margin:18px 0 0; color:var(--muted,#626975); font-size:14px; line-height:1.65; word-break:keep-all; overflow-wrap:break-word; }

.ai-detail .ai-privacy-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.ai-detail .ai-privacy-item { text-align:center; }
.ai-detail .ai-privacy-item .ai-icon-circle { width:64px; height:64px; margin:0 auto 18px; }
.ai-detail .ai-privacy-item .ai-icon { width:32px; height:32px; }
.ai-detail .ai-privacy-item > .ai-icon { width:64px; height:64px; margin:0 auto 18px; padding:16px; border-radius:50%; background:#edf2ff; }
.ai-detail .ai-privacy-item h3 { margin:0 0 10px; color:var(--ink,#11131a); font-size:18px; font-weight:750; letter-spacing:-.025em; line-height:1.4; word-break:keep-all; overflow-wrap:break-word; }
.ai-detail .ai-privacy-item p { max-width:28ch; margin:0 auto; color:var(--muted,#626975); font-size:16px; line-height:1.65; word-break:keep-all; overflow-wrap:break-word; }
.ai-detail .ai-data-details { margin-top:34px; padding-top:18px; border-top:1px solid var(--line,#e6e7ea); }
.ai-detail .ai-data-details summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:12px 0; color:var(--ink,#11131a); font-size:16px; font-weight:700; line-height:1.5; cursor:pointer; list-style:none; }
.ai-detail .ai-data-details summary::-webkit-details-marker { display:none; }
.ai-detail .ai-data-details summary::after { content:""; flex:none; width:9px; height:9px; margin-right:4px; border-right:2px solid var(--blue,#435bff); border-bottom:2px solid var(--blue,#435bff); transform:rotate(45deg); }
.ai-detail .ai-data-details[open] summary::after { transform:rotate(225deg); }
.ai-detail .ai-data-details > div { padding-top:14px; color:var(--muted,#626975); font-size:16px; line-height:1.75; word-break:keep-all; overflow-wrap:break-word; }
.ai-detail .ai-data-details p { margin:0 0 14px; font-size:16px; line-height:1.75; }
.ai-detail .ai-data-details ul { margin:0; padding-left:22px; }
.ai-detail .ai-data-details li { margin:8px 0; }

@media(max-width:1300px) {
  .ai-detail.ai-detail-reports .ai-detail-shell { grid-template-columns:minmax(0,1fr); }
  .ai-detail.ai-detail-reports .ai-detail-copy { max-width:700px; }
}
@media(max-width:1100px) {
  .ai-detail { padding:68px 0; }
  .ai-detail .ai-detail-shell { grid-template-columns:minmax(0,1fr); gap:32px; }
  .ai-detail .ai-detail-copy { max-width:760px; }
  .ai-detail .ai-report-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-detail .ai-report:last-child { grid-column:1/-1; }
  .ai-detail .ai-report:last-child .ai-space-map,
  .ai-detail .ai-report:last-child .ai-density-legend { width:100%; max-width:440px; align-self:center; }
}
@media(max-width:960px) {
  .ai-detail .ai-detail-shell { width:calc(100% - 44px); }
}
@media(max-width:900px) {
  .ai-detail .ai-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-detail .ai-privacy-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 24px; }
}
@media(max-width:760px) {
  .ai-detail { padding:56px 0; }
  .ai-detail .ai-detail-copy h2 { font-size:clamp(30px,5.4vw,36px); }
  .ai-detail .ai-report-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .ai-detail .ai-report { padding:22px; }
  .ai-detail .ai-report:last-child { grid-column:auto; }
  .ai-detail .ai-daily-chart { max-width:460px; align-self:center; }
  .ai-detail .ai-gender { max-width:400px; }
  .ai-detail .ai-report-stats strong { font-size:22px; }
}
@media(max-width:560px) {
  .ai-detail { padding:48px 0; }
  .ai-detail .ai-detail-shell { width:calc(100% - 40px); gap:26px; }
  .ai-detail .ai-kicker { margin-bottom:14px; font-size:12px; }
  .ai-detail .ai-detail-copy h2 { font-size:30px; line-height:1.25!important; }
  .ai-detail .ai-detail-lead { margin-top:18px; font-size:16px; }
  .ai-detail .ai-detail-action { min-height:48px; margin-top:22px; }
  .ai-detail .ai-metric-grid,
  .ai-detail .ai-privacy-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
  .ai-detail .ai-metric { min-height:0; padding:20px 18px; }
  .ai-detail .ai-metric h3 { font-size:18px; }
  .ai-detail .ai-report { padding:20px 18px; }
  .ai-detail .ai-report h3 { font-size:18px; }
  .ai-detail .ai-report-stats { gap:8px; }
  .ai-detail .ai-report-stats strong { font-size:20px; }
  .ai-detail .ai-privacy-item { display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:16px; row-gap:8px; text-align:left; padding:14px 0; }
  .ai-detail .ai-privacy-item .ai-icon-circle { grid-row:1/span 2; width:56px; height:56px; margin:0; }
  .ai-detail .ai-privacy-item > .ai-icon { grid-row:1/span 2; width:56px; height:56px; margin:0; padding:12px; }
  .ai-detail .ai-privacy-item h3 { grid-column:2; margin:0; }
  .ai-detail .ai-privacy-item p { grid-column:2; max-width:none; margin:0; font-size:16px; }
  .ai-detail .ai-data-details { margin-top:26px; }
}

/* The shared runtime replaces the source footer with this component. */
@media(max-width:700px) {
  body.ai-cctv-page.has-floating-contact .unified-footer {
    padding-bottom:calc(126px + env(safe-area-inset-bottom))!important;
  }
}