/* NoxTools Site Kit — legal pages (Refund Policy, Terms and Conditions, Privacy Policy). One calm, shared look.
   Loaded after site.css (dependency 'nx-kit') on those three pages only. Every rule is scoped to .nx-legal, the wrapper
   div that starts the page content (except two print rules for the site header and footer, at the end); the page header
   (Nox with the shield, H1, "Last updated") and the .nx-classic-body column (760px text width, 17px / 16px Inter body,
   --nx-* colours) come from site.css and are extended, not replaced.
   Writers' guide with every snippet: wplocal/session-2026-09-22/refund-policy-2026-10-06/LEGAL-DESIGN-SPEC.md.
   No images, icon fonts, external files, scripts or animation: every icon (ticks, crosses, shield, info, numbers) is CSS.
   The content passes through WordPress' wpautop, so stray <p> / <br> inside components are tolerated below.
   Selectors start ".nx-legal .nx-legal-…" on purpose: site.css styles ".nx-classic-body ul / li / a" (0,1,1), and a
   bare ".nx-legal-yes" (0,1,0) would lose to it. */

.nx-legal {
  --lg-green: #16A34A;  --lg-green-line: #B7E4C7; --lg-green-wash: #F3FBF6;
  --lg-red: #B42318;    --lg-red-wash: #FDECEC;
  --lg-tint: #F6F7FE;   --lg-tint-line: #DADFF7;
  --lg-gap: 28px;
}

/* ---------------------------------------------------------------- base: rhythm, headings, text, lists */
.nx-legal > :first-child { margin-top: 0; }
.nx-legal > :last-child { margin-bottom: 0; }
.nx-legal p:empty { display: none; }                               /* wpautop leftovers */
.nx-legal p { margin: 0 0 1em; }
.nx-legal :is(p, li) { text-wrap: pretty; }                         /* fewer one-word last lines */
.nx-legal strong, .nx-legal b { color: var(--nx-ink); font-weight: 600; }
.nx-legal a:hover { color: var(--nx-indigo-d); }

/* section headings: a hairline above each one splits a long page into calm, scannable blocks */
.nx-legal > h2 {
  margin: 48px 0 12px; padding-top: 36px; border-top: 1px solid var(--nx-line);
  font: 700 24px/1.3 var(--nx-head); color: var(--nx-ink); letter-spacing: -.012em;
  scroll-margin-top: 12px; text-wrap: balance;
}
.nx-legal > h2:first-child { padding-top: 0; border-top: 0; }
.nx-legal h3 {
  margin: 28px 0 8px; font: 700 19px/1.35 var(--nx-head); color: var(--nx-ink); letter-spacing: -.008em;
  scroll-margin-top: 12px; text-wrap: balance;
}
.nx-legal > h2 + h3 { margin-top: 16px; }

/* plain lists (no class): indigo bullets and numbers, tighter than site.css's paragraph spacing */
.nx-legal ul:not([class]), .nx-legal ol:not([class]) { margin: 0 0 1.2em; padding-left: 1.35em; }
.nx-legal ul:not([class]) > li, .nx-legal ol:not([class]) > li { margin: 0 0 .5em; padding-left: .3em; }
.nx-legal ul:not([class]) > li::marker { color: var(--nx-indigo); font-size: 1.05em; }
.nx-legal ol:not([class]) > li::marker { color: var(--nx-indigo-d); font-weight: 700; font-family: var(--nx-head); }
.nx-legal li > ul:not([class]), .nx-legal li > ol:not([class]) { margin: .5em 0 .2em; }
.nx-legal li > p { margin: 0 0 .5em; }

