/* ──────────────────────────────────────────────────────────────────────
   REDEEM — brand layer on top of the donor's Webflow stylesheet.
   Loaded last, so it wins without touching the donor CSS.
   Lime #CCFF00 + white + black.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --ck-lime: #ccff00;
  --ck-lime-dim: #8fb300;
  --ck-glow: rgba(204, 255, 0, 0.4);
  --ck-black: #0a0a0a;
  --ck-panel: #131313;
  --ck-line: #262626;
  --ck-ink: #e8e8e8;
  --ck-gray: #8d8d8d;
  --ck-mono: "FraktionMono Variable", ui-monospace, Consolas, monospace;
  --ck-display: "PP Valve", "FraktionMono Variable", ui-monospace, sans-serif;
}

/* ── wordmark ───────────────────────────────────────────────────────── */

.ck-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--ck-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  line-height: 1;
  color: currentColor;
  white-space: nowrap;
}
.ck-mark__glyph {
  width: 0.86em;
  height: 0.86em;
  flex: none;
  background: var(--ck-lime);
  /* a hard chevron: the "take a side" arrow, cut square */
  clip-path: polygon(0 0, 62% 0, 100% 50%, 62% 100%, 0 100%, 38% 50%);
  box-shadow: 0 0 14px var(--ck-glow);
}
.ck-mark__word > i {
  font-style: normal;
  color: var(--ck-lime);
}

/* ── the video section ──────────────────────────────────────────────── */

.ck-reel {
  position: relative;
  background: var(--ck-black);
  color: var(--ck-ink);
  padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.ck-reel::before {
  /* the donor's glow language, kept on a black ground */
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 90%;
  background: radial-gradient(
    ellipse 60% 60% at 50% 0%,
    rgba(204, 255, 0, 0.16),
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}
.ck-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--ck-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ck-line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.ck-reel__inner {
  max-width: 1360px;
  margin: 0 auto;
}
.ck-reel__eyebrow {
  font-family: var(--ck-mono);
  font-size: 0.75rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ck-lime);
}
.ck-reel__title {
  margin: 0.9rem 0 0;
  font-family: var(--ck-display);
  font-weight: 600;
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
}
.ck-reel__lede {
  margin: 1.1rem 0 0;
  max-width: 46ch;
  font-family: var(--ck-mono);
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: var(--ck-gray);
}

.ck-reel__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .ck-reel__grid {
    grid-template-columns: 1fr 1fr;
  }
  .ck-clip--lead {
    grid-column: 1 / -1;
  }
}

.ck-clip {
  position: relative;
  border: 1px solid var(--ck-line);
  background: var(--ck-panel);
  overflow: hidden;
  transition: border-color 180ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 180ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 180ms cubic-bezier(0.22, 0.61, 0.24, 1);
}
.ck-clip:hover {
  border-color: var(--ck-lime);
  box-shadow: 0 0 0 1px var(--ck-lime), 0 24px 70px rgba(204, 255, 0, 0.14);
  transform: translateY(-2px);
}
.ck-clip video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ck-black);
}
.ck-clip__meta {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.05rem 1.25rem 1.2rem;
  border-top: 1px solid var(--ck-line);
}
.ck-clip__idx {
  font-family: var(--ck-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--ck-lime);
  flex: none;
}
.ck-clip__name {
  font-family: var(--ck-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #fff;
  flex: none;
}
.ck-clip__desc {
  font-family: var(--ck-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ck-gray);
}
@media (max-width: 640px) {
  .ck-clip__meta {
    flex-wrap: wrap;
  }
}

/* ── donor art still served from its own CDN ────────────────────────────
   Two backdrops are set in the donor stylesheet, not the markup, so the
   crawler never took a copy and they would load purple from Webflow. Both
   are pointed at generated lime art instead.
   ---------------------------------------------------------------------- */

.eco-hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0) 78%, #fbfff2), url("ck-sky.svg") !important;
  background-size: cover !important;
  background-position: center !important;
}
.connect_box {
  background-image: url("ck-sky.svg") !important;
  background-size: cover !important;
}

