/* ==========================================================================
   flowgen — Solutions / Partners / Enterprise / Integrations pages
   (page-specific components; depends on css/styles.css)
   ========================================================================== */

/* Hero with CTAs */
.page-hero .hero-cta { margin-top: 28px; }
.page-hero .hero-lede { font-size: 20px; color: var(--fg); margin-top: 18px; }
.page-hero .hero-lede + p { margin-top: 10px; }

/* Logo strip */
.sol-logos { padding: 24px 0 72px; }
.sol-logos .logos-head { padding-bottom: 20px; }
.sol-logos .logos-head p { color: var(--fg-2); }
.logo-grid--6 { grid-template-columns: repeat(6, 1fr); }
.logo-grid > .serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: .12em; font-size: 14px; }
.logo-grid > .heavy { font-weight: 800; letter-spacing: .04em; }
.logo-grid > .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; letter-spacing: .02em; }
@media (max-width: 980px) { .logo-grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .logo-grid--6 { grid-template-columns: 1fr 1fr; } }

/* Value cards (3 up) */
.values { padding: 0 0 72px; }
.values .card .card-visual { height: 200px; position: relative; overflow: hidden; }
.card .card-visual.mock { padding: 16px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.card h3 { font-size: 18px; }

/* Mock visuals ---------------------------------------------------------- */
.mock { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; position: relative; font-size: 12px; color: var(--fg-2); }
.mock-rows { display: flex; flex-direction: column; gap: 6px; }
.mock-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); white-space: nowrap; }
.mock-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fg-3)); flex: none; }
.mock-row b { font-weight: 500; color: var(--fg); }
.mock-row em { margin-left: auto; font-style: normal; color: var(--fg-3); }
.mock-row em.up { color: var(--green); }
.mock-row em.down { color: var(--red); }
.mock-row .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-3); position: relative; overflow: hidden; }
.mock-row .bar::after { content: ""; position: absolute; inset: 0; width: var(--w, 50%); background: var(--c, var(--fg)); border-radius: 3px; }
.mock-row.is-you { border-color: #3a3a3a; }
.mock-row.is-you b { color: var(--green); }
.mock-bars { display: flex; align-items: flex-end; gap: 10px; height: 100%; padding: 16px; }
.mock-bars i { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--fg), #555); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: grow 1s both; }
.mock-bars i.hi { background: linear-gradient(180deg, var(--green), #0b5c45); }
.mock-chart { width: 100%; height: 100%; display: block; }
.mock-chart .draw, .dash-chart .draw { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 1.8s ease forwards; }
.mock-chart .d2, .dash-chart .d2 { animation-delay: .25s; }
.mock-chart .d3 { animation-delay: .5s; }
.mock-row .plat-logo { width: 12px; height: 12px; }
.mock-label { position: absolute; top: 12px; left: 14px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.mock-chip { position: absolute; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); font-size: 11px; color: var(--fg); }
.mock-ring { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--green) 0 var(--p, 72%), var(--bg-3) var(--p, 72%) 100%); display: grid; place-items: center; position: relative; }
.mock-ring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--bg-1); }
.mock-ring span { position: relative; z-index: 1; font-size: 22px; font-weight: 500; color: var(--fg); }
.mock-ring small { position: relative; z-index: 1; display: block; font-size: 10px; color: var(--fg-3); text-align: center; }
.mock-center { display: flex; align-items: center; justify-content: center; gap: 24px; height: 100%; padding: 16px; }
.mock-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.mock-legend li { display: flex; align-items: center; gap: 8px; }
.mock-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mock-doc { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.mock-doc h4 { font-size: 15px; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; }
.mock-doc p { font-size: 12px; color: var(--fg-3); }
.mock-doc .line { height: 7px; border-radius: 4px; background: var(--bg-3); width: var(--w, 100%); }
.mock-doc .line.hl { background: rgba(8,255,182,.25); }
.mock-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-2); font-size: 11px; color: var(--fg-2); width: max-content; }
.mock-tag.ok { color: var(--green); }
.mock-nodes { display: grid; place-items: center; height: 100%; position: relative; }
.mock-nodes .int-glyph { position: absolute; }
.mock-nodes svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Industry dashboard mock (Travel / Retail / Pharma) */
.dash-wrap { padding: 0 0 72px; }
.dash { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.dash-card { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-1); padding: 20px; font-size: 13px; min-width: 0; }
.dash-card header { display: flex; justify-content: space-between; align-items: center; color: var(--fg-2); margin-bottom: 16px; }
.dash-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.dash-metrics div { padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-2); }
.dash-metrics small { display: block; color: var(--fg-3); font-size: 11px; margin-bottom: 4px; }
.dash-metrics strong { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.dash-chart { width: 100%; height: 160px; }
.dash-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; color: var(--fg-4); }
.dash-tasks { display: flex; flex-direction: column; gap: 8px; }
.dash-tasks li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--fg); line-height: 1.4; }
.dash-tasks li i { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--fg-3); margin-top: 1px; display: grid; place-items: center; font-style: normal; font-size: 10px; color: var(--green); }
.dash-tasks li.done i { border-color: var(--green); }
.dash-tasks li.done { color: var(--fg-3); text-decoration: line-through; }
.dash-card .msg-working { margin-top: 14px; }
@media (max-width: 860px) { .dash { grid-template-columns: 1fr; } }

