/*
 * TIFA family visual system
 *
 * This file is intentionally loaded last on every marketing page. It keeps the
 * existing content, search structure and forms intact while giving the whole
 * site the quieter TIFA family palette and more readable type scale.
 */

:root {
  --white: #ffffff;
  --warm: #eef4f3;
  --warm-soft: #faf9f5;
  --teal: #2f7f7a;
  --teal-dk: #102a36;
  --teal-pale: #d7ebea;
  --teal-mid: rgba(47, 127, 122, 0.28);
  --accent-warm: #2f7f7a;
  --accent-warm-hover: #276d69;
  --accent-warm-soft: #d7ebea;
  --navy: #1f2f46;
  --ink: #102a36;
  --ink-60: #637882;
  --ink-35: #7c8c94;
  --ink-12: rgba(16, 42, 54, 0.14);
  --ink-06: rgba(16, 42, 54, 0.06);
  --dark: #102a36;
  --border: rgba(16, 42, 54, 0.16);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --paper: #faf9f5;
  --stone: #eef4f3;
  --sea: #d7ebea;
  --muted: #637882;
  --line: rgba(16, 42, 54, 0.16);
}

html { background: var(--paper); }

body {
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.68;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Emphasis should come from hierarchy and spacing, not scattered bold words. */
p strong,
p b,
li strong,
li b,
.v2-list b,
.v2-shot-cap b,
.phs-deep-body > p strong,
.lacrm-deep-body > p strong {
  color: inherit;
  font-weight: inherit;
}

/* Header and announcement */
#announce {
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.025em;
}

#announce a,
#announce .ann-lock {
  color: var(--sea);
  text-decoration-color: rgba(215, 235, 234, 0.6);
}

#announce a:hover { color: var(--white); }

nav#nav {
  background: rgba(250, 249, 245, 0.96);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
}

