/* ==========================================================================
   EmailHelp — Terms of Service styles (css/pages/terms.css)
   Only terms-specific rules live here: the hero's related-policy chips, the
   numbered section headings, the "short version" key-points box and the
   contact grid. Everything else (prose, toc, callout, legal-meta) comes from
   css/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero
   -------------------------------------------------------------------------- */
.terms-hero .page-hero__content { max-width: 900px; }
.terms-hero .lead { max-width: 66ch; }
.terms-hero .hero__trust { margin-top: 26px; color: var(--text-muted-dark); } /* .hero__trust is muted-light only inside .hero--dark */
.terms-hero__related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}
.terms-hero__related-label {
  font-size: .82rem;
  color: var(--text-muted-dark);
  margin-right: 2px;
}
.terms-hero__related .tag {
  color: #E2E8F0;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  text-decoration: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.terms-hero__related .tag .icon { color: var(--cyan); }
.terms-hero__related .tag:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .28);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Table of contents: section numbers
   -------------------------------------------------------------------------- */
.page--terms .toc__num {
  display: inline-block;
  min-width: 1.65em; /* a space follows the badge so the link's accessible name reads "1 Acceptance…" */
  font-size: .8em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.page--terms .toc a[aria-current="true"] .toc__num,
.page--terms .toc a.is-active .toc__num { color: var(--primary-600); }
@media (max-width: 1023px) {
  .page--terms .toc__num { min-width: 0; margin-right: 2px; }
}
/* style.css switches the TOC to chips at max-width:1024px while the two-column legal grid starts at
   min-width:1024px, so at exactly 1024px the chips would sit inside the 260px sidebar. Restore the list. */
@media (min-width: 1024px) {
  .page--terms .toc { position: sticky; max-height: calc(100vh - var(--header-h) - 48px); }
  .page--terms .toc ol { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .page--terms .toc a {
    display: flex;              /* hanging indent: wrapped lines align under the text, not the number */
    align-items: baseline;
    gap: 7px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: .9rem;
  }
  .page--terms .toc__num { flex: 0 0 auto; min-width: 1.4em; }
  .page--terms .toc a[aria-current="true"],
  .page--terms .toc a.is-active { border-left-color: var(--primary); }
}

/* --------------------------------------------------------------------------
   Prose: inline emphasis inside callouts
   -------------------------------------------------------------------------- */
/* style.css makes every <strong> in a callout a block (its title). Emphasis inside the body copy stays inline. */
.terms-prose .callout p strong { display: inline; margin: 0; }
.terms-prose h2 { text-wrap: pretty; }
.terms-prose .terms-intro { font-size: 1.08rem; }

/* --------------------------------------------------------------------------
   "The short version" key points box
   -------------------------------------------------------------------------- */
.terms-keypoints {
  margin: 4px 0 44px;
  padding: 22px 24px 6px;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.terms-keypoints__title {
  margin: 0 0 18px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
}
.prose .terms-keypoints__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
}
.prose .terms-keypoints__grid > li::before { display: none; }
.prose .terms-keypoint {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 0 0 18px;
}
.terms-keypoint .icon-tile { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
.terms-keypoint .icon-tile .icon { width: 20px; height: 20px; }
.terms-keypoint > div { min-width: 0; }
.terms-keypoint strong {
  display: block;
  margin-bottom: 4px;
  font-size: .98rem;
  font-weight: 600;
  color: var(--text);
}
.prose .terms-keypoint p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-muted);
}
@media (min-width: 640px) {
  .prose .terms-keypoints__grid { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Contact grid + address + closing note
   -------------------------------------------------------------------------- */
.prose .terms-contact {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.prose .terms-contact > li::before { display: none; }
.prose .terms-contact__item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.terms-contact__item .icon-tile { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
.terms-contact__item .icon-tile .icon { width: 20px; height: 20px; }
.terms-contact__item > div { min-width: 0; }
.terms-contact__item strong {
  display: block;
  margin-bottom: 2px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
}
.prose .terms-contact__item a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-weight: 600;
  text-decoration: none;
  color: var(--primary-600);
}
.prose .terms-contact__item a:hover { text-decoration: underline; }
@media (min-width: 640px) {
  .prose .terms-contact { grid-template-columns: 1fr 1fr; }
}
.terms-prose address {
  margin: 0 0 1.8em;
  padding: 14px 20px;
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(99, 102, 241, .05);
}
.prose .terms-closing {
  margin-top: 2.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--border);
  font-size: .95rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .terms-hero__related { display: none; }
  .terms-keypoints, .prose .terms-contact__item { box-shadow: none; }
}