/* ============================================================
   about-polish.css — premium presentation pass for about.html
   Additive, CSS-only. Loaded AFTER styles.css.
   Scope: body:has(.legal-content):has(.protection-card) — a
   combination unique to about.html, so nothing leaks to the
   other legal pages (legal-content only) or checkout
   (protection-card only). Reuses existing tokens only.
   No markup / structure / JS changes.
   ============================================================ */

/* ---------------- Page rhythm: content width + cadence ------------- */
body:has(.legal-content):has(.protection-card) main.wrap {
  max-width: 900px;
  padding-bottom: 96px;
}
body:has(.legal-content):has(.protection-card) .page-header {
  padding: 72px 0 30px;
}

/* ---------------- HERO: mono gold eyebrow + heavier title ---------- */
body:has(.legal-content):has(.protection-card) .page-header .eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em; /* aligned to the canonical redesign eyebrow (~0.13em) */
  color: var(--gold-light);
}
/* signature glowing gold dot to match the rest of the site's eyebrows */
body:has(.legal-content):has(.protection-card) .page-header .eyebrow::before {
  background: var(--gold-light);
  box-shadow: 0 0 8px rgba(232,203,106,0.85);
}
body:has(.legal-content):has(.protection-card) .page-header h1 {
  font-weight: 840;
  letter-spacing: -0.038em;
  font-size: clamp(34px, 5vw, 52px);
  /* signature cream-to-gold key-title treatment (matches hero em) */
  background: linear-gradient(118deg, #f6eccf 0%, var(--gold-light) 46%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-light);
}
body:has(.legal-content):has(.protection-card) .page-header p {
  color: var(--ink-soft);
  max-width: 640px;
  font-size: 17.5px;
}
body:has(.legal-content):has(.protection-card) .page-header::after {
  width: 72px;
  box-shadow: 0 0 20px -2px rgba(201,162,39,0.5);
}

/* ---------------- Editorial body: wider measure, lead para --------- */
body:has(.legal-content):has(.protection-card) .legal-content {
  max-width: 720px;
}
body:has(.legal-content):has(.protection-card) .legal-content p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
/* Lead paragraph — the opening line of each narrative block */
body:has(.legal-content):has(.protection-card) .legal-content h2 + p {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
}

/* ---------------- Section headings: tighter, lit gold tick --------- */
body:has(.legal-content):has(.protection-card) .legal-content h2 {
  position: relative;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.024em;
  color: var(--ink);
  padding-left: 16px;
  margin: 44px 0 16px;
}
body:has(.legal-content):has(.protection-card) .legal-content h2:first-child {
  margin-top: 8px;
}
body:has(.legal-content):has(.protection-card) .legal-content h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 0.86em;
  border-radius: 3px;
  background: var(--accent-gradient, var(--gold));
  box-shadow: 0 0 14px -2px rgba(201,162,39,0.55);
}

/* ---------------- Values card: depth + lit top edge --------------- */
body:has(.legal-content):has(.protection-card) .protection-card {
  position: relative;
  margin-top: 24px;
  padding: 28px 30px;
  border-radius: var(--radius-l);
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014)) padding-box,
    linear-gradient(150deg, rgba(255,255,255,0.22), rgba(255,255,255,0.03) 48%, rgba(201,162,39,0.14)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 40px rgba(0,0,0,0.34), 0 3px 10px rgba(0,0,0,0.26);
  overflow: hidden;
}
body:has(.legal-content):has(.protection-card) .protection-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.28) 20%, rgba(255,255,255,0.28) 80%, transparent);
}

