/* ═══════════════════════════════════════════════════════════════════════════
 Morphism - sections.css (v2 · full restart)
 One calm system: warm neutrals, violet accent, soft depth - not grids of lines.
 Load last (after site, cinematic, experience, page CSS).
═══════════════════════════════════════════════════════════════════════════ */

body.page-body {
 --m-bg: #f4f3f0;
 --m-bg-subtle: #faf9f7;
 --m-surface: #ffffff;
 --m-ink: #12121a;
 --m-muted: #5b5c66;
 --m-soft: #94959e;
 --m-accent: #5b3de8;
 --m-accent-2: #6d52ea;
 --m-accent-soft: rgba(91, 61, 232, 0.1);
 --m-line: rgba(18, 20, 28, 0.08);
 --m-line-strong: rgba(18, 20, 28, 0.12);
 --m-radius: 18px;
 --m-radius-sm: 14px;
 --m-pad-section: clamp(88px, 10vw, 128px);
 --m-shadow: 0 1px 2px rgba(18, 20, 28, 0.05), 0 12px 32px rgba(18, 20, 28, 0.07);
 --m-shadow-sm: 0 1px 2px rgba(18, 20, 28, 0.04), 0 4px 16px rgba(18, 20, 28, 0.05);
 /* interactive.css - same palette as sections (loads before; wins via inheritance on body) */
 --ix-canvas: var(--m-bg);
 --ix-surface: var(--m-surface);
 --ix-border: var(--m-line);
 --ix-border-strong: var(--m-line-strong);
 --ix-ink: var(--m-ink);
 --ix-ink-muted: var(--m-muted);
 --ix-ink-soft: var(--m-soft);
 --ix-violet: var(--m-accent);
 --ix-violet-soft: var(--m-accent-soft);
 --ix-shadow-sm: var(--m-shadow-sm);
 --ix-shadow-md: var(--m-shadow);
 --ix-hairline: var(--m-line);
 background: var(--m-bg);
 color: var(--m-ink);
 font-family: var(--sans);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container {
 max-width: 1140px;
 margin: 0 auto;
 padding: 0 24px;
}

section.section,
section.section-dim,
section.cta-section,
section.tech-section,
section.int-section,
section.pipeline-section,
section.transform-section,
section.method-section,
section.about-hero,
section.contact-hero,
section.products-section,
section.stats-section,
section.how-section,
section.qual-hero,
.home-cta {
 position: relative;
 padding: var(--m-pad-section) 0;
 border-top: none;
}

section.section,
section.transform-section,
section.pipeline-section,
section.stats-section,
section.how-section,
section.qual-hero {
 background: var(--m-bg);
}

section.section-dim,
section.products-section,
section.method-section,
section.contact-hero,
section.cta-section {
 background: var(--m-bg-subtle);
}

.grid-bg,
.grid-bg-dark,
.hero-canvas {
 display: none !important;
}

section.scanline-section::before,
section.scanline-section::after,
section[data-scan]::before,
section[data-scan]::after {
 display: none !important;
}

/* ── Type scale ─────────────────────────────────────────────────────────── */

.eyebrow {
 display: block;
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--m-accent);
 margin: 0 0 18px;
 padding-left: 14px;
 border-left: 3px solid var(--m-accent);
}

.eyebrow::before {
 display: none;
}

.display,
h1.display {
 font-family: var(--sans);
 font-size: clamp(36px, 4.8vw, 68px);
 font-weight: 700;
 line-height: 1.03;
 letter-spacing: -0.042em;
 color: var(--m-ink);
}

.display-white {
 color: var(--m-ink) !important;
}

.heading-1,
h2.heading-1 {
 font-family: var(--sans);
 font-size: clamp(28px, 3.4vw, 48px);
 font-weight: 700;
 line-height: 1.08;
 letter-spacing: -0.034em;
 color: var(--m-ink);
}

.heading-1.heading-white,
h2.heading-1.heading-white,
.heading-white {
 color: var(--m-ink) !important;
}

.heading-2,
h3.heading-2 {
 font-family: var(--sans);
 font-size: clamp(20px, 2.2vw, 30px);
 font-weight: 600;
 line-height: 1.15;
 letter-spacing: -0.028em;
 color: var(--m-ink);
}

.body-lg,
p.body-lg {
 font-family: var(--sans);
 font-size: clamp(16px, 1.25vw, 18px);
 font-weight: 400;
 line-height: 1.6;
 letter-spacing: -0.01em;
 color: var(--m-muted);
}

.body-text,
p.body-text {
 font-family: var(--sans);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.68;
 letter-spacing: -0.01em;
 color: var(--m-muted);
}

.body-text-white,
.body-lg.body-text-white {
 color: var(--m-muted) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn,
.btn-primary,
.btn-violet,
.btn-outline,
.btn-outline-white {
 font-family: var(--sans);
 font-size: 14px;
 font-weight: 600;
 letter-spacing: -0.01em;
 padding: 12px 22px;
 border-radius: 12px;
 text-transform: none;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 border: 1px solid transparent;
 cursor: pointer;
 transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-primary,
.btn-violet {
 background: var(--m-ink);
 color: #fff;
 box-shadow: var(--m-shadow-sm);
}

.btn-primary:hover,
.btn-violet:hover {
 background: var(--m-accent);
 transform: translateY(-1px);
 box-shadow: var(--m-shadow);
}

.btn-outline,
.btn-outline-white {
 background: var(--m-surface);
 color: var(--m-ink);
 border-color: var(--m-line-strong);
}

.btn-outline:hover,
.btn-outline-white:hover {
 border-color: var(--m-ink);
}

.btn-arrow::after {
 content: "→";
 margin-left: 2px;
 transition: transform 0.2s ease;
}

.btn-arrow:hover::after {
 transform: translateX(3px);
}

.btn-group {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 align-items: center;
}

/* ── Layout helpers ─────────────────────────────────────────────────────── */

.two-col {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: clamp(32px, 5vw, 72px);
 align-items: start;
}

@media (max-width: 900px) {
 .two-col {
 grid-template-columns: 1fr;
 }
}

/* ── Product badge (product pages) ─────────────────────────────────────── */

.product-badge {
 display: inline-block;
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--m-accent);
 margin-bottom: 18px;
 padding-left: 12px;
 border-left: 3px solid var(--m-accent);
 background: none;
 border-radius: 0;
}

.product-badge-dot {
 display: none;
}

/* ── Stat blocks ────────────────────────────────────────────────────────── */

.stat-grid,
section.stats-section .stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 20px;
 margin-top: 40px;
 background: transparent;
 border: none;
}

