/* ============================================================================
   Clear Cited — 7-KPI AEO MODEL (reusable section/visual)
   Designed once; used identically in audits, the methodology page, and listings.
   Markup contract (copy into any doc that links doc.css + this file):

   <section class="kpi7">
     <div class="kpi7-grid">
       <article class="kpi7-card">
         <span class="kpi7-no">01</span>
         <h3>% citing your URL</h3>
         <p>How often an answer links a claim to a page you own.</p>
         <div class="kpi7-meter"><i style="width:42%"></i></div>   <!-- optional score -->
         <span class="kpi7-val">42%</span>                          <!-- optional, mono -->
       </article>
       … 7 cards total …
     </div>
   </section>

   Numbers inside .kpi7-val / .kpi7-meter are MEASURED only (carry method elsewhere
   on the page) or omitted on the explanatory (methodology) use.
   ============================================================================ */
/* Uniform 4-up grid: every card equal width AND height (align-items:stretch).
   7 cards = a row of 4 + a row of 3 (left-aligned, same cell size). The meter
   and value are pushed to a shared baseline at the card bottom so they align
   across a row regardless of heading/description length. */
.kpi7-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.kpi7-card{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;position:relative;display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box}
.kpi7-no{font-family:var(--mono);font-size:12px;color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.kpi7-card h3{font-size:16px;letter-spacing:-.01em;margin:0;min-height:2.6em}
.kpi7-card p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0}
/* hero matches sibling height exactly — outline draws inside the same box */
.kpi7-card.hero{border-color:var(--brand);outline:1px solid var(--brand);outline-offset:-2px}
.kpi7-card.hero h3{color:var(--brand)}
/* meter + value sit at the bottom on a shared baseline */
.kpi7-meter{height:8px;background:var(--bar-track);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:auto}
.kpi7-meter>i{display:block;height:100%;background:var(--bar-you);border-radius:999px}
.kpi7-val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:20px;font-weight:600;color:var(--ink);margin-top:4px}
@media(max-width:860px){.kpi7-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.kpi7-grid{grid-template-columns:1fr}.kpi7-card h3{min-height:0}}
@media print{.kpi7-card{background:#f7fafc;border-color:#e3e9f0;break-inside:avoid}.kpi7-card.hero{box-shadow:none;border-color:#155fd1}}