/* ===== AMBER rebrand overrides (injected by serve-clone) ===== */

/* Header mark. The supplied art is a square plate that already carries its own
   gradient, so it fills the whole tile instead of sitting inside it as a stamp —
   one drawing of the R, no frame around it. React sets width/height inline on
   the <img>, hence the !important. */
.logo-tile{
  display:block !important;
  width:40px; height:40px;
  border-radius:9px;
  overflow:hidden;
  background:none !important;
  border:0 !important;
}
.logo-tile > img{
  width:100% !important; height:100% !important;
  object-fit:cover;
  display:block;
  visibility:visible !important;
}

/* blinking caret in the header wordmark (HOOKP_) */
.wordmark .blink{ animation:spark-blink 1.05s step-end infinite; }
@keyframes spark-blink{ 0%,100%{ opacity:1 } 50%{ opacity:0 } }

/* ===== AMBER header buttons (X + CA) — brutalist, matches .btn ===== */
.amber-hdr-buttons{ display:inline-flex; gap:8px; align-items:center; margin-left:10px; }
.amber-hdr-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 12px; box-sizing:border-box;
  border:2px solid var(--ink);
  background:var(--card);
  box-shadow:3px 3px 0 var(--shadow-lav);
  font-family:inherit; font-size:11px; line-height:1; letter-spacing:.08em;
  text-transform:uppercase; font-weight:700;
  color:var(--ink); cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .05s ease, box-shadow .05s ease;
}
.amber-hdr-btn:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--shadow-lav); }
.amber-hdr-btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow-lav); }
.amber-hdr-x{
  padding:0; width:36px; justify-content:center;
  border:none; background:transparent; box-shadow:none;
  color:var(--ink);
}
.amber-hdr-x:hover, .amber-hdr-x:active{ box-shadow:none; }
.amber-hdr-x svg{ width:20px; height:20px; display:block; }
.amber-hdr-ca{ background:var(--magenta); color:var(--ink); }
.amber-ca-val{ margin-left:4px; font-weight:800; letter-spacing:.04em; }

@media (max-width:760px){
  .amber-hdr-buttons{ margin-left:6px; gap:6px; }
  .amber-hdr-btn{ height:32px; padding:0 8px; font-size:10px; }
  .amber-hdr-x{ padding:0 7px; }
}

/* ===== Landing hero: two removals the owner asked for =====
   Both are React-rendered, so they go out through the stylesheet instead of
   the markup — patching the markup alone would be undone at hydration.
   The eyebrow row leaves entirely. The simulator's caption is hidden rather
   than removed so the header keeps its shape and "3/5 armed" stays on the
   right, where space-between put it. */
[class*="Landing-module"][class*="eyebrowRow"]{ display:none !important; }
[class*="Landing-module"][class*="demoHeader"] > span:first-child{ visibility:hidden; }

/* ===== Three removals the owner asked for =====
   The R mark no longer matches the name, so the tile goes rather than sitting
   there as the wrong letter. The wordmark beside it carries the brand on its
   own. The simulator's caption under the cube is dropped the same way the
   header caption was: hidden, not deleted, so the stage keeps its shape. */
.logo-tile{ display:none !important; }
[class*="demoStage"] div.pix{ visibility:hidden; }