/* CamBrain Green accent adapter. Keep Hoplite geometry and semantic status colors. */

/* Fast scrolling can expose the canvas before a section's tiles are painted.
   Keep an opaque landing backdrop without changing the report/card theme tokens. */
html:has(#cambrain-hero),
body:has(#cambrain-hero),
[data-hoplite-scroll-root]:has(#cambrain-hero),
[data-marketing-cursor]:has(#cambrain-hero),
middlethings-reference {
  background-color: #030604;
}

/* Start filled green; reveal the outlined reference as the trace reaches a node. */
#how-it-works [data-step-chip] {
  border: 1px solid #00e5a0;
  border-radius: 3px;
  background-color: #00e5a0;
  color: #060606;
}
#how-it-works [data-step-chip][class*="bg-[#ff3616]"] {
  border-color: #007a52;
  background-color: #090c0a;
  color: #00e5a0;
}

:root, .dark { --brand: #00e5a0; --brand-foreground: #060606; --action: #00e5a0; --action-soft: #c8fff0; --tag-accent: #00e5a0; }

.border-\[\#ff4a1c\] { border-color:#00e5a0 }

.border-\[\#ff4a1c\]\/25 { border-color:rgb(0 229 160 /.25) }

.border-\[\#ff4a1c\]\/\[0\.18\] { border-color:rgb(0 229 160 /.18) }

.border-\[\#ff3616\] { border-color:#00e5a0 }

.border-\[\#ff3616\]\/40 { border-color:rgb(0 229 160 /.4) }

.border-\[\#ff3616\]\/50 { border-color:rgb(0 229 160 /.5) }

.border-\[\#ff3616\]\/60 { border-color:rgb(0 229 160 /.6) }

.border-l-\[\#ff3616\] { border-left-color:#00e5a0 }

.bg-\[\#FF4A1C\] { background-color:#00e5a0 }

.bg-\[\#ff4a1c\] { background-color:#00e5a0 }

.bg-\[\#ff4a1c\]\/15 { background-color:rgb(0 229 160 /.15) }

.bg-\[\#ff4a1c\]\/\[0\.07\] { background-color:rgb(0 229 160 /.07) }

.bg-\[\#ff4a1c\]\/\[0\.08\] { background-color:rgb(0 229 160 /.08) }

.bg-\[\#ff3616\] { background-color:#00e5a0 }

.bg-\[\#ff3616\]\/10 { background-color:rgb(0 229 160 /.1) }

.bg-\[\#ff3616\]\/30 { background-color:rgb(0 229 160 /.3) }

.bg-\[\#ff3616\]\/85 { background-color:rgb(0 229 160 /.85) }

.bg-\[\#ff3616\]\/90 { background-color:rgb(0 229 160 /.9) }

.bg-\[linear-gradient\(90deg\,\#d21f00\,rgba\(255\,54\,22\,0\)_45\%\,\#ff632a\)\] { background-image:linear-gradient(90deg,#007a52,#00e5a000 45%,#00b87a) }

.bg-\[linear-gradient\(90deg\,rgba\(255\,54\,22\,0\)_0\%\,\#ff3616_86\%\)\] { background-image:linear-gradient(90deg,#00e5a000 0%,#00e5a0 86%) }

.bg-\[linear-gradient\(to_left\,rgba\(255\,99\,42\,\.6\)\,rgba\(255\,99\,42\,0\)\)\] { background-image:linear-gradient(270deg,#00b87a99,#00b87a00) }

.from-\[rgba\(255\,54\,22\,0\.9\)\] { --tw-gradient-from:#00e5a0e6;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) }

.to-\[\#ff3616\] { --tw-gradient-to:#00e5a0;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) }

.to-\[rgba\(255\,54\,22\,0\.5\)\] { --tw-gradient-to:#00e5a080;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) }

.to-\[rgba\(255\,54\,22\,0\.7\)\] { --tw-gradient-to:#00e5a0b3;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) }

.text-\[\#ff4a1c\] { color:#00e5a0 }

.text-\[\#ff3616\] { color:#00e5a0 }

.shadow-\[0_0_10px_\#ff3616\] { --tw-shadow:0 0 10px var(--tw-shadow-color,#00e5a0);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) }

.shadow-\[0px_4px_24px_0px_rgba\(255\,54\,22\,0\.3\)\] { --tw-shadow:0px 4px 24px 0px var(--tw-shadow-color,#00e5a04d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) }

.hover\:bg-\[\#ff4a1c\]\/90:hover { background-color:rgb(0 229 160 /.9) }

.hover\:bg-\[\#ff4a1c\]\/\[0\.14\]:hover { background-color:rgb(0 229 160 /.14) }

.focus-visible\:bg-\[\#ff4a1c\]\/85:focus-visible { background-color:rgb(0 229 160 /.85) }

.get-started-confetti-piece:first-child { --confetti-x:-52px;--confetti-y:-72px;--confetti-rotation:-210deg;background:#00e5a0 }

.get-started-confetti-piece:nth-child(6) { --confetti-x:56px;--confetti-y:-42px;--confetti-rotation:-240deg;background:#00e5a0;animation-delay:90ms }

[fill="#ff3616" i] { fill: #00e5a0; }

[fill="#ff4a1c" i] { fill: #00e5a0; }

[fill="#ff632a" i] { fill: #00e5a0; }

[stroke="#ff3616" i] { stroke: #00e5a0; }

[stroke="#ff4a1c" i] { stroke: #00e5a0; }

[stroke="#ff632a" i] { stroke: #00e5a0; }

[stop-color="#ff3616" i] { stop-color: #00e5a0; }

[stop-color="#ff4a1c" i] { stop-color: #00e5a0; }

[stop-color="#ff632a" i] { stop-color: #00e5a0; }

[style*="radial-gradient(ellipse 52% 44% at 0% 0%, rgba(255,54,22,0.09) 0%, rgba(255,54,22,0) 70%)"] { background-image: radial-gradient(ellipse 52% 44% at 0% 0%, rgba(0,229,160,0.09) 0%, rgba(0,229,160,0) 70%) !important; }

[style*="radial-gradient(ellipse 52% 44% at 100% 0%, rgba(255,54,22,0.09) 0%, rgba(255,54,22,0) 70%)"] { background-image: radial-gradient(ellipse 52% 44% at 100% 0%, rgba(0,229,160,0.09) 0%, rgba(0,229,160,0) 70%) !important; }

[style*="radial-gradient(ellipse 55% 170% at 89% 100%, #ff3616 0%, rgba(248,72,44,0.875) 6.6%, rgba(241,90,66,0.75) 13.2%, rgba(227,127,111,0.5) 26.4%, rgba(199,199,199,0) 52.9%), linear-gradient(var(--ink), var(--ink))"] { background-image: radial-gradient(ellipse 55% 170% at 89% 100%, #00e5a0 0%, rgba(0,229,160,0.875) 6.6%, rgba(0,229,160,0.75) 13.2%, rgba(0,229,160,0.5) 26.4%, rgba(199,199,199,0) 52.9%), linear-gradient(var(--ink), var(--ink)) !important; }

/* Solid accent buttons use dark ink; offer copy keeps its darker green surface. */
a[class*="bg-[#ff3616]"], button[class*="bg-[#ff3616]"],
a[class*="bg-[#ff4a1c]"], button[class*="bg-[#ff4a1c]"] { color: #060606; }
@keyframes setup-card-dot-hop {
  0% { left: 129px; background: rgba(37,37,37,.2); }
  8% { background: #00e5a0; }
  42% { left: 156px; }
  55% { background: #00e5a0; }
  100% { left: 156px; background: rgba(37,37,37,.2); }
}
.bg-\[\#ff632a\]\/60 { background-color:rgb(0 184 122 /.6) }
.bg-\[rgba\(255\,72\,0\,0\.2\)\] { background-color:#00e5a033 }

/* Black background for the Product steps section. */
#how-it-works { background-color: #000000; }