/*
 * Styles for the static "extras" pages (About, Contact, Returns, Privacy,
 * Terms, Do Not Sell) and their shared layout/footer.
 *
 * Everything is prefixed (`xp-` for the page layout, `xf-` for the footer)
 * and mostly scoped under .xp-page so nothing leaks into checkout, home, or
 * upsell routes. Loaded last in public/index.html so it wins specificity
 * ties with style.css and the webflow CSS.
 */

.xp-page {
  --xp-ink: #294a59;
  --xp-teal: #24748d;
  --xp-body: #3f5261;
  --xp-muted: #64798a;
  --xp-mist: #e9f1f4;
  --xp-bg: #f4f8fa;
  --xp-line: #e2ecf1;
  background: var(--xp-bg);
  font-family: "Proxima Soft", "Proxima Nova", Quicksand, "Segoe UI", sans-serif;
  color: var(--xp-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar + hero ---------- */
.xp-topbar {
  background: #fff;
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid var(--xp-line);
}
.xp-topbar img {
  width: 128px;
  cursor: pointer;
  vertical-align: middle;
}
/* Global CSS floats the fixed buy-now bar 64px down (below the home page
   navbar). These pages have no navbar, so pin it to the very top and push
   the logo bar below it. On mobile the bar docks to the bottom instead. */
@media (min-width: 768px) {
  .xp-page .sticky-nav {
    top: 0;
  }
  .xp-topbar {
    margin-top: 64px;
  }
}

.xp-hero {
  background: linear-gradient(180deg, var(--xp-mist) 0%, var(--xp-bg) 100%);
  padding: 52px 20px 34px;
  text-align: center;
}
.xp-eyebrow {
  display: inline-block;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  color: var(--xp-teal);
  background: #fff;
  border: 1px solid rgba(36, 116, 141, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}
.xp-title {
  font-family: inherit;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  color: var(--xp-ink);
  line-height: 1.15;
  margin: 0 0 12px;
}
.xp-subtitle {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.6;
  color: var(--xp-muted);
}
.xp-updated {
  margin-top: 16px;
  font-size: 14px;
  color: var(--xp-muted);
}

/* ---------- Content card ---------- */
.xp-main {
  padding: 0 16px 72px;
}
.xp-card {
  max-width: 880px;
  margin: 26px auto 0;
  background: #fff;
  border: 1px solid var(--xp-line);
  border-radius: 20px;
  box-shadow: 0 14px 34px -20px rgba(41, 74, 89, 0.28);
  padding: clamp(28px, 5vw, 56px);
}

/* ---------- Prose ---------- */
.xp-prose {
  font-size: 17px;
  line-height: 1.75;
}
.xp-prose p {
  margin: 0 0 18px;
}
.xp-prose p:last-child {
  margin-bottom: 0;
}
.xp-prose strong {
  color: var(--xp-ink);
  font-weight: 700;
}
.xp-prose a {
  color: var(--xp-teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(36, 116, 141, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}
.xp-prose a:hover {
  color: var(--xp-ink);
  text-decoration-color: var(--xp-ink);
}
.xp-prose ul,
.xp-prose ol {
  margin: 0 0 18px;
  padding-left: 26px;
}
.xp-prose li {
  margin-bottom: 10px;
  padding-left: 4px;
}
.xp-prose li::marker {
  color: var(--xp-teal);
  font-weight: 700;
}

.xp-section {
  border-top: 1px solid #edf3f6;
  margin-top: 34px;
  padding-top: 26px;
}
.xp-section:first-child,
.xp-toc + .xp-section {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.xp-h2 {
  font-family: inherit;
  font-size: clamp(21px, 3vw, 25px);
  font-weight: 700;
  color: var(--xp-ink);
  line-height: 1.3;
  margin: 0 0 16px;
  scroll-margin-top: 96px;
}
.xp-h2-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  margin-right: 12px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--xp-mist);
  color: var(--xp-teal);
  font-size: 16px;
  font-weight: 700;
  vertical-align: 2px;
}
.xp-h3 {
  font-family: inherit;
  font-size: 18.5px;
  font-weight: 700;
  color: var(--xp-teal);
  margin: 26px 0 10px;
}

/* ---------- Table of contents ---------- */
.xp-toc {
  background: #f6fafc;
  border: 1px solid var(--xp-line);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 36px;
}
.xp-toc-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xp-muted);
  margin: 0 0 12px;
}
.xp-toc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.xp-toc-list li {
  margin: 0;
  padding: 0;
}
.xp-toc-list a {
  display: block;
  padding: 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--xp-teal);
  text-decoration: none;
}
.xp-toc-list a:hover {
  color: var(--xp-ink);
  text-decoration: underline;
}

/* ---------- Callouts ---------- */
.xp-callout {
  border-radius: 14px;
  border: 1px solid rgba(36, 116, 141, 0.2);
  background: #eef6f9;
  padding: 20px 24px;
  margin: 0 0 22px;
}
.xp-callout--warn {
  background: #fdf7ee;
  border-color: #eeddbe;
}
.xp-callout-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--xp-ink);
  margin-bottom: 6px;
}
.xp-callout p {
  margin-bottom: 10px;
}
.xp-callout p:last-child {
  margin-bottom: 0;
}