/* ---------------------------------------------------------------- key points ("at a glance") */
.nx-legal .nx-legal-keypoints {
  margin: 0 0 32px; padding: 26px 28px 26px;
  background: linear-gradient(180deg, var(--lg-tint) 0, #fff 150px); border: 1px solid var(--nx-line-card);
  border-radius: var(--nx-r-lg); box-shadow: var(--nx-shadow-rest);
}
.nx-legal .nx-legal-keypoints-title {
  position: relative; margin: 0; padding: 2px 0 0 42px; border: 0;
  font: 700 21px/1.3 var(--nx-head); color: var(--nx-ink); letter-spacing: -.012em; text-wrap: balance;
}
/* a small indigo shield with a white tick, the same idea as Nox's shield in the page header */
.nx-legal .nx-legal-keypoints-title::before {
  content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 32px;
  background: linear-gradient(160deg, #6366F1, var(--nx-indigo-d));
  border-radius: 5px 5px 50% 50% / 5px 5px 60% 60%;                  /* fallback shape where path() is not supported */
  clip-path: path('M14 0 L28 5.2 V14.6 C28 23 22 29.4 14 32 C6 29.4 0 23 0 14.6 V5.2 Z');
}
.nx-legal .nx-legal-keypoints-title::after {
  content: ""; position: absolute; left: 11px; top: 8.5px; width: 5px; height: 11px;
  border: solid #fff; border-width: 0 2.6px 2.6px 0; transform: rotate(45deg);
}
.nx-legal .nx-legal-keypoints > p:not(.nx-legal-keypoints-title) { margin: 6px 0 0 42px; font-size: 15px; line-height: 1.55; color: var(--nx-slate); }
.nx-legal .nx-legal-keypoints > ul {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px;
  margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--nx-line); list-style: none;
}
.nx-legal .nx-legal-keypoints > ul > li {
  position: relative; margin: 0; padding-left: 34px;
  font: 400 15px/1.55 var(--nx-body); color: var(--nx-slate); text-wrap: pretty;
}
.nx-legal .nx-legal-keypoints > ul > li > strong:first-child {
  display: block; margin-bottom: 1px; font: 600 16px/1.45 var(--nx-body); color: var(--nx-ink);
}
/* a line break typed after the bold lead-in (wpautop turns it into <br>) must not add an empty line */
.nx-legal :is(.nx-legal-keypoints, .nx-legal-steps) li > strong:first-child + br { display: none; }
.nx-legal .nx-legal-keypoints > ul > li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--lg-green);
}
.nx-legal .nx-legal-keypoints > ul > li::after {
  content: ""; position: absolute; left: 8.5px; top: 6px; width: 4.5px; height: 9px;
  border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg);
}
@media (min-width: 700px) { .nx-legal .nx-legal-keypoints > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- on this page (table of contents) */
.nx-legal .nx-legal-toc {
  margin: 0 0 8px; padding: 18px 24px 12px;
  background: var(--nx-light); border: 1px solid var(--nx-line); border-radius: var(--nx-r-md);
}
.nx-legal .nx-legal-toc-title {
  margin: 0 0 4px; font: 700 12px/1.4 var(--nx-body); letter-spacing: .12em; text-transform: uppercase; color: var(--nx-indigo-d);
}
.nx-legal .nx-legal-toc ol, .nx-legal .nx-legal-toc ul { margin: 0; padding: 0; list-style: none; }
/* (0,2,2): must match ".nx-legal ol:not([class]) > li" above (the TOC list has no class) and win by coming later */
.nx-legal .nx-legal-toc :is(ol, ul) > li { margin: 0; padding: 0; break-inside: avoid; }
.nx-legal .nx-legal-toc a {
  display: flex; align-items: flex-start; gap: 12px; box-sizing: border-box; min-height: 44px; padding: 10px 0;   /* 44px tap target */
  font: 500 15px/1.45 var(--nx-body); color: var(--nx-ink); text-decoration: none; word-break: normal; overflow-wrap: anywhere;
}
.nx-legal .nx-legal-toc a::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 7.5px;
  border: solid var(--nx-indigo); border-width: 2px 2px 0 0; transform: rotate(45deg);
}
.nx-legal .nx-legal-toc a:hover { color: var(--nx-indigo-d); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 700px) { .nx-legal .nx-legal-toc ol, .nx-legal .nx-legal-toc ul { columns: 2; column-gap: 32px; } }

