/* Privacy Policy — reached from the footer, login/signup modals, and the
   Earn with numbers request form. Sticky "on this page" nav + long-form
   content, same palette/conventions as the rest of the site. */
:root{
  --blue-dark:#0f3d28;
  --blue-mid:#1f7a52;
  --blue-bright:#27935f;
  --accent-orange:#f39c1f;
  --header-blue:#0d3322;
}

html,body{height:100%;}
body{background:#eef5f2;display:flex;flex-direction:column;min-height:100vh;}

/* CSS Grid (not flex) specifically so .priv-toc can sit in a completely
   different position in the visual order — sidebar on desktop, but
   between the intro and the numbered sections on mobile — without
   duplicating any markup or reordering the DOM (screen readers and tab
   order still hit head-block -> toc -> sections in that sane order).
   .priv-head-block/.priv-toc/.priv-sections are the three top-level
   grid items; the mobile breakpoint below just redraws the area map. */
.priv-layout{
  flex:1 0 auto;
  max-width:1440px;
  margin:0 auto;
  padding:32px 16px 60px;
  width:100%;
  display:grid;
  grid-template-columns:220px 1fr;
  grid-template-areas:
    "toc head"
    "toc sections";
  align-items:start;
  gap:32px;
}
.priv-head-block{grid-area:head;}
.priv-sections{grid-area:sections;min-width:0;}

.breadcrumb{
  font-size:13px;
  font-weight:500;
  color:#9fc7b4;
  margin:0 0 12px;
}
.breadcrumb a{color:#9fc7b4;text-decoration:none;}
.breadcrumb a:hover{color:var(--blue-mid);}

.priv-header{margin-bottom:8px;}
.priv-title{
  margin:0 0 8px;
  font-family:var(--font-heading);
  font-size:32px;
  font-weight:700;
  color:var(--blue-dark);
}
.priv-updated{
  margin:0;
  font-size:12.5px;
  font-weight:400;
  color:#4c886b;
}

/* ---------- Sticky "on this page" nav ---------- */
.priv-toc{
  grid-area:toc;
  position:sticky;
  top:24px;
  background:#fff;
  border:1px solid #e6e9ec;
  border-radius:20px;
  padding:18px;
  box-shadow:0 10px 26px -18px rgba(0,27,92,.3);
}
.priv-toc-title{
  margin:0 0 10px;
  font-family:var(--font-heading);
  font-size:11px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--accent-orange);
}
.priv-toc ol{list-style:none;margin:0;padding:0;counter-reset:priv-toc;}
.priv-toc li{counter-increment:priv-toc;}
.priv-toc a{
  display:block;
  padding:7px 8px;
  border-radius:8px;
  font-size:12.5px;
  font-weight:500;
  color:#3a7a5b;
  text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.priv-toc a::before{
  content:counter(priv-toc) ". ";
  color:var(--header-blue);
  font-weight:700;
}
.priv-toc a:hover{background:rgba(15,44,92,.08);color:var(--blue-dark);}

/* Scrollspy — set by privacy-policy.js as the reader scrolls past each
   .priv-section, so the sidebar always shows exactly where they are in
   the page (same idea as a table of contents in a real document,
   updating live instead of only reacting to a click). */
.priv-toc a.is-active{
  background:#eafaf2;
  color:var(--blue-dark);
  font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent-orange);
}
.priv-toc a.is-active::before{color:var(--accent-orange);}

/* ---------- Main content ---------- */
.priv-intro{
  margin:0 0 28px;
  font-size:14px;
  line-height:1.7;
  color:var(--blue-mid);
  font-weight:400;
}
.priv-intro strong{color:var(--blue-dark);}

/* Collapses the intro to ~3 lines on mobile only (desktop always shows
   it in full — see the reset in the 860px query below) with a "Read
   more" toggle beneath it, set by privacy-policy.js. Hidden entirely
   until that breakpoint since there's nothing to expand on desktop. */
.priv-intro-toggle{
  display:none;
  align-items:center;
  gap:5px;
  margin:-16px 0 20px;
  padding:0;
  border:none;
  background:none;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--blue-bright);
  cursor:pointer;
}
.priv-intro-toggle svg{width:14px;height:14px;transition:transform .18s ease;}
.priv-intro-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

.priv-section{
  background:#fff;
  border:1px solid #e6e9ec;
  border-radius:20px;
  padding:26px 28px;
  margin-bottom:16px;
  box-shadow:0 10px 26px -18px rgba(0,27,92,.25);
  scroll-margin-top:24px;
}
.priv-section h2{
  margin:0 0 14px;
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:700;
  color:var(--blue-dark);
}
.priv-section p{
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.7;
  color:#3a7a5b;
  font-weight:400;
}
.priv-section p:last-child{margin-bottom:0;}
.priv-section ul{margin:0 0 12px;padding-left:20px;}
.priv-section li{
  font-size:13.5px;
  line-height:1.7;
  color:#3a7a5b;
  font-weight:400;
  margin-bottom:4px;
}
.priv-section a{color:var(--accent-orange);font-weight:700;text-decoration:none;}
.priv-section a:hover{text-decoration:underline;}

.priv-contact-box{
  background:#eef6f2;
  border-radius:14px;
  padding:16px 18px;
  margin-top:6px;
}
.priv-contact-box p{margin:0;color:var(--blue-dark);}

@media (max-width:860px){
  /* Single column: head-block, then the "On this page" card, then every
     section — the toc's grid-area moves from a permanent left sidebar
     to sitting between the intro and section 1, purely by redrawing
     the area map (same three grid items, no DOM change). */
  .priv-layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "toc"
      "sections";
    gap:20px;
  }
  .priv-toc{position:static;}

  /* Intro collapses to 3 lines with a "Read more" toggle (JS-driven) —
     nothing to truncate on desktop, so both stay off until here. */
  .priv-intro{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:6px;
  }
  .priv-intro.is-expanded{-webkit-line-clamp:unset;overflow:visible;}
  .priv-intro-toggle{display:inline-flex;}

  /* "On this page" becomes a tappable list — a numbered circle, the
     section title, and a chevron, full-width rows instead of the
     desktop's compact wrapped-pill grid. Reuses the same counter the
     desktop version uses (no markup change), just given circle sizing
     and no trailing ". ". */
  .priv-toc ol{display:flex;flex-direction:column;gap:2px;counter-reset:priv-toc;}
  .priv-toc li{flex:none;}
  .priv-toc a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 8px;
    border-radius:14px;
    font-size:14px;
  }
  .priv-toc a::before{
    content:counter(priv-toc);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:24px;
    height:24px;
    border-radius:50%;
    border:1.5px solid #cfe6da;
    background:#fff;
    font-size:12px;
  }
  .priv-toc a::after{
    content:"";
    flex:0 0 auto;
    width:7px;
    height:7px;
    margin-left:auto;
    border-right:1.6px solid #b7d4c6;
    border-bottom:1.6px solid #b7d4c6;
    transform:rotate(-45deg);
  }
  /* Mobile's active state is a filled pill, not the desktop left-border
     accent, so that inset box-shadow is switched off here. */
  .priv-toc a.is-active{border-radius:14px;box-shadow:none;}
  .priv-toc a.is-active::before{
    background:var(--blue-bright);
    border-color:var(--blue-bright);
    color:#fff;
  }
  .priv-toc a.is-active::after{display:none;}
}
@media (max-width:560px){
  .priv-title{font-size:24px;}
  .priv-section{padding:20px 18px;border-radius:16px;}
}