/* ── ATTENT10N pricing-card shell ──
   Shared shell applied to every sample card on the pricing page.
   Card-specific visuals live in each card's own <style> block.
*/
:root {
  --cotton:#F8F4EE; --card:#FFFFFF; --ink:#1A1A1A; --ink-soft:#3D3A36;
  --muted:#888; --muted-2:#BBB7AF; --border:#D5D0C8; --border-light:#E8E4DE;
  --grass:#66BB6A; --grass-deep:#2A8A41; --grass-soft:rgba(102,187,106,0.10);
  --amber:#F5A623; --amber-deep:#B47800; --amber-soft:rgba(245,166,35,0.10);
  --red:#E85D4A; --red-deep:#B5331E; --red-soft:rgba(232,93,74,0.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--cotton);color:var(--ink);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;
  padding:20px 16px;display:flex;justify-content:center;
}

/* Module card */
.module{
  background:var(--card);border:1.5px solid var(--border);border-radius:14px;
  padding:22px 24px 20px;max-width:520px;width:100%;
}

/* Header: eyebrow + headline + optional score badge */
.module-header{
  display:grid;grid-template-columns:1fr auto;gap:16px;
  align-items:flex-start;margin-bottom:12px;
}
.module-eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--grass);margin-bottom:7px;
}
.module-headline{
  font-size:17px;font-weight:700;line-height:1.25;
  letter-spacing:-0.01em;color:var(--ink);max-width:26ch;
}

/* Score badge (optional) */
.score-badge{
  flex-shrink:0;text-align:center;border-radius:10px;padding:8px 12px;
  min-width:72px;background:var(--amber-soft);
  border:1.5px solid rgba(245,166,35,0.35);
}
.score-badge.green{background:var(--grass-soft);border-color:rgba(102,187,106,0.35)}
.score-badge.green .num{color:var(--grass-deep)}
.score-badge.red{background:var(--red-soft);border-color:rgba(232,93,74,0.35)}
.score-badge.red .num{color:var(--red-deep)}
.score-badge .num{
  font-size:22px;font-weight:800;line-height:1;
  color:var(--amber-deep);letter-spacing:-0.02em;
}
.score-badge .num .denom{font-size:12px;font-weight:600;opacity:0.65}
.score-badge .lbl{
  font-size:8.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);margin-top:4px;
}

/* Sample flag */
.sample-flag{
  display:inline-flex;align-items:center;gap:7px;padding:4px 10px;
  background:var(--amber-soft);border:1px solid rgba(245,166,35,0.32);
  border-radius:999px;font-size:10px;font-weight:600;
  color:var(--amber-deep);letter-spacing:0.02em;margin-bottom:14px;
}
.sample-flag .dot{width:6px;height:6px;border-radius:50%;background:var(--amber)}

/* Section label (inside visual block) */
.sec-label{
  font-size:9.5px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}

/* Visual sub-frame (used for chart-style modules) */
.viz-frame{
  background:var(--cotton);border:1px solid var(--border-light);
  border-radius:10px;padding:12px 8px;margin-bottom:12px;
}
.viz-frame svg{display:block;width:100%;height:auto}

/* Legend */
.legend{
  display:flex;flex-wrap:wrap;gap:10px 18px;
  font-size:11px;color:var(--muted);
  padding-top:12px;border-top:1px solid var(--border-light);
}
.legend .item{display:flex;align-items:center;gap:6px}
.legend b{color:var(--ink);font-weight:600}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.legend .sw.r{background:var(--grass);border-radius:50%}
.legend .key{width:16px;height:3px;border-radius:2px;flex:0 0 auto}
.legend .key.you{background:var(--grass)}
.legend .key.coh{background:#B7B1A6;height:0;border-top:2px dashed #B7B1A6}

/* Measured footer */
.measured{
  font-size:10.5px;color:var(--muted);padding-top:12px;margin-top:16px;
  border-top:1px solid var(--border-light);line-height:1.5;
}
.measured strong{color:var(--ink-soft);font-weight:600}

/* "AI Introduced" tag — for cohort rows AI surfaced beyond stated comp set */
.ai-intro{
  display:inline-block;
  font-size:8px;font-weight:700;letter-spacing:0.6px;
  color:var(--ink-soft);
  background:var(--cotton);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1.5px 5px;
  margin-left:6px;vertical-align:middle;
  text-transform:uppercase;
}