/* ── Warranty seal motif (v3 / Guarantee) ──────────────
   Reusable seal/certificate motifs. Drop-in via <link>.
*/

/* Seal stamp — rotating ring of text around a center mark */
.zr-seal {
  --seal-size: 200px;
  --seal-color: var(--zr-charcoal);
  --seal-bg: transparent;
  position: relative;
  width: var(--seal-size);
  height: var(--seal-size);
  flex-shrink: 0;
}
.zr-seal .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--seal-color);
  background: var(--seal-bg);
}
.zr-seal .ring-inner {
  position: absolute; inset: 14%;
  border-radius: 50%;
  border: 1px solid var(--seal-color);
  opacity: .35;
}
.zr-seal .core {
  position: absolute; inset: 24%;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  color: var(--seal-color);
  gap: 4px;
  padding: 8px;
}
.zr-seal .core .mono {
  font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
}
.zr-seal .core .big {
  font: 500 24px/1 var(--zr-font-display);
  letter-spacing: -.02em;
}
.zr-seal .core .small {
  font: 600 9px/1.3 var(--zr-font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
}
.zr-seal svg.text-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: zr-seal-spin 24s linear infinite;
}
.zr-seal svg.text-ring text {
  fill: var(--seal-color);
  font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.zr-seal.no-spin svg.text-ring { animation: none; }
@keyframes zr-seal-spin {
  to { transform: rotate(360deg); }
}

/* Inverted (on dark backgrounds) */
.zr-seal.on-dark { --seal-color: #fff; }

/* Compact static badge — no ring text */
.zr-warranty-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 14px;
  border: 1px solid var(--zr-charcoal);
  border-radius: 999px;
  background: #fff;
  font: 600 12px/1 var(--zr-font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zr-charcoal);
}
.zr-warranty-badge .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--zr-charcoal);
  position: relative;
}
.zr-warranty-badge .dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 999px;
  border: 1px solid var(--zr-charcoal);
  opacity: .35;
}
.zr-warranty-badge.on-dark {
  background: transparent; border-color: rgba(255,255,255,.4);
  color: #fff;
}
.zr-warranty-badge.on-dark .dot { background: var(--zr-purple-soft); }
.zr-warranty-badge.on-dark .dot::after { border-color: rgba(255,255,255,.4); }

/* Coverage chip — for showing $X coverage */
.zr-coverage-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--zr-purple-50);
  color: var(--zr-purple-deep);
  font: 700 13px/1 var(--zr-font-sans);
}
.zr-coverage-chip .label {
  font: 600 10px/1 var(--zr-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

/* Certificate frame — ornamental edge for callout cards */
.zr-cert-frame {
  position: relative;
  border: 1.5px solid var(--zr-charcoal);
  border-radius: 4px;
  padding: 32px;
  background: #fff;
}
.zr-cert-frame::before,
.zr-cert-frame::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1.5px solid var(--zr-charcoal);
}
.zr-cert-frame::before {
  top: 8px; left: 8px;
  border-right: 0; border-bottom: 0;
}
.zr-cert-frame::after {
  bottom: 8px; right: 8px;
  border-left: 0; border-top: 0;
}
.zr-cert-frame .corner-tr,
.zr-cert-frame .corner-bl {
  position: absolute;
  width: 16px; height: 16px;
  border: 1.5px solid var(--zr-charcoal);
}
.zr-cert-frame .corner-tr {
  top: 8px; right: 8px;
  border-left: 0; border-bottom: 0;
}
.zr-cert-frame .corner-bl {
  bottom: 8px; left: 8px;
  border-right: 0; border-top: 0;
}
.zr-cert-frame.on-dark {
  border-color: rgba(255,255,255,.6);
  background: transparent; color: #fff;
}
.zr-cert-frame.on-dark::before,
.zr-cert-frame.on-dark::after,
.zr-cert-frame.on-dark .corner-tr,
.zr-cert-frame.on-dark .corner-bl {
  border-color: rgba(255,255,255,.6);
}

/* "Underwritten" inline mark */
.zr-uw-mark {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zr-purple-deep);
}
.zr-uw-mark::before {
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(106, 84, 220, .15);
}

/* Persona tabs — for the multi-persona homepage section */
.zr-persona-tabs {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  background: var(--zr-mist);
  border-radius: 14px;
  margin-bottom: 32px;
}
.zr-persona-tabs button {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 18px;
  border-radius: 10px;
  font: 600 13px/1.2 var(--zr-font-sans);
  color: var(--zr-charcoal);
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  transition: background .2s;
  white-space: nowrap;
}
.zr-persona-tabs button:hover { background: rgba(255,255,255,.5); }
.zr-persona-tabs button.active {
  background: #fff;
  box-shadow: var(--zr-shadow-card);
}
.zr-persona-tabs button .role {
  font: 700 10px/1 var(--zr-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zr-purple-deep);
}
.zr-persona-tabs button .pain {
  font-weight: 500;
  color: var(--zr-slate);
  font-size: 13px;
}
.zr-persona-tabs button.active .pain { color: var(--zr-charcoal); }