/* tifaconnect.com page styles. Everything shared with other TIFA sites lives in kit.css (copied from the tifa-group repository). */

.sec-tight { padding-block: clamp(56px, 7vw, 88px); }
.center { text-align: center; }
.sec-head.center { margin-inline: auto; justify-items: center; }
.note { font-size: 13.5px; color: var(--ink-3); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.text-link svg { width: 18px; height: 18px; transition: transform .2s; }
.text-link:hover svg { transform: translateX(3px); }

/* Hero: words on the left, the product on the right, on a light page. */
.hero-p { background: linear-gradient(180deg, var(--band) 0%, var(--paper) 100%); border-bottom: 1px solid var(--line); }
.hero-p .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 80px); align-items: center; }
.hero-p h1 { font-size: clamp(36px, 4.6vw, 62px); }
.hero-p .lede { margin-top: 18px; }
.hero-p .btn-row { margin-top: 28px; }
.facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 12.5px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
@media (min-width: 980px) { .hero-p .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.page-hero { background: var(--band); border-bottom: 1px solid var(--line); }
.page-hero .wrap { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 5vw, 64px); display: grid; gap: 16px; max-width: var(--wrap); }
.page-hero h1 { font-size: clamp(34px, 4.2vw, 56px); max-width: 22ch; }

/* Product screens */
.shot { margin: 0; }
.shot img { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.shot figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.shot video { width: 100%; display: block; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.clip { max-width: 960px; margin: 4px 0 clamp(40px, 5vw, 64px); }

/* Operate, Grow, Control */
.pillars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar { border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 24px 22px 22px; background: var(--paper); display: grid; gap: 12px; align-content: start; }
.pillar h3 { font-size: 22px; }
.pillar > p { color: var(--ink-2); font-size: 15.5px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 11px; height: 6px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.pillar .text-link { margin-top: 6px; font-size: 15px; }

/* Product page areas */
.area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hdr) + 12px); }
.area:first-of-type { border-top: 0; }
@media (min-width: 960px) { .area { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } .area.flip .shot { order: -1; } }
.area h3 { font-size: clamp(24px, 2.4vw, 30px); }
.area-text { display: grid; gap: 14px; }
.area-text > p { color: var(--ink-2); }
.pill { justify-self: start; font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 6px 10px; border-radius: 999px; }
.pillar-head { display: grid; gap: 10px; padding-top: clamp(56px, 7vw, 88px); scroll-margin-top: calc(var(--hdr) + 12px); }
.pillar-head h2 { max-width: 24ch; }
.pillar-head p { color: var(--ink-2); max-width: 62ch; }

/* TIFA Next */
.next-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 960px) { .next-band .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.next-band video { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #0c1d30; aspect-ratio: 16 / 9; }
.next-band .area-text { display: grid; gap: 16px; }

/* Built by a provider */
.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 900px) { .proof { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } }
.proof .prose { display: grid; gap: 14px; }
.proof .prose p { color: var(--ink-2); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.stats li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.stats b { font: 700 19px/1.3 var(--font-head); }
.stats span { color: var(--ink-2); font-size: 15px; }

/* Pricing */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; display: grid; gap: 10px; align-content: start; background: var(--paper); }
.plan.rec { border: 2px solid var(--brand); }
.plan .tag { justify-self: start; font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--brand); padding: 6px 9px; border-radius: 999px; }
.plan h3 { font-size: 22px; }
.plan .price { font: 700 30px/1.1 var(--font-head); letter-spacing: -0.01em; }
.plan .price small { font: 400 14px/1.3 var(--font-body); color: var(--ink-3); }
.plan .size { font-weight: 600; font-size: 15px; }
.plan .impl { font-size: 14px; color: var(--ink-3); }
.plan .ticks li { font-size: 14.5px; }
.plan .btn { margin-top: 8px; min-height: 46px; }
.offer { margin-top: 18px; border-radius: var(--radius); background: var(--brand-soft); padding: 22px 24px; display: grid; gap: 6px; }
.offer b { font: 700 20px/1.25 var(--font-head); }
.offer p { color: var(--ink-2); }
.price-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; background: var(--paper); }
@media (min-width: 900px) { .price-line { grid-template-columns: minmax(0, 1fr) auto; } }
.price-line h2 { font-size: clamp(26px, 2.8vw, 36px); }
.price-line p { color: var(--ink-2); margin-top: 8px; }
.notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.notes div { border-top: 2px solid var(--line); padding-top: 14px; display: grid; gap: 6px; }
.notes b { font-weight: 600; }
.notes p { font-size: 15px; color: var(--ink-2); }