.stat-card {
 background: var(--m-surface);
 border: 1px solid var(--m-line);
 border-radius: var(--m-radius);
 padding: 28px 24px;
 box-shadow: var(--m-shadow-sm);
 display: flex;
 flex-direction: column;
 gap: 10px;
 transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.stat-card:hover {
 box-shadow: var(--m-shadow);
 transform: translateY(-2px);
}

.stat-value {
 font-family: var(--sans);
 font-size: clamp(36px, 3.8vw, 52px);
 font-weight: 700;
 letter-spacing: -0.04em;
 line-height: 1;
 color: var(--m-ink);
}

.stat-label {
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 500;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--m-soft);
 line-height: 1.45;
}

section.stats-section .stats-grid {
 grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
 section.stats-section .stats-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 520px) {
 section.stats-section .stats-grid {
 grid-template-columns: 1fr;
 }
}

section.stats-section::before,
section.stats-section .stat-card::after,
section.how-section::before,
section.home-cta::before,
.products-section::before,
.products-section::after {
 display: none !important;
}

/* ── Info callout ───────────────────────────────────────────────────────── */

.info-box {
 margin-top: 28px;
 padding: 22px 24px;
 border-radius: var(--m-radius-sm);
 background: var(--m-surface);
 border: 1px solid var(--m-line);
 box-shadow: var(--m-shadow-sm);
 border-left: 4px solid var(--m-accent);
}

.info-box-title {
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--m-accent);
 margin-bottom: 10px;
}

.info-box-body {
 font-family: var(--sans);
 font-size: 15px;
 line-height: 1.62;
 color: var(--m-ink);
 letter-spacing: -0.01em;
}

/* ── Process / how steps ───────────────────────────────────────────────── */

.process-list,
.how-grid > div:first-child {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-top: 40px;
 max-width: 720px;
}

.process-step,
.how-step {
 display: grid;
 grid-template-columns: 52px 1fr;
 gap: 22px;
 padding: 26px 28px;
 background: var(--m-surface);
 border: 1px solid var(--m-line);
 border-radius: var(--m-radius-sm);
 box-shadow: var(--m-shadow-sm);
 transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.process-step:hover,
.how-step:hover {
 box-shadow: var(--m-shadow);
 transform: translateY(-2px);
}

.process-num,
.how-num {
 font-family: var(--mono);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.06em;
 color: var(--m-accent);
 background: var(--m-accent-soft);
 border-radius: 12px;
 width: 44px;
 height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 align-self: start;
}

.process-title,
.how-title {
 font-family: var(--sans);
 font-size: 17px;
 font-weight: 600;
 letter-spacing: -0.02em;
 color: var(--m-ink);
 margin: 0 0 8px;
}

.process-body,
.how-body {
 font-family: var(--sans);
 font-size: 14px;
 line-height: 1.65;
 color: var(--m-muted);
 letter-spacing: -0.01em;
}

/* ── Homepage “how” + terminal preview ──────────────────────────────────── */

section.how-section .heading-1 {
 color: var(--m-ink) !important;
}

section.how-section .how-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: clamp(32px, 5vw, 64px);
 margin-top: 44px;
 align-items: start;
}

@media (max-width: 900px) {
 section.how-section .how-grid {
 grid-template-columns: 1fr;
 }
}

section.how-section .how-visual {
 position: sticky;
 top: 96px;
}

@media (max-width: 900px) {
 section.how-section .how-visual {
 position: static;
 }
}

section.how-section .analysis-terminal {
 background: var(--m-surface);
 border: 1px solid var(--m-line);
 border-radius: var(--m-radius);
 overflow: hidden;
 box-shadow: var(--m-shadow);
}

.at-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 16px 20px;
 border-bottom: 1px solid var(--m-line);
 background: var(--m-bg-subtle);
}

.at-title {
 font-family: var(--mono);
 font-size: 10px;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--m-muted);
 display: flex;
 align-items: center;
 gap: 10px;
 font-weight: 600;
}

.live-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--green);
 box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.at-header > div:last-child {
 font-family: var(--mono);
 font-size: 9px;
 font-weight: 700;
 letter-spacing: 0.14em;
 color: var(--m-accent) !important;
}

.at-body {
 padding: 20px 22px;
 display: flex;
 flex-direction: column;
 gap: 6px;
 background: var(--m-surface);
}

.at-row {
 display: flex;
 align-items: baseline;
 gap: 10px;
 font-family: var(--mono);
 font-size: 12px;
 color: var(--m-ink);
 padding: 5px 0;
}

.at-prompt {
 color: var(--m-accent);
 font-weight: 700;
 flex-shrink: 0;
 width: 16px;
}

.at-cmd {
 color: var(--m-ink);
 flex: 1;
 font-weight: 600;
}

.at-cmd-soft {
 color: var(--m-soft);
 flex: 1;
 font-family: var(--mono);
 font-size: 12px;
}

