/* DealArena marketing — Full Terms of Service (/tos).
   "Swanky counsel's office" treatment: light ground, purple glow accents,
   numbered sections, sticky TOC rail, printable document card. Rides on
   marketing-shell.css tokens where they match; page-specific purple accents
   are scoped to .p-tos so they never leak to :root. */

.p-tos {
  /* design tokens scoped to the wrapper (NOT :root) */
  --tos-purple: #6d3df0;
  --tos-page: #fbfaf7;
  --tos-card: #ffffff;
  --tos-ink: #17141f;
  --tos-body: #3f3b33;
  --tos-2: #6a6458;
  --tos-3: #6a655c;
  --tos-label: #8b8578;
  --tos-faint: #b5afa2;
  --tos-hair: #eceadf;
  --tos-hair-2: #e8e5db;
  --tos-btn-line: #e0dcd0;
  --tos-caps-bg: #f6f3ff;
  --tos-caps-line: #e3dbfa;
  --tos-caps-ink: #3a3357;
  --tos-chip: #f2f0ea;
  --tos-chip-accent: rgba(109, 61, 240, 0.10);

  /* How far down the viewport the sticky marketing nav ends. The reading
     progress bar and the sticky rail both hang off it. Measured in the browser
     rather than guessed: nav.nav renders 66px on the desktop shell, and the
     phone chrome takes over below 560px (see the media query at the end). */
  --tos-nav-h: 66px;

  background: var(--tos-page);
  color: var(--tos-body);
  -webkit-font-smoothing: antialiased;
  /* clip, NOT hidden. overflow-x:hidden computes overflow-y to auto, which
     makes .p-tos a scroll container and silently kills position:sticky for
     everything inside it — the TOC rail included. `clip` does the same
     clipping without creating one. */
  overflow-x: clip;
}

.p-tos ::selection { background: rgba(124, 92, 255, 0.22); }

/* smooth anchor scrolling — this stylesheet loads on /tos only, so the html
   rule cannot leak to other pages; padding offsets the sticky nav */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

/* ===== reading progress (2026-08-20 design) ===== */
.tos-progress {
  position: sticky; top: var(--tos-nav-h); z-index: 40;
  height: 3px; background: var(--tos-hair-2);
}
.tos-progress i {
  display: block; width: 0; height: 100%;
  background: var(--tos-purple);
  transition: width 90ms linear;
}

/* ===== header ===== */
.tos-head {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 28px 56px;
}
.tos-glow {
  position: absolute;
  top: 30px; right: 6%;
  width: 420px; height: 300px;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.16), transparent 70%);
  pointer-events: none;
  animation: tos-glow-pulse 7s ease-in-out infinite;
}
@keyframes tos-glow-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* "Glad you're prepared." floating block (signup return CTA) */
.tos-prepared {
  position: absolute; top: 118px; right: 28px; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  text-align: right;
  animation: tos-float-y 6s ease-in-out infinite;
}
.tos-prepared svg { width: 88px; height: 40px; transform: rotate(-3deg); overflow: visible; }
.tos-prepared .squiggle {
  stroke-dasharray: 120; stroke-dashoffset: 120;
  animation: tos-draw-in 1.2s ease 0.4s forwards;
  filter: drop-shadow(0 0 8px rgba(124, 92, 255, 0.55));
}
.tos-prepared .tp-title {
  font-family: var(--display);
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--tos-ink);
}
.tos-prepared .tp-back {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--green); text-decoration: none; cursor: pointer;
}
.tos-prepared .tp-back:hover { text-shadow: 0 0 12px rgba(239, 89, 32, 0.45); }
@keyframes tos-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tos-draw-in { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@media (max-width: 860px) { .tos-prepared { display: none; } }

.tos-eyebrow {
  position: relative; z-index: 1;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em;
  color: var(--tos-label);
  display: flex; align-items: center; gap: 14px;
}
.tos-eyebrow .brand { color: var(--tos-purple); }
.tos-eyebrow .rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(124, 92, 255, 0.35), transparent); }

.tos-head h1 {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(52px, 6.8vw, 88px);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--tos-ink);
  margin: 26px 0 0;
}
.tos-head h1 .hl { color: var(--green); text-shadow: 0 0 22px rgba(239, 89, 32, 0.4); }