/* ---------------------------------------------------------------- yes / no lists */
.nx-legal .nx-legal-yes, .nx-legal .nx-legal-no { margin: 0 0 1.2em; padding: 0; list-style: none; }
.nx-legal .nx-legal-yes > li, .nx-legal .nx-legal-no > li {
  position: relative; margin: 0 0 12px; padding-left: 34px; font-size: 16px; line-height: 1.55; text-wrap: pretty;
}
.nx-legal .nx-legal-yes > li:last-child, .nx-legal .nx-legal-no > li:last-child { margin-bottom: 0; }
.nx-legal .nx-legal-yes > li::before, .nx-legal .nx-legal-no > li::before {
  content: ""; position: absolute; left: 0; top: 1.5px; width: 22px; height: 22px; border-radius: 50%;
}
.nx-legal .nx-legal-yes > li::before { background: var(--lg-green); }
.nx-legal .nx-legal-yes > li::after {
  content: ""; position: absolute; left: 8.5px; top: 6.5px; width: 4.5px; height: 9px;
  border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg);
}
.nx-legal .nx-legal-no > li { color: var(--nx-slate); }
.nx-legal .nx-legal-no > li::before { background: var(--lg-red-wash); box-shadow: inset 0 0 0 1px #F6CACA; }
.nx-legal .nx-legal-no > li::after {
  content: ""; position: absolute; left: 6px; top: 7.5px; width: 10px; height: 10px; transform: rotate(45deg);
  background: linear-gradient(var(--lg-red), var(--lg-red)) center / 10px 2px no-repeat,
              linear-gradient(var(--lg-red), var(--lg-red)) center / 2px 10px no-repeat;
}

/* ---------------------------------------------------------------- two cards: what qualifies / what doesn't */
.nx-legal .nx-legal-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 20px 0 var(--lg-gap); }
@media (min-width: 700px) { .nx-legal .nx-legal-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.nx-legal .nx-legal-card {
  min-width: 0; padding: 22px 24px 24px; background: #fff;
  border: 1px solid var(--nx-line-card); border-radius: var(--nx-r-md); box-shadow: var(--nx-shadow-rest);
}
.nx-legal .nx-legal-card:has(> .nx-legal-yes) { background: linear-gradient(180deg, var(--lg-green-wash) 0, #fff 120px); border-color: var(--lg-green-line); }
.nx-legal .nx-legal-card > h3 { margin: 0 0 14px; font-size: 18px; }
.nx-legal .nx-legal-card > p { font-size: 16px; line-height: 1.6; }
.nx-legal .nx-legal-card > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- numbered steps */
.nx-legal .nx-legal-steps { counter-reset: nx-legal-step; margin: 20px 0 var(--lg-gap); padding: 0; list-style: none; }
.nx-legal .nx-legal-steps > li {
  position: relative; counter-increment: nx-legal-step; min-height: 36px; margin: 0; padding: 4px 0 26px 54px;
  font-size: 16px; line-height: 1.6; color: var(--nx-text); text-wrap: pretty;
}
.nx-legal .nx-legal-steps > li:last-child { padding-bottom: 0; }
.nx-legal .nx-legal-steps > li::before {
  content: counter(nx-legal-step); content: counter(nx-legal-step) / "";
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--nx-indigo); color: #fff; font: 700 16px/36px var(--nx-head); text-align: center;
  box-shadow: 0 4px 10px -4px rgba(79,70,229,.55);
}
/* a thin rail joins the numbers */
.nx-legal .nx-legal-steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 44px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--nx-indigo-l);
}
.nx-legal .nx-legal-steps > li > strong:first-child { display: block; margin-bottom: 2px; font: 700 17px/1.4 var(--nx-head); color: var(--nx-ink); }

