/* =====================================================================
   pg-lc2.css: extras for privacy.html, terms.html, contact.html, referrals.html on tpl.css.
   Loads after tpl.css and section-footer.css. Namespaced .lc-* (and the .co-* hooks the click-tracking scripts rely on).
   Template candidates (things tpl.css lacks, written here): sticky-TOC fix, h2 inside .tp-doc-sec, doc-prose bullets/links/tables,
   left-aligned split hero, address card list, reward tiers, step numerals.
   ===================================================================== */

/* styles.css sets body{overflow-x:hidden}, which turns body into a scroll container and stops position:sticky.
   clip gives the same no-horizontal-scroll result without that side effect. */
body.tp-page { overflow-x: clip; }

/* ---------- Doc layout: TOC that stays on screen even with 18 entries ---------- */
@media (min-width: 1024px) {
  .tp-toc { max-height: calc(100vh - 136px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 8px; }
}

/* ---------- Legal prose (the text is the root page's, untouched; only styled) ---------- */
/* Sections use h2 (the page has one h1), sub-headings h3: same look as the template's h3 / h4. */
.tp-prose .tp-doc-sec > h2 {
  margin: 0 0 20px; font-size: 30px; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: var(--tp-ink); text-wrap: balance;
}
.tp-prose .tp-doc-sec h3 { margin: 32px 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--tp-ink); scroll-margin-top: 104px; }
.tp-prose .tp-doc-sec > h2 + h3 { margin-top: 0; }
.tp-prose .lc-lede { margin: 0 0 56px; font-size: 21px; line-height: 1.5; color: var(--tp-ink); text-wrap: pretty; }
.tp-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.tp-prose a:hover { color: #005ec4; text-decoration-thickness: 2px; }
.tp-prose ul { list-style: none; margin: 0 0 14px; padding: 0; }
.tp-prose ul li { position: relative; padding-left: 32px; margin: 0 0 14px; color: var(--tp-muted); }
.tp-prose ul li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 14px; height: 8px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}
.tp-prose { overflow-wrap: break-word; min-width: 0; }

/* Permissions table (privacy). Real table on desktop; stacked rows on phones, because the second column is long text. */
.lc-table { margin: 24px 0 24px; border: 1px solid var(--tp-line); border-radius: 16px; overflow: hidden; background: #fff; }
.lc-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.6; }
.lc-table th {
  text-align: left; padding: 14px 20px; background: var(--tp-tint);
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-faint);
  border-bottom: 1px solid var(--tp-line);
}
.lc-table th:first-child { width: 38%; }
.lc-table td { padding: 18px 20px; vertical-align: top; color: var(--tp-muted); border-bottom: 1px solid var(--tp-line); }
.lc-table tbody tr:last-child td { border-bottom: 0; }
.lc-table td:first-child { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; font-weight: 500; color: var(--tp-ink); overflow-wrap: anywhere; }

/* ---------- Company: buttons the tracking scripts must not see as .btn-cta ---------- */
.co-btn svg { width: 18px; height: 18px; flex: none; }
.lc-sales .tp-btn, .tp-hero .lc-textbtn { height: 56px; padding: 0 32px; border-radius: 12px; font-size: 16px; }
.tp-btn.co-btn-dark { background: var(--blue); box-shadow: 0 8px 24px -10px rgba(0,108,224,.55); }
.tp-btn.co-btn-dark:hover { background: #005ec4; }
.tp-btn:focus-visible, .co-copy:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.co-hero-mail { margin: 22px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 15.5px; color: var(--tp-muted); }
.co-hero-mail a { color: var(--tp-ink); border-bottom: 1px solid rgba(11,28,33,.22); transition: color .15s ease, border-color .15s ease; }
.co-hero-mail a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.lc-copywrap { margin: 14px 0 0; }
.co-copy {
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font: 500 15.5px 'Outfit', sans-serif; color: var(--blue);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.co-copy:hover { text-decoration-thickness: 2px; }
/* tap size: 36px button gets an invisible 40px hit area */
.co-copy { position: relative; }
.co-copy::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.tp-hero .lc-textbtn { display: inline-flex; align-items: center; }

/* ---------- Contact: sales split hero ---------- */
.lc-split { text-align: left; padding-bottom: calc(88px + var(--tp-curve)); }
.lc-split-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 72px; align-items: center; }
.lc-split .tp-h1 { margin: 0; max-width: 560px; font-size: clamp(42px, 5.2vw, 76px); }
.lc-split .tp-sub { margin: 24px 0 0; max-width: 480px; text-wrap: pretty; }
.lc-split .tp-pill { margin-bottom: 28px; }
.lc-sales { background: #fff; padding: 44px 40px 36px; --fold: 72px; }
.lc-sales .tp-ctas { justify-content: flex-start; margin-top: 28px; }
.lc-sales-text { margin: 0; font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; color: var(--tp-ink); text-wrap: pretty; }
.lc-who { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.lc-addr .lc-who { margin-bottom: 8px; }
.lc-addr { gap: 24px; }
.lc-addr-card { display: flex; flex-direction: column; margin: 0; padding: 32px 28px 28px; background: var(--tp-tint); border-radius: 24px; }
.lc-t { margin: 0 0 10px; font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--tp-ink); text-wrap: balance; }
.lc-addr-card p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--tp-muted); }
.lc-addr-card .lc-who { margin-bottom: 8px; color: var(--blue); }
.lc-grow { flex: 1; }
.lc-mail { margin-top: 18px !important; font-family: 'IBM Plex Mono', monospace; font-size: 14.5px !important; }
.lc-mail a { color: var(--tp-ink); border-bottom: 1px solid rgba(11,28,33,.25); transition: color .15s ease, border-color .15s ease; }
.lc-mail a:hover { color: var(--blue); border-bottom-color: var(--blue); }
#email-addresses .tp-after { color: var(--tp-muted); }

