.gradient-ascii-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gradient-ascii-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}


/* Supplied GradientASCII preset. Only alpha masks soften its edges. */
.crux-ascii-surface { isolation: isolate; background-image: none !important; }
.crux-ascii-surface > :not(.crux-ascii-layer) { z-index: 1; }
.crux-ascii-surface [data-framer-name="bg"],
.crux-ascii-surface [data-framer-name="noise"] { display: none !important; }
.crux-ascii-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; user-select: none; mask-image: linear-gradient(transparent,#000 14%,#000 86%,transparent); -webkit-mask-image: linear-gradient(transparent,#000 14%,#000 86%,transparent); }
.crux-ascii-surface[data-ascii-kind="hero"] { background: transparent !important; border-radius: 48px; overflow: visible; }
/* A broad domed silhouette with feathered elliptical edges; no colored overlay. Wider and taller than the first pass. */
.crux-ascii-surface[data-ascii-kind="hero"] > .crux-ascii-layer {
  /* The layer is as wide as the viewport (the page root clips it), so the dome can reach the screen edges. */
  /* Bottom inset: the layer ends where the flat (2D) demo ends, 96px above the hero's bottom at desktop widths. */
  inset: 256px calc(50% - 50vw) 96px; border-radius: 0;
  -webkit-mask-image: linear-gradient(transparent 0%,#0006 12%,#000a 30%,#000 56%,#000 80%,transparent 100%), radial-gradient(ellipse 50% 93% at 50% 89%,#000 62%,#000d 80%,#0006 93%,transparent 100%);
  mask-image: linear-gradient(transparent 0%,#0006 12%,#000a 30%,#000 56%,#000 80%,transparent 100%), radial-gradient(ellipse 50% 93% at 50% 89%,#000 62%,#000d 80%,#0006 93%,transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.crux-ascii-surface[data-ascii-kind="card"],
.crux-ascii-surface[data-ascii-kind="illustration"],
.crux-ascii-surface[data-ascii-kind="watch"],
.crux-ascii-surface[data-ascii-kind="demo"],
.crux-ascii-surface[data-ascii-kind="faq-art"],
.crux-ascii-surface[data-ascii-kind="cta"] { background-color: #09090b !important; }
/* The original exported ticker and stripe art are replaced, not covered. */
.crux-ascii-surface[data-ascii-kind="cta"] > .framer-1ryz9mx { display: none !important; }
.framer-x572sz::after { display: none !important; }
.framer-HasIk.framer-mmln18 [data-framer-name="FAQ item"] { background-color: #080a11 !important; }
.framer-HasIk.framer-mmln18 [data-framer-name="FAQ item"] svg path[stroke] { stroke: #aab8d7 !important; }

/* Plain dark options; selection reveals the icon color. */
[data-framer-name="Tab List Wrapper"] { background: #09090b !important; }
[data-framer-name="Tab List Wrapper"] [role="tab"] { overflow: hidden; background: transparent !important; filter: grayscale(1); transition: filter 420ms ease, border-color 420ms ease; cursor: pointer; }
[data-framer-name="Tab List Wrapper"] [role="tab"][aria-selected="true"] { filter: grayscale(0); }
[data-framer-name="Tab List Wrapper"] [role="tab"] > [data-framer-name="icon"],
[data-framer-name="Tab List Wrapper"] [role="tab"] > [data-framer-name="content"] { background: transparent !important; }
[data-framer-name="Tab List Wrapper"] [role="tab"] > .crux-ascii-layer { mask-image: linear-gradient(90deg,transparent,#000 60%,#000); -webkit-mask-image: linear-gradient(90deg,transparent,#000 60%,#000); }
[data-framer-name="Tab List Wrapper"] [role="tab"]:focus-visible { outline: 2px solid #004ff1; outline-offset: -3px; }
[data-ascii-kind="demo"] > .crux-ascii-layer { transition: filter 420ms ease; }

/* Journal: binary art, generous editorial typography, and existing article links. */
.crux-journal-card { width: 100%; height: 100%; min-height: 460px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ffffff20; border-radius: 16px; background: #09090b; color: #f6f8ff; transition: border-color 300ms ease, transform 300ms ease; }
a:hover .crux-journal-card { transform: translateY(-4px); }
a:focus-visible .crux-journal-card { outline: 2px solid #a5d8ff; outline-offset: 3px; }
.crux-journal-art { position: relative; height: 240px; flex: 0 0 240px; overflow: hidden; background: #09090b; }
.crux-journal-index { position: absolute !important; top: 22px; left: 24px; color: #b7c0d3; font: 10px/1.4 monospace; letter-spacing: .12em; }
.crux-journal-symbol { position: absolute !important; top: 65px; left: 24px; color: #f6f8ff; font: 400 72px/1 monospace; letter-spacing: -.08em; }
.crux-journal-copy { display: flex; flex: 1; flex-direction: column; gap: 15px; padding: 28px; }
.crux-journal-category { margin: 0; color: #a5d8ff; font: 10px/1.4 monospace; letter-spacing: .12em; }
.crux-journal-card h3 { margin: 0; color: #f6f8ff; font: 400 28px/1.12 'Arial MT',Arial,Helvetica,sans-serif; letter-spacing: -.045em; }
.crux-journal-description { margin: 0; color: #a7adba; font: 14px/1.6 'Arial MT',Arial,Helvetica,sans-serif; }
.crux-journal-read { display: flex; justify-content: space-between; margin-top: auto; padding-top: 20px; border-top: 1px solid #ffffff16; color: #f6f8ff; font: 13px/1.4 'Arial MT',Arial,Helvetica,sans-serif; }
.crux-journal-read > span { color: #a5d8ff; }

#join [data-framer-name="Section Content"] { overflow: hidden; }
#join h2 { font-family: 'Arial MT','ArialMT',Arial,'Arial MT Pro',Helvetica,sans-serif !important; font-weight: 400 !important; font-size: clamp(36px,4.5vw,56px) !important; line-height: 1.08 !important; letter-spacing: -.06em !important; }
#join .crux-waitlist button { background: #0055ff !important; }
@media(max-width:767px) { .crux-journal-art { height: 220px; flex-basis: 220px; } .crux-journal-copy { padding: 24px; } }
@media(prefers-reduced-motion:reduce) { .crux-journal-card, [data-framer-name="Tab List Wrapper"] [role="tab"], [data-ascii-kind="demo"] > .crux-ascii-layer { transition: none; } a:hover .crux-journal-card { transform: none; } }

.framer-x572sz { height: 347px !important; min-height: 280px; width: 100%; border-radius: 16px; }

/* Selected Watch tabs use the same color convention as Chat & Agents. */
[data-framer-name="Tab"] [role="tab"] { background: #101014 !important; filter: grayscale(1); transition: background-color 240ms ease, filter 240ms ease; }
[data-framer-name="Tab"] [role="tab"][aria-selected="true"] { background: #004ff1 !important; filter: none; }
@media(max-width:900px) and (min-width:768px) {
  #blog .framer-wXMft.framer-1l3jflz { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:767px) {
  #blog .framer-wXMft.framer-1l3jflz { grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; }
  #blog .framer-1jm8hp3, #blog .framer-iqlqu9-container { width: 100% !important; min-width: 0; }
  #join.framer-1msyjcz { padding: 0 !important; width: calc(100% - 32px) !important; margin-inline: auto; }
  #join [data-framer-name="Section Content"] { padding: 64px 24px !important; width: 100% !important; }
  #join [data-framer-name="Title"] { width: 100% !important; }
  #join .crux-waitlist { width: 100% !important; min-width: 0 !important; }
  #join .crux-waitlist input, #join .crux-waitlist button { width: 100% !important; min-width: 0 !important; }
}
@media(max-width:767px) {
  .framer-kFlaR.framer-kvcsyh { flex-direction: column !important; height: auto !important; }
  [data-framer-name="Tab List Wrapper"], [data-framer-name="Tab Image Wrapper"] { width: 100% !important; flex: none !important; }
  [data-framer-name="Tab List Wrapper"] { height: auto !important; }
  [data-framer-name="Tab List Wrapper"] [role="tab"] { min-height: 155px; height: auto !important; flex: none !important; }
  [data-framer-name="Tab List Wrapper"] [role="tab"] > [data-framer-name="icon"] { width: 64px !important; flex: 0 0 64px !important; }
  [data-framer-name="Tab List Wrapper"] [role="tab"] > [data-framer-name="content"] { width: auto !important; min-width: 0 !important; flex: 1 !important; padding: 24px !important; }
  [data-framer-name="Tab Image Wrapper"] { height: 360px !important; padding: 16px !important; }
  .framer-2yHWH.framer-kkm13 { flex-direction: column !important; height: auto !important; gap: 32px !important; }
  .framer-1rlg1wv, .framer-HasIk.framer-mmln18 { width: 100% !important; height: auto !important; flex: none !important; }
  .framer-x572sz { height: 300px !important; }
}
@media(max-width:767px) {
  .framer-2yHWH.framer-kkm13 { align-items: stretch !important; }
  .framer-2yHWH.framer-kkm13 > .framer-1gsgqwg-container { width: 100% !important; height: auto !important; flex: none !important; }
}

@media(max-width:1199px) { .crux-ascii-surface[data-ascii-kind="hero"] > .crux-ascii-layer { inset: 256px calc(50% - 50vw) 72px; } }
@media(max-width:767px) { .crux-ascii-surface[data-ascii-kind="hero"] { border-radius: 28px; } .crux-ascii-surface[data-ascii-kind="hero"] > .crux-ascii-layer { inset: 72px 0 60px; border-radius: 0; } }

/* Cards reveal their animated binary background with smooth alpha edge masking. */
.crux-ascii-surface:not([data-ascii-kind="hero"]) > .crux-ascii-layer {
  mask-image: linear-gradient(transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image: linear-gradient(transparent,#000 7%,#000 93%,transparent);
}
.crux-ascii-surface:not([data-ascii-kind="hero"]) [data-ascii-state="ready"] {
  animation: crux-ascii-card-reveal 800ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes crux-ascii-card-reveal { from { opacity: 0; } to { opacity: 1; } }
@media(prefers-reduced-motion:reduce) {
  .crux-ascii-surface:not([data-ascii-kind="hero"]) [data-ascii-state="ready"] { animation: none; }
}

[data-framer-name="Tab List Wrapper"] [role="tab"] { background-color: #09090b !important; background-image: none !important; }

/* A small binary footer: the text remains above the artwork. */
[data-framer-name="Tab List Wrapper"] [role="tab"][data-ascii-kind="option"] { background: #09090b !important; }
[data-framer-name="Tab List Wrapper"] [data-ascii-kind="option"] > .crux-ascii-layer {
  inset: auto 0 0; height: 72px; border-radius: 0;
  -webkit-mask-image: linear-gradient(transparent 0%,#0002 28%,#000b 68%,#000 100%);
  mask-image: linear-gradient(transparent 0%,#0002 28%,#000b 68%,#000 100%);
}
[data-framer-name="Tab List Wrapper"] [data-ascii-kind="option"] .gradient-ascii-container { height: 140px; }
