/* ── $REEF / $OCTOL contract address, hero ────────────────────────────────
   Homepage only. hero-bg.js forces data-theme="dark" here, so this block is
   drawn for the dark ground; it still reads its colours from the site tokens
   so it does not drift if the ramp changes.

   NOTE: the address is a 44-character placeholder of X's until the mint is
   real. No copy control while there is nothing to copy: a copy button that
   yields a fake string is worse than no button. */
.ca{
  display:inline-flex; align-items:stretch; flex-wrap:wrap; justify-content:center;
  border:1px solid rgba(255,188,52,.34); border-radius:8px;
  background:rgba(6,1,16,.72); overflow:hidden; max-width:100%;
  margin-top:30px; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-align:left; transition:border-color .18s ease, background .18s ease;
}
.ca:hover{border-color:rgba(255,188,52,.62); background:rgba(10,2,22,.85)}
.ca:focus-visible{outline:2px solid var(--pink); outline-offset:3px}

/* the copy affordance */
.ca-act{
  display:flex; align-items:center; padding:0 16px; white-space:nowrap;
  font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#2A0212; background:var(--amber);
  border-left:1px solid rgba(255,188,52,.22); transition:background .18s ease, color .18s ease;
}
.ca:hover .ca-act{background:#FFD275}
.ca.is-copied .ca-act{background:transparent; color:var(--amber)}
.ca.is-failed .ca-act{background:transparent; color:var(--coral)}
.ca-tag{
  display:flex; align-items:center; gap:7px; padding:11px 14px; white-space:nowrap;
  border-right:1px solid rgba(255,188,52,.22); background:rgba(255,188,52,.09);
}
.ca-tick{font-family:var(--mono); font-size:.75rem; font-weight:700; color:var(--amber); letter-spacing:.06em}
.ca-chain{
  font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(var(--ink-rgb),.86);
  border:1px solid rgba(132,23,255,.6); background:rgba(132,23,255,.22);
  padding:3px 6px; border-radius:2px;
}
.ca-addr{
  font-family:var(--mono); font-size:.78rem; line-height:1.5; color:var(--ink);
  padding:11px 14px; overflow-wrap:anywhere; text-align:center;
}
/* while it is a placeholder: not selectable, so it cannot be copied by accident */
.ca-pending .ca-addr{color:rgba(var(--ink-rgb),.55); letter-spacing:.08em}

/* The buy button before there is anything to buy. Dimming the gradient reads as
   broken, so drop the ramp entirely and render a deliberate quiet state instead. */
.btn.primary.is-soon{
  background:none; background-image:none; box-shadow:none;
  color:rgba(var(--ink-rgb),.50);
  border:1px solid rgba(var(--ink-rgb),.20);
  cursor:not-allowed; pointer-events:none; transform:none;
}
.btn .soon{
  font-size:.86em; letter-spacing:.12em; opacity:.75;
}
.btn .soon::before{content:"\00a0\00b7\00a0"}

@media(max-width:560px){
  .ca{flex-direction:column; align-items:stretch}
  .ca-tag{border-right:0; border-bottom:1px solid rgba(255,188,52,.22); justify-content:center}
}

/* ── centring fix for the hero ──────────────────────────────────────────────
   site.css:49 sets `.lede{max-width:46ch}` with NO auto margin; the
   `margin-inline:auto` that centres it only exists inside the <=860px media
   query. hero-bg.css centres the hero with `text-align:center`, which centres
   the TEXT INSIDE the lede's box but leaves the box itself flush left in the
   680px .hero-copy, so the paragraph reads ~40-90px left of the headline.
   Scoped to .hero so the narrow-screen rule and every other .lede are untouched. */
.hero .lede{margin-inline:auto}