.at-val {
 color: var(--m-ink);
 font-weight: 600;
 margin-left: auto;
}

.at-val.red {
 color: var(--red) !important;
}

.at-progress {
 padding: 16px 22px 20px;
 border-top: 1px solid var(--m-line);
 background: var(--m-bg-subtle);
}

.atp-label {
 display: flex;
 justify-content: space-between;
 font-family: var(--mono);
 font-size: 10px;
 color: var(--m-muted);
 letter-spacing: 0.04em;
 margin-bottom: 10px;
}

.atp-label span:last-child {
 color: var(--m-accent) !important;
 font-weight: 700;
}

.atp-track {
 height: 5px;
 background: rgba(18, 20, 28, 0.07);
 border-radius: 999px;
 overflow: hidden;
}

.atp-fill {
 height: 100%;
 width: 94.1%;
 background: linear-gradient(90deg, var(--m-accent), var(--m-accent-2));
 border-radius: 999px;
}

/* ── Homepage products ──────────────────────────────────────────────────── */

section.products-section .products-head {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 32px;
 flex-wrap: wrap;
}

.products-aside {
 max-width: 300px;
 text-align: right;
}

.products-aside-label {
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--m-accent);
 margin-bottom: 8px;
}

.products-aside-body {
 font-family: var(--sans);
 font-size: 14px;
 line-height: 1.6;
 color: var(--m-muted);
}

.products-bento {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 20px;
 margin-top: 44px;
}

.product-card.product-card--bento {
 grid-column: span 12;
 display: flex;
 flex-direction: column;
 min-height: 220px;
 padding: 32px 30px;
 text-decoration: none;
 color: inherit;
 background: var(--m-surface);
 border: 1px solid var(--m-line);
 border-radius: var(--m-radius);
 box-shadow: var(--m-shadow-sm);
 transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.2s ease;
}

.product-card.product-card--bento:hover {
 transform: translateY(-4px);
 box-shadow: var(--m-shadow);
 border-color: rgba(91, 61, 232, 0.22);
}

.product-card.product-card--bento:nth-child(1) {
 grid-column: span 7;
 min-height: 280px;
}

.product-card.product-card--bento:nth-child(2) {
 grid-column: span 5;
 min-height: 280px;
}

.product-card.product-card--bento:nth-child(3) {
 grid-column: span 12;
 min-height: auto;
}

.pc-num {
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--m-accent);
 margin-bottom: 16px;
}

.pc-title {
 font-family: var(--sans);
 font-size: clamp(22px, 2.2vw, 28px);
 font-weight: 700;
 letter-spacing: -0.03em;
 color: var(--m-ink);
 margin-bottom: 12px;
 line-height: 1.15;
}

.pc-body {
 font-family: var(--sans);
 font-size: 14px;
 line-height: 1.65;
 color: var(--m-muted);
 flex: 1;
 margin-bottom: 22px;
 letter-spacing: -0.01em;
}

.pc-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 18px;
}

.pc-tag {
 font-family: var(--mono);
 font-size: 9px;
 font-weight: 500;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--m-muted);
 padding: 6px 11px;
 border-radius: 999px;
 border: 1px solid var(--m-line);
 background: var(--m-bg-subtle);
}

.pc-link {
 font-family: var(--sans);
 font-size: 14px;
 font-weight: 600;
 color: var(--m-accent);
 display: inline-flex;
 align-items: center;
 gap: 6px;
 letter-spacing: -0.01em;
 transition: gap 0.2s ease;
}

.product-card.product-card--bento:hover .pc-link {
 gap: 10px;
}

@media (max-width: 900px) {
 .product-card.product-card--bento,
 .product-card.product-card--bento:nth-child(1),
 .product-card.product-card--bento:nth-child(2) {
 grid-column: span 12 !important;
 min-height: 0 !important;
 }

 .products-aside {
 text-align: left;
 max-width: none;
 }
}

/* ── Homepage CTA ───────────────────────────────────────────────────────── */

section.home-cta {
 background: var(--m-bg-subtle);
 text-align: center;
}

section.home-cta .cta-inner {
 max-width: 640px;
 margin: 0 auto;
 padding: 0 24px;
}

.cta-eyebrow {
 display: inline-block;
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--m-accent);
 margin-bottom: 18px;
 padding-left: 14px;
 border-left: 3px solid var(--m-accent);
}

.cta-eyebrow::before,
.cta-eyebrow::after {
 display: none;
}

.cta-title {
 font-family: var(--sans);
 font-size: clamp(36px, 4.5vw, 60px);
 font-weight: 700;
 letter-spacing: -0.04em;
 line-height: 1.04;
 color: var(--m-ink);
 margin: 0 0 18px;
}

.cta-sub {
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.58;
 color: var(--m-muted);
 margin: 0 auto 32px;
 max-width: 460px;
 letter-spacing: -0.01em;
}

.footer-terminal-cta {
 font-family: var(--sans);
 font-size: 14px;
 font-weight: 600;
 padding: 12px 22px;
 border-radius: 12px;
 background: var(--m-ink);
 color: #fff;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 box-shadow: var(--m-shadow-sm);
 transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}

.footer-terminal-cta:hover {
 background: var(--m-accent);
 transform: translateY(-1px);
 box-shadow: var(--m-shadow);
}

.footer-term-section {
 display: none !important;
}

/* ── Ticker ─────────────────────────────────────────────────────────────── */

.ticker-wrap,
.ticker-wrap-dark {
 background: var(--m-surface) !important;
 border-top: 1px solid var(--m-line);
 border-bottom: 1px solid var(--m-line);
 padding: 16px 0;
}

