/* ═══════════════════════════════════════
   POLICY PAGES — privacy-policy, terms-conditions, refund-policy, cookies-policy
   Design taken from the Node site (legal-pages.css, content-pages.css and the
   main.css tokens/base rules they rely on). Every rule is scoped to
   main.policy-page so the legacy stylesheet.css pages are untouched.
   ═══════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* ── Tokens + base (Node main.css) ── */
.policy-page {
  --white: #fff; --ink: #2a2a2a; --muted: #606060; --border: #e8e8e8;
  --green-100: #daefe0; --green-800: #008944; --green-900: #006432;
  --green: var(--green-800); --green-hover: var(--green-900);
  --r: 14px;
  --text-h1: 34px; --text-h2: 28px; --text-h2-lh: 42px; --text-h3: 24px; --text-h4: 20px;
  --text-body-lg: 18px; --text-body-lg-lh: 23px; --text-body: 16px; --text-body-lh: 20px; --text-sm: 14px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
.policy-page h1, .policy-page h2, .policy-page h3 { text-transform: capitalize; }
.policy-page a { color: inherit; text-decoration: none; }
.policy-page [id] { scroll-margin-top: 100px; }

/* ── Legal layout (Node legal-page.ejs) ── */
.policy-page .policy { padding: 48px 0 80px; background: var(--white); }
.policy-page .policy-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.policy-page .policy-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.policy-page .policy-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #eef4ff;
  color: #4b67ff;
}
.policy-page .policy-title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--text-h2-lh);
}
.policy-page .policy-subtitle {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
}

.policy-page .policy-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; }
.policy-page .policy-grid .left { min-width: 0; }

@media (max-width: 992px) {
  .policy-page .policy-grid { grid-template-columns: 1fr; }
  .policy-page .policy-hero { justify-content: center; }
  .policy-page .policy-title,
  .policy-page .policy-subtitle { text-align: center; }
  /* Long refund title: keep the size this page used before on tablet/mobile */
  .policy-page--refund .policy-title { font-size: 22px; line-height: 1.3; }
}