.tos-lead {
  position: relative; z-index: 1;
  font-size: 16.5px; line-height: 1.65;
  color: var(--tos-2);
  max-width: 560px; margin: 22px 0 0;
}
/* version / effective-date / length chips — replaced the old meta row */
.tos-badges {
  position: relative; z-index: 1;
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tos-badge {
  font-family: var(--mono); font-size: 11px; line-height: 1;
  padding: 8px 10px; border-radius: 6px;
  background: var(--tos-chip); border: 1px solid var(--tos-hair-2);
  color: var(--tos-3);
}
.tos-badge.accent {
  background: var(--tos-chip-accent);
  border-color: transparent;
  color: var(--tos-purple);
}

/* "Read the short version instead" — the way out to /terms */
.tos-short {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 20px; margin-top: 18px;
  border: 1px solid var(--tos-btn-line); border-radius: 11px;
  background: var(--tos-card);
  font-family: var(--mono); font-size: 13.5px; color: var(--tos-2);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.tos-short:hover {
  border-color: rgba(124, 92, 255, 0.55);
  color: var(--tos-purple);
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.18);
}

/* ===== "jump to" grid =====
   The phone's table of contents. Hidden at the width where .tos-rail appears
   (1160px), so the page never shows two copies of the same navigation. */
.tos-jump {
  max-width: 1160px; margin: 0 auto;
  padding: 8px 28px 4px;
}
.tos-jump-lbl {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tos-faint);
  margin-bottom: 9px;
}
.tos-jump-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.tos-jumpto {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 11px;
  border-radius: 9px; background: var(--tos-chip);
  color: var(--tos-3); font-size: 12.5px; text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.tos-jumpto .jn {
  font-family: var(--mono); font-size: 10px;
  color: var(--tos-purple); flex: none;
}
.tos-jumpto .jt {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tos-jumpto:hover, .tos-jumpto.active { background: var(--tos-chip-accent); color: var(--tos-ink); }
@media (min-width: 1161px) { .tos-jump { display: none; } }

/* ===== body: rail + document ===== */
.tos-body {
  position: relative;
  max-width: 1160px; margin: 0 auto;
  padding: 0 28px 56px;
  display: flex; gap: 48px; align-items: flex-start;
}

/* sticky TOC rail */
.tos-rail {
  position: sticky; top: calc(var(--tos-nav-h) + 28px);
  width: 240px; flex: 0 0 240px;
}
.tos-rail-lbl {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
  color: var(--tos-label);
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--tos-hair-2);
}
.tos-rail nav { display: flex; flex-direction: column; }
.tos-toc {
  display: flex; align-items: center; gap: 12px;
  padding: 5.5px 10px 5.5px 12px;
  text-decoration: none;
  border-left: 2px solid var(--tos-hair-2);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tos-toc .tn {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--tos-faint); width: 20px; flex: 0 0 20px;
}
.tos-toc .tt { font-size: 13px; font-weight: 500; color: var(--tos-3); line-height: 1.3; }
.tos-toc:hover {
  border-left-color: var(--tos-purple);
  box-shadow: -6px 0 16px -6px rgba(124, 92, 255, 0.5);
}
.tos-toc:hover .tn { color: var(--tos-purple); }
.tos-toc:hover .tt { color: var(--tos-ink); }
.tos-toc.active {
  border-left-color: var(--tos-purple);
  box-shadow: -6px 0 16px -6px rgba(124, 92, 255, 0.5);
}
.tos-toc.active .tn { color: var(--tos-purple); }
.tos-toc.active .tt { color: var(--tos-ink); }

.tos-print {
  margin-top: 20px; width: 100%;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  color: #555046;
  background: #ffffff; border: 1px solid var(--tos-btn-line); border-radius: 9px;
  padding: 12px 0; cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.tos-print:hover {
  border-color: rgba(124, 92, 255, 0.55);
  color: var(--tos-purple);
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.18);
}

/* document card */
.tos-doc {
  position: relative; flex: 1 1 auto; min-width: 0;
  background: var(--tos-card);
  border: 1px solid var(--tos-hair); border-radius: 16px;
  box-shadow: 0 2px 8px rgba(23, 20, 31, 0.04), 0 20px 60px rgba(23, 20, 31, 0.06), 0 0 80px rgba(124, 92, 255, 0.07);
  padding: 64px 72px;
}
.tos-recital {
  font-family: var(--display); font-size: 20px; line-height: 1.55; letter-spacing: -0.005em;
  color: var(--tos-ink); margin: 0;
}
.tos-doc section { margin: 0; }
.tos-sec-head {
  display: flex; align-items: baseline; gap: 16px;
  margin: 58px 0 16px;
}
.tos-sec-head .snum { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--tos-purple); }
.tos-sec-head h2 {
  font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--tos-ink); margin: 0;
}
.tos-sec-head .srule { flex: 1; height: 1px; background: var(--tos-hair); align-self: center; }