.ticker-wrap::before,
.ticker-wrap::after,
.ticker-wrap-dark::before,
.ticker-wrap-dark::after {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 width: 72px;
 z-index: 2;
 pointer-events: none;
}

.ticker-wrap,
.ticker-wrap-dark {
 position: relative;
 overflow: hidden;
}

.ticker-wrap::before,
.ticker-wrap-dark::before {
 left: 0;
 background: linear-gradient(90deg, var(--m-surface), transparent);
}

.ticker-wrap::after,
.ticker-wrap-dark::after {
 right: 0;
 background: linear-gradient(270deg, var(--m-surface), transparent);
}

.ticker-item {
 font-family: var(--mono);
 font-size: 10px;
 font-weight: 500;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--m-muted) !important;
}

.ticker-item:nth-child(3n) {
 color: var(--m-accent) !important;
 font-weight: 600 !important;
}

/* ── Generic CTA band ─────────────────────────────────────────────────── */

section.cta-section .heading-1.heading-white {
 color: var(--m-ink) !important;
}

section.cta-section .body-text.body-text-white {
 color: var(--m-muted) !important;
}

/* ── Dynamic Pages - transform + mockups ─────────────────────────────── */

section.transform-section {
 background: var(--m-bg);
}

.transform-tabs {
 display: inline-flex;
 flex-wrap: wrap;
 gap: 4px;
 margin: 40px 0 24px;
 padding: 5px;
 background: var(--m-surface);
 border: 1px solid var(--m-line);
 border-radius: 16px;
 box-shadow: var(--m-shadow-sm);
}

.transform-tab {
 padding: 12px 18px !important;
 border: none !important;
 border-radius: 12px !important;
 background: transparent !important;
 font-family: var(--sans) !important;
 font-size: 13px !important;
 font-weight: 600 !important;
 letter-spacing: -0.01em !important;
 text-transform: none !important;
 color: var(--m-muted) !important;
 cursor: pointer;
 display: flex !important;
 flex-direction: column !important;
 align-items: flex-start !important;
 gap: 4px !important;
 transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.transform-tab:hover {
 color: var(--m-ink) !important;
 background: var(--m-bg-subtle) !important;
}

.transform-tab.active {
 background: var(--m-surface) !important;
 color: var(--m-ink) !important;
 box-shadow: 0 2px 8px rgba(18, 20, 28, 0.08) !important;
}

.tab-source {
 font-family: var(--mono) !important;
 font-size: 9px !important;
 font-weight: 600 !important;
 letter-spacing: 0.14em !important;
 text-transform: uppercase !important;
 opacity: 0.75 !important;
}

.tab-label {
 font-family: var(--sans) !important;
 font-size: 13px !important;
 font-weight: 600 !important;
}

@media (max-width: 760px) {
 .transform-tabs {
 flex-direction: column;
 width: 100%;
 }

 .transform-tab {
 width: 100% !important;
 }
}

.page-mockup {
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius) !important;
 overflow: hidden !important;
 background: var(--m-surface) !important;
 box-shadow: var(--m-shadow) !important;
}

.mock-nav {
 border-bottom: 1px solid var(--m-line) !important;
 background: var(--m-bg-subtle) !important;
}

.mock-logo {
 display: flex !important;
 align-items: center !important;
 min-height: 20px !important;
}

.mock-logo .mock-logo-img {
 display: block !important;
 height: 15px !important;
 width: auto !important;
 max-width: 100px !important;
 object-fit: contain !important;
}

.mock-nav-link {
 font-family: var(--sans) !important;
 font-size: 12px !important;
 color: var(--m-muted) !important;
 letter-spacing: -0.01em !important;
}

.mock-cta-btn {
 font-family: var(--sans) !important;
 font-size: 12px !important;
 font-weight: 600 !important;
 letter-spacing: -0.01em !important;
 text-transform: none !important;
 border-radius: 10px !important;
 padding: 9px 14px !important;
}

.mock-h1 {
 font-family: var(--sans) !important;
 font-size: clamp(22px, 2.5vw, 30px) !important;
 font-weight: 800 !important;
 letter-spacing: -0.035em !important;
 line-height: 1.1 !important;
 color: var(--m-ink) !important;
}

.mock-sub {
 font-family: var(--sans) !important;
 font-size: 13px !important;
 line-height: 1.58 !important;
 color: var(--m-muted) !important;
 letter-spacing: -0.01em !important;
}

.mock-badge {
 font-family: var(--mono) !important;
 font-size: 9px !important;
 font-weight: 600 !important;
 letter-spacing: 0.12em !important;
 text-transform: uppercase !important;
 border-radius: 8px !important;
 padding: 6px 10px !important;
}

.mock-btn-p {
 font-family: var(--sans) !important;
 font-size: 12px !important;
 font-weight: 600 !important;
 letter-spacing: -0.01em !important;
 text-transform: none !important;
 border-radius: 10px !important;
 padding: 11px 16px !important;
}

.mock-btn-g {
 font-family: var(--sans) !important;
 font-size: 12px !important;
 color: var(--m-muted) !important;
 letter-spacing: -0.01em !important;
 text-transform: none !important;
}

.mock-proof-card {
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius-sm) !important;
 padding: 22px !important;
 background: var(--m-bg-subtle) !important;
}

.mock-proof-stat {
 font-family: var(--sans) !important;
 font-size: 32px !important;
 font-weight: 800 !important;
 letter-spacing: -0.04em !important;
 color: var(--m-ink) !important;
}

.mock-subbar {
 border-top: 1px solid var(--m-line) !important;
 border-bottom: 1px solid var(--m-line) !important;
 background: var(--m-bg-subtle) !important;
}

.mock-subbar-item {
 font-family: var(--sans) !important;
 font-size: 12px !important;
 color: var(--m-muted) !important;
}

