/* ==========================================================================
   legal.css — the look for /privacy, /terms and /refund.

   Self-contained on purpose. These pages do NOT load style.css, so nothing
   here can leak into the marketing site and nothing there can fight this
   file. The palette is lifted from pages/paypro-ui.php so the policy pages
   and the checkout a buyer just came from read as one product.

   Class prefix is `ocl-` (One Click Legal). style.css still carries an older
   `.legal-*` block for the previous dark pages — the two never meet.
   ========================================================================== */

:root {
  --ink: #0f172a;
  --body: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: #eff6ff;
  --sky: #38bdf8;
  --line: #e2e8f0;
  --line-soft: #eef2f7;
  --ok: #059669;
  --ok-soft: #ecfdf5;
  --ok-line: #a7f3d0;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --warn-line: #fde68a;
  --radius: 18px;
  --shadow: 0 24px 50px -28px rgba(15, 23, 42, .32);
  --shadow-sm: 0 10px 24px -18px rgba(15, 23, 42, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.ocl {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--body);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(1100px 520px at 50% -220px, #dbeafe 0%, rgba(219, 234, 254, 0) 70%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  background-color: #f1f5f9;
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- skip link (keyboard users land here first) ---------- */
.ocl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px;
  border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.ocl-skip:focus { left: 0; }

/* ---------- top bar ---------- */
.ocl-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.ocl-topbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 11px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ocl-brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; }
/* The logo is a wordmark, so it is the only branding in the bar. Capped by
   width as well as height so a narrow phone cannot let it crowd out the
   "Back to Home" button. */
.ocl-brand img {
  display: block; height: 34px; width: auto;
  max-width: 190px; object-fit: contain; border-radius: 7px;
}
.ocl-home {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 14px;
  text-decoration: none; border: 1px solid var(--brand-dark);
  box-shadow: 0 6px 14px -8px rgba(37, 99, 235, .9);
  transition: background .16s ease, transform .12s ease;
}
.ocl-home:hover { background: var(--brand-dark); transform: translateY(-1px); }
.ocl-home:focus-visible { outline: 3px solid rgba(37, 99, 235, .4); outline-offset: 2px; }

/* ---------- layout ---------- */
.ocl-wrap {
  max-width: 1120px; margin: 0 auto; padding: 26px 18px 84px;
  display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 30px;
  align-items: start;
}

/* ---------- hero ---------- */
.ocl-hero {
  grid-column: 1 / -1;
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 28px 26px;
}
.ocl-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--sky) 100%);
}
.ocl-eyebrow {
  display: inline-block; margin: 0 0 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-dark); background: var(--brand-soft);
  border: 1px solid #dbeafe; border-radius: 999px; padding: 5px 12px;
}
.ocl-hero h1 {
  margin: 0 0 10px; color: var(--ink); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.14; font-size: clamp(28px, 4.4vw, 42px);
}
.ocl-lede { margin: 0 0 18px; font-size: clamp(15px, 1.6vw, 17px); color: var(--muted); max-width: 68ch; }
.ocl-stamps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ocl-stamps li {
  font-size: 13px; color: var(--muted);
  background: #f8fafc; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 13px;
}
.ocl-stamps strong { color: var(--ink); font-weight: 650; }