/* ---------- Numbered steps ---------- */
.xp-steps {
  list-style: none;
  counter-reset: xp-step;
  margin: 0 0 22px;
  padding: 0;
}
.xp-steps li {
  counter-increment: xp-step;
  position: relative;
  padding: 0 0 22px 56px;
  margin: 0;
}
.xp-steps li::before {
  content: counter(xp-step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--xp-mist);
  color: var(--xp-teal);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xp-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 2px;
  width: 2px;
  background: var(--xp-line);
}
.xp-step-title {
  display: block;
  font-weight: 700;
  color: var(--xp-ink);
  margin-bottom: 4px;
}

/* ---------- Contact / feature cards ---------- */
.xp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 0 0 22px;
}
.xp-tile {
  background: linear-gradient(180deg, #fbfdfe 0%, #f3f8fa 100%);
  border: 1px solid var(--xp-line);
  border-radius: 16px;
  padding: 26px 22px;
  text-align: center;
}
.xp-tile-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--xp-mist);
  color: var(--xp-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.xp-tile-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--xp-muted);
  margin-bottom: 6px;
}
.xp-tile-value {
  font-size: 18px;
  font-weight: 700;
}
.xp-tile-value a {
  text-decoration: none;
  color: var(--xp-teal);
}
.xp-tile-value a:hover {
  text-decoration: underline;
}
.xp-tile-note {
  font-size: 14px;
  color: var(--xp-muted);
  margin-top: 6px;
}

/* ---------- Address block ---------- */
.xp-address {
  display: inline-block;
  background: #f6fafc;
  border: 1px dashed #c8dde6;
  border-radius: 12px;
  padding: 18px 24px;
  line-height: 1.7;
  font-style: normal;
  margin: 0 0 18px;
}

/* ---------- About page ---------- */
.xp-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
  margin-bottom: 10px;
}
.xp-split img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 14px 30px -18px rgba(41, 74, 89, 0.4);
}
.xp-quote {
  border-left: 4px solid var(--xp-teal);
  background: #f6fafc;
  border-radius: 0 12px 12px 0;
  padding: 18px 24px;
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 600;
  color: var(--xp-ink);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .xp-hero {
    padding: 40px 18px 26px;
  }
  .xp-prose {
    font-size: 16.5px;
  }
  .xp-toc-list {
    grid-template-columns: 1fr;
  }
  .xp-split {
    grid-template-columns: 1fr;
  }
  .xp-split img {
    order: -1;
  }
  .xp-card {
    border-radius: 16px;
  }
}

/* ==================== Footer (extras pages) ==================== */
.xf {
  background: #294a59;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Proxima Soft", "Proxima Nova", Quicksand, "Segoe UI", sans-serif;
  padding: 56px 24px 36px;
}
.xf-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.xf-tagline {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 240px;
}
.xf-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
}
.xf-brand img {
  width: 128px;
  display: block;
  margin-bottom: 14px;
  filter: brightness(0) invert(1); /* dark logo on dark footer, render it white */
}
.xf-heading {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}
.xf a {
  display: block;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.5;
  padding: 5px 0;
  text-decoration: none;
  cursor: pointer;
}
.xf a:hover {
  color: #fff;
  text-decoration: underline;
}
.xf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 24px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
  .xf {
    padding: 44px 24px 32px;
    text-align: center;
  }
  .xf-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .xf-brand img {
    margin: 0 auto 14px;
  }
  .xf-tagline {
    max-width: none;
  }
  .xf-bottom {
    flex-direction: column;
    justify-content: center;
  }
}