/* ── contrast ───────────────────────────────────────────────────────────
   The donor's brand colour was a dark purple, so its near-white text sat on
   it happily. Lime is a bright colour, which flips every one of those pairs:
   near-white text on the brand becomes unreadable, and brand-coloured text
   on the pale page background disappears entirely. Both directions are
   corrected here rather than by weakening the palette.
   ---------------------------------------------------------------------- */

:root {
  --ck-ink-dark: #10160a; /* near-black with the same green cast */
  --ck-on-lime: #0a0a0a;
}

/* 1. text sitting ON the lime: always near-black */
.cta_btn--text,
.cta_btn .cta_btn--text,
.nav_nexus--txt,
.nav_nexus--sm,
.cms_tag,
.button,
.w-button {
  color: var(--ck-on-lime) !important;
}

/* 2. lime text on the pale page: swap for dark ink, keep lime for hover */
.dn_content--link,
.ff_title,
.footer_links,
.footer_links--title,
.cms_steps--header,
.cms_hero--title,
.cms_hero--p,
.eco_all--title,
.divider_title,
.marquee_text,
.hero_carousel--title,
.hero_carousel--sidetext,
.hyp-title,
.filter_radio--label,
.tabs_sm--title,
.case_card--subtitle,
.case_card--btn,
.w-tab-link:not(.w--current) div,
.w-tab-link div,
.haas_bento-label,
.global_more--text {
  /* the donor scopes several of these more tightly, so the correction has to
     outrank it; the .dark block below is more specific and still wins back */
  color: var(--ck-ink-dark) !important;
}
.dn_content--link:hover,
.footer_links:hover {
  color: var(--ck-limeDim, #6f8c00);
}

/* dark sections keep the light-on-dark relationship they were built with */
.dark .dn_content--link,
.dark .ff_title,
.dark .footer_links,
.dark .footer_links--title,
.dark .divider_title,
.dark .cms_steps--header,
.dark .eco_all--title,
.dark .marquee_text,
.dark .hyp-title,
.dark .tabs_sm--title,
.dark .case_card--subtitle,
.dark .case_card--btn,
.dark .global_more--text,
.dark .haas_bento-label,
.dark .filter_radio--label,
.dark .hero_carousel--title,
.dark .hero_carousel--sidetext,
.dark p,
.ck-reel .dn_content--link,
.eco-hero .divider_title,
.eco-hero .eco_all--title,
.eco-hero .hyp-title,
/* the settled-market cards and the tab strip are dark surfaces of their own,
   so everything inside them goes back to light */
.home_case--card .hyp-title,
.home_case--card .tabs_sm--title,
.home_case--card .case_card--subtitle,
.home_case--card .case_card--btn,
.home_case--card p,
.home_tabs--select div,
.w-tab-link.w--current div {
  color: var(--ck-ink) !important;
}

/* A light card inside a dark section: the dark-section rules above would make
   its text light again, so the card wins back its own dark text.
   Scoped to the card itself, not to `.white` — the donor also uses that class
   to mean "white arrow" on links that sit directly on the dark ground. */
.dark .home_doc--card:not(.dark) p,
.dark .home_doc--card:not(.dark) .home_card--p,
.dark .home_doc--card:not(.dark) .global_more--text,
.dark .home_doc--card:not(.dark) .home_card--content p {
  color: var(--ck-ink-dark) !important;
}

/* Its neighbour in the same row is a dark card, and that one keeps the light
   text the dark section already gives it. */
.home_doc--card.dark p,
.home_doc--card.dark .home_card--p,
.home_doc--card.dark .global_more--text,
.home_doc--card.dark .home_card--title {
  color: #fbfff2 !important;
}

/* The log's tag chips appear on both light and dark sections, so they carry
   their own ground rather than depending on whatever is behind them. */
.blog_cat--text {
  background: var(--ck-lime);
  color: var(--ck-on-lime) !important;
  padding: 0.15em 0.6em;
  border-radius: 2px;
}

/* raw urls in the legal pages were lime on white */
.w-richtext a,
.legal_content a,
.terms_content a {
  color: var(--ck-ink-dark) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dark .w-richtext a {
  color: var(--ck-lime) !important;
}

/* ── the ghost heading ──────────────────────────────────────────────────
   The donor sets an oversized serif copy of each heading behind the real one,
   drawn as an outline with a transparent fill. The contrast corrections above
   force a `color`, which fills that outline in solid and lands a second, huge
   heading on top of the first. It stays an outline, and a faint one.
   ---------------------------------------------------------------------- */

.shadow,
.text-w-shadow .shadow,
h1.shadow,
h2.shadow,
h3.shadow {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(122, 150, 46, 0.28) !important;
  z-index: -1 !important;
  pointer-events: none;
  user-select: none;
}
.dark .shadow,
.home_case--card .shadow {
  -webkit-text-stroke-color: rgba(204, 255, 0, 0.22) !important;
}

/* 3. the form's error state was white on pink */
.w-form-fail,
.w-form-fail div {
  color: #7a1b1b !important;
}

/* ── settled-market cards ───────────────────────────────────────────────
   The donor gave each case study a full-width panel with a headline set at
   display size and a hero image beside it. Three of those stacked is most of
   the page. They become one compact row instead.
   ---------------------------------------------------------------------- */

.w-dyn-items:has(> .home_tabs--item) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.home_tabs--item {
  display: block;
  min-width: 0;
}
.home_case--card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0;
}
.home_case--card .home_case--holder {
  height: auto !important;
  min-height: 0 !important;
  padding: 1.25rem !important;
  width: auto !important;
}
/* the image side becomes a fixed-height strip on top */
.home_case--card .home_case--holder.right {
  order: -1;
  height: 150px !important;
  padding: 0 !important;
  overflow: hidden;
}
.home_case--card .home_case--holder.right img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
/* the headline drops from display size, and its outline ghost would overflow
   a card this small, so it is dropped here only */
.home_case--card .case_card--title {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}
.home_case--card .shadow {
  display: none !important;
}
.home_case--card .case_card--highgroup {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.9rem;
}
.home_case--card .tabs_sm--title {
  font-size: 0.85rem !important;
}
.home_case--card p {
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  margin: 0.25rem 0 0 !important;
}
/* The donor stacked this tab strip vertically for full-width panels. With the
   cards in a row it reads as a filter, so it runs horizontally. */
.home_tabs--menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.home_tabs--select {
  width: auto !important;
  flex: none !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid rgba(122, 150, 46, 0.45);
  color: var(--ck-ink-dark) !important;
}
.home_tabs--select.w--current {
  border-color: var(--ck-lime);
  background: var(--ck-lime);
  color: var(--ck-on-lime) !important;
}
.home_tabs--select div,
.home_tabs--select.w--current div {
  color: inherit !important;
}

/* the second detail block is a repeat at this size; one is enough */
.home_case--card .case_card--sm:nth-of-type(n + 2) {
  display: none;
}
.home_case--card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 991px) {
  .w-dyn-items:has(> .home_tabs--item) {
    grid-template-columns: 1fr;
  }
}