.change-log {
 background: var(--m-bg-subtle) !important;
 border-top: 1px solid var(--m-line);
 padding: 20px 28px !important;
 display: grid !important;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 14px 20px !important;
}

.change-text {
 font-family: var(--sans) !important;
 font-size: 12px !important;
 line-height: 1.5 !important;
 color: var(--m-muted) !important;
}

.change-text strong {
 color: var(--m-ink) !important;
 font-weight: 600 !important;
}

.change-dot {
 background: var(--m-accent) !important;
}

@media (max-width: 720px) {
 .change-log {
 grid-template-columns: 1fr !important;
 }
}

/* ── Tech grid ──────────────────────────────────────────────────────────── */

section.tech-section {
 background: var(--m-bg-subtle);
}

.tech-grid {
 display: grid !important;
 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
 gap: 16px !important;
 margin-top: 44px !important;
 background: transparent !important;
 border: none !important;
}

.tech-card {
 background: var(--m-surface) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius-sm) !important;
 padding: 22px 20px !important;
 box-shadow: var(--m-shadow-sm) !important;
 transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.tech-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--m-shadow) !important;
}

.tech-name {
 font-family: var(--sans) !important;
 font-size: 15px !important;
 font-weight: 700 !important;
 letter-spacing: -0.02em !important;
 color: var(--m-ink) !important;
}

.tech-type {
 font-family: var(--mono) !important;
 font-size: 9px !important;
 font-weight: 500 !important;
 letter-spacing: 0.12em !important;
 text-transform: uppercase !important;
 color: var(--m-soft) !important;
}

/* ── Data Analysis - methodology + diag ───────────────────────────────── */

section.method-section {
 background: var(--m-bg-subtle);
}

.method-grid {
 display: grid !important;
 grid-template-columns: 300px 1fr !important;
 gap: clamp(40px, 5vw, 72px) !important;
 margin-top: 44px !important;
 align-items: start !important;
}

.method-sticky {
 position: sticky;
 top: 96px;
}

.method-sticky .stat-grid {
 display: flex !important;
 flex-direction: column !important;
 gap: 16px !important;
 margin-top: 0 !important;
}

@media (max-width: 900px) {
 .method-grid {
 grid-template-columns: 1fr !important;
 }

 .method-sticky {
 position: static;
 }
}

section.section .diag-preview {
 border: 1px solid var(--m-line);
 border-radius: var(--m-radius);
 background: var(--m-surface);
 box-shadow: var(--m-shadow-sm);
 overflow: hidden;
}

section.section .diag-header {
 background: var(--m-bg-subtle);
 border-bottom: 1px solid var(--m-line);
}

section.section .diag-body {
 background: var(--m-surface);
}

/* ── Industries + deliverables ─────────────────────────────────────────── */

.ind-grid {
 display: grid !important;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 16px !important;
 margin-top: 44px !important;
 background: transparent !important;
 border: none !important;
}

.ind-card {
 background: var(--m-surface) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius-sm) !important;
 padding: 22px 20px !important;
 box-shadow: var(--m-shadow-sm) !important;
 transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.ind-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--m-shadow) !important;
}

.ind-name {
 font-family: var(--sans) !important;
 font-size: 15px !important;
 font-weight: 700 !important;
 color: var(--m-ink) !important;
}

.ind-rate {
 font-family: var(--mono) !important;
 font-size: 11px !important;
 color: var(--m-soft) !important;
}

.ind-rate span {
 color: var(--m-accent) !important;
 font-weight: 600;
}

@media (max-width: 760px) {
 .ind-grid {
 grid-template-columns: repeat(2, 1fr) !important;
 }
}

@media (max-width: 520px) {
 .ind-grid {
 grid-template-columns: 1fr !important;
 }
}

.deliverable-list {
 display: flex !important;
 flex-direction: column !important;
 gap: 16px !important;
 margin-top: 44px !important;
}

.deliverable-item {
 display: grid !important;
 grid-template-columns: 44px 1fr !important;
 gap: 20px !important;
 padding: 24px 26px !important;
 background: var(--m-surface) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius-sm) !important;
 box-shadow: var(--m-shadow-sm) !important;
 align-items: start !important;
 transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.deliverable-item:hover {
 transform: translateY(-2px);
 box-shadow: var(--m-shadow) !important;
}

.del-mark {
 width: 44px;
 height: 44px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--mono) !important;
 font-size: 13px !important;
 font-weight: 700;
 color: var(--m-accent) !important;
 background: var(--m-accent-soft);
}

.del-title {
 font-family: var(--sans) !important;
 font-size: 16px !important;
 font-weight: 700 !important;
 color: var(--m-ink) !important;
 margin-bottom: 6px !important;
}

.del-body {
 font-family: var(--sans) !important;
 font-size: 14px !important;
 line-height: 1.6 !important;
 color: var(--m-muted) !important;
}

/* ── MorphDesk - pipeline, integrations, audience ─────────────────────── */

section.pipeline-section {
 background: var(--m-bg);
}

.pipeline-flow {
 display: grid !important;
 grid-template-columns: repeat(5, 1fr) !important;
 gap: 16px !important;
 margin-top: 44px !important;
 background: transparent !important;
 border: none !important;
}

.pipeline-stage {
 background: var(--m-surface) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius-sm) !important;
 padding: 22px 20px !important;
 box-shadow: var(--m-shadow-sm) !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 10px !important;
 transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.pipeline-stage:hover {
 transform: translateY(-2px);
 box-shadow: var(--m-shadow) !important;
}

.ps-num {
 font-family: var(--mono) !important;
 font-size: 9px !important;
 font-weight: 700 !important;
 letter-spacing: 0.16em !important;
 text-transform: uppercase !important;
 color: var(--m-accent) !important;
}