/* Questions */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; } }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font-weight: 600; font-size: 17px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 24px/1 var(--font-body); color: var(--brand); }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { padding: 0 0 18px; color: var(--ink-2); max-width: 68ch; }

/* The one dark section: book a demo */
.cta { background: var(--navy); color: #fff; }
.cta .wrap { padding-block: clamp(56px, 7vw, 88px); display: grid; gap: 18px; justify-items: start; }
.cta .eyebrow { color: #fff; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, 0.82); max-width: 60ch; }
.cta .btn-ghost { color: #fff; }

/* Guides and articles */
.guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide { height: 100%; display: grid; gap: 10px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--paper); transition: box-shadow .2s, border-color .2s; }
.guide:hover { box-shadow: var(--shadow); border-color: var(--brand); }
.guide .meta { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.guide h3 { font-size: 20px; line-height: 1.3; }
.guide p { font-size: 15px; color: var(--ink-2); }
.article-wrap { max-width: 760px; }
.article { display: grid; gap: 18px; }
.article .breadcrumbs, .article > .kicker { display: none; }
.article h1 { font-size: clamp(32px, 4vw, 48px); }
.article-deck { font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.article-meta { font: 500 12.5px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.article-answer { background: var(--brand-soft); border-radius: 12px; padding: 18px 20px; display: grid; gap: 6px; }
.article-answer span { font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.article section { display: grid; gap: 12px; margin-top: 12px; }
.article h2 { font-size: clamp(24px, 2.4vw, 30px); }
.article h3 { font-size: 20px; }
.article p, .article li { color: var(--ink-2); }
.article ul, .article ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article th, .article td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); color: var(--ink); }
.article em, .article i { font-style: normal; }
.post-body { display: grid; gap: 16px; }
.post-body h2 { margin-top: 18px; font-size: clamp(24px, 2.4vw, 30px); }
.post-body p, .post-body li { color: var(--ink-2); }
.post-body ul, .post-body ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.post-body em { font-style: normal; }

/* Security */
.controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.controls div { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.controls h3 { font-size: 19px; }
.controls p { color: var(--ink-2); font-size: 15.5px; }

/* Contact */
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 860px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.way { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: grid; gap: 12px; align-content: start; background: var(--paper); }
.way h2 { font-size: 26px; }
.way p { color: var(--ink-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; counter-reset: s; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: s; display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid var(--line); }
.steps li::before { content: "0" counter(s); font: 500 13px/1 var(--font-mono); color: var(--gold); }
.steps b { font-weight: 600; }
.steps p { color: var(--ink-2); font-size: 15px; }

/* Header lockup and nav for this site */
.site-footer .lockup-link { text-decoration: none; }
.site-footer .lockup { color: #fff; }
.site-footer .lk-word { color: rgba(255, 255, 255, 0.72); }
.site-footer .lockup-link:hover { text-decoration: none; }
.site-header .lockup-link { text-decoration: none; }
.site-header .nav .nav-current { color: var(--brand); }
@media (max-width: 880px) { .site-header .lockup .lk-name { font-size: 24px; } }

/* A small panel in place of a screen */
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--band); padding: 24px 22px; display: grid; gap: 14px; align-content: start; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }

/* Blog cards from scripts/build-blog.js */
.blog-card { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--paper); }
.blog-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.blog-card-meta, .blog-card-foot { display: flex; gap: 12px; flex-wrap: wrap; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.blog-card-h { font-size: 20px; line-height: 1.3; }
.blog-card-excerpt { font-size: 15px; color: var(--ink-2); }
.blog-card-cta { color: var(--brand); }
.related { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Legal pages */
.post-body.legal { padding-top: 12px; }
.post-body.legal h1 { font-size: clamp(32px, 4vw, 48px); }
.post-body.legal h3 { font-size: 19px; margin-top: 8px; }
.legal-meta { font: 500 12.5px/1.7 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3); }

/* Group bar: a visible link to the group site, beside the companies menu and at the foot of it */
.gb-site { color: var(--on-navy); text-decoration: none; }
.gb-site:hover { text-decoration: underline; }
.gb-menu a.gb-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); border-radius: 0; margin-top: 8px; padding: 14px 8px 8px; }
.gb-menu a.gb-group span { color: var(--brand); font-size: 14px; }
.gb-menu a.gb-group:hover { background: none; }
.gb-menu a.gb-group:hover span { text-decoration: underline; }
@media (max-width: 720px) {
  .gb-site { display: none; }
  /* The companies menu opens across the bar on a phone instead of from the button, so it stays on screen */
  .gb-cos { position: static; }
  .gb-menu { left: 12px; right: 12px; width: auto; }
}