/* ── the four claim cards ───────────────────────────────────────────────
   The donor's card was sized around a short line of ascii and two short
   sentences. Ours run longer, and with a fixed height the text spilled over
   the next block. The card now stacks: animation on top, copy below, and it
   grows to fit rather than clipping.
   ---------------------------------------------------------------------- */

.home_infra--card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  /* the grid would otherwise stretch every card to the tallest row */
  align-self: start !important;
  height: auto !important;
  min-height: 380px;
  overflow: hidden !important;
  position: relative;
  gap: 0;
}
.home_infra--card > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}
.infra_card--icon.ck-anim {
  flex: none;
  height: 200px;
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(122, 150, 46, 0.28);
}
.infra_card--icon.ck-anim img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: these are diagrams, and cropping one hides the half
     that carries the point */
  object-fit: contain;
  object-position: left center;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.home_infra--card h1,
.home_infra--card h2,
.home_infra--card h3,
.home_infra--card h4,
.home_infra--card h5 {
  margin: 0 1.25rem 0.5rem;
}
.home_infra--card p {
  margin: 0 1.25rem 1.25rem;
  max-width: 60ch;
}

/* ── the orbit ──────────────────────────────────────────────────────────
   The donor spun a ring of third-party logos. Ours spins the parameters the
   protocol actually runs on, so it has to be bigger and the labels have to
   stay upright while the ring turns (the counter-spin is set in brand.js).
   ---------------------------------------------------------------------- */

