/* ── AI search optimization ─────────────────────────── Figma 9670:31636 ── */

/* the diagnosis card */
.zr-diag{
  width:min(640px,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-diag__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.zr-diag__q{ padding:14px 16px; border-radius:12px; background:#F4F5F7; text-align:center; font-size:15.5px; font-weight:500; color:var(--pp-ink); }
.zr-diag__h{ display:flex; justify-content:space-between; margin:18px 0 10px; font-family:var(--pp-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; }
.zr-diag__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.zr-diag__list li{ padding:12px 14px; border:1px solid #EEF1F5; border-radius:12px; background:#FAFBFC; }
.zr-diag__list li > div{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14.5px; color:var(--pp-ink); }
.zr-diag__list li b{ font-family:var(--pp-mono); font-size:13px; font-weight:500; color:var(--pp-body); }
.zr-diag__list .zr-bar{ height:6px; margin-top:9px; }
.zr-diag__list li:nth-child(2) .zr-bar::after{ opacity:.88; }
.zr-diag__list li:nth-child(3) .zr-bar::after{ opacity:.76; }
.zr-diag__list li:nth-child(4) .zr-bar::after{ opacity:.6; }
.zr-diag__foot{ display:flex; align-items:baseline; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid #EEF1F5; }
.zr-diag__foot b{ font-size:30px; font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--pp-ink); }
.zr-diag__foot span{ font-size:13.5px; color:var(--pp-dim); }
.zr-diag__foot .zr-chip{ margin-left:auto; }

/* four places to lose you */
.zr-steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.zr-step{ padding:24px 22px 26px; }
.zr-step__track{ display:flex; align-items:center; }
.zr-step__dot{ display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:1.5px solid #D9DEE7; color:#C3C8CF; }
.zr-step__dot svg{ width:13px; height:13px; }
.zr-step__dot--ok{ border-color:#3B82F6; color:#3B82F6; }
.zr-step__dot--x { border-color:#DC4C4C; color:#DC4C4C; }
.zr-step__dot--idle::after{ content:""; width:8px; height:8px; border-radius:50%; background:#D9DEE7; }
.zr-step__line{ flex:1 1 auto; height:1.5px; background:#E4E8EF; }
.zr-step__lab{ margin:8px 0 0; height:14px; padding-left:calc((100% - 30px) * var(--p, 0)); font-family:var(--pp-mono); font-size:11px; color:#DC4C4C; }
.zr-step__lab span{ display:inline-block; width:30px; text-align:center; }
.zr-step__n{ margin:18px 0 6px; font-family:var(--pp-mono); font-size:11px; letter-spacing:.1em; color:#9AA1AC; }
.zr-step b{ display:block; font-size:20px; font-weight:500; line-height:1.25; color:var(--pp-ink); }
.zr-step p{ margin:10px 0 0; font-size:14px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; }

/* three lanes */
.zr-lanes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.zr-lane{ display:flex; flex-direction:column; padding:24px 22px; }
.zr-lane__ico{ display:grid; place-items:center; width:36px; height:36px; margin-bottom:16px; border-radius:10px; background:var(--bg,#E8F0FE); color:var(--fg,#1D4ED8); }
.zr-lane__ico svg{ width:18px; height:18px; }
.zr-lane b{ font-size:20px; font-weight:500; color:var(--pp-ink); }
.zr-lane > p{ margin:8px 0 18px; font-size:14.5px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; }
.zr-lane ul{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.zr-lane li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:10px; background:#F7F8FA; font-size:13.5px; color:var(--pp-ink); }
.zr-lane li span{ min-width:0; }

/* ranked by what it moves */
.zr-rank{ margin-top:16px; overflow:hidden; }
.zr-rank__scroll{ overflow-x:auto; }
.zr-rank table{ width:100%; min-width:780px; border-collapse:collapse; }
.zr-rank th{ padding:14px 18px; text-align:left; background:#FAFBFC; border-bottom:1px solid #EEF1F5; font-family:var(--pp-mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; }
.zr-rank td{ padding:16px 18px; border-bottom:1px solid #F2F5F9; vertical-align:middle; font-size:14px; color:var(--pp-body); }
.zr-rank tr:last-child td{ border-bottom:0; }
.zr-rank__n{ font-family:var(--pp-mono); font-size:12.5px; color:#9AA1AC; }
.zr-rank__fix b{ display:block; font-size:15px; font-weight:500; color:var(--pp-ink); }
.zr-rank__fix span{ display:inline-flex; align-items:center; gap:8px; margin-top:5px; font-family:var(--pp-mono); font-size:12px; color:#9AA1AC; }
.zr-rank__gain{ font-family:var(--pp-mono); font-weight:500; color:#0F7A45; white-space:nowrap; }
.zr-rank__eff{ font-family:var(--pp-mono); font-size:13px; white-space:nowrap; }
.zr-rank__conf{ display:flex; align-items:center; gap:10px; }
.zr-rank__conf .zr-bar{ width:120px; height:7px; }
.zr-rank__conf em{ font-style:normal; font-family:var(--pp-mono); font-size:12px; color:#9AA1AC; }
.zr-rank__note{ padding:14px 18px; border-top:1px solid #EEF1F5; background:#FAFBFC; font-size:13px; line-height:20px; color:var(--pp-dim); }

/* the edit */
.zr-edit{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:10px; }
.zr-diff{ display:flex; flex-direction:column; overflow:hidden; }
.zr-diff__bar{ display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid #EEF1F5; font-family:var(--pp-mono); font-size:12.5px; color:var(--pp-body); }
.zr-diff__code{ margin:0; padding:10px 0; font-family:var(--pp-mono); font-size:12.5px; line-height:26px; color:var(--pp-body); overflow-x:auto; }
.zr-diff__code .l{ display:grid; grid-template-columns:44px 14px minmax(0,1fr); gap:6px; padding-right:16px; white-space:pre-wrap; }
.zr-diff__code .l i{ text-align:right; font-style:normal; color:#B4BAC4; }
.zr-diff__code .l s{ text-decoration:none; color:#9AA1AC; }
.zr-diff__code .l.del{ background:#FDECEC; color:#B42318; } .zr-diff__code .l.del s{ color:#B42318; }
.zr-diff__code .l.add{ background:#E7F7EC; color:#0F7A45; } .zr-diff__code .l.add s{ color:#0F7A45; }
.zr-diff__acts{ display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:14px 18px; margin-top:auto; border-top:1px solid #EEF1F5; }
.zr-diff__acts em{ margin-right:auto; font-style:normal; font-size:13px; color:var(--pp-dim); }
.zr-diff__acts span{ display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:8px; font-size:13.5px; font-weight:500; }
.zr-diff__acts .ok{ background:var(--zr-blue); color:#fff; box-shadow:inset 0 3px 14px rgba(255,255,255,.35); }
.zr-diff__acts .no{ border:1px solid var(--pp-hair); color:var(--pp-ink); }
.zr-causes{ display:flex; flex-direction:column; gap:10px; }
.zr-cause{ padding:18px 20px; }
.zr-cause b{ display:block; font-size:15px; font-weight:500; color:var(--pp-ink); }
.zr-cause p{ margin:6px 0 12px; font-size:13.5px; line-height:20px; color:var(--pp-dim); }
.zr-cause div{ display:flex; gap:8px; flex-wrap:wrap; }

/* content: the editor and its score */
.zr-content{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:10px; }
.zr-editor{ display:flex; flex-direction:column; overflow:hidden; }
.zr-editor__bar{ display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid #EEF1F5; }
.zr-editor__tabs{ display:flex; gap:4px; }
.zr-editor__tabs b{ padding:6px 12px; border-radius:8px; font-size:13px; font-weight:500; color:var(--pp-dim); }
.zr-editor__tabs b.is-on{ background:#F1F3F6; color:var(--pp-ink); }
.zr-editor__body{ padding:22px 24px 26px; }
.zr-editor__body h4{ margin:0 0 12px; font-size:19px; font-weight:500; line-height:1.3; letter-spacing:-.02em; color:var(--pp-ink); }
.zr-editor__body p{ margin:0 0 10px; font-size:14px; line-height:23px; color:var(--pp-body); }
.zr-editor__body mark{ background:#E4F7EC; color:#0F5C36; border-radius:4px; padding:1px 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.zr-editor__body .zr-skel{ margin-top:14px; }
.zr-editor__body .zr-skel i{ --sk:#EEF1F5; }
.zr-aeo{ padding:22px; display:flex; flex-direction:column; }
.zr-aeo__score{ display:flex; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #EEF1F5; }
.zr-aeo__ring{ width:72px; height:72px; flex:0 0 auto; }
.zr-aeo__score b{ display:block; font-size:30px; font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--pp-ink); }
.zr-aeo__score span{ display:block; margin-top:4px; font-size:13px; color:var(--pp-dim); }
.zr-aeo ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.zr-aeo li{ display:grid; grid-template-columns:minmax(0,1fr) 92px 30px; align-items:center; gap:10px; font-size:13px; color:var(--pp-body); }
.zr-aeo li .zr-bar{ height:6px; }
.zr-aeo li em{ font-style:normal; text-align:right; font-family:var(--pp-mono); font-size:12px; color:var(--pp-dim); }
.zr-aeo__pub{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:auto; padding-top:16px; font-size:12.5px; color:var(--pp-dim); }
.zr-aeo__pub i{ font-style:normal; padding:3px 8px; border-radius:6px; background:#F1F3F6; color:var(--pp-body); font-size:12px; font-weight:500; }
.zr-trio{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px 32px; margin-top:32px; }
.zr-trio > div{ display:flex; gap:14px; }
.zr-trio i{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:#E8F0FE; color:var(--zr-blue); }
.zr-trio i svg{ width:17px; height:17px; }
.zr-trio b{ display:block; font-size:15.5px; font-weight:500; color:var(--pp-ink); }
.zr-trio p{ margin:4px 0 0; font-size:14px; line-height:21px; color:var(--pp-dim); text-wrap:pretty; }

/* execution: workflows and the API, side by side */
.zr-exec{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.zr-exec__card{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:28px; text-decoration:none; transition:border-color .16s var(--zr-ease-out-quad), box-shadow .16s var(--zr-ease-out-quad); }
.zr-exec__card:hover{ border-color:#C9D6F2; box-shadow:0 12px 30px -14px rgba(16,49,110,.2); }
.zr-exec__card b{ font-size:21px; font-weight:500; line-height:1.3; letter-spacing:-.02em; color:var(--pp-ink); }
.zr-exec__card p{ margin:0; font-size:14.5px; line-height:22px; color:var(--pp-dim); text-wrap:pretty; }
.zr-exec__card .zr-pp__more{ margin-top:auto; }
.zr-exec__flow{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:#9AA1AC; }
.zr-exec__flow span{ padding:6px 10px; border-radius:8px; background:#F1F3F6; color:var(--pp-ink); font-weight:500; font-size:12.5px; }
.zr-exec__flow span.is-live{ background:#E4F7EC; color:#0F7A45; }
.zr-code{ margin:0; width:100%; padding:14px 16px; border-radius:12px; background:#0F1720; color:#D7DEE8; font-family:var(--pp-mono); font-size:12.5px; line-height:20px; overflow-x:auto; white-space:pre; }
.zr-code b{ font-weight:500; color:#7DD3A7; }

@media (max-width:1040px){
  .zr-diag{ margin-inline:auto; }
  .zr-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-lanes{ grid-template-columns:minmax(0,1fr); }
  .zr-edit{ grid-template-columns:minmax(0,1fr); }
  .zr-causes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
  .zr-content{ grid-template-columns:minmax(0,1fr); }
  .zr-trio{ grid-template-columns:minmax(0,1fr); }
  .zr-exec{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px){
  .zr-steps{ grid-template-columns:minmax(0,1fr); }
  .zr-causes{ grid-template-columns:minmax(0,1fr); }
}

/* the before/after pair — the after card is ringed so the eye lands on it */
.zr-proof{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; align-items:start; }
.zr-proof__side{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; min-width:0; }
.zr-proof__side .zr-answer{ width:100%; }
.zr-answer.is-before{ opacity:.72; }
.zr-answer.is-after{ border-color:#1463F5; box-shadow:0 18px 40px -20px rgba(20,99,245,.32); }
@media (max-width:1040px){ .zr-proof{ grid-template-columns:minmax(0,1fr); } }