/* Testimonial */
.testimonial { padding: 72px 0; border-top: 1px dashed var(--line-dash); border-bottom: 1px dashed var(--line-dash); }
.testimonial blockquote { margin: 0; max-width: 820px; }
.testimonial blockquote p { font-size: 28px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.testimonial footer { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 14px; color: var(--fg-2); }
.testimonial footer .avatar { width: 40px; height: 40px; border-radius: 50%; }
.testimonial footer strong { display: block; color: var(--fg); font-weight: 500; }
.testimonial .wordmark { margin-left: auto; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 860px) { .testimonial blockquote p { font-size: 22px; } .testimonial { padding: 56px 0; } }

/* Feature rows */
.features .split:first-of-type { border-top: 0; }
.split .eyebrow { display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
.split .link-arrow { margin-top: 20px; color: var(--fg); }
.split-visual { overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.split-visual.mock { padding: 24px; }

/* Feature cards (3 up with CTAs) */
.feature-grid .card .link-arrow { margin-top: 16px; color: var(--fg); }

/* Case study card */
.case { padding: 0 0 96px; }
.case-card { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-1); padding: 32px; }
.case-card .wordmark { font-weight: 700; font-size: 18px; letter-spacing: .02em; margin-bottom: 18px; }
.case-card h3 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.case-card p { color: var(--fg-2); margin-top: 12px; }
.case-card .btn { margin-top: 22px; }
.case-visual { aspect-ratio: 4 / 3; border-radius: 10px; background: radial-gradient(90% 80% at 80% 10%, rgba(187,62,255,.18), transparent), var(--bg-2); border: 1px solid var(--line-soft); display: grid; place-items: center; }
.case-visual strong { font-size: 72px; font-weight: 500; letter-spacing: -0.04em; }
.case-visual small { display: block; text-align: center; color: var(--fg-3); }
@media (max-width: 860px) { .case-card { grid-template-columns: 1fr; padding: 22px; } .case-card h3 { font-size: 22px; } }

/* Bullet list of points */
.points { display: grid; gap: 14px; margin-top: 20px; }
.points li { display: flex; gap: 12px; align-items: flex-start; color: var(--fg-2); }
.points li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 3 3 5-6' stroke='%2308ffb6' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center / 11px no-repeat; margin-top: 2px; }
.points strong { color: var(--fg); font-weight: 500; }

/* Platforms + final CTA */
.plat-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 32px auto 0; max-width: 780px; padding: 0; list-style: none; }
.plat-list li { --d: calc(var(--n, 0) * .55s); position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: #151516; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); cursor: default; transition: transform .5s cubic-bezier(.19,1,.22,1), border-color .3s, background .3s, box-shadow .4s, opacity .3s; animation: platWave 3.85s ease-in-out var(--d) infinite; }
.plat-list li:nth-child(1) { --n: 0; } .plat-list li:nth-child(2) { --n: 1; } .plat-list li:nth-child(3) { --n: 2; } .plat-list li:nth-child(4) { --n: 3; } .plat-list li:nth-child(5) { --n: 4; } .plat-list li:nth-child(6) { --n: 5; } .plat-list li:nth-child(7) { --n: 6; }
.plat-list .plat-logo { width: 18px; height: 18px; transition: transform .6s cubic-bezier(.19,1,.22,1); }
.plat-list .plat-wordmark { display: block; height: 22px; width: auto; transition: transform .6s cubic-bezier(.19,1,.22,1); }
.plat-list li:has(.plat-wordmark) { padding: 11px 20px; }
.plat-list li:hover .plat-wordmark { transform: scale(1.06); }
.plat-list li:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.34); background: #1d1d1f; box-shadow: 0 14px 34px rgba(0,0,0,.55); animation-play-state: paused; }
.plat-list li:hover .plat-logo { transform: rotate(90deg) scale(1.15); }
.plat-list:hover li:not(:hover) { opacity: .55; }
@keyframes platWave { 0%, 22%, 100% { border-color: rgba(255,255,255,.1); box-shadow: none; } 8% { border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 4px rgba(255,255,255,.04), 0 0 26px rgba(255,255,255,.08); } }
@media (max-width: 640px) { .plat-list { gap: 8px; } .plat-list li { font-size: 14.5px; padding: 9px 14px 9px 12px; } .plat-list .plat-logo { width: 15px; height: 15px; } .plat-list .plat-wordmark { height: 18px; } .plat-list li:has(.plat-wordmark) { padding: 9px 14px; } }
@media (prefers-reduced-motion: reduce) { .plat-list li { animation: none; } }
.final-cta .plat-list + p { margin-top: 28px; }

/* Lead forms (white paper / industry report) */
/* Industry pages: "Sample data" pill (same look as flow.css .demo-tag, which these pages do not load) */
.demo-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.demo-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ffb020; }
/* Article list that replaced the white-paper form on industry pages */
.read-list { display: grid; gap: 10px; }
.read-list a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--fg); font-size: 14px; transition: border-color .3s, transform .5s cubic-bezier(.19,1,.22,1); }
.read-list a:hover { border-color: rgba(1,194,225,.5); transform: translateY(-2px); }
.read-list a small { color: var(--fg-3); font-size: 12px; margin-left: auto; white-space: nowrap; }
.read-list a svg { width: 14px; height: 14px; flex: none; color: var(--fg-3); }
/* Before → after rows inside a .mock */
.mock-row em.after { margin-left: 10px; color: #01c2e1; }
.lead { padding: 72px 0; border-top: 1px dashed var(--line-dash); }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.lead h2 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.lead p { color: var(--fg-2); margin-top: 14px; }
.lead .points { margin-top: 24px; }
.lead .form { max-width: none; border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: var(--bg-1); }
.lead .form .btn { justify-self: start; margin-top: 4px; }
.form small { color: var(--fg-4); font-size: 12px; }
@media (max-width: 860px) { .lead-grid { grid-template-columns: 1fr; gap: 28px; } .lead h2 { font-size: 26px; } }

/* Platform tabs (Agencies) */
.platform-tabs { padding: 0 0 96px; }
.platform-tabs .pill-tabs { padding: 24px 0; border-top: 1px dashed var(--line-dash); }
.platform-tabs [data-panel] { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.platform-tabs [data-panel] h3 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.platform-tabs [data-panel] p { color: var(--fg-2); margin-top: 12px; }
.platform-tabs [data-panel] .link-arrow { margin-top: 20px; color: var(--fg); }
.platform-tabs .split-visual { aspect-ratio: 16 / 10; }
@media (max-width: 860px) { .platform-tabs [data-panel] { grid-template-columns: 1fr; gap: 24px; } }

/* Enterprise */
.ent-social { padding: 0 0 72px; }
.ent-social .section-head { padding-top: 0; }
.ent-features { padding: 0 0 96px; }
.ent-features .card { padding: 28px 24px; }
.ent-features .card .ico-box { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-2); display: grid; place-items: center; margin-bottom: 18px; color: var(--fg); }
.ent-features .card .ico-box svg { width: 16px; height: 16px; }
.press { padding: 0 0 96px; }
.press-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px dashed var(--line-dash); border-left: 1px dashed var(--line-dash); }
.press-list a { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 140px; padding: 20px; border-right: 1px dashed var(--line-dash); border-bottom: 1px dashed var(--line-dash); transition: background .15s; }
.press-list a:hover { background: rgba(255,255,255,.02); }
.press-list .wordmark { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.press-list .wordmark.serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.press-list .link-arrow { font-size: 13px; }
.stories { padding: 0 0 96px; }
.story { display: block; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-1); overflow: hidden; transition: border-color .15s; }
.story:hover { border-color: #3a3a3a; }
.story .thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, hsl(var(--hue, 200) 35% 18%), hsl(calc(var(--hue, 200) + 40) 30% 8%)); display: grid; place-items: center; }
.story .thumb strong { font-size: 56px; font-weight: 500; letter-spacing: -0.04em; }
.story .body { padding: 20px; }
.story .wordmark { font-weight: 700; letter-spacing: .02em; }
.story h3 { font-size: 20px; font-weight: 500; margin-top: 10px; line-height: 1.3; }
.story .link-arrow { margin-top: 14px; color: var(--fg); }
@media (max-width: 980px) { .press-list { grid-template-columns: 1fr 1fr; } }

