/* ============================================================
   FILEDMARK — "Need support? Questions?" widget
   Looks like a button but is NOT a link. The support address is
   assembled in JS (support.js) on interaction, so it never appears
   in the raw HTML for email harvesters to scrape.
   ============================================================ */

.support-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 18px;
  background: #ffffff;
  color: #14161F;
  border: 1.5px solid #14161F;
  border-radius: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .08s ease;
}
.support-cta:hover,
.support-cta:focus-visible { background: #14161F; color: #F7F3EA; outline: none; }
.support-cta:active { transform: translateY(1px); }

.support-cta .sc-ico { flex: none; width: 15px; height: 15px; display: block; }
.support-cta .sc-addr { display: none; }            /* revealed after first activation */
.support-cta.is-revealed .sc-addr { display: inline; font-weight: 500; opacity: .85; }

/* Dark-background variant — used in the site footers */
.support-cta--ondark {
  background: transparent;
  color: #F7F3EA;
  border-color: rgba(247, 243, 234, .45);
}
.support-cta--ondark:hover,
.support-cta--ondark:focus-visible { background: #F7F3EA; color: #14161F; border-color: #F7F3EA; }

/* Footer placement — size to content rather than full width */
.support-cta--foot { width: auto; margin-top: 0; }

/* Make the /offer price-rail column sticky so the rail + support widget
   stay onscreen as the form scrolls (matches /register's sticky rail). */
.rail-aside { position: sticky; top: 20px; align-self: start; }
@media (max-width: 900px) { .rail-aside { position: static; } }

/* Category cards are now <div role="button"> (no exposed /offer links).
   Keep them feeling clickable + keyboard-focusable. */
.arch-card[role="button"],
.arch-other[role="button"] { cursor: pointer; }
.arch-card[role="button"]:focus-visible,
.arch-other[role="button"]:focus-visible { outline: 2px solid #C0392B; outline-offset: 2px; }