/* Only loaded for the Founders Only resource. Astryx owns all button states. */
html.fnt-lock { overflow: hidden; }
.fnt-dialog, .fnt-pill {
  --fnt-red: #7D272B;
  --fnt-pastel: #F6D8D6;
  --btn-accent: var(--fnt-red);
  font-family: var(--sans, "Endless", sans-serif);
  color: var(--ink, #2F2B25);
}
.fnt-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(440px, calc(100% - 32px));
  max-width: none;
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--r-l, 8px);
  background: var(--card, #F5F2EA);
  box-shadow: var(--shadow-float);
  scrollbar-color: var(--rule-2, #CFC8B8) transparent;
  scrollbar-width: thin;
}
.fnt-dialog::backdrop { background: rgb(30 27 22 / .45); }
.fnt-dialog:not([open]), .fnt-pill[hidden] { display: none !important; }
body:has(.bk:not([hidden])) .fnt-pill { display: none; }
.fnt-content { padding: 24px 32px 16px; }
.fnt-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fnt-logo { display: block; width: 56px; height: 40px; object-fit: contain; object-position: left center; }
.fnt-dialog .rs-btn, .fnt-pill .rs-btn { --btn-h: 44px; font-size: 15px; }
.fnt-dialog .fnt-close { --btn-neutral: transparent; flex: 0 0 44px; width: 44px; padding: 0; margin-right: -8px; }
.fnt-title { margin: 24px 0 16px; font: 400 30px/1.15 var(--sans, "Endless", sans-serif); letter-spacing: -.02em; text-wrap: balance; }
.fnt-title:focus { outline: none; }
.fnt-details { display: flex; flex-direction: column; gap: 8px; margin: 0; color: var(--ink-2, #6C6659); font: 400 17px/1.4 var(--sans, "Endless", sans-serif); }
.fnt-promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 8px; margin-top: 24px; padding: 16px; border-radius: var(--r-m, 8px); background: var(--fnt-pastel); color: var(--fnt-red); }
.fnt-promo-label { display: block; margin-bottom: 8px; font: 400 13px/1.3 var(--sans, "Endless", sans-serif); }
.fnt-code { display: block; padding: 0; border: 0; background: transparent; color: inherit; font: 500 22px/1.2 var(--mono, monospace); letter-spacing: .02em; user-select: all; }
.fnt-dialog .fnt-copy { color: var(--fnt-red); }
.fnt-promo-note { grid-column: 1 / -1; margin: 0; font: 400 13px/1.4 var(--sans, "Endless", sans-serif); }
.fnt-copy-status { margin: 0; color: var(--ink-2, #6C6659); font: 400 13px/1.4 var(--sans, "Endless", sans-serif); }
.fnt-copy-status:not(:empty) { margin-top: 8px; }
.fnt-dialog .fnt-claim { display: flex; width: 100%; margin-top: 24px; gap: 8px; }
.fnt-dialog .fnt-later { --btn-neutral: transparent; display: flex; margin: 8px auto 0; color: var(--ink-2, #6C6659); }
.fnt-copy-fallback { position: fixed; left: 0; top: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.fnt-pill { position: fixed; z-index: 900; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 0; max-width: calc(100vw - 32px); padding: 4px; border-radius: var(--r-s, 10px); background: var(--fnt-pastel); box-shadow: var(--shadow-card); }
.fnt-pill .rs-btn { --btn-neutral: transparent; color: var(--fnt-red); box-shadow: none; }
.fnt-pill-open { gap: 8px; }
.fnt-pill-open img { display: block; width: 28px; height: 28px; object-fit: contain; }
.fnt-pill .fnt-pill-close { width: 44px; flex: 0 0 44px; padding: 0; }
.fnt-dialog ::selection, .fnt-pill ::selection { background: var(--fnt-red); color: #fff; }
.resource-badge.badge-founders { display: inline-flex; align-items: center; gap: 8px; color: #7D272B; background-color: #F6D8D6; }
.resource-badge.badge-founders img { display: block; width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; }
@media (max-width: 600px) {
  .fnt-dialog { inset: auto 0 0; width: 100%; margin: 0; border-radius: var(--r-l, 8px) var(--r-l, 8px) 0 0; }
  .fnt-content { padding: 24px 24px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .fnt-title { max-width: 340px; }
}
@media (max-width: 360px) {
  .fnt-content { padding-inline: 16px; }
  .fnt-promo { column-gap: 8px; }
  .fnt-dialog .fnt-copy { padding-inline: 8px; }
}