/* ==========================================================================
   My TTM — home.css (home page only; tokens and components come from main.css)
   ========================================================================== */

/* Hero */
.hero__eyebrow { color: var(--gold); }

/* Positioning: slightly wider text column than the proof-point column */
@media (min-width: 860px) {
  .split--wide { grid-template-columns: 1.15fr 1fr; }
}

/* Proof points */
.proof-list { display: grid; gap: 0.75rem; }
.proof-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.proof-list__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 0.9rem;
}
.proof-list__text { font-weight: 600; color: var(--ink); line-height: 1.4; }

/* Feature grid: every tile is a link to the features page */
.feature-grid > li { display: grid; }
a.feature-tile { text-decoration: none; color: inherit; }
a.feature-tile .feature-tile__title { transition: color var(--dur) var(--ease); }
a.feature-tile:hover .feature-tile__title,
a.feature-tile:focus-visible .feature-tile__title { color: var(--gold-dark); }
a.feature-tile:focus-visible { outline-offset: 0; }

/* Testimonials */
.testimonials__carousel { max-width: 860px; margin-inline: auto; }
.testimonials__carousel:focus-visible { outline-color: var(--gold); border-radius: var(--radius); }
.section--navy .testimonial__quote { text-wrap: pretty; }

/* Pricing + get in touch */
.pricing__card .card__title { margin-bottom: 1.25rem; }
/* An office column is never narrower than the longest email address (~260px), so it wraps to a
   single column instead of breaking the address mid-word. */
.pricing__offices { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pricing__office-city { font-size: 0.95rem; margin-bottom: 0.35rem; }
.pricing__office .contact-lines a { overflow-wrap: anywhere; }

/* Request a demo */
.demo__media img {
  box-shadow: none;
  border-radius: 0;
  max-width: 440px;
  margin-inline: auto;
}
.demo__lead { margin-bottom: 0; }
.demo__form { margin-top: 2rem; }
@media (min-width: 860px) {
  .demo__split { align-items: start; }
  .demo__media { position: sticky; top: calc(var(--header-h) + 24px); }
  .demo__media img { max-width: 520px; }
}