/* The plain-English line every section now opens with. Selector depth matches
   `.tos-doc p` below (0,1,1) — a bare `.tos-plain` loses to it and the line
   renders as ordinary body text. */
.tos-doc .tos-plain {
  font-size: 14.5px; line-height: 1.5; font-style: italic;
  color: var(--tos-label);
  margin: 0 0 14px;
}

.tos-doc p {
  font-size: 15px; line-height: 1.75; margin: 0 0 13px; color: var(--tos-body);
}
.tos-doc p b { color: var(--tos-ink); font-weight: 700; }
.tos-doc a { color: var(--tos-purple); font-weight: 500; text-decoration: underline; }

.tos-doc ol.tos-list {
  font-size: 15px; line-height: 1.75; margin: 0 0 13px;
  padding-left: 36px;
  display: flex; flex-direction: column; gap: 4px;
}

/* all-caps legal panels (§11, §12) */
.tos-caps {
  background: var(--tos-caps-bg); border: 1px solid var(--tos-caps-line); border-radius: 12px;
  padding: 20px 24px; margin: 0 0 13px;
}
.tos-caps p {
  font-size: 13.5px; line-height: 1.8; letter-spacing: 0.02em;
  color: var(--tos-caps-ink); margin: 0 0 12px;
  text-transform: uppercase;
}
.tos-caps p:last-child { margin-bottom: 0; }
.tos-caps p b { color: var(--tos-caps-ink); font-weight: 700; }

.tos-contact-block { font-size: 15px; line-height: 2; margin: 0 0 13px; padding-left: 36px; }
.tos-contact-block b { color: var(--tos-ink); }

/* document close row + easter egg */
.tos-close {
  margin-top: 60px; padding-top: 28px;
  border-top: 1px solid var(--tos-hair);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.tos-close .ver { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--tos-label); }
.tos-egg { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--tos-faint); cursor: default; }
.tos-egg .egg-b { display: none; }
.tos-egg:hover .egg-a { display: none; }
.tos-egg:hover .egg-b { display: inline; color: var(--tos-purple); text-shadow: 0 0 14px rgba(124, 92, 255, 0.6); }

/* ===== "questions about any of this" card ===== */
.tos-ask {
  max-width: 1160px; margin: 0 auto;
  padding: 0 28px 110px;
}
.tos-ask-card {
  border: 1px solid var(--tos-hair-2); border-radius: 14px;
  background: var(--tos-chip);
  padding: 16px 15px;
}
.tos-ask-lbl {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tos-faint);
}
.tos-ask p {
  font-size: 14.5px; line-height: 1.6; color: var(--tos-2);
  margin: 9px 0 0;
}
.tos-ask a { color: var(--tos-purple); font-weight: 500; text-decoration: underline; }

/* ===== responsive ===== */
@media (max-width: 1160px) {
  .tos-rail { display: none; }
}
@media (max-width: 860px) {
  .tos-doc { padding-left: 34px; padding-right: 34px; }
}
/* Phone: the marketing shell hands over to the 56px mobile chrome at 560px,
   so the progress bar's offset changes with it. Gutters drop to the design's
   18px and the display type comes down to its 36px. */
@media (max-width: 559.98px) {
  /* 57, not the design's 56: .mnav is a 56px bar plus a 1px bottom hairline,
     and measuring it beats copying the artboard's number. */
  .p-tos { --tos-nav-h: 57px; }
  .tos-head { padding: 22px 18px 0; }
  .tos-head h1 { font-size: 36px; }
  .tos-lead { font-size: 15px; }
  .tos-short { display: flex; width: 100%; }
  .tos-jump { padding: 20px 18px 0; }
  .tos-body { padding: 24px 18px 40px; }
  .tos-doc { padding: 22px 18px; border-radius: 14px; }
  .tos-recital { font-size: 17px; }
  .tos-sec-head { margin: 34px 0 12px; gap: 10px; }
  .tos-sec-head h2 { font-size: 19px; }
  .tos-caps { padding: 16px 15px; }
  .tos-contact-block, .tos-doc ol.tos-list { padding-left: 20px; }
  .tos-close { margin-top: 40px; }
  .tos-ask { padding: 0 18px 34px; }
}

/* ===== print ===== */
@media print {
  .nav, .foot, .tos-head, .tos-rail, .tos-prepared,
  .tos-progress, .tos-jump, .tos-ask { display: none !important; }
  .p-tos { background: #ffffff; }
  .tos-doc { box-shadow: none !important; border: none !important; }
}