/* Shared section rhythm, without altering the hero or the live demo framing. */
.framer-OdTNj .framer-15gusd4,
.framer-OdTNj .framer-zbh8kf,
.framer-OdTNj .framer-o1pjdk { padding-top: 72px; padding-bottom: 72px; }
.framer-OdTNj .framer-jlx03n { padding-bottom: 72px; }
.framer-OdTNj .framer-19fm57d { padding-top: 72px; padding-bottom: 24px; }
.framer-OdTNj .framer-1ujvdky,
.framer-OdTNj .framer-1h52p7e { padding-bottom: 72px; }
.framer-OdTNj .framer-1hqowm2 { padding-top: 72px; }
.framer-OdTNj .framer-1max64x,
.framer-OdTNj .framer-1pwif6c,
.framer-OdTNj .framer-1d4dc5z,
.framer-OdTNj .framer-1k3soov,
.framer-OdTNj .framer-14mnxuc { gap: 40px; }
/* Footer, top to bottom: the large metallic wordmark; the three link columns; below the divider the copyright
   on the left and the brand block (tagline + Crux lockup) on the right. */
.framer-3NE0f .framer-5xjjbs { display: flex; flex-direction: column; gap: 56px; padding: 72px 80px 32px; }
.framer-3NE0f .framer-qdeaxn { display: block; width: 100%; }
.framer-3NE0f .framer-7ja5fi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; width: 100%; flex: none; overflow: visible; }
.framer-3NE0f .framer-8venmy, .framer-3NE0f .framer-1pac2d2, .framer-3NE0f .framer-1m6cazc { width: auto; place-self: start; }
.framer-3NE0f .framer-1dm064m { --border-top-width: 1px !important; --border-bottom-width: 0px !important; flex-direction: row; justify-content: space-between; align-items: flex-start; padding: 24px 0 0; gap: 24px 48px; overflow: visible; }
.framer-3NE0f .framer-1l0zyd7 { width: auto; flex: none; }
.framer-3NE0f .framer-1guxuh { width: auto; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
.framer-3NE0f .framer-1guxuh p { width: auto; white-space: nowrap; text-align: left !important; }
.framer-3NE0f .framer-k8w8c8 { width: auto; max-width: 320px; flex: none; align-items: flex-end; gap: 20px; margin-left: auto; }
.framer-3NE0f .framer-1zvgiq p { max-width: 300px; text-align: right !important; text-wrap: balance; }
.framer-3NE0f .crux-footer-lockup { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: #f6f8ff; text-decoration: none; }
.crux-footer-lockup svg, .crux-footer-lockup img { display: block; width: 20px; height: 30px; flex: none; object-fit: contain; }
.crux-footer-lockup span { font: 600 22px/1 Geist, Arial, sans-serif; letter-spacing: -.03em; }
.crux-footer-lockup:focus-visible { outline: 2px solid #a5d8ff; outline-offset: 4px; border-radius: 4px; }
/* Wordmark: the slot reserves its height up front (no layout shift). The chrome canvas is sized to the shape's
   own aspect (--wm-aspect, set on mount) and centred; the same word as plain text shows until it has painted. */
.crux-footer-wordmark-slot { margin-bottom: -16px; --wm-h: clamp(132px, 23vw, 340px); display: flex; align-items: center; justify-content: center; width: 100%; height: var(--wm-h); }
.crux-footer-wordmark { position: relative; width: min(100%, calc(var(--wm-h) * var(--wm-aspect, 2.2))); aspect-ratio: var(--wm-aspect, 2.2); }
.crux-footer-wordmark .metallic-paint-canvas { position: absolute; inset: 0; z-index: 1; }
.crux-footer-wordmark__text { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font: 400 calc(var(--wm-h) * 1.09)/1 "Crux Demo Brand", Geist, sans-serif; white-space: nowrap; transform: translateY(calc(var(--wm-h) * .09)); background: linear-gradient(180deg, #fff 25%, #9db4d8); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: opacity 250ms ease; }
.crux-footer-wordmark-slot.is-painted .crux-footer-wordmark__text { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .crux-footer-wordmark__text { transition: none; } }
@media (max-width: 1199px) {
 .framer-OdTNj .framer-jlx03n { padding-top: 64px; }
}
@media (max-width: 767px) {
 .framer-OdTNj .framer-15gusd4,
 .framer-OdTNj .framer-zbh8kf,
 .framer-OdTNj .framer-o1pjdk { padding-top: 48px; padding-bottom: 48px; }
 .framer-OdTNj .framer-jlx03n { padding-top: 48px; padding-bottom: 48px; }
 .framer-OdTNj .framer-19fm57d { padding-top: 48px; padding-bottom: 16px; }
 .framer-OdTNj .framer-1ujvdky,
 .framer-OdTNj .framer-1h52p7e { padding-bottom: 48px; }
 .framer-OdTNj .framer-1hqowm2 { padding-top: 48px; }
 .framer-OdTNj .framer-1max64x,
 .framer-OdTNj .framer-1pwif6c,
 .framer-OdTNj .framer-1d4dc5z,
 .framer-OdTNj .framer-1k3soov,
 .framer-OdTNj .framer-14mnxuc { gap: 32px; }
 .framer-3NE0f .framer-5xjjbs { gap: 40px; padding: 48px 24px 24px; }
 .framer-3NE0f .framer-7ja5fi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
 .framer-3NE0f .framer-1dm064m { flex-direction: column; align-items: flex-start; gap: 28px; }
 .framer-3NE0f .framer-k8w8c8 { order: -1; width: 100%; max-width: none; align-items: flex-start; margin-left: 0; }
 .framer-3NE0f .framer-1zvgiq { width: 100%; }
 .framer-3NE0f .framer-1zvgiq p { max-width: 320px; text-align: left !important; }
}

/* Closing waitlist -> footer wordmark: keep the form and the big Crux close together on desktop. */
@media (min-width: 768px) {
 .framer-1hmtvcx.crux-ascii-surface { padding-bottom: 40px !important; }
 .framer-3NE0f .framer-5xjjbs { padding-top: 24px; }
 .framer-3NE0f .crux-footer-wordmark-slot { margin-top: -32px; }
}

/* Footer bottom row: copyright left, icon + Crux centred, tagline right. The brand wrapper dissolves so the
   tagline and lockup become direct items of the row. */
.framer-3NE0f .framer-k8w8c8 { display: contents; }
@media (min-width: 768px) {
 .framer-3NE0f .framer-1dm064m { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px 48px; }
 .framer-3NE0f .framer-1l0zyd7 { grid-column: 1; grid-row: 1; justify-self: start; }
 .framer-3NE0f .crux-footer-lockup { grid-column: 2; grid-row: 1; justify-self: center; }
 .framer-3NE0f .framer-1zvgiq { grid-column: 3; grid-row: 1; justify-self: end; width: auto; }
 .framer-3NE0f .framer-1zvgiq p { max-width: 320px; }
}
@media (min-width: 1100px) {
 .framer-3NE0f .framer-1zvgiq p { max-width: none; white-space: nowrap; }
}
@media (max-width: 767px) {
 .framer-3NE0f .framer-1zvgiq { order: 0; }
 .framer-3NE0f .crux-footer-lockup { order: 1; }
 .framer-3NE0f .framer-1l0zyd7 { order: 2; }
}

/* Footer bottom row, desktop: copyright at the left edge, lockup centred, tagline at the right edge; both
   text blocks break onto two lines with matching line spacing. */
@media (min-width: 768px) {
 .framer-3NE0f .framer-1dm064m { gap: 24px 48px; }
 .framer-3NE0f .framer-1l0zyd7 { justify-self: start; align-items: flex-start; }
 .framer-3NE0f .framer-1guxuh { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
 .framer-3NE0f .framer-1guxuh p { text-align: left !important; line-height: 21px !important; }
 .framer-3NE0f .framer-1zvgiq { justify-self: end; width: fit-content; }
 .framer-3NE0f .framer-1zvgiq p { max-width: 250px; white-space: normal; text-wrap: balance; text-align: right !important; line-height: 21px !important; }
}

/* Announcement badge from /admin (GET /api/site-config), above the hero headline: a live dot, the text and, when
   the admin set a link, a solid chip in the same inner-glow style as the waitlist button. */
.crux-announce { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 auto 4px; padding: 5px 5px 5px 14px; border: 1px solid #ffffff24; border-radius: 999px; background: #ffffff0d; color: #dbe3f0; font: 500 13px/1.4 Geist, -apple-system, BlinkMacSystemFont, sans-serif; text-align: left; }
.crux-announce:not(:has(a)) { padding-right: 14px; }
.crux-announce::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 3px #38bdf82e; }
.crux-announce a { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: #0a58ff; box-shadow: inset 0 0 0 1px #ffffff3d, inset 0 0 10px 0 #ffffff4d; color: #fff; text-decoration: none; white-space: nowrap; transition: box-shadow 160ms ease; }
.crux-announce a:hover { box-shadow: inset 0 0 0 1px #ffffff5c, inset 0 0 12px 0 #ffffff73; }
.crux-announce a:focus-visible { outline: 2px solid #a5d8ff; outline-offset: 2px; }
@media (max-width: 767px) { .crux-announce { border-radius: 22px; font-size: 12.5px; } }
.crux-waitlist.is-closed input { opacity: .55; cursor: not-allowed; }

/* Hero demo: no slab behind it. A soft blue glow sits at its top edge instead (a static layer, so it is
   rasterised once while the demo itself keeps animating). */
.framer-1oqqnth { position: relative; background: none !important; box-shadow: none !important; }
.framer-1oqqnth::before { content: ""; position: absolute; left: 4%; right: 4%; top: -6%; height: 72%; background: radial-gradient(62% 80% at 50% 0%, rgba(0, 79, 241, .6), rgba(0, 79, 241, .24) 46%, transparent 74%); filter: blur(34px); pointer-events: none; z-index: 0; }
.framer-1oqqnth > * { position: relative; z-index: 1; }

/* The hero's binary dome spans the viewport, so the hero section may overflow sideways (the page root clips it). */
.framer-OdTNj .framer-15mj8nw { overflow-x: visible !important; overflow-y: clip !important; }

/* Section rhythm: one gap (--section-gap) between the content of neighbouring sections. Each section owns its
   bottom padding and starts flush at the top, except Watch, whose heading sits a fixed 64px from the viewport
   top so the whole demo fits one screen. Order: Watch, workflows, FAQ, blog. */
:root { --section-gap: 128px; }
@media (max-width: 1199px) { :root { --section-gap: 96px; } }
@media (max-width: 767px) { :root { --section-gap: 72px; } }
#main #watch.framer-19fm57d { padding-bottom: var(--section-gap); }
.framer-OdTNj .framer-jlx03n { padding-top: 0; padding-bottom: var(--section-gap); }
.framer-OdTNj .framer-o1pjdk { padding-top: 0; padding-bottom: var(--section-gap); }
.framer-OdTNj .framer-1hqowm2 { padding-top: 0; }
/* The tool row's 130px bottom padding stacked on Watch's 64px top; together they are now one 128px gap. */
@media (min-width: 768px) { .framer-OdTNj .framer-olbck2 { padding-bottom: 64px; } }

/* Hero subhead: its words are separate inline-blocks joined by plain spaces. With pre-wrap and balanced wrapping,
   Firefox drops the space at the point where the line breaks ("see yourcode"); normal wrapping keeps it. */
.framer-b49080 p { white-space: normal !important; }