.ps-title {
 font-family: var(--sans) !important;
 font-size: 16px !important;
 font-weight: 700 !important;
 color: var(--m-ink) !important;
}

.ps-body {
 font-family: var(--sans) !important;
 font-size: 13px !important;
 line-height: 1.58 !important;
 color: var(--m-muted) !important;
}

.ps-owner {
 font-family: var(--mono) !important;
 font-size: 9px !important;
 font-weight: 700 !important;
 letter-spacing: 0.1em !important;
 text-transform: uppercase !important;
 margin-top: auto !important;
 padding: 6px 10px !important;
 border-radius: 8px !important;
 width: fit-content;
}

.ps-owner.ai {
 background: var(--m-accent-soft) !important;
 color: var(--m-accent) !important;
}

.ps-owner.human {
 background: rgba(217, 119, 6, 0.12) !important;
 color: #b45309 !important;
}

.ps-owner.auto {
 background: rgba(22, 163, 74, 0.12) !important;
 color: var(--green) !important;
}

.ps-owner.ml {
 background: rgba(18, 20, 28, 0.08) !important;
 color: var(--m-ink) !important;
 border: 1px solid rgba(18, 20, 28, 0.12) !important;
}

@media (max-width: 1000px) {
 .pipeline-flow {
 grid-template-columns: repeat(2, 1fr) !important;
 }
}

@media (max-width: 520px) {
 .pipeline-flow {
 grid-template-columns: 1fr !important;
 }
}

section.int-section {
 background: var(--m-bg-subtle);
}

.int-grid {
 display: grid !important;
 grid-template-columns: repeat(4, 1fr) !important;
 gap: 14px !important;
 margin-top: 44px !important;
}

.int-card {
 background: var(--m-surface) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius-sm) !important;
 padding: 18px 16px !important;
 box-shadow: var(--m-shadow-sm) !important;
 transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.int-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--m-shadow) !important;
}

.int-name {
 font-family: var(--sans) !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 color: var(--m-ink) !important;
}

.int-dir {
 font-family: var(--mono) !important;
 font-size: 9px !important;
 letter-spacing: 0.1em !important;
 text-transform: uppercase !important;
 color: var(--m-soft) !important;
}

.int-dir.bi {
 color: var(--m-accent) !important;
 font-weight: 600 !important;
}

@media (max-width: 760px) {
 .int-grid {
 grid-template-columns: repeat(2, 1fr) !important;
 }
}

@media (max-width: 480px) {
 .int-grid {
 grid-template-columns: 1fr !important;
 }
}

.for-grid {
 display: grid !important;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 16px !important;
 margin-top: 40px !important;
}

/* Four cards: balanced 2×2 (default .for-grid is 3 cols for other pages). */
.for-grid.for-grid--quad {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 gap: clamp(16px, 2.2vw, 22px) !important;
 margin-top: 0 !important;
}

.for-card {
 background: var(--m-surface) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius-sm) !important;
 padding: 28px 24px !important;
 box-shadow: var(--m-shadow-sm) !important;
 transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.for-grid--quad .for-card {
 display: flex !important;
 flex-direction: column !important;
 min-height: 100%;
 padding: clamp(22px, 2.5vw, 30px) clamp(20px, 2.2vw, 26px) !important;
}

.for-grid--quad .for-body {
 flex: 1 1 auto;
 margin: 0 !important;
 margin-top: 10px !important;
}

.for-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--m-shadow) !important;
}

.for-role {
 font-family: var(--mono) !important;
 font-size: 10px !important;
 font-weight: 700 !important;
 letter-spacing: 0.16em !important;
 text-transform: uppercase !important;
 color: var(--m-accent) !important;
 margin-bottom: 6px !important;
}

.for-title {
 font-family: var(--sans) !important;
 font-size: 16px !important;
 font-weight: 700 !important;
 color: var(--m-ink) !important;
}

.for-body {
 font-family: var(--sans) !important;
 font-size: 13px !important;
 line-height: 1.58 !important;
 color: var(--m-muted) !important;
}

@media (max-width: 900px) {
 .for-grid {
 grid-template-columns: 1fr !important;
 }

 .for-grid.for-grid--quad {
 grid-template-columns: 1fr !important;
 }
}

@media (min-width: 901px) and (max-width: 1100px) {
 .for-grid.for-grid--quad {
 gap: 18px !important;
 }
}

/* ── About ─────────────────────────────────────────────────────────────── */

.about-hero {
 padding: calc(var(--header-h, 72px) + 56px) 0 88px !important;
 min-height: auto !important;
 background: var(--m-bg) !important;
}

.about-hero::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: radial-gradient(rgba(18, 20, 28, 0.05) 1px, transparent 1px);
 background-size: 24px 24px;
 mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, #000 28%, transparent 72%);
 pointer-events: none;
 z-index: 0;
 opacity: 0.45;
}

.definition-block {
 position: relative;
 z-index: 1;
 margin: 40px 0;
 padding: 28px 32px;
 background: var(--m-surface);
 border: 1px solid var(--m-line);
 border-radius: var(--m-radius);
 box-shadow: var(--m-shadow-sm);
 border-left: 4px solid var(--m-accent);
}

.def-word {
 font-family: var(--mono) !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 letter-spacing: 0.18em !important;
 text-transform: uppercase !important;
 color: var(--m-accent) !important;
}

.def-text {
 font-family: var(--sans) !important;
 font-size: clamp(17px, 1.6vw, 22px) !important;
 font-weight: 500 !important;
 line-height: 1.5 !important;
 color: var(--m-ink) !important;
}

