/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   RichText — Component Styles
   Self-contained typography for structured content blocks.
   Covers all standard rich text elements.
   Design tokens are defined in src/styles/tokens.css.
   ============================================================ */

.rich-text {
  color:       var(--foreground);
  font-family: var(--font-family-default);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}


/* ---- Paragraphs ---- */

.rich-text p {
  margin: 0;
}

.rich-text p + p,
.rich-text * + p {
  margin-top: 1rem;
}


/* ---- Headings ---- */

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  color:       var(--foreground);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-bold);
  margin:      0;
}

/* Space between a heading and what follows it */
.rich-text h1 + *,
.rich-text h2 + *,
.rich-text h3 + *,
.rich-text h4 + *,
.rich-text h5 + *,
.rich-text h6 + * {
  margin-top: 0.5rem;
}

/* Space before a heading that has something above it */
.rich-text * + h1,
.rich-text * + h2,
.rich-text * + h3,
.rich-text * + h4,
.rich-text * + h5,
.rich-text * + h6 {
  margin-top: 1.5rem;
}

.rich-text h1 { font-size: var(--font-size-h1); line-height: 1.2;  }
.rich-text h2 { font-size: var(--font-size-h2); line-height: 1.25; }
.rich-text h3 { font-size: var(--font-size-h3); line-height: 1.3;  }
.rich-text h4 { font-size: var(--font-size-h4); line-height: 1.4;  }
.rich-text h5 { font-size: var(--font-size-base); line-height: var(--line-height-base); }
.rich-text h6 { font-size: var(--font-size-sm);   line-height: var(--line-height-sm);  }


/* ---- Lists ---- */

.rich-text ul,
.rich-text ol {
  font-size:    inherit;
  line-height:  inherit;
  margin:       0;
  padding-left: 1.25rem;
}

.rich-text li {
  font-size:   inherit;
  line-height: inherit;
}

.rich-text * + ul,
.rich-text * + ol {
  margin-top: 0.5rem;
}

.rich-text ul { list-style-type: disc;    }
.rich-text ol { list-style-type: decimal; }

.rich-text li + li {
  margin-top: 0.25rem;
}

/* Nested lists */
.rich-text li > ul,
.rich-text li > ol {
  margin-top: 0.25rem;
}


/* ---- Inline emphasis ---- */

.rich-text strong,
.rich-text b {
  font-weight: var(--font-weight-bold);
}

.rich-text em,
.rich-text i {
  font-style: italic;
}


/* ---- Links ---- */

.rich-text a {
  color:           var(--primary);
  font-weight:     var(--font-weight-medium);
  text-decoration: none;
}

.rich-text a:hover {
  text-decoration: underline;
}


/* ---- Blockquote ---- */

.rich-text blockquote {
  border-left: 3px solid var(--border);
  color:       var(--muted-foreground);
  margin:      0;
  padding-left: 1rem;
}

.rich-text * + blockquote {
  margin-top: 1rem;
}


/* ---- Inline code ---- */

.rich-text code {
  background-color: var(--muted);
  border-radius:    0.25rem;
  font-family:      ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size:        0.875em;
  padding:          0.125em 0.375em;
}


/* ---- Code block ---- */

.rich-text pre {
  background-color: var(--muted);
  border-radius:    var(--radius-sm);
  margin:           0;
  overflow-x:       auto;
  padding:          1rem 1.25rem;
}

.rich-text * + pre {
  margin-top: 1rem;
}

/* Reset inline code styles when inside a pre block */
.rich-text pre code {
  background: none;
  font-size:  1em;
  padding:    0;
}


/* ---- Horizontal rule ---- */

.rich-text hr {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     1.5rem 0 0;
}


/* ---- Images ---- */

.rich-text img {
  display:   block;
  height:    auto;
  max-width: 100%;
}

/* ============================================================
   TermsOfServiceSection — Component Styles

   Plain long-form legal content, not the badge+heading marketing
   convention, so no SectionRail/.hp-section here (see
   docs/conventions.md). Typography itself lives in the shared
   RichText primitive — this file only owns section padding and the
   readable-measure width for the body copy.
   ============================================================ */

