/* Page-specific styles for the redesigned homepage (/home), loaded after
   marketing.css via content_for :page_stylesheet. See #1326. */

/* Hero: on a subtle near-white (the comp's page background — a hint of cool
   gray, not pure white), with an all-black heading whose **emphasis** is
   weight-only — normal against bold, no second color — over smaller
   supporting lines. */
.marketing-page {
  --hero-tint: #fbfbfd;
}

.marketing-hero h1 {
  font-weight: 400;
}

.marketing-hero h1 strong {
  font-weight: 700;
  color: inherit;
}

.marketing-hero p {
  font-size: 1.25rem;
}

/* Audit split: tinted section with a single-color, single-weight heading. */
.media-split-teal {
  --accent-section-bg: var(--tt-teal-100);
}

.media-split-teal h2 {
  color: var(--tt-teal-700);
}

/* Client strip: the dividing rules only make sense while all five sit on one
   line; once the grid wraps, the gutters do the separating. */
@media (min-width: 1200px) {
  .client-list li + li {
    border-inline-start: 1px solid var(--bs-border-color);
  }
}

/* Tracked-out uppercase entries. Neither size maps to a utility: `small`
   (0.875em) would re-wrap the longest name and flatten the name/industry
   hierarchy. */
.client-name {
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
}

.client-industry {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

/* Talk bubbles: the customer's words in an accent-tinted speech bubble, one
   squared corner giving it the tail-side anchor. Accent tokens come from the
   .accent-* aliases in marketing.css. */
.quote-bubble {
  width: 100%;
  padding: 2.5rem;
  border-radius: 2.5rem;
  border-end-start-radius: 0;
  background-color: var(--accent-tint);
}

/* Hanging punctuation: the quote marks sit out in the margin so the words
   themselves line up flush. Only Safari implements this today; elsewhere the
   quotes just stay in the text block. */
.quote-bubble blockquote {
  margin-bottom: 1.5rem;
  hanging-punctuation: first last;
}

.bubble-person {
  font-family: var(--tt-font-display);
  font-weight: 700;
  font-size: 1.5rem;
}

.bubble-role {
  color: var(--accent-highlight);
}

/* Spotlight: continues the client strip's teal band (bg-teal-subtle on the
   section), the quote bubble riding up over the photo's bottom edge, with the
   talk-bubbles icon closing the section. */
.spotlight .spotlight-photo {
  max-height: 480px;
}

.spotlight .spotlight-quote {
  max-width: 42rem;
  margin-top: -6rem;
  margin-inline-start: 3rem;
  --accent-tint: var(--tt-teal-200);
  --accent-highlight: var(--tt-teal-700);
}

/* The teal accent's tint reads white-on-white at bubble scale; deepen it. */
.before-after .accent-teal {
  --accent-tint: var(--tt-teal-100);
}

/* Blog band: the four latest posts as quiet cards on the teal band. */
.blog-kicker {
  letter-spacing: 0.08em;
}

/* 2rem card padding falls between p-4 (1.5rem) and p-5 (3rem). */
.blog-card {
  padding: 2rem;
}

.blog-card:hover h3 {
  text-decoration: underline;
}

/* Before/After: the "before" pain and "after" relief in a quiet card beside
   each quote bubble. 2rem padding falls between p-4 and p-5. */
.ba-card {
  padding: 2rem;
}

/* Right-side bubbles anchor bottom-left (the default); flipped rows put the
   bubble on the left, anchoring bottom-right toward their ba-card. */
.before-after .flex-lg-row-reverse .quote-bubble {
  border-radius: 2.5rem;
  border-end-end-radius: 0;
}

@media (max-width: 991.98px) {
  .spotlight .spotlight-quote {
    margin-top: -2rem;
    margin-inline: 1rem;
  }
}