/* Instrument variant — editorial / type-led / structural. Left-aligned hero, no hero photo, square corners, white ground with purple structural elements, mint reserved for verbs. Scoped via [data-variant="instrument"] on . All three variant CSS files load on every page; only the matching one applies. */ [data-variant='instrument'] { --hero-grad: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%); --radius-sm: 2px; --radius-md: 4px; } [data-variant='instrument'][data-theme='dark'] { --hero-grad: linear-gradient(180deg, #0E0B0C 0%, #14101A 100%); } /* Hero — left-aligned editorial; aligned with the .section-head left edge */ [data-variant='instrument'] .hero { text-align: left; border-bottom: 2px solid var(--purple); } [data-variant='instrument'] .hero h1 { margin-left: 0; margin-right: 0; max-width: 22ch; } [data-variant='instrument'] .hero h1 em { color: var(--purple); } [data-variant='instrument'] .hero .hero-eyebrow { color: var(--purple); } [data-variant='instrument'] .hero .deck { margin-left: 0; margin-right: 0; max-width: 60ch; } [data-variant='instrument'] .hero .ctas { justify-content: flex-start; } [data-variant='instrument'] .landing-hero { border-bottom: 2px solid var(--purple); } [data-variant='instrument'] .landing-hero-copy h1 em { color: var(--purple); } /* Section heads left-aligned */ [data-variant='instrument'] .section-head { text-align: left; } [data-variant='instrument'] .section-head h2 { margin-left: 0; max-width: 22ch; } [data-variant='instrument'] .section-head h2 em { color: var(--purple); } [data-variant='instrument'] .section-head .deck { margin-left: 0; } /* Square cards, thin borders, no shadow */ [data-variant='instrument'] .benefit { box-shadow: none; border: 1px solid var(--border); border-radius: var(--radius-sm); } [data-variant='instrument'] .benefit-icon { border-radius: var(--radius-sm); background: var(--purple); color: #FFFFFF; } [data-variant='instrument'] .article-card { border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: none; } [data-variant='instrument'] .feature-grid .figure { box-shadow: none; border: 1px solid var(--border); border-radius: var(--radius-sm); } /* Steps strip — scientific notation, square */ [data-variant='instrument'] .steps { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } [data-variant='instrument'] .step-grid { counter-reset: step-counter; } [data-variant='instrument'] .step { background: var(--bg); border: 0; border-top: 2px solid var(--purple); border-radius: 0; padding: 22px 0 0; counter-increment: step-counter; } [data-variant='instrument'] .step::before { content: '0' counter(step-counter); display: block; font-family: var(--font-mono); font-size: 11px; color: var(--purple); letter-spacing: 0.16em; margin-bottom: 10px; } [data-variant='instrument'] .step .num { display: none; } /* Integrations chips — bordered purple, uppercase */ [data-variant='instrument'] .integrations { background: var(--bg); } [data-variant='instrument'] .integration-chip { background: transparent; border: 1px solid var(--purple); color: var(--purple); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; border-radius: var(--radius-sm); } [data-variant='instrument'] .integration-chip .chip-icon { color: var(--purple); } /* Stat row — heavy purple with mint accent on em */ [data-variant='instrument'] .stat-callout { border-top: 2px solid var(--purple); border-bottom: 0; } [data-variant='instrument'] .stat .figure { color: var(--purple); } [data-variant='instrument'] .stat .figure em { color: var(--mint-7); } /* Callouts — dark ink slabs (fixed dark in light mode, elevated dark in dark mode) */ [data-variant='instrument'] .callout { background: #14101A; color: #FFFFFF; border-radius: var(--radius-sm); } [data-variant='instrument'] .callout h3 { color: #FFFFFF; } [data-variant='instrument'] .callout p { color: rgba(244,241,248,0.84); } [data-variant='instrument'] .timeline-callout { color: #FFFFFF; } [data-variant='instrument'][data-theme='dark'] .callout { background: #2C2540; } [data-variant='instrument'][data-theme='dark'] .callout p { color: rgba(244,241,248,0.78); } /* Vision tiles — square */ [data-variant='instrument'] .vision-list li { border-radius: var(--radius-sm); } [data-variant='instrument'] .vision-list .vision-icon { border-radius: 0; background: var(--purple); color: #FFFFFF; } /* FAQ — square accordion */ [data-variant='instrument'] .faq-item { border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; } [data-variant='instrument'] .faq-item summary::after { color: var(--purple); } /* Beta CTA — square dark slab (fixed dark in light mode, elevated dark in dark mode) */ [data-variant='instrument'] .beta { border-radius: var(--radius-sm); background: #14101A; color: #FFFFFF; } [data-variant='instrument'] .beta::before { display: none; } [data-variant='instrument'] .beta .label { color: var(--mint); } [data-variant='instrument'][data-theme='dark'] .beta { background: #2C2540; } /* Article hero — left-aligned, no soft background */ [data-variant='instrument'] .article-hero { background: var(--bg); border-bottom: 2px solid var(--purple); } [data-variant='instrument'] .article-hero h1 { color: var(--ink); } /* Beta features grid + dark security panel + landing CTA band — keep dark fixed */ [data-variant='instrument'] .landing-cta-band { background: #14101A; } [data-variant='instrument'][data-theme='dark'] .landing-cta-band { background: #2C2540; } /* Buttons — square */ [data-variant='instrument'] .btn { border-radius: var(--radius-sm); } [data-variant='instrument'] .nav-cta { border-radius: var(--radius-sm); } [data-variant='instrument'] .back-to-top { border-radius: var(--radius-sm); } [data-variant='instrument'] .theme-toggle { border-radius: var(--radius-sm); } [data-variant='instrument'] .variant-picker { border-radius: var(--radius-sm); } [data-variant='instrument'] .variant-pick { border-radius: var(--radius-sm); }