/* ================================================================
   Theracharts — Components & Utility Classes
   2026-05-05: Path C of the brand-architecture refactor.

   Centralized component classes that replace the most-repeated inline
   style patterns across the marketing site. Once HTML pages are
   migrated to use these classes, brand-level changes (color, type,
   spacing, density) become single-file edits in this file or
   theme.css.

   Loaded on every page via <link rel="stylesheet" href="/css/components.css">.
   Loads AFTER theme.css and BEFORE the per-page inline <style> blocks,
   so component defaults can be overridden inline if a page needs a
   one-off variant.

   Architecture:
     theme.css       — design tokens (colors, fonts) and global resets
     components.css  — reusable component classes (this file)
     wow.css         — animation/effect helpers
     [inline]        — page-specific styles, gradually being deleted
   ================================================================ */


/* ----------------------------------------------------------------
   Layout primitives
   ---------------------------------------------------------------- */

/* Push page content below the fixed nav (height = utility bar 36px + nav 100px) */
.tc-nav-spacer { height: 136px; }
@media (max-width: 720px) {
  .tc-nav-spacer { height: 120px; }
}

/* Standard section vertical padding — Linear-style breathing room */
.tc-section-pad { padding: 96px 0; }
@media (max-width: 768px) {
  .tc-section-pad { padding: 64px 0; }
}
.tc-section-pad-sm { padding: 64px 0; }
.tc-section-pad-lg { padding: 128px 0; }


/* ----------------------------------------------------------------
   Flex helpers — replace the ×13 `display: flex; gap: 12px; ...` patterns
   ---------------------------------------------------------------- */

.tc-flex-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.tc-flex-row-center {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.tc-cta-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}


/* ----------------------------------------------------------------
   Typography utilities
   ---------------------------------------------------------------- */

/* Section heading h2 — Inter Bold, tighter tracking, Linear-style density */
.tc-section-h2 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .tc-section-h2 { font-size: 28px; }
}

/* Hero h1 — Linear-scale display heading. Use on the home page hero
   and other top-of-page headlines that need to dominate. */
.tc-hero-h1 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 72px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.045em;
  margin-bottom: 24px;
}
@media (max-width: 1024px) {
  .tc-hero-h1 { font-size: 56px; }
}
@media (max-width: 720px) {
  .tc-hero-h1 { font-size: 40px; line-height: 1.1; }
}

/* Hero subhead — denser than .tc-text-prose, sits under hero h1 */
.tc-hero-sub {
  font-size: 19px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 32px;
  max-width: 580px;
}
@media (max-width: 720px) {
  .tc-hero-sub { font-size: 17px; }
}