/* ── Policy body ── */
.policy-page .policy-content h2 { margin-top: 28px; margin-bottom: 10px; font-size: 22px; font-weight: 700; }
.policy-page .policy-content h3 { margin-top: 18px; margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.policy-page .policy-content h4 { margin-top: 12px; margin-bottom: 6px; font-size: 16px; font-weight: 700; }
.policy-page .policy-content p,
.policy-page .policy-content li { line-height: 1.7; }

.policy-page .policy-content .policy-subsection-title {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}

.policy-page .card {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 14px;
  padding: 18px 18px 14px;
  margin: 14px 0;
}

.policy-page .policy-bullets { padding-left: 18px; margin: 8px 0; list-style: disc; }
.policy-page .policy-bullets li { margin: 6px 0; }
.policy-page .two-col { columns: 2; column-gap: 24px; }
@media (max-width: 640px) {
  .policy-page .two-col { columns: 1; }
}

.policy-page .policy-toc-list { margin: 10px 0 18px 18px; list-style: decimal; }

/* Row-style table (privacy CCPA list) */
.policy-page div.policy-table { border: 1px solid #eef0f3; border-radius: 12px; overflow: hidden; }
.policy-page .policy-table-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid #f1f3f6;
}
.policy-page .policy-table-row:first-child { border-top: 0; }
.policy-page .policy-table-row span:last-child { font-weight: 600; }

/* Refund policy: note, at-a-glance table and turnaround table */
.policy-page .policy-note {
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: #f8fbff;
  border-left: 3px solid #4b67ff;
  border-radius: 0 10px 10px 0;
}
.policy-page .policy-note p { margin: 0; }

.policy-page .policy-glance-wrap { padding: 0; overflow: hidden; }
.policy-page .policy-glance { width: 100%; border-collapse: collapse; }
.policy-page .policy-glance th,
.policy-page .policy-glance td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eef0f3;
  line-height: 1.6;
}
.policy-page .policy-glance tr:last-child th,
.policy-page .policy-glance tr:last-child td { border-bottom: 0; }
.policy-page .policy-glance th { width: 34%; font-weight: 600; color: #1e293b; background: #f8fbff; }

.policy-page .policy-table-wrap { margin: 16px 0 8px; overflow-x: auto; }
.policy-page table.policy-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.policy-page table.policy-table th,
.policy-page table.policy-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #eef0f3;
  line-height: 1.6;
}
.policy-page table.policy-table thead th { background: #f8fbff; font-weight: 600; color: #1e293b; }
.policy-page table.policy-table tbody tr:nth-child(even) { background: #fafbfc; }
.policy-page--refund .policy-content h3:first-child { margin-top: 0; }

@media (max-width: 640px) {
  .policy-page .policy-glance th,
  .policy-page .policy-glance td { display: block; width: 100%; }
  .policy-page .policy-glance th { border-bottom: 0; padding-bottom: 4px; }
  .policy-page .policy-glance td { padding-top: 4px; }
}

/* ── "On this page" aside ── */
.policy-page .policy-aside { position: sticky; top: 88px; }
.policy-page .policy-aside .content .title { font-weight: 700; margin-bottom: 8px; }
.policy-page .policy-aside-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 10px;
  margin: 2px 0;
  text-decoration: none;
  transition: background .15s;
}
.policy-page .policy-aside-toc a:hover { background: #f6f7fb; }
.policy-page .policy-aside-toc a.active { background: #eef4ff; color: #1e40af; font-weight: 600; }
.policy-page .policy-aside-toc a:focus-visible,
.policy-page .policy-aside > a:focus-visible { outline: 2px solid #4b67ff; outline-offset: 2px; }

/* ── Long-form content page (Node content-page.ejs) — cookie policy ── */
.policy-page.content-page { padding: 48px 0 80px; }
.policy-page .content-page-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; }

.policy-page .content-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 24px;
}
.policy-page .content-breadcrumb a { color: var(--green); font-weight: 500; }
.policy-page .content-breadcrumb a:hover { color: var(--green-hover); }

.policy-page .content-page-header { margin-bottom: 40px; }
.policy-page .content-page-header h1 {
  font-size: clamp(1.75rem, 4vw, var(--text-h1));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.policy-page .content-page-meta { font-size: var(--text-sm); color: var(--muted); margin-bottom: 16px; }
@media (max-width: 767px) {
  .policy-page .content-page-header h1 { text-align: center; }
}

/* CMS body (page_description): styled like Node's .content-section blocks */
.policy-page .content-prose { color: var(--ink); overflow-wrap: break-word; }
.policy-page .content-prose h2 {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.3;
  margin: 36px 0 16px;
  color: var(--ink);
}
.policy-page .content-prose > h2:first-child,
.policy-page .content-prose > :first-child h2:first-child { margin-top: 0; }
.policy-page .content-prose h3 { font-size: var(--text-h4); font-weight: 600; line-height: 1.3; margin: 20px 0 10px; color: var(--ink); }
.policy-page .content-prose h4 { font-size: var(--text-body-lg); font-weight: 600; line-height: 1.3; margin: 16px 0 8px; color: var(--ink); }
.policy-page .content-prose p { font-size: var(--text-body-lg); line-height: 1.65; color: var(--muted); margin-bottom: 14px; }
.policy-page .content-prose ul,
.policy-page .content-prose ol { margin: 0 0 16px 20px; padding: 0; }
.policy-page .content-prose ul { list-style: disc; }
.policy-page .content-prose ol { list-style: decimal; }
.policy-page .content-prose li { font-size: var(--text-body-lg); line-height: 1.65; color: var(--muted); margin-bottom: 8px; }
.policy-page .content-prose li::marker { color: var(--green); }
.policy-page .content-prose a { color: var(--green); font-weight: 500; }
.policy-page .content-prose a:hover { color: var(--green-hover); text-decoration: underline; }
.policy-page .content-prose strong { color: var(--ink); }
.policy-page .content-prose img { max-width: 100%; height: auto; }
.policy-page .content-prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.policy-page .content-prose th,
.policy-page .content-prose td { padding: 10px 12px; border: 1px solid #eef0f3; text-align: left; vertical-align: top; }
.policy-page .content-prose .policy-table-row { grid-template-columns: 1fr 2fr; }
.policy-page .content-prose .policy-table-header { background: #f8f9fc; }

/* CMS bodies pasted from a policy generator (Termly) carry inline font/colour/size/width
   styles on every <div>/<span>. Bring them onto the page type scale and keep them in the column. */
.policy-page .content-prose { font-size: var(--text-body-lg); line-height: 1.65; color: var(--muted); }
.policy-page .content-prose [style] {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.policy-page .content-prose [style*="font-weight: 700"],
.policy-page .content-prose [style*="font-weight:700"],
.policy-page .content-prose [style*="font-weight: bold"] { color: var(--ink) !important; }
.policy-page .content-prose [data-custom-class="body"] > div:not(:empty) { margin-bottom: 14px !important; }
.policy-page .content-prose [data-custom-class="heading_1"],
.policy-page .content-prose [data-custom-class="heading_2"] {
  margin: 28px 0 10px !important;
  font-size: var(--text-h4) !important;
  font-weight: 600;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}
.policy-page .content-prose a[style],
.policy-page .content-prose [data-custom-class="link"] { color: var(--green) !important; font-weight: 500; word-break: break-word !important; }
.policy-page .content-prose section[style],
.policy-page .content-prose table[style] { width: 100% !important; max-width: 100%; }
.policy-page .content-prose section[style] { overflow-x: auto; border-radius: var(--r) !important; margin-bottom: 14px !important; }
.policy-page .content-prose table[style] td,
.policy-page .content-prose table[style] td [style] { font-size: 15px !important; line-height: 1.5 !important; }