/* Partners */
.partner-cta { padding: 0 0 96px; }
.partner-cta .card { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 32px; }
.partner-cta .card h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.partner-cta .card p { margin-top: 10px; max-width: 520px; }
.partner-cta .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.partner-types { padding: 0 0 72px; }
.partner-types .card .tag-pill { margin-bottom: 14px; }
.partner-dir { padding: 0 0 96px; }
.partner-dir .pill-tabs { padding: 0 0 24px; }
.partner-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-height: 190px; }
.partner-card .avatar { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #000; }
.partner-card h3 { font-size: 16px; font-weight: 500; }
.partner-card p { color: var(--fg-2); font-size: 14px; flex: 1; }
.partner-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.footnote { color: var(--fg-3); font-size: 13px; margin-top: 18px; }
@media (max-width: 860px) { .partner-cta .card { grid-template-columns: 1fr; padding: 24px; } }

/* Partner application form */
.apply { padding: 0 0 96px; }
.apply-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.apply .form { max-width: none; border: 1px solid var(--line); border-radius: 14px; padding: 28px; background: var(--bg-1); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.form legend { font-size: 13px; color: var(--fg-2); margin-bottom: 8px; padding: 0; }
.form .check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg); }
.form .check input { width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--fg); }
.form .btn { justify-self: start; }
.apply .steps { display: grid; gap: 18px; margin-top: 28px; }
.apply .steps li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.apply .steps li i { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); display: grid; place-items: center; font-style: normal; font-size: 13px; }
.apply .steps strong { display: block; font-weight: 500; }
.apply .steps span { color: var(--fg-2); font-size: 14px; }
@media (max-width: 860px) { .apply-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Integrations */
.int-featured { padding: 0 0 56px; }
.int-dir { padding: 0 0 96px; }
.int-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 0; border-top: 1px dashed var(--line-dash); border-bottom: 1px dashed var(--line-dash); margin-bottom: 24px; }
.int-toolbar .pill-tabs { flex: 1; }
.int-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); min-width: 220px; }
.int-search svg { width: 14px; height: 14px; color: var(--fg-3); flex: none; }
.int-search input { flex: 1; background: none; border: 0; color: var(--fg); font: inherit; font-size: 13px; outline: none; min-width: 0; }
.int-search input::placeholder { color: var(--fg-4); }
.int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.int-card { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1); padding: 20px; transition: border-color .15s, transform .15s; }
.int-card:hover { border-color: #3a3a3a; transform: translateY(-2px); }
.int-card header { display: flex; align-items: center; gap: 12px; }
.int-card .int-glyph { width: 40px; height: 40px; border-radius: 10px; font-size: 13px; }
.int-card h3 { font-size: 15px; font-weight: 500; }
.int-card small { display: block; font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.int-card p { color: var(--fg-2); font-size: 14px; flex: 1; }
.int-card--featured { background: linear-gradient(160deg, #121216, var(--bg-1)); border-color: #333; }
.int-card .tag-pill { width: max-content; }
.int-count { color: var(--fg-3); font-size: 13px; margin-bottom: 16px; }
.int-empty { padding: 48px; text-align: center; color: var(--fg-3); border: 1px dashed var(--line-dash); border-radius: 12px; }
.suggest { padding: 0 0 72px; }
.suggest .card { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 32px; }
.suggest .card h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.suggest .form { max-width: none; }
.suggest .form .btn { justify-self: start; }
@media (max-width: 980px) { .int-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .suggest .card { grid-template-columns: 1fr; padding: 24px; } }
@media (max-width: 640px) { .int-grid { grid-template-columns: 1fr; } .int-search { width: 100%; } }

/* Generic helpers */
.section-head--center { text-align: center; margin: 0 auto; }
.section-head--center p { margin-left: auto; margin-right: auto; }
.section-head--tight { padding-top: 64px; }
.wordmark { font-weight: 700; letter-spacing: .02em; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hero-cta { flex-wrap: wrap; }