.philosophy-grid {
 display: grid !important;
 grid-template-columns: 1fr 1fr !important;
 gap: 16px !important;
 margin-top: 44px !important;
}

.phil-card {
 background: var(--m-surface) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius-sm) !important;
 padding: 28px 26px !important;
 box-shadow: var(--m-shadow-sm) !important;
 transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.phil-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--m-shadow) !important;
}

.phil-num {
 font-family: var(--mono) !important;
 font-size: 10px !important;
 font-weight: 700 !important;
 letter-spacing: 0.18em !important;
 text-transform: uppercase !important;
 color: var(--m-accent) !important;
 margin-bottom: 12px !important;
}

.phil-title {
 font-family: var(--sans) !important;
 font-size: 18px !important;
 font-weight: 700 !important;
 color: var(--m-ink) !important;
}

.phil-body {
 font-family: var(--sans) !important;
 font-size: 14px !important;
 line-height: 1.62 !important;
 color: var(--m-muted) !important;
}

@media (max-width: 700px) {
 .philosophy-grid {
 grid-template-columns: 1fr !important;
 }
}

.feature-grid {
 display: grid !important;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 16px !important;
 margin-top: 44px !important;
}

.feature-card {
 background: var(--m-surface) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius-sm) !important;
 padding: 28px 24px !important;
 box-shadow: var(--m-shadow-sm) !important;
 transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.feature-card:hover {
 transform: translateY(-2px);
 box-shadow: var(--m-shadow) !important;
}

.feature-icon {
 width: 40px;
 height: 40px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 15px !important;
 color: var(--m-accent) !important;
 background: var(--m-accent-soft);
 margin-bottom: 14px;
}

.feature-title {
 font-family: var(--sans) !important;
 font-size: 16px !important;
 font-weight: 700 !important;
 color: var(--m-ink) !important;
}

.feature-body {
 font-family: var(--sans) !important;
 font-size: 13px !important;
 line-height: 1.58 !important;
 color: var(--m-muted) !important;
}

@media (max-width: 900px) {
 .feature-grid {
 grid-template-columns: 1fr !important;
 }
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact-hero {
 padding: calc(var(--header-h, 72px) + 56px) 0 88px !important;
 background: var(--m-bg) !important;
}

.contact-hero::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: radial-gradient(rgba(18, 20, 28, 0.05) 1px, transparent 1px);
 background-size: 24px 24px;
 mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, #000 28%, transparent 72%);
 pointer-events: none;
 z-index: 0;
 opacity: 0.45;
}

.contact-hero .container {
 position: relative;
 z-index: 1;
}

.contact-grid {
 display: grid !important;
 grid-template-columns: 1fr 1.15fr !important;
 gap: clamp(40px, 6vw, 80px) !important;
 margin-top: 48px !important;
}

@media (max-width: 900px) {
 .contact-grid {
 grid-template-columns: 1fr !important;
 }
}

.contact-info {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.ci-block {
 padding: 22px 24px;
 background: var(--m-surface);
 border: 1px solid var(--m-line);
 border-radius: var(--m-radius-sm);
 box-shadow: var(--m-shadow-sm);
}

.ci-label {
 font-family: var(--mono) !important;
 font-size: 10px !important;
 font-weight: 700 !important;
 letter-spacing: 0.16em !important;
 text-transform: uppercase !important;
 color: var(--m-accent) !important;
 margin-bottom: 8px !important;
}

.ci-title {
 font-family: var(--sans) !important;
 font-size: 17px !important;
 font-weight: 700 !important;
 color: var(--m-ink) !important;
}

.ci-body {
 font-family: var(--sans) !important;
 font-size: 14px !important;
 line-height: 1.58 !important;
 color: var(--m-muted) !important;
}

.ci-link {
 font-family: var(--sans) !important;
 font-size: 14px !important;
 font-weight: 600 !important;
 color: var(--m-accent) !important;
 margin-top: 12px !important;
 text-decoration: none;
}

.product-link-item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 16px !important;
 border-radius: 12px !important;
 border: 1px solid var(--m-line) !important;
 background: var(--m-bg-subtle) !important;
 text-decoration: none !important;
 transition: border-color 0.2s ease, background 0.2s ease !important;
}

.product-link-item:hover {
 border-color: rgba(91, 61, 232, 0.28) !important;
 background: var(--m-surface) !important;
}

.pli-name {
 font-family: var(--sans) !important;
 font-size: 14px !important;
 font-weight: 600 !important;
 color: var(--m-ink) !important;
}

.contact-form {
 padding: 32px 34px;
 background: var(--m-surface);
 border: 1px solid var(--m-line);
 border-radius: var(--m-radius);
 box-shadow: var(--m-shadow);
}

.cf-label {
 font-family: var(--mono) !important;
 font-size: 10px !important;
 font-weight: 600 !important;
 letter-spacing: 0.14em !important;
 text-transform: uppercase !important;
 color: var(--m-muted) !important;
}

.cf-input,
.cf-select,
.cf-textarea {
 font-family: var(--sans) !important;
 font-size: 15px !important;
 background: var(--m-bg-subtle) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: 12px !important;
 color: var(--m-ink) !important;
}

.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
 outline: none;
 border-color: rgba(91, 61, 232, 0.45) !important;
 background: var(--m-surface) !important;
 box-shadow: 0 0 0 3px var(--m-accent-soft) !important;
}

.cf-submit {
 font-family: var(--sans) !important;
 font-size: 14px !important;
 font-weight: 600 !important;
 border-radius: 12px !important;
 background: var(--m-ink) !important;
 color: #fff !important;
 border: none !important;
 padding: 12px 22px !important;
 box-shadow: var(--m-shadow-sm) !important;
}