/* Sub-header — replaces ×14 `font-size: 16px; font-weight: 600;` pattern */
.tc-text-sub {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

/* Body paragraph — Linear-style density (15px / 1.55 line-height,
   tightened from previous 14/1.65 for confident reading rhythm). */
.tc-text-body {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Small body text */
.tc-text-small {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Eyebrow — Linear-style: tiny Inter uppercase, tracked wide, muted gray.
   Was JetBrains Mono — pivoted to Inter for typographic unity. */
.tc-eyebrow {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  display: inline-block;
}

/* Link reset — replaces ×19 `color: inherit` */
.tc-link {
  color: inherit;
  text-decoration: none;
}
.tc-link:hover { color: var(--text); }


/* ----------------------------------------------------------------
   Cards
   ---------------------------------------------------------------- */

/* Generic card — replaces ×14 `border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; background: var(--surface);` */
.tc-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  background: var(--surface);
}
.tc-card-lg {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  background: var(--surface);
}
.tc-card-interactive {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  background: var(--surface);
  transition: border-color 0.2s, transform 0.15s;
  cursor: pointer;
}
.tc-card-interactive:hover {
  border-color: var(--text-tertiary);
  transform: translateY(-1px);
}


/* ----------------------------------------------------------------
   Stats — for the "120+" / "$25/seat" / "5-min setup" patterns
   ---------------------------------------------------------------- */

.tc-stat-number {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.04em;
  line-height: 1;
  display: block;
}
@media (max-width: 768px) {
  .tc-stat-number { font-size: 36px; }
}

.tc-stat-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
}


/* ----------------------------------------------------------------
   Spacing utilities — useful one-offs
   ---------------------------------------------------------------- */

.tc-mb-xs { margin-bottom: 4px; }
.tc-mb-sm { margin-bottom: 8px; }
.tc-mb-md { margin-bottom: 16px; }
.tc-mb-lg { margin-bottom: 24px; }
.tc-mb-xl { margin-bottom: 40px; }


/* ----------------------------------------------------------------
   Container — max-width with horizontal padding
   ---------------------------------------------------------------- */

.tc-container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
.tc-container-md {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.tc-container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ----------------------------------------------------------------
   Status colors — Linear philosophy: color = information
   Used to communicate clinical severity, alert state, success/error.
   Pair with an icon or label so colorblind users still parse meaning.
   ---------------------------------------------------------------- */

.tc-text-success       { color: var(--status-success); }
.tc-text-success-dark  { color: #069C7E; }
.tc-text-success-bright { color: #22c55e; }
.tc-text-warning       { color: var(--status-warning); }
.tc-text-warning-yellow { color: #eab308; }
.tc-text-error         { color: var(--status-error); }
.tc-text-error-dark    { color: #dc2626; }
.tc-text-orange        { color: #f97316; }
.tc-text-orange-bright { color: #FE6C31; }

/* Severity alert callouts — semi-transparent fills with matching borders */
.tc-alert-success {
  background: rgba(6, 156, 126, 0.12);
  border: 1px solid rgba(6, 156, 126, 0.35);
}
.tc-alert-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.tc-alert-orange {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.35);
}
.tc-alert-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* ----------------------------------------------------------------
   Typography variants (Phase 3 round 2)
   ---------------------------------------------------------------- */

/* h3-style sub-section heading */
.tc-text-h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Body 1.6 line-height variant (vs .tc-text-body's 1.65) */
.tc-text-body-tight {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Long-form prose paragraph (16px / 1.75 line-height) */
.tc-text-prose {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 20px;
}
.tc-text-prose-tight  { font-size: 16px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 16px; }
.tc-text-prose-flush  { font-size: 16px; color: var(--text-secondary); line-height: 1.75; margin-bottom: 0; }

/* Callout: 15px secondary text + 24px bottom margin */
.tc-text-callout {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ----------------------------------------------------------------
   Card variants
   ---------------------------------------------------------------- */

/* Square padding card (24px all around vs .tc-card's 20px 24px) */
.tc-card-tight {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  background: var(--surface);
}

/* ----------------------------------------------------------------
   Buttons — small variant (15px / 12px×28px padding)
   Pairs with .tc-btn-primary or .tc-btn-secondary as a size modifier.
   ---------------------------------------------------------------- */

.tc-btn-sm { font-size: 15px; padding: 12px 28px; }
.tc-btn-sm-auto { font-size: 15px; padding: 12px 28px; width: auto; }

/* ----------------------------------------------------------------
   Primary button max-width cap (Linear pivot final lock, 2026-05-06)
   When the button background was indigo, full-width buttons stretched
   gracefully because the chromatic accent absorbed the visual weight.
   With BW chrome (--color-accent → var(--text)), a full-width white
   button on a dark page reads as a glaring placeholder block instead
   of a CTA. Capping max-width keeps full-width-forced instances
   (.tc-cta-card with inline style="width:100%", pricing card buttons)
   visually contained without fighting individual call sites.
   No effect on auto-width buttons — their natural padding + text width
   is already well below 320px.
   ---------------------------------------------------------------- */
.tc-btn-primary {
  max-width: 320px;
}

/* ================================================================
   Descendant-selector link rules (Linear pivot consolidation,
   2026-05-06). These rules used to live in 60+ inline <style>
   blocks across the marketing site, byte-identical or near-identical
   per page. Consolidated here so:
     1. Adding a new "links inherit color in this context" rule means
        editing one file, not 60+
     2. The :not() exclusion list lives in ONE place so adding a new
        CTA class (.tc-pill-cta, etc.) updates here only
     3. Page weight reduces — smaller per-page <style> blocks
   The :not() exclusions defend against the silent-CTA-invisibility
   bug class (a .tc-btn-primary inside one of these parents would
   otherwise inherit the parent's text color and become unreadable).
   The selectors below match the canonical pretty-printed version
   from the per-page audit; minified-form duplicates were the same
   rule with whitespace stripped.
   Selectors NOT consolidated here (left per-page because their
   bodies legitimately diverge across contexts): .tc-nav-dropdown-menu a
   (3 padding variants by dropdown style), .tc-newsletter-form button,
   .tc-footer-contact a (13px vs 14px), .tc-footer-status a.
   .tc-section a is also handled per-page because its body diverges
   between color: inherit (most pages) and color: var(--accent)
   (privacy/terms).
   ================================================================ */

/* ---- Nav links + footer links + utility-bar — text-secondary tone ---- */
.tc-nav-links a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta) {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s;
  letter-spacing: 0.2px;
  text-decoration: none;
}
.tc-nav-links a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta):hover {
  color: var(--text);
}
.tc-footer-col a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta) {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color 0.2s;
  text-decoration: none;
}
.tc-footer-col a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta):hover {
  color: var(--text);
}
.tc-ub-right a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta) {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.tc-ub-right a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta):hover {
  color: var(--text-secondary);
}
.tc-footer-legal a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta) {
  font-size: 13px;
  color: var(--text-tertiary);
  transition: color 0.2s;
  text-decoration: none;
}
.tc-footer-legal a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta):hover {
  color: var(--text-secondary);
}

/* ---- Footer body — color: inherit (defends against CTA invisibility) ---- */
.tc-footer a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta) {
  text-decoration: none;
  color: inherit;
}

/* ---- Blog content links ---- */
.tc-toc a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta) {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.15s;
  display: block;
  padding: 6px 12px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.5;
}
.tc-toc a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta):hover {
  color: var(--text);
  border-left-color: var(--text-secondary);
}
.tc-blog-author a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta) {
  color: var(--text-secondary);
  transition: color 0.2s;
}
.tc-blog-post a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta) {
  color: var(--accent);
  transition: color 0.2s;
}
.tc-blog-post a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta):hover {
  color: var(--text);
}