/* ---------- Referrals ---------- */
.lc-steps .tp-tile { position: relative; aspect-ratio: 16 / 10; }
.lc-steps .tp-tile svg { width: 34%; }
.lc-num {
  position: absolute; top: 18px; left: 18px; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: #fff; font-size: 16px; font-weight: 700; color: var(--tp-ink);
}
.lc-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.lc-tier { background: #fff; border: 1px solid var(--tp-line); border-radius: 20px; padding: 28px 12px 24px; text-align: center; }
.lc-tier-amt { font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--tp-ink); }
.lc-tier-seats { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--tp-muted); }
.lc-tier-hi { background: var(--tp-ink); border-color: var(--tp-ink); }
.lc-tier-hi .lc-tier-amt, .lc-tier-hi .lc-tier-seats { color: #fff; }
.lc-tier-hi .lc-tier-seats { opacity: .85; }
.tp-after { max-width: 840px; text-wrap: pretty; }
.tp-after + .tp-after { margin-top: 12px; }
/* short numbered clauses (terms): tighter rhythm than long prose */
.lc-compact .tp-doc-sec { padding-bottom: 36px; margin-bottom: 36px; }
#rewards .tp-after { font-size: 16px; color: var(--tp-muted); }
.lc-meta { margin: 14px 0 0; font-size: 14.5px; color: var(--tp-faint); }
#terms .tp-head { margin-bottom: 64px; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .lc-split-in { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 640px; }
  .lc-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lc-steps { max-width: 560px; }
}
@media (max-width: 700px) {
  .tp-prose .tp-doc-sec > h2 { font-size: 25px; }
  .tp-prose .lc-lede { font-size: 18.5px; margin-bottom: 40px; }
  .lc-table { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .lc-table table, .lc-table tbody, .lc-table tr, .lc-table td { display: block; width: 100%; }
  .lc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lc-table tr { margin: 0 0 12px; background: #fff; border: 1px solid var(--tp-line); border-radius: 12px; overflow: hidden; }
  .lc-table td { border-bottom: 0; padding: 0 16px 16px; }
  .lc-table td:first-child { padding: 14px 16px 6px; background: var(--tp-tint); margin-bottom: 12px; }
  .lc-split { padding-bottom: calc(64px + var(--tp-curve)); }
  .lc-split-in { gap: 36px; }
  .lc-sales .tp-ctas { align-items: stretch; }
  .lc-sales .tp-btn { width: 100%; }
  .lc-sales { padding: 40px 24px 32px; --fold: 52px; }
  .lc-sales-text { font-size: 19px; }
  .lc-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lc-tier-hi { grid-column: 1 / -1; }
  .lc-steps .tp-tile { aspect-ratio: 16 / 9; }
  .lc-steps .tp-tile svg { width: 22%; }
  .tp-hero .tp-ctas .lc-textbtn { justify-content: center; }
}
@media print { .tp-toc { display: none; } .tp-doc { display: block; } }