/* Public Offer (Terms of Service) — reached from the footer and the
   sign-up modal. Same sticky "on this page" nav + long-form layout as
   privacy-policy.css, so the two legal pages read as one system —
   including the mobile redesign: CSS Grid areas (not flex) so .po-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.
   .po-head-block/.po-toc/.po-sections are the three top-level grid
   items; the mobile breakpoint below just redraws the area map. */
: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;}

.po-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;
}
.po-head-block{grid-area:head;}
.po-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);}

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

/* ---------- Sticky "on this page" nav ---------- */
.po-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);
}
.po-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);
}
.po-toc ol{list-style:none;margin:0;padding:0;counter-reset:po-toc;}
.po-toc li{counter-increment:po-toc;}
.po-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;
}
.po-toc a::before{
  content:counter(po-toc) ". ";
  color:var(--header-blue);
  font-weight:500;
}
.po-toc a:hover{background:rgba(15,44,92,.08);color:var(--blue-dark);}

/* Scrollspy — set by public-offer.js as the reader scrolls past each
   .po-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). */
.po-toc a.is-active{
  background:#eafaf2;
  color:var(--blue-dark);
  font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent-orange);
}
.po-toc a.is-active::before{color:var(--accent-orange);}

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

/* 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 public-offer.js. Hidden entirely
   until that breakpoint since there's nothing to expand on desktop. */
.po-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;
}
.po-intro-toggle svg{width:14px;height:14px;transition:transform .18s ease;}
.po-intro-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

.po-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;
}
.po-section h2{
  margin:0 0 14px;
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:700;
  color:var(--blue-dark);
}
.po-section p{
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.7;
  color:#3a7a5b;
  font-weight:400;
}
.po-section p:last-child{margin-bottom:0;}
.po-section ul{margin:0 0 12px;padding-left:20px;}
.po-section li{
  font-size:13.5px;
  line-height:1.7;
  color:#3a7a5b;
  font-weight:400;
  margin-bottom:4px;
}
.po-section a{color:var(--accent-orange);font-weight:700;text-decoration:none;}
.po-section a:hover{text-decoration:underline;}

.po-contact-box{
  background:#eef6f2;
  border-radius:14px;
  padding:16px 18px;
  margin-top:6px;
}
.po-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). */
  .po-layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "toc"
      "sections";
    gap:20px;
  }
  .po-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. */
  .po-intro{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:6px;
  }
  .po-intro.is-expanded{-webkit-line-clamp:unset;overflow:visible;}
  .po-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 ". ". */
  .po-toc ol{display:flex;flex-direction:column;gap:2px;counter-reset:po-toc;}
  .po-toc li{flex:none;}
  .po-toc a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 8px;
    border-radius:14px;
    font-size:14px;
  }
  .po-toc a::before{
    content:counter(po-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;
  }
  .po-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. */
  .po-toc a.is-active{border-radius:14px;box-shadow:none;}
  .po-toc a.is-active::before{
    background:var(--blue-bright);
    border-color:var(--blue-bright);
    color:#fff;
  }
  .po-toc a.is-active::after{display:none;}
}
@media (max-width:560px){
  .po-title{font-size:24px;}
  .po-section{padding:20px 18px;border-radius:16px;}
}