/* ==========================================================================
   The Ideal Card — 2026-11 design system: homepage inline styles (part B)
   The prototype's inline style="" attributes for the lower homepage sections
   (bright break → final CTA; partials in views/marketing/partials/home/), as
   classes. Values verbatim, var(--x) → var(--tc-x). An inline style beat
   every stylesheet rule, so where an extracted rule sets the same property
   these selectors are compounded to out-rank it.
   Load after css/tc/home-sections.css.
   ========================================================================== */

/* ---------- Shared ---------- */
/* <h2 class="h2" style="margin-top:8px;"> (deep dive, pricing, FAQ) */
.tc-h2.tc-sec-title {
  margin-top: 8px;
}

/* ---------- Bright break ---------- */
.tc-bright-break-grid.tc-bright-break-front {
  position: relative;
  z-index: 2;
}
/* style="transition-duration:1400ms;" on the two .fx reveals */
.tc-fx.tc-bright-break-slow {
  transition-duration: 1400ms;
}
/* 1<span style="color:var(--accent-2);">.</span> — span kept class-less */
.tc-bright-break .tc-huge-num > span {
  color: var(--tc-accent-2);
}

/* ---------- Feature deep dive ---------- */
.tc-backdrop-text-section.tc-deep-dive {
  overflow: hidden;
}
.tc-bg-numeral.tc-deep-dive-numeral {
  bottom: -100px;
  left: -80px;
}
.tc-bg-orb.tc-deep-dive-orb {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, var(--tc-pop) 0%, transparent 65%);
  top: 20%;
  right: -140px;
}
.tc-feature-head.tc-deep-dive-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 80px;
  position: relative;
  z-index: 2;
}
.tc-text-link.tc-deep-dive-link {
  margin-top: auto;
}

/* ---------- Pricing ---------- */
.tc-block.tc-pricing {
  position: relative;
  overflow: hidden;
}
.tc-bg-orb.tc-pricing-orb {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--tc-accent) 0%, transparent 60%);
  top: -200px;
  left: 30%;
}
.tc-bg-numeral.tc-pricing-numeral {
  top: -60px;
  right: -60px;
}
.tc-btn.tc-pricing-btn {
  justify-content: center;
}

/* ---------- Teasers: case studies + blog ---------- */
.tc-block.tc-teaser {
  border-top: 1px solid var(--tc-line);
}
.tc-teaser-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.tc-section-label.tc-teaser-label {
  text-align: left;
}
.tc-h2.tc-teaser-title {
  margin-top: 12px;
}
.tc-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.tc-teaser-card {
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid var(--tc-line);
  border-radius: 20px;
  background: var(--tc-card, var(--tc-canvas));
}
.tc-teaser-kicker {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Case studies */
.tc-teaser-card.tc-cs-card {
  padding: 32px 28px;
}
.tc-cs-name {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-top: 12px;
}
.tc-cs-stats {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}
.tc-cs-stat-value {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.02em;
}
/* 4.8<span style="color:var(--pop);">★</span> — span kept class-less, so in the
   light theme the class-less-span rule (#2c1773 !important) wins, exactly as it
   out-ranked the prototype's [style*="color:var(--pop)"] fix. */
.tc-cs-stat-value > span {
  color: var(--tc-pop);
}
.tc-cs-stat-label {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-ink-3);
  margin-top: 2px;
}

/* Blog */
.tc-teaser-card.tc-blog-card {
  overflow: hidden;
}
.tc-blog-media {
  aspect-ratio: 16/10;
  position: relative;
}
.tc-blog-media-1 {
  background: linear-gradient(135deg, var(--tc-accent), var(--tc-accent-deep, #241663));
}
.tc-blog-media-2 {
  background: linear-gradient(135deg, var(--tc-pop), var(--tc-accent));
}
.tc-blog-media-3 {
  background: linear-gradient(135deg, #241663, var(--tc-accent));
}
.tc-blog-media-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Not in the prototype: a real article's cover image, laid over the slot's
   gradient + icon so a broken image still shows the designed card. */
.tc-blog-media .tc-blog-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc-blog-body {
  padding: 24px 24px 26px;
}
.tc-blog-title {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-top: 10px;
  line-height: 1.3;
}

/* ---------- FAQ ---------- */
/* (only the shared .tc-sec-title) */

/* ---------- Horizon ---------- */
.tc-h1.tc-horizon-title {
  margin-top: 28px;
}
.tc-lede.tc-horizon-lede {
  margin: 24px auto 0;
}
.tc-horizon-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tc-horizon-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tc-accent), var(--tc-accent-deep));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tc-ink);
  font-family: var(--tc-font-display);
  font-weight: 700;
  font-size: 18px;
}
.tc-horizon-id {
  text-align: left;
}
.tc-horizon-url {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
/* ideal.bio/<span style="color:var(--accent);">yourname</span> — class-less */
.tc-horizon-url > span {
  color: var(--tc-accent);
}
.tc-horizon-caption {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}
.tc-btn.tc-horizon-btn {
  margin-left: 20px;
}

/* ---------- Final CTA ---------- */
.tc-section-label.tc-cta-final-label {
  margin-bottom: 32px;
}
.tc-cta-final .tc-cta-final-title {
  text-align: center;
}
.tc-cta-final-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}