.nav-inner { max-width: 1280px; }
.nav-link,
.nav-signin { color: #586b78; font-size: 15px; }
.nav-link:hover,
.nav-signin:hover { color: var(--ink); }

.megamenu,
.nav-dd-menu,
.mobile-menu {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 24px 60px rgba(16, 42, 54, 0.12);
}

.megamenu-item:hover,
.nav-dd-item:hover { background: var(--stone); color: var(--ink); }

/* Buttons use one accent colour throughout the family. */
.btn {
  min-height: 46px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--accent-warm-hover); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-white { color: var(--ink); }

/* Larger, calmer reading scale across legacy and specialist page templates. */
.hero-sub,
.manifesto-text,
.pillar-content p,
.founder-text p,
.stub-hero p,
.coming-soon p,
.security-card p,
.security-grid-item p,
.dpa-section p,
.faq-a,
.modal p,
.pre-footer p,
.module-card p,
.launch-card p,
.launch-step p,
.launch-faq p,
.shot-callout-body,
.shot-text-only p,
.shot-text-only li,
.phs-compare-body,
.lacrm-compare-body,
.phs-compare-list li,
.lacrm-compare-list li,
.v2-stat span,
.v2-pillar-lede,
.v2-list li,
.v2-note p,
.v2-op-point span,
.v2-row span,
.v2-price li,
.v2-faq-a,
.v2-final p {
  font-size: 16px;
  line-height: 1.68;
}

.label-tag,
.hero-eyebrow,
.v2-eyebrow,
.v2-pillar-num,
.pricing-tier,
.launch-step .n,
.shot-callout-title,
.footer-col h5 {
  font-size: 12px;
  letter-spacing: 0.12em;
}

section { scroll-margin-top: calc(var(--nav) + var(--ann) + 24px); }

/* Homepage */
.v2-hero,
.v2-section,
.v2-pillar,
.v2-price,
.v2-col { background: var(--paper); }

.v2-hero { padding-top: calc(var(--nav) + clamp(58px, 7vw, 100px)); }
.v2-hero h1 {
  font-size: clamp(48px, 6.4vw, 88px);
  font-weight: 500 !important;
  letter-spacing: -0.055em;
  max-width: 14ch;
}
.v2-hero h1 .accent { color: var(--navy); }
.v2-hero-lede { color: var(--muted); font-size: clamp(18px, 1.6vw, 22px); max-width: 62ch; }
.v2-trustline { color: var(--muted); font-size: 13px; }

.v2-shot {
  border-radius: 0;
  box-shadow: 0 28px 70px rgba(16, 42, 54, 0.13);
}

.v2-shot-cap { color: var(--muted); font-size: 15px; }
.v2-shot-cap b { color: var(--muted); }
.v2-proof { background: var(--ink); border-color: var(--ink); color: var(--white); }
.v2-stat strong { color: var(--white); font-weight: 500; }
.v2-stat span { color: #c7d1da; }
.v2-pillar.is-warm,
.v2-section.is-warm { background: var(--stone); }
.v2-section.is-pale,
.v2-final { background: var(--sea); }
.v2-note { background: var(--paper); border-radius: 0; }
.v2-col,
.v2-price { border-radius: 0; }
.v2-price.is-featured { border-color: var(--navy); box-shadow: 12px 12px 0 var(--sea); }
.v2-price h3,
.v2-price-amt { font-weight: 500; }

/* Existing product and campaign templates */
#product,
#pricing,
.launch-section.alt,
.platform-section.alt,
.proclib-section.alt,
.lapage-section.alt,
.blog-list { background: var(--stone); }

#pillars,
.fp-banner { background: var(--sea); }

#social-proof,
#compare,
.cta-section,
.pre-footer,
.cr-cta,
.proclib-final,
.lapage-final {
  background: var(--ink);
}

.pricing-card,
.module-card,
.launch-card,
.launch-step,
.security-card,
.security-grid-item,
.shot-callout,
.shot-text-only,
.phs-compare-col,
.lacrm-compare-col {
  border-radius: 0;
}

.pricing-card.featured,
.phs-compare-col-featured,
.lacrm-compare-col-featured { background: var(--navy); border-color: var(--navy); }

.cert-row .cert-status.ok,
.cert-row .cert-status.amber { color: var(--teal); }

.launch-page-hero,
.stub-hero,
.platform-hero,
.about-hero,
.con-hero,
.blog-hero,
.proclib-hero,
.lapage-hero { background: var(--stone); }

.launch-page-hero h1,
.stub-hero h1,
.platform-hero h1,
.about-hero h1,
.con-hero h1,
.blog-hero h1,
.proclib-hero h1,
.lapage-hero h1 {
  font-weight: 500 !important;
  letter-spacing: -0.05em;
}

figure.platform-screenshot img,
.shot-img,
.shot-img img,
.proc-stage,
.hcs-frame { border-radius: 0; }

/* Footer */
footer { background: var(--paper); border-top: 1px solid var(--line); }
.footer-col ul li a { color: var(--muted); font-size: 15px; }
.footer-col ul li a:hover { color: var(--ink); }
.footer-brand-tag,
.footer-bottom p,
.footer-group { color: var(--muted); font-size: 14px; }

/* Form controls remain comfortably usable on touch devices. */
.form-label { font-size: 14px; }
.form-input {
  min-height: 46px;
  border-radius: 0;
  border-color: var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
}
.form-input:focus { border-color: var(--teal); }
.modal { border-radius: 0; }

@media (max-width: 900px) {
  .nav-inner { padding-inline: 22px; }
  .v2-hero h1 { max-width: 16ch; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 22px; }
  .v2-hero h1 { font-size: clamp(41px, 12vw, 58px); }
  .v2-hero-lede { font-size: 18px; }
  .btn { width: 100%; justify-content: center; }
  .nav-right .btn { width: auto; }
  .mobile-menu-links a { font-size: 18px; }
}