.terms-of-service {
  background:  var(--background);
  padding:     6rem 0;
  box-sizing:  border-box;
}

.terms-of-service__body {
  max-width:  50rem;   /* 800px readable measure, matches .section-header__text */
  margin:     0 auto;
}

/* RichText's own h1/h2 sizes (--font-size-h1/h2 tokens, 36px/30px) are
   tuned for compact contexts like Accordion panels — too small for a
   real page title here. Scoped to this section only (not RichText
   itself) so Accordion's sizing is untouched. Matches the sitewide
   .page-h1 (48px) / .hp-heading (36px) scale instead. */
.terms-of-service__body h1 {
  font-size:   3rem;     /* 48px, matches .page-h1 */
  line-height: 1.15;
}

.terms-of-service__body h2 {
  font-size:   2.25rem;   /* 36px, matches .hp-heading */
  line-height: 2.5rem;
}

@media (max-width: 767px) {
  .terms-of-service__body h1 {
    font-size: 2.25rem;   /* 36px, matches .page-h1's ≤767px step */
  }

  .terms-of-service__body h2 {
    font-size:   1.875rem;   /* 30px, matches .hp-heading's ≤767px step */
    line-height: 2.25rem;
  }
}

@media (max-width: 479px) {
  .terms-of-service__body h1 {
    font-size: 2rem;   /* 32px, matches .page-h1's ≤479px step */
  }
}

.terms-of-service__updated {
  color: var(--muted-foreground);
}

/* RichText's default rhythm (1rem between paragraphs, 1.5rem before a
   heading) is tuned for compact contexts like Accordion panels — too
   tight for a long-form legal document read top to bottom. Widened
   here only, scoped to this section. */
.terms-of-service__body p + p,
.terms-of-service__body * + p {
  margin-top: 1.5rem;
}

.terms-of-service__body * + h2,
.terms-of-service__body * + h3 {
  margin-top: 3rem;
}

.terms-of-service__body h2 + *,
.terms-of-service__body h3 + * {
  margin-top: 1rem;
}

.terms-of-service__body * + ul,
.terms-of-service__body * + ol {
  margin-top: 1rem;
}

.terms-of-service__body li + li {
  margin-top: 0.75rem;
}

.terms-of-service__body li > ul,
.terms-of-service__body li > ol {
  margin-top: 0.75rem;
}

/* Reasserted after the paragraph-spacing rules above (same specificity
   as "* + p", so source order decides) — keeps the extra breathing
   room under the title bigger than a regular paragraph gap. */
.terms-of-service__body h1 + * {
  margin-top: 2rem;
}

/* Numbered sections/subsections, matching the live ToS page's
   1. / a. / i. hierarchy (e.g. "section 11(b)" below resolves to
   "Cancellation or Termination of the Services" > "By Smith").
   Implemented via CSS counters on the headings themselves (rather
   than nesting headings inside <li>) so RichText's own heading
   selectors and spacing rules keep working unmodified. */
.terms-of-service__body {
  counter-reset: tos-h2;
}

.terms-of-service__body h2 {
  counter-increment: tos-h2;
  counter-reset:     tos-h3;
}

/* Inline (not hanging-indent) marker — a fixed left-gutter width would
   collide with heading text once numbers hit double digits (10-24). */
.terms-of-service__body h2::before {
  content: counter(tos-h2) '.\00a0';
}

.terms-of-service__body h3 {
  counter-increment: tos-h3;
}

.terms-of-service__body h3::before {
  content: counter(tos-h3, lower-alpha) '.\00a0';
}

/* Roman/alpha sub-lists (real <ol> elements, e.g. the Virtual/AI
   Receptionist Services items or the Money-Back Guarantee terms) —
   scoped selector needed since .rich-text ol already sets decimal. */
.terms-of-service__body ol.terms-of-service__roman {
  list-style-type: lower-roman;
}

.terms-of-service__body ol.terms-of-service__alpha {
  list-style-type: lower-alpha;
}

@media (max-width: 991px) {
  .terms-of-service {
    padding: 4.5rem 0;
  }
}

@media (max-width: 767px) {
  .terms-of-service {
    padding: 3rem 0;
  }
}