.cf-submit:hover {
 background: var(--m-accent) !important;
}

.cf-success {
 border-radius: var(--m-radius-sm) !important;
 border: 1px solid rgba(22, 163, 74, 0.35) !important;
 background: rgba(22, 163, 74, 0.06) !important;
}

/* ── Qualify ───────────────────────────────────────────────────────────── */

.qual-hero {
 padding: calc(var(--header-h, 72px) + 56px) 0 88px !important;
 background: var(--m-bg) !important;
}

.qual-panel {
 margin-top: 40px;
 padding: 32px 34px !important;
 max-width: 600px !important;
 background: var(--m-surface) !important;
 border: 1px solid var(--m-line) !important;
 border-radius: var(--m-radius) !important;
 box-shadow: var(--m-shadow) !important;
}

.qual-panel p {
 font-family: var(--sans) !important;
 font-size: 15px !important;
 line-height: 1.62 !important;
 color: var(--m-muted) !important;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

#morphism-footer {
 background: var(--m-surface) !important;
 border-top: 1px solid var(--m-line) !important;
 color: var(--m-ink) !important;
}

#morphism-footer .footer-tagline {
 font-family: var(--sans) !important;
 font-size: 13px !important;
 color: var(--m-muted) !important;
}

#morphism-footer .footer-col-title {
 font-family: var(--mono) !important;
 font-size: 10px !important;
 font-weight: 700 !important;
 letter-spacing: 0.16em !important;
 text-transform: uppercase !important;
 color: var(--m-accent) !important;
}

#morphism-footer .footer-link {
 font-family: var(--sans) !important;
 font-size: 14px !important;
 font-weight: 500 !important;
 color: var(--m-ink) !important;
}

#morphism-footer .footer-link:hover {
 color: var(--m-accent) !important;
}

#morphism-footer .fm-label {
 color: var(--m-muted) !important;
}

#morphism-footer .fm-val {
 color: var(--m-ink) !important;
 font-weight: 600 !important;
}

#morphism-footer .fm-val.pos {
 color: var(--m-accent) !important;
 font-weight: 700 !important;
 opacity: 1 !important;
}

#morphism-footer .footer-bottom {
 border-top: 1px solid var(--m-line) !important;
}

#morphism-footer .footer-copy,
#morphism-footer .footer-sub {
 color: var(--m-soft) !important;
}

/* ── Reveal (keep motion light) ───────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
 [data-reveal] {
 opacity: 0;
 transform: translateY(16px);
 transition:
 opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
 transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
 }

 [data-reveal].in-view {
 opacity: 1;
 transform: none;
 }

 [data-stagger] > * {
 opacity: 0;
 transform: translateY(12px);
 transition:
 opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
 transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
 }

 [data-stagger].in-view > * {
 opacity: 1;
 transform: none;
 }
}

/* ── Shared: stack morph (#integrations) on marketing pages ─────────────── */

@property --ifs-morph-pos {
 syntax: '<percentage>';
 inherits: false;
 initial-value: 0%;
}

#page-content #integrations {
 text-align: center;
}

#page-content #integrations .section-heading,
#page-content #integrations .section-sub {
 margin-left: auto;
 margin-right: auto;
}

#page-content #integrations .section-heading {
 font-family: var(--sans);
 font-size: clamp(24px, 3.5vw, 42px);
 font-weight: 700;
 line-height: 1.15;
 letter-spacing: -0.025em;
 margin: 0 auto 20px;
 max-width: 720px;
 color: var(--m-ink);
}

#page-content #integrations .section-sub {
 font-size: 14px;
 color: var(--m-muted);
 max-width: 640px;
 line-height: 1.7;
 font-family: var(--sans);
 margin: 0 auto;
}

#page-content #integrations .integrations-morph {
 position: relative;
 margin-top: 52px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

#page-content #integrations .ifs-morph-svg {
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
}

#page-content #integrations .ifs-morph-goo {
 position: relative;
 width: 100%;
 max-width: min(960px, 100%);
 min-height: clamp(9.1rem, 27.35vw, 13.65rem);
 margin: 0 auto;
 filter: url(#ifs-threshold);
 -webkit-filter: url(#ifs-threshold);
}

#page-content #integrations .ifs-morph-goo-text {
 position: absolute;
 left: 0;
 right: 0;
 width: 100%;
 display: block;
 padding: 0 10px;
 box-sizing: border-box;
 overflow: hidden;
 text-overflow: ellipsis;
 font-family: var(--sans);
 font-size: clamp(4.83rem, 13.67vw, 7.94rem);
 font-weight: 700;
 letter-spacing: -0.055em;
 line-height: 1.05;
 text-align: center;
 white-space: nowrap;
 user-select: none;
 pointer-events: none;
 background-image: linear-gradient(
  100deg,
  #5b3de8 0%,
  #8c6dff 18%,
  #38bdf8 36%,
  #34d399 54%,
  #fbbf24 72%,
  #ec4899 90%,
  #5b3de8 100%
 );
 background-size: 300% 100%;
 background-position: var(--ifs-morph-pos) 50%;
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
 #page-content #integrations .ifs-morph-goo-text {
  animation: ifs-morph-spectrum 7s linear infinite;
 }
}

@keyframes ifs-morph-spectrum {
 to {
  --ifs-morph-pos: 300%;
 }
}

#page-content #integrations .ifs-static {
 margin-top: 20px;
 max-width: 720px;
 font-size: 13px;
 line-height: 1.65;
 color: var(--m-muted);
}

#page-content #integrations .integrations-morph--static .ifs-morph-goo,
#page-content #integrations .integrations-morph--static .ifs-morph-svg {
 display: none;
}

#page-content #integrations .integrations-morph--static .ifs-static {
 margin-top: 8px;
}