/* ============================================================
   components.css - reusable components (eyebrow lives in base)
   keyphrase, card, chip, role, bullet list, screenshot frame,
   caption, stat numbers, decorative dotgrid & glow.
   ============================================================ */

/* key phrase block */
.keyphrase{display:flex;gap:1.125rem;align-items:flex-start;padding:1.375rem 1.625rem;
  background:var(--paper);border-radius:var(--r-sm);border-left:.25rem solid var(--acc,var(--orange));}
.paper .keyphrase{background:var(--white);}
.dark .keyphrase,.ink .keyphrase{background:rgba(255,255,255,.05);}
.keyphrase .mk{font-family:var(--mono);font-size:.8125rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc,var(--orange));white-space:nowrap;padding-top:.1875rem;}
.keyphrase p{margin:0;font-size:1.25rem;line-height:1.4;font-weight:600;color:var(--t-ink);}
.dark .keyphrase p,.ink .keyphrase p{color:var(--d-ink);}

/* cards / chips */
.card{background:var(--paper);border-radius:var(--r);padding:1.875rem;}
.paper .card{background:var(--white);}
.dark .card,.ink .card{background:var(--night-2);}
.card.outline{background:transparent;border:.09375rem solid var(--t-line);}
.dark .card.outline{border-color:var(--d-line);}

.chip{display:inline-flex;align-items:center;gap:.5625rem;font-size:1.5rem;font-weight:600;
  padding:.625rem 1rem;border-radius:.6875rem;background:var(--paper);color:var(--t-ink);}
.dark .chip,.ink .chip{background:rgba(255,255,255,.07);color:var(--d-ink);}
.chip .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--dot,var(--acc,var(--orange)));flex:none;}

/* role label blocks (SEO / buyer) used in module series */
.role{border-radius:var(--r-sm);padding:1.375rem 1.5rem;}
.role .rh{display:flex;align-items:center;gap:.6875rem;font-family:var(--mono);font-size:.875rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.875rem;}
.role .ic{width:1.625rem;height:1.625rem;border-radius:.5rem;display:grid;place-items:center;flex:none;}
.role.seo{background:var(--seo-bg);}
.role.seo .rh{color:var(--seo);}
.role.seo .ic{background:var(--seo);color:#fff;}
.role.buyer{background:var(--buyer-bg);}
.role.buyer .rh{color:var(--buyer);}
.role.buyer .ic{background:var(--buyer);color:#fff;}
.dark .role.seo{background:rgba(63,127,224,.16);}
.dark .role.buyer{background:rgba(29,151,143,.18);}
.role ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5625rem;}
.role li{font-size:.96875rem;line-height:1.34;color:var(--t-mut);padding-left:1.125rem;position:relative;font-weight:500;}
.dark .role li{color:#c2c9d2;}
.role li::before{content:"";position:absolute;left:0;top:.5625rem;width:.4375rem;height:.4375rem;border-radius:.125rem;
  background:currentColor;opacity:.5;}
.role.seo li::before{background:var(--seo);opacity:.6;}
.role.buyer li::before{background:var(--buyer);opacity:.6;}

/* generic bullet list */
ul.bul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.8125rem;}
ul.bul li{font-size:1.25rem;line-height:1.4;color:var(--t-mut);padding-left:1.625rem;position:relative;font-weight:450;}
.dark ul.bul li,.ink ul.bul li{color:#c2c9d2;}
ul.bul li::before{content:"";position:absolute;left:0;top:.5625rem;width:.5625rem;height:.5625rem;border-radius:.1875rem;
  background:var(--acc,var(--orange));}
ul.bul li b{color:var(--t-ink);font-weight:700;}
.dark ul.bul li b,.ink ul.bul li b{color:var(--d-ink);}

/* screenshot frame */
.shot{border-radius:1.125rem;overflow:hidden;background:var(--white);
  box-shadow:0 1.5rem 3.75rem -1.375rem rgba(23,26,30,.4),0 .125rem .5rem rgba(23,26,30,.08);
  border:.0625rem solid var(--t-line);position:relative;}
.shot .bar{display:flex;align-items:center;gap:.4375rem;padding:.8125rem 1.125rem;background:var(--paper);
  border-bottom:.0625rem solid var(--t-line);}
.shot .bar i{width:.6875rem;height:.6875rem;border-radius:50%;background:#cfd6dd;display:block;}
.shot .bar .url{margin-left:.75rem;font-family:var(--mono);font-size:.8125rem;color:var(--t-faint);
  background:var(--white);padding:.3125rem .875rem;border-radius:.5rem;flex:1;}
.shot img{display:block;width:100%;height:auto;}
.shot.crop img{height:100%;object-fit:cover;object-position:top center;}
.caption{font-size:.9375rem;line-height:1.4;color:var(--t-faint);margin-top:.875rem;font-weight:500;}
.dark .caption,.ink .caption{color:var(--d-faint);}
.caption b{color:var(--acc,var(--orange));font-weight:700;}

/* stat / number */
.statnum{font-family:var(--mono);font-weight:700;letter-spacing:-.02em;line-height:1;
  color:var(--acc,var(--orange));}
.bignum{font-size:7.5rem;font-weight:800;line-height:.9;letter-spacing:-.04em;
  font-family:var(--font);color:var(--acc,var(--orange));}

/* divider section number */
.divnum{font-size:18.75rem;font-weight:800;line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:.125rem var(--d-line);}

/* decorative dot grid - per-instance colour set via extracted ix class */
.dotgrid{position:absolute;inset:0;pointer-events:none;z-index:0;color:var(--ink);
  background-image:radial-gradient(currentColor 1.1px,transparent 1.1px);
  background-size:2.625rem 2.625rem;opacity:.05;}
.dark .dotgrid,.ink .dotgrid{opacity:.06;}

/* soft glow - geometry & colour come from the extracted ix class per instance */
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(.625rem);}