/* ---- Misc patterns ---- */
.ag-breadcrumb a:not(.tc-btn-primary):not(.tc-btn-secondary):not(.tc-cta-link):not(.tc-nav-cta) {
  color: var(--text-tertiary);
  transition: color 0.2s;
}

/* ----------------------------------------------------------------
   Layout / spacing variants
   ---------------------------------------------------------------- */

.tc-flex-gap-sm { display: flex; gap: 8px; }

/* Icon + text row (icon, label) with bottom margin */
.tc-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* Section vertical padding variants */
.tc-section-pad-darken {
  /* 2026-05-06 Linear pivot: was `background: var(--bg-secondary)` for visual
     rhythm via alternating bgs. Linear uses uniform bg + spacing + thin
     border for rhythm. Class name retained so HTML doesn't need to change;
     visual treatment swapped to a top-border divider. */
  padding: 80px 0;
  border-top: 1px solid var(--border);
}

/* Centered narrow container */
.tc-container-narrow-center {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* ================================================================
   Phase 3 round 3 — atomic utility classes (Tailwind-inspired)
   For the long tail of partial-match patterns. Each class is a
   single declaration. Compose them on elements (e.g., `class="tc-fs-16
   tc-color-secondary tc-mb-4"`) so future style edits are centralized.
   ================================================================ */

/* Margins — bottom (most common) */
.tc-mb-0  { margin-bottom: 0; }
.tc-mb-1  { margin-bottom: 4px; }
.tc-mb-2  { margin-bottom: 8px; }
.tc-mb-3  { margin-bottom: 12px; }
.tc-mb-4  { margin-bottom: 16px; }
.tc-mb-5  { margin-bottom: 20px; }
.tc-mb-6  { margin-bottom: 24px; }
.tc-mb-8  { margin-bottom: 32px; }
.tc-mb-10 { margin-bottom: 40px; }
.tc-mt-2  { margin-top: 8px; }
.tc-mt-4  { margin-top: 16px; }
.tc-mt-6  { margin-top: 24px; }
.tc-mx-auto { margin: 0 auto; }

/* Font sizes — common scale */
.tc-fs-10 { font-size: 10px; }
.tc-fs-12 { font-size: 12px; }
.tc-fs-13 { font-size: 13px; }
.tc-fs-14 { font-size: 14px; }
.tc-fs-15 { font-size: 15px; }
.tc-fs-16 { font-size: 16px; }
.tc-fs-18 { font-size: 18px; }
.tc-fs-20 { font-size: 20px; }
.tc-fs-24 { font-size: 24px; }
.tc-fs-28 { font-size: 28px; }
.tc-fs-32 { font-size: 32px; }
.tc-fs-40 { font-size: 40px; }

/* Font weights */
.tc-fw-400 { font-weight: 400; }
.tc-fw-500 { font-weight: 500; }
.tc-fw-600 { font-weight: 600; }
.tc-fw-700 { font-weight: 700; }
.tc-fw-800 { font-weight: 800; }

/* Text colors — branded tokens */
.tc-color-text       { color: var(--text); }
.tc-color-secondary  { color: var(--text-secondary); }
.tc-color-tertiary   { color: var(--text-tertiary); }
.tc-color-accent     { color: var(--accent); }
.tc-color-white      { color: #fff; }

/* Backgrounds — branded tokens */
.tc-bg-surface       { background: var(--surface); }
.tc-bg-secondary     { background: var(--bg-secondary); }
.tc-bg-accent-light  { background: var(--accent-light); }

/* Backgrounds — status (color = information per Linear) */
.tc-bg-success-dark  { background: #069C7E; }
.tc-bg-warning-yellow { background: #eab308; }
.tc-bg-orange-bright { background: #FE6C31; }

/* Borders */
.tc-border           { border: 1px solid var(--border); }
.tc-border-translucent { border: 1px solid rgba(255, 255, 255, 0.15); }
.tc-border-none      { border: none; }

/* Border radius scale */
.tc-rounded-sm   { border-radius: 8px; }
.tc-rounded      { border-radius: 12px; }
.tc-rounded-lg   { border-radius: 16px; }
.tc-rounded-pill { border-radius: 999px; }

/* Display */
.tc-block        { display: block; }
.tc-inline-block { display: inline-block; }
.tc-flex         { display: flex; }
.tc-inline-flex  { display: inline-flex; }
.tc-grid         { display: grid; }
.tc-hidden       { display: none; }

/* Flex helpers (atomic — not the composite ones above) */
.tc-items-center    { align-items: center; }
.tc-items-start     { align-items: flex-start; }
.tc-items-end       { align-items: flex-end; }
.tc-justify-center  { justify-content: center; }
.tc-justify-between { justify-content: space-between; }
.tc-justify-start   { justify-content: flex-start; }
.tc-flex-wrap       { flex-wrap: wrap; }
.tc-flex-col        { flex-direction: column; }
.tc-gap-1 { gap: 4px; }
.tc-gap-2 { gap: 8px; }
.tc-gap-3 { gap: 12px; }
.tc-gap-4 { gap: 16px; }
.tc-gap-6 { gap: 24px; }

/* Text alignment */
.tc-text-center { text-align: center; }
.tc-text-left   { text-align: left; }
.tc-text-right  { text-align: right; }

/* Text transform / decoration */
.tc-uppercase     { text-transform: uppercase; }
.tc-no-underline  { text-decoration: none; }
.tc-underline     { text-decoration: underline; }

/* Letter-spacing — common values from inline audit */
.tc-tracking-wide  { letter-spacing: 1.5px; }
.tc-tracking-tight { letter-spacing: -0.02em; }

/* Line heights */
.tc-leading-extra-tight { line-height: 1.15; }
.tc-leading-tight       { line-height: 1.3; }
.tc-leading-snug        { line-height: 1.5; }
.tc-leading-normal      { line-height: 1.6; }
.tc-leading-relaxed     { line-height: 1.65; }
.tc-leading-loose       { line-height: 1.7; }
.tc-leading-prose       { line-height: 1.75; }

/* ================================================================
   Phase 3 round 4 — atomic utilities for the long tail
   ================================================================ */

/* Padding scale (all sides + axis variants) */
.tc-p-4        { padding: 16px; }
.tc-p-6        { padding: 24px; }
.tc-p-8        { padding: 32px; }
.tc-pad-pill   { padding: 2px 8px; }
.tc-pad-tag    { padding: 4px 10px; }
.tc-pad-card-sm { padding: 18px 22px; }
.tc-pad-card-lg { padding: 40px 32px; }
.tc-pad-card-snug { padding: 24px 16px; }
.tc-pad-btn    { padding: 16px 36px; }
.tc-py-md      { padding: 40px 0; }
.tc-py-lg      { padding: 80px 0; }
.tc-py-xl      { padding: 100px 0; }
.tc-px-page    { padding: 0 40px; }
.tc-pt-0       { padding-top: 0; }

/* Font sizes (additional values) */
.tc-fs-11 { font-size: 11px; }
.tc-fs-17 { font-size: 17px; }
.tc-fs-22 { font-size: 22px; }
.tc-fs-36 { font-size: 36px; }

/* Gaps (additional values) */
.tc-gap-2-5 { gap: 6px; }
.tc-gap-2-half { gap: 10px; }
.tc-gap-3-5 { gap: 14px; }

/* Margin utilities */
.tc-m-0       { margin: 0; }
.tc-ml-auto   { margin-left: auto; }
.tc-mr-auto   { margin-right: auto; }
.tc-mt-8      { margin-top: 32px; }

/* Letter-spacing (additional) */
.tc-tracking-tighter   { letter-spacing: -1.5px; }
.tc-tracking-neg-1     { letter-spacing: -1px; }
.tc-tracking-neg-half  { letter-spacing: -0.5px; }
.tc-tracking-1px       { letter-spacing: 1px; }
.tc-tracking-eyebrow   { letter-spacing: 0.04em; }

/* Position */
.tc-relative { position: relative; }
.tc-absolute { position: absolute; }

/* Flex (additional) */
.tc-flex-shrink-0 { flex-shrink: 0; }

/* Sizes — square */
.tc-size-32 { width: 32px; height: 32px; }

/* Max-widths (common values from audit) */
.tc-mw-480  { max-width: 480px; }
.tc-mw-640  { max-width: 640px; }
.tc-mw-720  { max-width: 720px; }
.tc-mw-760  { max-width: 760px; }
.tc-mw-800  { max-width: 800px; }
.tc-mw-1200 { max-width: 1200px; }

/* Border radius (additional) */
.tc-rounded-xs   { border-radius: 6px; }
.tc-rounded-md   { border-radius: 10px; }
.tc-rounded-full { border-radius: 50%; }

/* Borders (additional) */
.tc-border-faint { border: 1px solid rgba(255, 255, 255, 0.08); }
.tc-border-top   { border-top: 1px solid var(--border); }
.tc-border-bottom { border-bottom: 1px solid var(--border); }

/* Status text colors (additional) */
/* 2026-05-06 BW pivot: amber neutralized. Was #fbbf24 — read as out-of-place
   against the BW chrome on /pricing directory callout + /join-directory
   founding-member pills. Token name kept so existing call sites don't error. */
.tc-text-amber { color: var(--text-secondary); }
.tc-text-mute1 { color: #ccc; }
.tc-text-mute2 { color: #999; }
.tc-text-mute3 { color: #888; }

/* Status backgrounds (additional) */
.tc-bg-orange { background: #f97316; }
.tc-bg-success-tint { background: rgba(34, 197, 94, 0.12); }
.tc-bg-error-tint   { background: rgba(220, 38, 38, 0.12); }

/* Background tints */
.tc-bg-tint-subtle { background: rgba(255, 255, 255, 0.04); }
.tc-bg-transparent { background: transparent; }
.tc-bg-accent      { background: var(--accent); }
.tc-bg-text-secondary { background: var(--text-secondary); }

/* Transitions */
.tc-transition-bg      { transition: background 0.2s; }
.tc-transition-border  { transition: border-color 0.2s; }
.tc-transition-opacity { transition: opacity 0.5s; }

/* ================================================================
   Phase 3 round 5 — final font/color sweep
   ================================================================ */

/* Additional muted text colors */
.tc-text-mute4    { color: #777; }
.tc-text-mute5    { color: #aaa; }

/* Additional green variants */
.tc-text-success-mid    { color: #059669; }   /* emerald-600 */
.tc-text-green-400      { color: #34d399; }

/* Token-based status (matches per-page token names) */
.tc-text-error-token   { color: var(--error); }
.tc-text-success-token { color: var(--success); }
.tc-bg-success-token   { background: var(--success); }

/* Accent-alt token */
.tc-color-accent-alt   { color: var(--accent-alt); }

/* Additional dark backgrounds */
.tc-bg-dark-1a      { background: #1a1a1a; }
.tc-bg-near-black   { background: #0a0a0a; }

/* Additional white-tint backgrounds */
.tc-bg-tint-6       { background: rgba(255, 255, 255, 0.06); }
.tc-bg-tint-12      { background: rgba(255, 255, 255, 0.12); }

/* Amber alert tints */
.tc-bg-amber-tint        { background: var(--accent-light); }
.tc-bg-amber-tint-light  { background: var(--accent-light); }
.tc-bg-amber-tint-faint  { background: var(--accent-light); }
.tc-border-amber-tint    { border: 1px solid var(--border); }

/* Italic */
.tc-italic { font-style: italic; }

/* Additional line heights */
.tc-leading-none     { line-height: 1; }
.tc-leading-snug-2   { line-height: 1.4; }
.tc-leading-snug-3   { line-height: 1.25; }
.tc-leading-h1       { line-height: 1.2; }

/* Additional letter spacing */
.tc-tracking-eyebrow-lg { letter-spacing: 0.05em; }
.tc-tracking-2px        { letter-spacing: 2px; }
.tc-tracking-half-px    { letter-spacing: 0.5px; }

/* Additional font sizes */
.tc-fs-26 { font-size: 26px; }

/* Originally gradients — flattened to solid for Linear-style restraint
   (color = information; subtle gradients are decoration). Class names
   kept since 11+2+2 = 15 HTML elements reference them. The "soft" ones
   become a flat surface tint; the amber one keeps a hint of amber as
   it lives on alert callouts where color = info. */
.tc-bg-gradient-soft   { background: rgba(255, 255, 255, 0.06); }
.tc-bg-gradient-soft-2 { background: rgba(255, 255, 255, 0.05); }
.tc-bg-gradient-amber  { background: var(--bg-secondary); }

/* Mono font shorthand — was JetBrains Mono; pivoted to Inter for Linear unity.
   Class name retained so HTML doesn't need to change. */
.tc-font-mono { font-family: 'Inter', -apple-system, sans-serif; }

/* ================================================================
   Linear-style secondary CTA — text link with arrow, NOT a button.
   Use as `<a class="tc-cta-link">See pricing →</a>`. Demotes the
   secondary action so the primary CTA is unambiguously the click
   that matters.
   ================================================================ */
.tc-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.15s;
  background: none;
  border: none;
  padding: 0;
}
.tc-cta-link:hover {
  color: var(--text);
}
.tc-cta-link::after {
  content: "→";
  transition: transform 0.15s;
}
.tc-cta-link:hover::after {
  transform: translateX(2px);
}

/* ================================================================
   Audience cards — promoted from home-page inline styles (May 6, 2026,
   batch A2). Used on /pricing now; home-page section was cut.
   Token-based so light/dark mode + BW pivot both work cleanly.
   ================================================================ */
.tc-audience { padding: 120px 0; border-top: 1px solid var(--border); }
.tc-audience-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.tc-audience-card {
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: 16px; padding: 40px 32px; text-align: center;
  transition: border-color 0.25s;
}
.tc-audience-card:hover { border-color: var(--border); }
.tc-audience-card h3 {
  font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.tc-plan-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--text);
  background: var(--accent-light); padding: 4px 12px;
  border-radius: 4px; margin-bottom: 16px;
}
.tc-audience-card p { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; }
@media (max-width: 768px) {
  .tc-audience-grid { grid-template-columns: 1fr; }
  .tc-audience { padding: 80px 0; }
}