/* ---------------------------------------------------------------- note */
.nx-legal .nx-legal-note {
  position: relative; margin: 24px 0 var(--lg-gap); padding: 16px 20px 16px 54px;
  background: var(--lg-tint); border: 1px solid var(--lg-tint-line); border-radius: var(--nx-r-md);
  font-size: 16px; line-height: 1.6; color: var(--nx-text);
}
/* an indigo "i" badge: the circle, then the dot and stem drawn with two gradients */
.nx-legal .nx-legal-note::before {
  content: ""; position: absolute; left: 18px; top: 17px; width: 22px; height: 22px; border-radius: 50%; background: var(--nx-indigo);
}
.nx-legal .nx-legal-note::after {
  content: ""; position: absolute; left: 27.75px; top: 22px; width: 2.5px; height: 12px;
  background: radial-gradient(circle at 50% 1.25px, #fff 1.3px, transparent 1.55px) 0 0 / 2.5px 3px no-repeat,
              linear-gradient(#fff, #fff) 0 4.5px / 2.5px 7.5px no-repeat;
}
.nx-legal .nx-legal-note p { margin: 0 0 .6em; }
.nx-legal .nx-legal-note > :last-child { margin-bottom: 0; }
.nx-legal .nx-legal-note ul:not([class]), .nx-legal .nx-legal-note ol:not([class]) { margin: .4em 0 0; }

/* ---------------------------------------------------------------- table (scrolls inside its own box on small phones) */
.nx-legal .nx-legal-table {
  max-width: 100%; margin: 20px 0 var(--lg-gap); overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border: 1px solid var(--nx-line-card); border-radius: var(--nx-r-md);
  /* scroll shadows: a soft edge shows on the side that has more columns to see */
  background:
    linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.16), transparent) right center / 12px 100% no-repeat scroll,
    #fff;
}
.nx-legal .nx-legal-table:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-legal .nx-legal-table table {
  width: 100%; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; background: transparent;
  font: 400 15px/1.55 var(--nx-body); color: var(--nx-text);
}
.nx-legal .nx-legal-table th, .nx-legal .nx-legal-table td {
  min-width: 7.5em; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--nx-line); text-align: left; vertical-align: top;
}
.nx-legal .nx-legal-table thead th {
  background: var(--nx-light); border-bottom-color: var(--nx-line-2);
  font: 700 14px/1.4 var(--nx-head); color: var(--nx-ink); letter-spacing: .005em;
}
.nx-legal .nx-legal-table tbody th { font-weight: 600; color: var(--nx-ink); }
.nx-legal .nx-legal-table tbody tr:last-child > * { border-bottom: 0; }
.nx-legal .nx-legal-table caption {
  caption-side: top; padding: 12px 14px 0; text-align: left; font: 600 14px/1.4 var(--nx-body); color: var(--nx-slate);
}
.nx-legal .nx-legal-table td > :last-child, .nx-legal .nx-legal-table th > :last-child { margin-bottom: 0; }
/* phones: text columns keep a readable width; a table with three or more columns then scrolls sideways in its box
   (a two-column table still fits a 390px phone) */
@media (max-width: 599px) { .nx-legal .nx-legal-table td { min-width: 10.5em; } }

/* ---------------------------------------------------------------- need help? (closing contact strip) */
.nx-legal .nx-legal-contact {
  margin: 48px 0 0; padding: 28px 30px 26px;
  background: var(--nx-light); border: 1px solid var(--nx-line-card); border-radius: var(--nx-r-lg);
}
.nx-legal .nx-legal-contact h2 {
  margin: 0 0 6px; padding: 0; border: 0; font: 700 22px/1.3 var(--nx-head); color: var(--nx-ink); letter-spacing: -.012em;
  scroll-margin-top: 12px;
}
.nx-legal .nx-legal-contact > p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--nx-slate); }
.nx-legal .nx-legal-contact > :last-child { margin-bottom: 0; }
.nx-legal .nx-legal-contact .nx-legal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.nx-legal .nx-legal-actions br { display: none; }
.nx-legal .nx-legal-actions + p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--nx-muted); }
/* buttons: the same box as the tool pages' buttons (48px, 12px radius, Inter 600 15px) */
.nx-legal a.nx-legal-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 12px 22px;
  background: #fff; border: 1.5px solid var(--nx-line-card); border-radius: 12px;
  font: 600 15px/1.2 var(--nx-body); color: var(--nx-ink); text-decoration: none; white-space: nowrap; word-break: normal; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nx-legal a.nx-legal-btn:hover { border-color: var(--nx-indigo); color: var(--nx-indigo-d); text-decoration: none; }
