/* ── AI visibility tracking ─────────────────────────── Figma 9589:28562 ── */

/* the hero card: one prompt, four assistants, one score */
.zr-pcard{
  width:min(620px,100%); margin-left:auto; padding:22px;
  background:#fff; border:1px solid #EDF1F7; border-radius:20px;
  box-shadow:0 24px 60px -24px rgba(16,49,110,.28), 0 2px 6px rgba(16,49,110,.06);
}
.zr-pcard__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.zr-pcard__q{ padding:14px 16px; border-radius:12px; background:#F4F5F7; font-size:15.5px; font-weight:500; color:var(--pp-ink); }
.zr-pcard__rows{ list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid #EEF1F5; display:flex; flex-direction:column; gap:8px; }
.zr-pcard__rows li{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid #EEF1F5; border-radius:12px; background:#FAFBFC;
}
.zr-pcard__rows .zr-eng{ flex:1 1 auto; }
.zr-pcard__rows b{ width:28px; text-align:right; font-family:var(--pp-mono); font-size:13px; font-weight:500; color:var(--pp-dim); }
.zr-pcard__rows li.is-off .zr-eng{ opacity:.5; }
.zr-pcard__foot{ display:flex; align-items:baseline; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid #EEF1F5; }
.zr-pcard__foot b{ font-size:30px; font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--pp-ink); }
.zr-pcard__foot span{ font-size:13.5px; color:var(--pp-dim); }
.zr-pcard__foot .zr-chip{ margin-left:auto; }

/* four numbers */
.zr-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.zr-stat{ padding:20px 20px 22px; }
.zr-stat__k{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--pp-dim); }
.zr-stat__k svg{ width:16px; height:16px; color:#9AA1AC; }
.zr-stat__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:12px; }
.zr-stat__v{ font-size:40px; font-weight:500; letter-spacing:-.035em; line-height:1; color:var(--pp-ink); font-variant-numeric:tabular-nums; }
.zr-stat__spark{ width:110px; height:52px; flex:0 0 auto; display:block; }
.zr-stat .zr-chip{ margin-top:12px; }
.zr-stat p{ margin:12px 0 0; font-size:13.5px; line-height:20px; color:var(--pp-dim); text-wrap:pretty; }

/* answer anatomy */
.zr-anat{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.zr-anat__list{ list-style:none; margin:0; padding:6px 0; display:flex; flex-direction:column; }
.zr-anat__list li{ display:flex; gap:14px; padding:18px 22px; border-bottom:1px solid #EEF1F5; }
.zr-anat__list li:last-child{ border-bottom:0; }
.zr-anat__ico{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--bg,#E8F0FE); color:var(--fg,#1D4ED8); }
.zr-anat__ico svg{ width:14px; height:14px; }
.zr-anat__list b{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; color:var(--pp-ink); }
.zr-anat__list code{ font-family:var(--pp-mono); font-size:12px; color:var(--pp-dim); }
.zr-anat__list p{ margin:6px 0 0; font-size:14px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; }

/* three ways in — the comp's 150px line-art marks, drawn to weight */
.zr-three{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.zr-three__card{ padding:28px 26px 30px; }
.zr-three__art{ display:grid; place-items:center; height:150px; margin-bottom:26px; }
.zr-three__art svg{ width:150px; height:150px; display:block; filter:drop-shadow(0 10px 22px var(--glow,rgba(124,92,245,.22))); }
.zr-three__art--violet{ --glow:rgba(124,92,245,.28); color:#8B72F7; }
.zr-three__art--blue  { --glow:rgba(0,145,255,.28);  color:#3B8DF5; }
.zr-three__art--green { --glow:rgba(16,163,127,.26); color:#22B573; }
.zr-three__card b{ display:block; font-size:20px; font-weight:500; line-height:1.3; color:var(--pp-ink); }
.zr-three__card p{ margin:8px 0 0; font-size:15px; line-height:24px; color:var(--pp-dim); text-wrap:pretty; }

/* everything around the answer */
.zr-bento--track .zr-b1{ grid-column:1 / span 8; }
.zr-bento--track .zr-b2{ grid-column:1 / span 4; }
.zr-bento--track .zr-b3{ grid-column:5 / span 4; }
.zr-bento--track .zr-b4{ grid-column:9 / span 4; grid-row:1 / span 2; }
.zr-models{ display:flex; flex-direction:column; gap:8px; padding:6px; }
.zr-models__row{ display:flex; align-items:center; gap:14px; padding:12px 16px; }
.zr-models__row .zr-eng{ width:118px; flex:0 0 auto; color:#fff; }
.zr-models__row .zr-bar{ flex:1 1 auto; }
.zr-models__row.is-off{ opacity:.45; }
.zr-log{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; font-family:var(--pp-mono); font-size:12px; line-height:18px; color:rgba(255,255,255,.72); }
.zr-log b{ font-weight:500; color:#7DD3A7; }
.zr-log em{ font-style:normal; color:rgba(255,255,255,.4); }
.zr-log .is-err{ color:#F5A524; }
.zr-alerts{ list-style:none; margin:0; padding:8px 16px; display:flex; flex-direction:column; }
.zr-alerts li{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:13px; color:rgba(255,255,255,.84); }
.zr-alerts i{ width:7px; height:7px; border-radius:50%; background:var(--c,#9AA1AC); flex:0 0 auto; }
.zr-mkts{ display:flex; flex-direction:column; gap:12px; padding:16px; }
.zr-mkts__row{ display:grid; grid-template-columns:32px 1fr 44px; align-items:center; gap:12px; }
.zr-mkts__row b{ font-family:var(--pp-mono); font-size:12px; font-weight:500; color:#fff; }
.zr-mkts__row .zr-bar::after{ background:linear-gradient(90deg,#1AA36B,#7DD3A7); }
.zr-mkts__row em{ font-style:normal; text-align:right; font-family:var(--pp-mono); font-size:12px; color:rgba(255,255,255,.7); }
.zr-mkts__note{ margin:6px 0 0; font-size:12.5px; color:rgba(255,255,255,.5); }

@media (max-width:1040px){
  .zr-pcard{ margin-inline:auto; }
  .zr-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-anat{ grid-template-columns:minmax(0,1fr); }
  .zr-three{ grid-template-columns:minmax(0,1fr); }
  .zr-three__art{ height:120px; }
  .zr-three__art svg{ width:120px; height:120px; }
  .zr-bento--track .zr-b1{ grid-column:1 / span 6; }
  .zr-bento--track .zr-b2{ grid-column:1 / span 3; }
  .zr-bento--track .zr-b3{ grid-column:4 / span 3; }
  .zr-bento--track .zr-b4{ grid-column:1 / span 6; grid-row:auto; }
}
@media (max-width:720px){
  .zr-stats{ grid-template-columns:minmax(0,1fr); }
  .zr-bento--track .zr-b1, .zr-bento--track .zr-b2,
  .zr-bento--track .zr-b3, .zr-bento--track .zr-b4{ grid-column:auto; }
  .zr-models__row .zr-eng{ width:96px; }
}

/* the coverage band — three groups of engine chips */
.zr-engines{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px,3vw,40px); padding:clamp(24px,3vw,34px); }
.zr-engines__lab{ display:block; margin-bottom:14px; font-family:var(--pp-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; }
.zr-engines ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.zr-engines li .zr-eng{ padding:8px 13px; border-radius:999px; background:#fff; border:1px solid #EDF1F7; font-size:13.5px; }
.zr-engines__note{ margin:18px 0 0; font-size:13px; line-height:20px; color:var(--pp-dim); text-wrap:pretty; }
@media (max-width:900px){ .zr-engines{ grid-template-columns:minmax(0,1fr); } }