/* ==========================================================================
   TIOO marketing — bridge for pages that still carry their old stylesheet
   (feature pages: feature-pages.css; "Who it's for" landing pages:
   landing-pages.css; pricing: pricing.css) while they wait for their v3
   rebuild (Phase B). Loaded after those sheets by public_site/base.html:
   their fonts and accent become the v3 ones, and the two hero buttons
   that used to come from marketing.css are drawn as v3 buttons.
   Delete this file once the last of those pages is rebuilt.
   ========================================================================== */
:root {
  --fd-font-display: var(--font-display);
  --fd-font-body: var(--font-text);
  --fp-font-display: var(--font-display);
  --fp-font-body: var(--font-text);
  --pp-font-display: var(--font-display);
  --pp-font-body: var(--font-text);
  --fd-accent: var(--ink);
  --fd-accent-hover: var(--ink-2);
  --fd-accent-dark: var(--ink);
  --fd-accent-soft: var(--accent-soft);
  --fp-accent: var(--ink);
  --fp-accent-hover: var(--ink-2);
  --pp-accent: var(--ink);
  --pp-accent-hover: var(--ink-2);
  --pp-accent-dark: var(--ink);
  --pp-accent-soft: var(--accent-soft);
  --pp-accent-glow: rgba(10, 11, 15, 0.16);
  --fd-surface: var(--band-warm);
  --pp-surface: var(--band-warm);
  --fd-border: rgba(10, 11, 15, 0.12);
  --pp-border: rgba(10, 11, 15, 0.12);
  --fd-radius: var(--radius-l);
  --fd-radius-sm: var(--radius);
  --pp-radius: var(--radius-l);
  --pp-radius-sm: var(--radius);
  --fd-radius-full: var(--radius);
  --pp-radius-full: var(--radius);
}
.feat-hero h1, .fp-hero h1, .pricing-hero h1, .feat-section h2, .fp-section h2, .lp-faq h2 { letter-spacing: var(--track-display); font-weight: 650; }
.feat-hero h1 em, .pricing-hero h1 em { font-style: normal; color: var(--ink-3); }
.mkt-hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: inherit; }
.btn-hero-primary, .btn-hero-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px;
  border-radius: var(--radius); font-weight: 500; font-size: 16px; border: 1px solid transparent; transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.btn-hero-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-hero-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-hero-secondary { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-hero-secondary:hover { border-color: var(--ink); }
.feat-cta .btn-hero-secondary, .fp-cta .btn-hero-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.feat-cta .btn-hero-secondary:hover, .fp-cta .btn-hero-secondary:hover { border-color: #fff; }
@media (max-width: 539px) { .mkt-hero-ctas > a { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 15px; } }
.feat-hero::before, .feat-hero::after, .fp-hero::before, .fp-hero::after, .pricing-hero::before, .pricing-hero::after { display: none; }
.feat-hero .mkt-hero-ctas, .feat-cta .mkt-hero-ctas, .fp-cta .mkt-hero-ctas { justify-content: center; }