.eco_orbit--wrap {
  height: auto !important;
  min-height: 0 !important;
  display: block;
}
.ck-orbit {
  display: block;
  width: 100%;
  max-width: 1400px;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .ck-orbit {
    width: 128%;
    margin-left: -14%;
  }
}

/* ── logo slots ─────────────────────────────────────────────────────────
   The donor filled these with wide lockups. Ours are square caller marks,
   so without a clamp a 120x120 monogram fills the whole slot.
   ---------------------------------------------------------------------- */

.cms_hero--logo,
.cms_more--logo,
.haas_cms-logo,
.eco_orbit--listwrap img {
  max-height: 92px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.cms_more--logo,
.haas_cms-logo {
  max-height: 56px;
}

/* ── cursor ─────────────────────────────────────────────────────────────
   A native CSS reticle, the same construction as bedrockmine.xyz: four ticks,
   four corner brackets, a two-pixel core, drawn crisp at 32x32 with the
   hotspot dead centre. Native means it never lags behind the pointer and
   never needs a script. Ours is drawn twice, a dark stroke under a lime one,
   so it holds on the pale page and on the dark sections alike.
   ---------------------------------------------------------------------- */

:root {
  --ck-reticle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'><g fill='none' stroke='%230a0a0a' stroke-width='3' stroke-opacity='.5'><path d='M16.5 0v7M16.5 25v7M0 16.5h7M25 16.5h7'/><path d='M11.5 14.5v-3h3M18.5 11.5h3v3M21.5 18.5v3h-3M14.5 21.5h-3v-3'/></g><g fill='none' stroke='%23ccff00' stroke-width='1'><path stroke-opacity='.9' d='M16.5 0v7M16.5 25v7M0 16.5h7M25 16.5h7'/><path d='M11.5 14.5v-3h3M18.5 11.5h3v3M21.5 18.5v3h-3M14.5 21.5h-3v-3'/></g><rect x='14' y='14' width='4' height='4' fill='%230a0a0a' fill-opacity='.55'/><rect x='15' y='15' width='2' height='2' fill='%23ccff00'/></svg>") 16 16;
  --ck-reticle-hot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'><g fill='none' stroke='%230a0a0a' stroke-width='3' stroke-opacity='.55'><path d='M16.5 0v5M16.5 27v5M0 16.5h5M27 16.5h5'/><path d='M9.5 13.5v-4h4M18.5 9.5h4v4M22.5 18.5v4h-4M13.5 22.5h-4v-4'/></g><g fill='none' stroke='%23ccff00' stroke-width='1.4'><path d='M16.5 0v5M16.5 27v5M0 16.5h5M27 16.5h5'/><path d='M9.5 13.5v-4h4M18.5 9.5h4v4M22.5 18.5v4h-4M13.5 22.5h-4v-4'/></g><rect x='13' y='13' width='6' height='6' fill='%230a0a0a' fill-opacity='.55'/><rect x='14' y='14' width='4' height='4' fill='%23ccff00'/></svg>") 16 16;
}

body {
  cursor: var(--ck-reticle), auto;
}
a,
button,
summary,
label,
input,
select,
textarea,
[role="button"],
[onclick],
.w-tab-link,
.ck-clip,
.home_tabs--select,
.eco_all--item {
  cursor: var(--ck-reticle-hot), pointer;
}

/* ── the framework section ──────────────────────────────────────────────
   The donor's own stylesheet stacks these three columns above 1280px, which
   leaves the copy and the figures stranded under a very tall animation and
   the section reading as empty. It is laid out the way the donor's page
   actually looks: copy left, animation behind, figures right.
   ---------------------------------------------------------------------- */

@media (min-width: 1100px) {
  .section_content.flex-hor.gap-auto {
    flex-flow: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 2.5rem !important;
    position: relative;
    min-height: 640px;
  }
  .home_open--about {
    width: 21rem !important;
    flex: 0 0 21rem;
    position: sticky !important;
    top: 7rem;
    z-index: 2;
  }
  .home_open--abs {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
  }
  .home_open--abs canvas {
    max-width: 46vw;
    height: auto !important;
  }
  .home_open--side {
    width: 21rem !important;
    flex: 0 0 21rem;
    margin-top: 0 !important;
    gap: 4.5rem !important;
    position: relative;
    z-index: 2;
  }
}

/* ── the caller roster ──────────────────────────────────────────────────
   The donor flattened every logo tile into a solid brand-coloured silhouette
   with `contrast(0) sepia hue-rotate(215deg)`. On third-party logos that reads
   as a house style; on ours it erases the handle and paints it purple.
   ---------------------------------------------------------------------- */

.eco_all--img,
.eco_hero--img,
.eco_orbit--logo {
  filter: none !important;
}
.eco_all--item {
  padding: 0.6rem !important;
}
.eco_all--img {
  width: 56px !important;
  height: 56px !important;
  max-height: 56px !important;
  object-fit: contain;
}
.eco_all--title {
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
}

/* ── the live board ─────────────────────────────────────────────────────
   Fills the ecosystem hero, which the donor left as a very tall box holding
   three small orbiting tiles.
   ---------------------------------------------------------------------- */

.ck-board {
  display: block;
  width: min(100%, 1180px);
  height: auto;
  margin: 2.5rem auto 0;
  border: 1px solid rgba(204, 255, 0, 0.28);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}
.eco-hero .section_content {
  padding-bottom: 3rem;
}

/* Pagination on a static ten-row list is a control that cannot do anything. */
.w-pagination-wrapper,
.eco_list--pagination {
  display: none !important;
}

/* ── the caller roster ──────────────────────────────────────────────────
   The donor's grid was 75px cells holding a bare logo, so a handle like
   @DumbCrayonEater ran three columns wide. Each caller gets a card with the
   figure its markets are written on.
   ---------------------------------------------------------------------- */

.eco_all--list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 0.75rem !important;
}
.eco_all--item {
  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 1px solid rgba(122, 150, 46, 0.35);
  background: #0c1007;
  transition: border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 160ms cubic-bezier(0.22, 0.61, 0.24, 1);
}
.eco_all--item:hover {
  border-color: var(--ck-lime);
  transform: translateY(-2px);
}
.ck-caller {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas: "av id fig" "sides sides sides";
  align-items: center;
  gap: 0.55rem 0.7rem;
  padding: 0.85rem 0.9rem;
}
.eco_all--item .eco_all--img {
  grid-area: av;
  width: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
}
.ck-caller__id {
  grid-area: id;
  min-width: 0;
}
.eco_all--item .eco_all--title {
  color: var(--ck-ink) !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.02em !important;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.ck-caller__sub {
  display: block;
  font-family: var(--ck-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ck-gray);
}
.ck-caller__fig {
  grid-area: fig;
  text-align: right;
  font-family: var(--ck-mono);
  line-height: 1.25;
}
.ck-caller__pnl {
  display: block;
  font-size: 0.95rem;
  color: #fff;
}
.ck-caller__d {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ck-lime);
}
.ck-caller__sides {
  grid-area: sides;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.4rem;
  margin-top: 0.15rem;
}
.ck-caller__sides i,
.ck-caller__sides b {
  font-style: normal;
  font-weight: 600;
  font-family: var(--ck-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-align: center;
  padding: 0.34rem 0;
  border: 1px solid;
}
.ck-caller__sides i {
  color: var(--ck-lime);
  border-color: var(--ck-lime);
  background: rgba(204, 255, 0, 0.1);
}
.ck-caller__sides b {
  color: var(--ck-gray);
  border-color: rgba(122, 150, 46, 0.45);
}

/* ── hero slider ────────────────────────────────────────────────────── */

.ck-slide {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(204, 255, 0, 0.22);
}
.eco_hero--listwrap,
.eco_hero--list,
.eco_hero--slide {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* ── more settled markets ───────────────────────────────────────────────
   The donor put a round dial behind a square logo. Ours shows the market.
   ---------------------------------------------------------------------- */

.cms_more--logoholder {
  background-image: none !important;
  background: #0b0f05 !important;
  border: 1px solid rgba(122, 150, 46, 0.3);
  padding: 0 !important;
  overflow: hidden;
  display: block !important;
  aspect-ratio: 12 / 5;
}
.cms_more--logo {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
  /* The donor rendered partner logos here as white silhouettes —
     `filter: brightness(1000%) grayscale()`. Our card is a drawing, and that
     filter turned all three into blank white rectangles. */
  filter: none !important;
}

/* ── settled hero ───────────────────────────────────────────────────────
   The donor's backdrop was a render of planets. Ours is the market itself:
   the tape of readings across the window, the strike it opened at and the
   settlement it closed at.

   The off-white wash underneath used to start at 82%, which put the top half
   of the headline on dark ground in near-black ink — unreadable. The wash is
   now a thin blend at the very bottom and the headline is light.
   ---------------------------------------------------------------------- */

.container-full.cms {
  background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
    linear-gradient(rgba(251, 255, 242, 0) 90%, #fbfff2 100%),
    url("ck-hero-settled.svg") !important;
  background-size: cover !important;
  background-position: center !important;
}
.container-full.cms.ck-hero--down {
  background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
    linear-gradient(rgba(251, 255, 242, 0) 90%, #fbfff2 100%),
    url("ck-hero-settled-down.svg") !important;
}
.container-full.cms.ck-hero--ten {
  background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
    linear-gradient(rgba(251, 255, 242, 0) 90%, #fbfff2 100%),
    url("ck-hero-settled-ten.svg") !important;
}
.container-full.cms .cms_hero--title {
  color: #fbfff2 !important;
  -webkit-text-fill-color: #fbfff2 !important;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.65);
}

/* ── the oracle's bento tiles ───────────────────────────────────────────
   Five picture areas, all of them donor stock art: one render of planets and
   four crops of the same nebula. Each tile now paints its own ground here —
   the ink, a corner glow, the grid — and drops the drawing that belongs to
   its heading on top, centred and never cropped.
   ---------------------------------------------------------------------- */

.haas_bento-visual.haas_viz-deployments,
.haas_bento-visual.haas_viz-warproutes,
.haas_bento-visual.haas_viz-issuance,
.haas_bento-visual.haas_viz-nexus,
.haas_bento-visual.haas_viz-security {
  background-color: #0b1004;
  background-image: var(--ck-tile-art, none),
    repeating-linear-gradient(
      90deg,
      rgba(122, 150, 46, 0.11) 0 1px,
      transparent 1px 48px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(122, 150, 46, 0.11) 0 1px,
      transparent 1px 48px
    ),
    radial-gradient(
      120% 150% at 78% -10%,
      rgba(204, 255, 0, 0.2),
      rgba(204, 255, 0, 0) 62%
    );
  background-repeat: no-repeat, repeat, repeat, no-repeat;
  background-position: center, 0 0, 0 0, center;
  background-size: contain, auto, auto, cover;
  border-top: 1px solid rgba(204, 255, 0, 0.16);
}

.haas_viz-deployments {
  --ck-tile-art: url("ck-bento-keeper.svg");
}
.haas_viz-warproutes {
  --ck-tile-art: url("ck-bento-strike.svg");
}
.haas_viz-issuance {
  --ck-tile-art: url("ck-bento-maker.svg");
}
.haas_viz-nexus {
  --ck-tile-art: url("ck-bento-ticket.svg");
}
.haas_viz-security {
  --ck-tile-art: url("ck-bento-void.svg");
}

/* ── the documentation cards ────────────────────────────────────────────
   The dark one still carried a screenshot of the donor's own CLI output —
   their package names, their config keys — under our copy.
   ---------------------------------------------------------------------- */

.home_doc--card.dark {
  background-color: #0b1004;
  background-image: url("ck-doc-learn.svg") !important;
  background-position: 100% 0 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* ── the donor's remaining renders ──────────────────────────────────────
   Two stock renders were still being painted full-bleed: a cloud field
   behind the oracle hero and another behind every footer. Both are replaced
   with drawings of the protocol, laid out around the content each one sits
   under — the hero's cards hug the right, the footer's links the top left.
   ---------------------------------------------------------------------- */

.section-wrap.hero-copy {
  background-image: linear-gradient(rgba(251, 255, 242, 0) 82%, #fbfff2),
    url("ck-hero-oracle.svg") !important;
  background-position: 0 0, 50% 0 !important;
  background-repeat: repeat, no-repeat !important;
  background-size: auto, 100% auto !important;
  background-color: #070903;
}

.footer-wrap {
  background-color: #070a02;
  background-image: url("ck-footer.svg") !important;
  background-position: 50% 0 !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
}
/* the footer sits on our own dark ground now, so its links stop being ink */
.footer-wrap .footer_links,
.footer-wrap .footer_links:hover {
  color: #e6ecd8 !important;
}

/* The donor rendered every partner logo as a black silhouette. Our avatars
   are drawings, not silhouettes, and came out as solid black squares. The
   other logo slots were already exempted; this one was missed. */
.haas_cms-logo {
  filter: none !important;
}

/* ── the oracle hero's card stack ───────────────────────────────────────
   The donor's list is duplicated so a marquee can loop it, and there are
   three card grounds for six items. The copies used to fall past the last
   ground onto the picture, where their ink text was unreadable. We have
   three settled markets, so the second run of the loop is simply dropped.
   ---------------------------------------------------------------------- */

.haas_cms-item:nth-child(n + 4) {
  display: none;
}

/* ── the tape behind the protocol blurb ─────────────────────────────────
   The donor's embed rendered at zero width — a flex child with nothing to
   size it — so the middle of that section had been empty all along. Ours is
   an image, which gives the column something to measure.
   ---------------------------------------------------------------------- */

.home_bg--ascii.ck-ascii {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  align-self: center;
  mix-blend-mode: normal;
  padding: 0 2rem 0 4rem;
}
.home_bg--ascii.ck-ascii img {
  width: 100%;
  height: auto;
  max-width: 46rem;
  display: block;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .home_bg--ascii.ck-ascii {
    display: none;
  }
}

/* ── the roster's status chip ───────────────────────────────────────────
   Each card says where its markets are, which is also what the filter above
   the list sorts on — a control that filters on something invisible reads as
   broken even when it works.
   ---------------------------------------------------------------------- */

.ck-caller__st {
  font-family: var(--ck-mono);
  font-size: 0.58rem;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
.ck-st--open {
  color: var(--ck-lime);
}
.ck-st--settling {
  color: #b9c98d;
}
.ck-st--resolved {
  color: #8d8d8d;
}
.ck-empty {
  font-family: var(--ck-mono);
  font-size: 0.85rem;
  color: var(--ck-ink-dark);
  padding: 2rem 0;
  text-align: center;
}

/* ── the roster card's own box ──────────────────────────────────────────
   The donor's tile was a square with one logo in it and the chain's name
   pinned absolutely along the bottom edge. Our card is a row of facts, so
   the handle belongs in the row with the avatar, and the box should be as
   tall as what is in it rather than a fixed square with a hole in the middle.
   ---------------------------------------------------------------------- */

.eco_all--item {
  aspect-ratio: auto !important;
  height: auto !important;
}
.eco_all--item .eco_all--title {
  position: static !important;
  width: auto !important;
  text-align: left !important;
  bottom: auto !important;
  left: auto !important;
}

/* ── which filter option is on ──────────────────────────────────────────
   The donor drew the selected state on its own radio glyph, which our
   rebuilt controls hide. The chip itself carries it instead, so the reader
   can see what the list is currently showing.
   ---------------------------------------------------------------------- */

.filter_radio input:checked + .filter_radio--label {
  background: var(--ck-lime);
  color: var(--ck-on-lime) !important;
  border-color: var(--ck-lime);
}
.filter_radio .filter_radio--btn {
  display: none;
}

/* ── the more-card's caption band ───────────────────────────────────────
   The donor fades lime up from the bottom edge across the whole lower third,
   which left the first line of the caption sitting on a half-transparent
   wash over the artwork. The band reaches full lime before the heading
   starts, and the text on it is ink.
   ---------------------------------------------------------------------- */

.cms_more--group {
  background-image: linear-gradient(
    0deg,
    var(--ck-lime) 0%,
    var(--ck-lime) 84%,
    rgba(204, 255, 0, 0) 100%
  ) !important;
  /* The picture holder is absolutely positioned and this caption is not, so
     the image painted over the band and the heading was left as ink on the
     artwork. Giving the caption a position of its own puts it back on top. */
  position: relative;
  z-index: 1;
}
.cms_more--subtitle,
.cms_more--p,
.cms_more--link .cms_more--subtitle,
.cms_more--link .cms_more--p {
  color: var(--ck-on-lime) !important;
}

/* ── the home page's hero ───────────────────────────────────────────────
   The donor's backdrop was a raster of their own artwork with their name set
   across it in letterspaced caps. A hue rotation cannot fix a picture that
   spells somebody else out, so it is replaced.

   The list page's contact panel was painted with the same file, so it is
   covered here too. Scoped away from the oracle page, whose hero is its own
   drawing.
   ---------------------------------------------------------------------- */

.section-wrap.hero:not(.haas-page):not(.hero-copy),
.section-wrap.contact {
  background-color: #fbfff2;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, #fbfff2),
    url("ck-hero-home.svg"),
    radial-gradient(
      ellipse 52% 46% at 21% 20%,
      rgba(185, 228, 0, 0.62) 0%,
      rgba(204, 255, 0, 0.3) 46%,
      rgba(204, 255, 0, 0) 74%
    ) !important;
  background-position: 0 0, center top, 0 0 !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
  /* Pinned to the same 1440 the page centres its own container in, rather
     than stretched to the viewport. Scaling the picture by width while the
     copy stays at its CSS position is what put the drawing underneath the
     rotating headline: at 1860 wide the art was 1.3x taller than the text it
     was drawn around. At this size the two share a coordinate space. */
  background-size: auto, 1440px auto, 100% 100% !important;
}
@media (max-width: 1439px) {
  .section-wrap.hero:not(.haas-page):not(.hero-copy),
  .section-wrap.contact {
    background-size: auto, 100% auto, 100% 100% !important;
  }
}

/* ── the hero wordmark ──────────────────────────────────────────────────
   Real text, not part of the drawing above. An SVG painted as a CSS
   background renders in its own document: it cannot reach the page's
   @font-face rules, and inlining the face into the SVG as a data URI did not
   take either — the wordmark came out in a fallback grotesque. As DOM text it
   simply uses PP Valve, the same face the copy below it is set in.

   It lives inside .section_content, the 1392 box the page centres, so it
   stays aligned with that copy at every width.
   ---------------------------------------------------------------------- */

.ck-wordmark {
  position: absolute;
  top: 0;
  left: 1.5rem;
  pointer-events: none;
  user-select: none;
  animation: ck-wordmark-breathe 9s ease-in-out infinite;
}
.ck-wordmark__name {
  display: block;
  font-family: "PP Valve", sans-serif;
  font-weight: 600;
  font-size: clamp(4.4rem, 9.6vw, 8.6rem);
  line-height: 0.92;
  /* the face's own fit — extra tracking is what made it read as a
     different, lighter typeface than the copy below it */
  letter-spacing: -0.005em;
  color: rgba(82, 106, 18, 0.62);
}
.ck-wordmark__sub {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--ck-mono);
  font-size: clamp(0.68rem, 0.95vw, 0.94rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #57633f;
}
@keyframes ck-wordmark-breathe {
  0%,
  100% {
    opacity: 0.62;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 991px) {
  .ck-wordmark {
    display: none;
  }
}

/* ── the hero, as two columns ───────────────────────────────────────────
   The donor floats the rotating headline in the middle of the section, which
   left a hole down the left of the page and stacked three blocks unevenly
   down the right. It moves into the left column, under the wordmark, and the
   prices come up beside it — so the section reads as two columns of three
   rows rather than six loose pieces.
   ---------------------------------------------------------------------- */

.section_content.hero .home_hero--holder {
  box-sizing: border-box;
  height: 34.5rem;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 17.875rem 0 0 1.5rem;
}
.section_content.hero .home_hero--carousel {
  width: 44rem;
  max-width: calc(100% - 3rem);
}
/* the plate behind the headline existed to lift it off the donor's picture.
   Ours is already light, and over the glow the plate read as a white slab. */
.hero_carousel--holder {
  background-color: transparent !important;
}
@media (max-width: 991px) {
  .section_content.hero .home_hero--holder {
    height: auto;
    padding-top: 0;
  }
  .section_content.hero .home_hero--carousel {
    width: auto;
  }
}