.nx-legal a.nx-legal-btn--primary { background: var(--nx-indigo); border-color: var(--nx-indigo); color: #fff; box-shadow: 0 6px 16px -6px rgba(79,70,229,.6); }
.nx-legal a.nx-legal-btn--primary:hover { background: var(--nx-indigo-d); border-color: var(--nx-indigo-d); color: #fff; }
@media (prefers-reduced-motion: reduce) { .nx-legal a.nx-legal-btn { transition: none; } }
/* "live chat couldn't load" note, added by the site kit's #nx-chat opener only when the chat is blocked (same amber note
   as the Contact page): under the paragraph of an in-text link, or at the end of the "Need help?" card */
.nx-legal p.nx-chat-fallback {
  margin: 0 0 1em; padding: 10px 14px; border: 1px solid #FDE68A; border-radius: 10px; background: #FFFBEB;
  font: 500 14px/1.5 var(--nx-body); color: #78350F; text-wrap: pretty;
}
.nx-legal .nx-legal-contact > p.nx-chat-fallback { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: #78350F; }
.nx-legal p.nx-chat-fallback a { color: #92400E; text-decoration: underline; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 767px) {
  .nx-legal { --lg-gap: 24px; }
  .nx-legal > h2 { margin-top: 40px; padding-top: 30px; font-size: 21px; }
  .nx-legal h3 { margin-top: 24px; font-size: 18px; }
  .nx-legal .nx-legal-keypoints { padding: 22px 18px 22px; }
  .nx-legal .nx-legal-keypoints-title { font-size: 19px; padding-top: 3px; }
  .nx-legal .nx-legal-keypoints > p:not(.nx-legal-keypoints-title) { margin-left: 0; margin-top: 10px; }
  .nx-legal .nx-legal-keypoints > ul { margin-top: 18px; padding-top: 18px; gap: 16px; }
  .nx-legal .nx-legal-toc { padding: 16px 18px 8px; }
  .nx-legal .nx-legal-card { padding: 20px 18px 22px; }
  .nx-legal .nx-legal-note { padding: 14px 16px 14px 50px; }
  .nx-legal .nx-legal-note::before { left: 15px; top: 15px; }
  .nx-legal .nx-legal-note::after { left: 24.75px; top: 20px; }
  .nx-legal .nx-legal-steps > li { padding-left: 50px; }
  .nx-legal .nx-legal-contact { margin-top: 40px; padding: 22px 18px; }
  .nx-legal .nx-legal-contact h2 { font-size: 20px; }
}
/* small phones: the contact buttons stack, full width */
@media (max-width: 599px) {
  .nx-legal .nx-legal-contact .nx-legal-actions { flex-direction: column; gap: 10px; }
  .nx-legal a.nx-legal-btn { width: 100%; }
}

/* ---------------------------------------------------------------- print: plain black on white, no boxes or buttons */
@media print {
  .nx-legal { color: #000; font-size: 11pt; line-height: 1.5; }
  .nx-legal :is(h2, h3, strong) { color: #000; }
  .nx-legal :is(h2, h3) { break-after: avoid; }
  .nx-legal > h2 { margin-top: 18pt; padding-top: 0; border-top: 0; }
  .nx-legal :is(.nx-legal-keypoints, .nx-legal-card, .nx-legal-note, .nx-legal-contact, .nx-legal-table) {
    background: none; box-shadow: none; border-color: #999; break-inside: avoid;
  }
  .nx-legal :is(.nx-legal-keypoints, .nx-legal-yes, .nx-legal-no, .nx-legal-steps) li::before,
  .nx-legal :is(.nx-legal-keypoints-title, .nx-legal-note)::before,
  .nx-legal :is(.nx-legal-no > li, .nx-legal-note)::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nx-legal :is(.nx-legal-toc, .nx-chat-fallback) { display: none; }
  .nx-legal .nx-legal-steps > li { break-inside: avoid; }
  .nx-legal .nx-legal-steps > li::before { box-shadow: none; }
  /* page level, these three pages only: Elementor's sticky header is position:fixed with an inline pixel width, so it
     would repeat on every printed page over the text (and shrink the print if only made static); print it once, and
     drop its spacer copy and the footer (which otherwise adds a blank last page) */
  .nx-header:not(.elementor-sticky__spacer) {
    position: static !important; top: auto !important; width: auto !important; transform: none !important; box-shadow: none !important;
  }
  .elementor-sticky__spacer, .site-footer { display: none !important; }
  .nx-legal .nx-legal-table { overflow: visible; }
  .nx-legal .nx-legal-contact .nx-legal-actions { display: block; }
  .nx-legal a.nx-legal-btn { display: inline; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #000; font-weight: 600; }
  .nx-legal a.nx-legal-btn + a.nx-legal-btn::before { content: " · "; }
}