/* ---------- table of contents ---------- */
.ocl-toc {
  position: sticky; top: 74px;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px 14px;
}
.ocl-toc h2 {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 2px 4px 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ocl-toc-toggle {
  display: none; border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; padding: 0; width: 100%; text-align: left;
  align-items: center; justify-content: space-between; gap: 8px;
}
.ocl-toc-toggle::after {
  content: "▾"; font-size: 13px; transition: transform .18s ease; flex: none;
}
.ocl-toc[data-state="expanded"] .ocl-toc-toggle::after { transform: rotate(180deg); }
.ocl-toc nav { display: grid; gap: 3px; }
.ocl-toc a {
  display: block; padding: 7px 11px; border-radius: 9px;
  color: var(--body); text-decoration: none; font-size: 14px; line-height: 1.45;
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease;
}
.ocl-toc a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.ocl-toc a[aria-current="true"] {
  background: var(--brand-soft); color: var(--brand-dark);
  font-weight: 650; border-color: #dbeafe;
}
.ocl-toc a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- content card ---------- */
.ocl-card {
  min-width: 0;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 34px 34px;
}
.ocl-card section { padding-top: 22px; }
.ocl-card section + section { border-top: 1px solid var(--line-soft); margin-top: 26px; }
.ocl-card h2 {
  margin: 0 0 12px; color: var(--ink); font-weight: 750; letter-spacing: -.015em;
  line-height: 1.3; font-size: clamp(19px, 2.2vw, 23px);
  scroll-margin-top: 78px;
}
.ocl-card h2 .ocl-num {
  display: inline-block; min-width: 1.7em; color: var(--brand); font-variant-numeric: tabular-nums;
}
.ocl-card h3 {
  margin: 22px 0 8px; color: var(--ink); font-weight: 700; font-size: 16px;
  scroll-margin-top: 78px;
}
.ocl-card p { margin: 0 0 14px; }
.ocl-card p:last-child, .ocl-card ul:last-child, .ocl-card ol:last-child { margin-bottom: 0; }
.ocl-card ul, .ocl-card ol { margin: 0 0 14px; padding-left: 22px; }
.ocl-card li { margin-bottom: 7px; }
.ocl-card li:last-child { margin-bottom: 0; }
.ocl-card strong { color: var(--ink); font-weight: 650; }
.ocl-card a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.ocl-card a:hover { color: var(--brand); }
.ocl-card section[id] { scroll-margin-top: 78px; }

/* definition lists (used for "what the words mean") */
.ocl-defs { margin: 0 0 14px; }
.ocl-defs dt { font-weight: 650; color: var(--ink); margin-top: 12px; }
.ocl-defs dt:first-child { margin-top: 0; }
.ocl-defs dd { margin: 3px 0 0; padding-left: 0; }

/* ---------- callouts ---------- */
.ocl-box {
  border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 12px; padding: 15px 18px; margin: 0 0 16px;
  background: #f8fafc;
}
.ocl-box > :last-child { margin-bottom: 0; }
.ocl-box h3 { margin: 0 0 8px !important; font-size: 15px; }
.ocl-box--key { background: var(--brand-soft); border-color: #bfdbfe; border-left-color: var(--brand); }
.ocl-box--ok { background: var(--ok-soft); border-color: var(--ok-line); border-left-color: var(--ok); }
.ocl-box--ok h3 { color: #065f46; }
.ocl-box--warn { background: var(--warn-soft); border-color: var(--warn-line); border-left-color: #d97706; }
.ocl-box--warn h3 { color: var(--warn); }

/* the "in short" summary that opens every policy */
.ocl-summary {
  background: var(--ok-soft); border: 1px solid var(--ok-line);
  border-radius: 14px; padding: 18px 20px; margin: 22px 0 4px;
}
.ocl-summary h2 {
  margin: 0 0 10px !important; font-size: 16px !important; color: #065f46 !important;
  letter-spacing: .02em; text-transform: uppercase; font-weight: 700;
}
.ocl-summary ul { list-style: none; padding: 0; margin: 0; }
.ocl-summary li { position: relative; padding-left: 27px; margin-bottom: 9px; }
.ocl-summary li:last-child { margin-bottom: 0; }
.ocl-summary li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--ok); font-weight: 800;
}

/* ---------- tables ---------- */
.ocl-scroll { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.ocl-table {
  width: 100%; min-width: 460px; border-collapse: collapse;
  font-size: 14.5px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.ocl-table th, .ocl-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.ocl-table thead th {
  background: #f8fafc; color: var(--ink); font-weight: 700;
  font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.ocl-table tbody tr:last-child td { border-bottom: 0; }
.ocl-table tbody tr:nth-child(even) td { background: #fcfdfe; }

/* ---------- identity / contact block ---------- */
.ocl-identity {
  grid-column: 1 / -1;
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 24px 26px; margin-top: 22px;
}
.ocl-identity h2 {
  margin: 0 0 14px; font-size: 17px; color: var(--ink); font-weight: 750;
}
.ocl-identity-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px;
}
.ocl-identity dt {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 4px;
}
.ocl-identity dd { margin: 0; color: var(--ink); font-size: 15px; }
.ocl-identity dd a { color: var(--brand-dark); }
.ocl-identity address { font-style: normal; }

/* ---------- page footer ---------- */
.ocl-foot {
  grid-column: 1 / -1; margin-top: 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.ocl-foot nav { display: flex; flex-wrap: wrap; gap: 8px; }
.ocl-foot nav a {
  padding: 7px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); color: var(--body);
  text-decoration: none; font-weight: 600; font-size: 13.5px;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.ocl-foot nav a:hover { background: var(--brand-soft); border-color: #bfdbfe; color: var(--brand-dark); }
.ocl-foot nav a[aria-current="page"] {
  background: var(--brand-soft); border-color: #bfdbfe; color: var(--brand-dark);
}

/* ---------- mobile ---------- */
@media (max-width: 940px) {
  .ocl-wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 14px 64px; }
  .ocl-hero { padding: 24px 20px 20px; }
  .ocl-card { padding: 6px 20px 26px; }
  .ocl-identity { padding: 20px; }
  .ocl-toc { position: static; padding: 12px 14px; }
  .ocl-toc h2 { display: none; }
  .ocl-toc-toggle { display: flex; margin-bottom: 0; font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 2px 2px; }
  .ocl-toc[data-state="collapsed"] nav { display: none; }
  .ocl-toc[data-state="expanded"] nav { margin-top: 10px; }
  .ocl-foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .ocl-brand img { max-width: 150px; }
  .ocl-table { min-width: 380px; }
}

/* ---------- print (reviewers and buyers do print these) ---------- */
@media print {
  body.ocl { background: #fff; color: #000; font-size: 11.5pt; }
  .ocl-topbar, .ocl-toc, .ocl-skip, .ocl-foot nav { display: none !important; }
  .ocl-wrap { display: block; max-width: none; padding: 0; }
  .ocl-hero, .ocl-card, .ocl-identity {
    box-shadow: none; border: 1px solid #d4d4d4; border-radius: 0;
    padding: 14pt; margin: 0 0 10pt; break-inside: auto;
  }
  .ocl-hero::before { display: none; }
  .ocl-card h2, .ocl-card h3 { break-after: avoid; }
  .ocl-card section { break-inside: avoid-page; }
  .ocl-card a { color: #000; text-decoration: underline; }
  .ocl-card a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}