/* Each value reads as its own entry with a gold-lit icon chip */
body:has(.legal-content):has(.protection-card) .protection-row {
  gap: 16px;
  padding: 6px;
  margin: -6px;
  border-radius: var(--radius-s);
  transition: background .25s var(--ease-out);
}
body:has(.legal-content):has(.protection-card) .protection-row + .protection-row {
  margin-top: 22px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
body:has(.legal-content):has(.protection-card) .protection-row:hover {
  background: rgba(255,255,255,0.028);
}
body:has(.legal-content):has(.protection-card) .protection-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(232,203,106,0.16), rgba(201,162,39,0.06));
  border: 1px solid rgba(201,162,39,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
body:has(.legal-content):has(.protection-card) .protection-row:hover .protection-icon {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 16px -6px rgba(201,162,39,0.5);
}
body:has(.legal-content):has(.protection-card) .protection-icon svg {
  width: 19px; height: 19px;
}
body:has(.legal-content):has(.protection-card) .protection-row b {
  font-size: 15px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
body:has(.legal-content):has(.protection-card) .protection-row span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* ---------------- Contact card: premium glass + lit edge ---------- */
body:has(.legal-content):has(.protection-card) .verify-card {
  position: relative;
  padding: 30px 32px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014)) padding-box,
    linear-gradient(150deg, rgba(255,255,255,0.22), rgba(255,255,255,0.03) 48%, rgba(201,162,39,0.14)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 40px rgba(0,0,0,0.34), 0 3px 10px rgba(0,0,0,0.26);
  overflow: hidden;
}
body:has(.legal-content):has(.protection-card) .verify-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.3) 22%, rgba(255,255,255,0.3) 78%, transparent);
}
body:has(.legal-content):has(.protection-card) .verify-status {
  margin-bottom: 0;
}
body:has(.legal-content):has(.protection-card) .verify-status-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(30,142,90,0.18), 0 0 14px -2px rgba(30,142,90,0.6);
}
body:has(.legal-content):has(.protection-card) .verify-status b {
  font-size: 16px;
  letter-spacing: -0.012em;
}
body:has(.legal-content):has(.protection-card) .verify-status span {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
body:has(.legal-content):has(.protection-card) .verify-card a {
  color: var(--gold-light);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
body:has(.legal-content):has(.protection-card) .verify-card a:hover {
  color: var(--gold);
  border-bottom-color: currentColor;
}

/* ---------------- Tasteful reveal on load ------------------------- */
body:has(.legal-content):has(.protection-card) .page-header,
body:has(.legal-content):has(.protection-card) .legal-content,
body:has(.legal-content):has(.protection-card) .protection-card,
body:has(.legal-content):has(.protection-card) .verify-card {
  animation: aboutReveal .7s var(--ease-out) both;
}
body:has(.legal-content):has(.protection-card) .legal-content { animation-delay: .06s; }
body:has(.legal-content):has(.protection-card) .protection-card { animation-delay: .12s; }
body:has(.legal-content):has(.protection-card) .verify-card { animation-delay: .18s; }
@keyframes aboutReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------- Responsive: keep it tight on mobile ------------- */
@media (max-width: 560px) {
  body:has(.legal-content):has(.protection-card) main.wrap { padding-bottom: 64px; }
  body:has(.legal-content):has(.protection-card) .page-header { padding-top: 52px; }
  body:has(.legal-content):has(.protection-card) .protection-card { padding: 22px 20px; }
  body:has(.legal-content):has(.protection-card) .verify-card { padding: 24px 22px; }
}

/* ---------------- Motion-safety ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body:has(.legal-content):has(.protection-card) .page-header,
  body:has(.legal-content):has(.protection-card) .legal-content,
  body:has(.legal-content):has(.protection-card) .protection-card,
  body:has(.legal-content):has(.protection-card) .verify-card {
    animation: none;
  }
  body:has(.legal-content):has(.protection-card) .protection-row,
  body:has(.legal-content):has(.protection-card) .protection-icon,
  body:has(.legal-content):has(.protection-card) .verify-card a {
    transition: none;
  }
}

/* ---------------- Typographic finishing --------------------------
   Orphan/widow control for the editorial headings + narrative prose. */
body:has(.legal-content):has(.protection-card) .page-header h1,
body:has(.legal-content):has(.protection-card) .legal-content h2 { text-wrap: balance; }
body:has(.legal-content):has(.protection-card) .page-header p,
body:has(.legal-content):has(.protection-card) .legal-content p { text-wrap: pretty; }