/* ============================================================
   TaleFin inner-page styles (Industries & Use Cases)
   Shared section patterns so every content page is consistent.
   Loads after tokens.css + base.css + components.css.
   ============================================================ */

/* ---- Breadcrumb ---- */
.pg-breadcrumb { font-size: var(--tf-fs-small); color: var(--tf-muted); margin-bottom: var(--tf-space-4); }
.pg-breadcrumb a { color: var(--tf-plum); text-decoration: none; }
.pg-breadcrumb a:hover { text-decoration: underline; }
.pg-breadcrumb span { margin: 0 0.4rem; color: var(--tf-line); }

/* ---- Hero ---- */
.pg-hero { background: radial-gradient(120% 120% at 88% -10%, var(--tf-plum-050) 0%, #fff 55%); }
.pg-hero__grid { display: grid; gap: var(--tf-space-12); align-items: center; }
@media (min-width: 920px) { .pg-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
@media (min-width: 920px) and (max-width: 1200px) { .pg-hero__grid { gap: var(--tf-space-8); } }
/* Laptop screens (wide but short): trim hero padding and top-align so the hero media
   stays on screen instead of dropping below the fold. Tall desktop monitors unaffected. */
@media (min-width: 920px) and (max-height: 980px) {
  .pg-hero { padding-block: clamp(2rem, 4vh, 3.5rem); }
  .pg-hero__grid { align-items: start; }
  .pg-hero__media { padding-top: 0; margin-top: clamp(1.5rem, 9vh, 6rem); }
}
.pg-hero__cta { display: flex; flex-wrap: wrap; gap: var(--tf-space-4); margin-top: var(--tf-space-8); }
.pg-hero__media { position: relative; padding: var(--tf-space-4); }
.pg-hero__media img { width: 100%; height: auto; border-radius: var(--tf-radius-lg); box-shadow: var(--tf-shadow-lg); position: relative; z-index: 1; }
.pg-hero__blob { position: absolute; z-index: 0; inset: auto -3% -6% auto; width: 44%; aspect-ratio: 1; border-radius: 50%; opacity: 0.85; }

/* Section head with a supporting spot graphic in the spare third.
   Text stays at a readable 60ch; the art fills the right side on wider screens. */
.pg-prob { display: grid; gap: var(--tf-space-8); align-items: center; }
@media (min-width: 880px) { .pg-prob { grid-template-columns: minmax(0, 60ch) 1fr; gap: var(--tf-space-16); } }
.pg-prob__art { display: none; }
@media (min-width: 880px) { .pg-prob__art { display: block; justify-self: end; width: 100%; max-width: 320px; } }
.pg-prob__art svg { width: 100%; height: auto; display: block; }

/* ---- Pain points / feature cards (reuses .tf-card) ---- */
.pg-grid { display: grid; gap: var(--tf-space-6); }
@media (min-width: 620px) { .pg-grid--2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 760px) { .pg-grid--3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 900px) { .pg-grid--4 { grid-template-columns: repeat(4,1fr); } }
.pg-icard .ico { width: 38px; height: 38px; margin-bottom: var(--tf-space-3); }
.pg-icard h3 { font-size: var(--tf-fs-h3); margin-bottom: var(--tf-space-2); }
.pg-icard p { font-size: 0.97rem; color: var(--tf-body); }

/* ---- Pillars (how TaleFin helps) ---- */
.pg-pillar { padding: var(--tf-space-6) 0; border-top: 1px solid var(--tf-line); }
.pg-pillar:first-child { border-top: 0; }
.pg-pillar h3 { color: var(--tf-plum); margin-bottom: var(--tf-space-2); }
.pg-pillar p { color: var(--tf-body); }

/* ---- Segment pills ---- */
.pg-pills { display: flex; flex-wrap: wrap; gap: var(--tf-space-3); margin-top: var(--tf-space-8); }
.pg-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem;
  border-radius: var(--tf-radius-pill); background: var(--tf-plum-050); border: 1px solid var(--tf-plum-200);
  color: var(--tf-plum); font-size: 0.92rem; }

/* ---- Cross-link cards (related pages) ---- */
.pg-links { display: grid; gap: var(--tf-space-6); margin-top: var(--tf-space-8); }
@media (min-width: 760px) { .pg-links { grid-template-columns: repeat(3,1fr); } }
.pg-link {
  display: flex; flex-direction: column; gap: var(--tf-space-2);
  background: #fff; border: 1px solid var(--tf-line); border-radius: var(--tf-radius);
  padding: var(--tf-space-6); text-decoration: none; color: var(--tf-ink);
  transition: transform var(--tf-dur) var(--tf-ease), box-shadow var(--tf-dur) var(--tf-ease), border-color var(--tf-dur);
}
.pg-link:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow); border-color: var(--tf-plum-200); text-decoration: none; }
.pg-link h3 { font-size: 1.15rem; }
.pg-link p { font-size: 0.92rem; color: var(--tf-muted); margin: 0; }
.pg-link__more { margin-top: auto; color: var(--tf-plum); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.pg-link:hover .pg-link__more svg { transform: translateX(3px); }
.pg-link__more svg { width: 16px; height: 16px; transition: transform var(--tf-dur-fast) var(--tf-ease); }

/* ---- Mid-page CTA band ---- */
.pg-cta { background: var(--tf-plum-050); border-radius: var(--tf-radius-lg); padding: clamp(2rem,4vw,3rem); text-align: center; }
.pg-cta h2 { color: var(--tf-plum); }
.pg-cta .pg-hero__cta { justify-content: center; }

/* ---- Pricing tiers ---- */
.pg-pricing { display: grid; gap: var(--tf-space-6); margin-top: var(--tf-space-12); align-items: stretch; }
@media (min-width: 880px) { .pg-pricing { grid-template-columns: repeat(3,1fr); } }
.pg-tier { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg); padding: var(--tf-space-8); }
.pg-tier--featured { border-color: var(--tf-plum); box-shadow: var(--tf-shadow); position: relative; }
.pg-tier__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--tf-plum); color: #fff; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: var(--tf-radius-pill); }
.pg-tier h3 { font-size: var(--tf-fs-h3); color: var(--tf-plum); }
.pg-tier__price { font-family: var(--tf-font-head); font-size: 2rem; color: var(--tf-ink); margin: var(--tf-space-3) 0 0; }
.pg-tier__price small { display: block; font-family: var(--tf-font-body); font-size: 0.8rem; color: var(--tf-muted); margin-top: 0.25rem; }
.pg-tier__desc { color: var(--tf-muted); font-size: 0.95rem; margin-top: var(--tf-space-3); }
.pg-feature-list { list-style: none; padding: 0; margin: var(--tf-space-6) 0; }
.pg-feature-list li { position: relative; padding-left: 1.8rem; font-size: 0.75rem; }
.pg-feature-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tf-green);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat; }
.pg-tier .tf-btn { margin-top: auto; width: 100%; justify-content: center; }
.pg-tbc { color: var(--tf-muted); font-style: italic; }

/* ---- Developer docs ---- */
.pg-doc { display: grid; gap: var(--tf-space-12); }
@media (min-width: 920px) { .pg-doc { grid-template-columns: 220px 1fr; align-items: start; } }
.pg-doc__nav { position: sticky; top: 90px; }
.pg-doc__nav ul { list-style: none; padding: 0; margin: 0; }
.pg-doc__nav li { margin-bottom: var(--tf-space-2); }
.pg-doc__nav a { color: var(--tf-body); font-size: 0.92rem; text-decoration: none; }
.pg-doc__nav a:hover { color: var(--tf-plum); }
.pg-code { background: var(--tf-ink); color: #EDE7F2; border-radius: var(--tf-radius); padding: var(--tf-space-6);
  overflow-x: auto; white-space: pre; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.6; }
.pg-code .tok-key { color: var(--tf-green); }
.pg-code .tok-str { color: var(--tf-yellow); }
.pg-code .tok-fn { color: var(--tf-peach); }
.pg-code .tok-com { color: #9385a0; font-style: italic; }
.pg-badge-note { display: inline-block; background: var(--tf-plum-050); border: 1px solid var(--tf-plum-200);
  color: var(--tf-plum); border-radius: var(--tf-radius-pill); padding: 0.3rem 0.9rem; font-size: 0.8rem; }

/* ---- Blog articles ---- */
.pg-postmeta { color: var(--tf-muted); font-size: var(--tf-fs-small); margin-top: var(--tf-space-4); }
.pg-article { max-width: 760px; }
.pg-article > p, .pg-article > ul, .pg-article > ol, .pg-article > blockquote { margin-top: var(--tf-space-6); }
.pg-article h2 { font-size: var(--tf-fs-h3); margin-top: var(--tf-space-12); }
.pg-article h3 { font-size: 1.1rem; margin-top: var(--tf-space-8); color: var(--tf-plum); }
.pg-article ul, .pg-article ol { padding-left: 1.4rem; }
.pg-article li { margin-bottom: var(--tf-space-2); }
.pg-article blockquote { margin: var(--tf-space-6) 0 0; padding: var(--tf-space-2) 0 var(--tf-space-2) var(--tf-space-6);
  border-left: 3px solid var(--tf-plum-200); color: var(--tf-body); font-style: italic; }
.pg-article blockquote cite { display: block; margin-top: var(--tf-space-2); font-style: normal; font-size: var(--tf-fs-small); color: var(--tf-muted); }
.pg-article__author { margin-top: var(--tf-space-10); padding-top: var(--tf-space-6); border-top: 1px solid var(--tf-line); font-size: var(--tf-fs-small); color: var(--tf-muted); }
.pg-article__hero { margin: 0 0 var(--tf-space-10); border-radius: var(--tf-radius-lg); overflow: hidden; }
.pg-article__hero svg { display: block; width: 100%; height: auto; }

/* ---- Legal documents ---- */
.legal-hero { background: var(--tf-plum-050); }
.legal-meta { color: var(--tf-muted); font-size: var(--tf-fs-small); margin-top: var(--tf-space-4); max-width: none; }
.legal-doc { max-width: var(--tf-maxw); }
.legal-doc p { max-width: none; }
.legal-doc > p, .legal-doc > ul, .legal-doc > ol { margin-top: var(--tf-space-4); }
.legal-doc h2 { font-size: var(--tf-fs-h3); margin-top: var(--tf-space-12); padding-top: var(--tf-space-6); border-top: 1px solid var(--tf-line); }
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--tf-space-8); }
.legal-doc h3 { font-size: 1.1rem; margin-top: var(--tf-space-6); color: var(--tf-plum); }
.legal-doc ul, .legal-doc ol { padding-left: 1.4rem; }
.legal-doc li { margin-bottom: var(--tf-space-2); }
.legal-doc ul ul, .legal-doc ol ol, .legal-doc ul ol { margin-top: var(--tf-space-2); }
.legal-downloads { list-style: none; padding: 0; margin: var(--tf-space-8) 0 0; }
.legal-download { display: flex; align-items: center; gap: var(--tf-space-4); padding: var(--tf-space-4) var(--tf-space-6);
  border: 1px solid var(--tf-line); border-radius: var(--tf-radius); margin-bottom: var(--tf-space-3);
  text-decoration: none; color: var(--tf-ink); transition: border-color var(--tf-dur), box-shadow var(--tf-dur), transform var(--tf-dur); }
.legal-download:hover { border-color: var(--tf-plum-200); box-shadow: var(--tf-shadow-sm); transform: translateY(-2px); text-decoration: none; }
.legal-download svg { width: 26px; height: 26px; flex: 0 0 auto; }
.legal-download b { font-family: var(--tf-font-head); font-weight: 500; }
.legal-download span { margin-left: auto; color: var(--tf-plum); font-size: 0.85rem; }
tion: none; color: var(--tf-ink); transition: border-color var(--tf-dur), box-shadow var(--tf-dur), transform var(--tf-dur); }
.legal-download:hover { border-color: var(--tf-plum-200); box-shadow: var(--tf-shadow-sm); transform: translateY(-2px); text-decoration: none; }
.legal-download svg { width: 26px; height: 26px; color: var(--tf-plum); flex: 0 0 auto; }
.legal-download b { font-family: var(--tf-font-head); font-weight: 500; }
.legal-download span { margin-left: auto; color: var(--tf-plum); font-size: 0.85rem; }