/**
 * contracts-beta.css — founding-beta status strip on the Contracts surfaces.
 *
 * Deliberately a marginal note, not a marketing card: a left rule, paper ground,
 * no drop shadow, no icon badge. It is a statement of terms, and dressing it up
 * as a promotion would misrepresent what it says. Inherits the page's warm
 * editorial tokens (--gcx-*) with literal fallbacks so it still reads correctly
 * on any surface that does not load the full contracts stylesheet.
 */

/* [hidden] is silently beaten by ANY rule that sets display, and .ctd-wrap does.
   Without this the banner stays an invisible click-blocker while unresolved. */
.cbeta[hidden] { display: none !important; }

.cbeta {
  position: relative;
  /* ★ `auto` on the sides is LOAD-BEARING, not decoration. This element also
     carries .ctd-wrap, which centres the page column with `margin: 0 auto`.
     A margin SHORTHAND here is the same specificity (0,0,1,0) and this sheet
     loads later, so `margin: 22px 0 26px` silently reset the side margins to 0
     and the banner rendered hard against the left edge of the viewport while
     every other section stayed centred. Same family as the documented
     padding-shorthand-vs-.ctd-wrap trap: never write a box shorthand on a class
     that shares an element with a gutter-owning wrapper. */
  margin: 22px auto 26px;
  padding: 20px 52px 20px 22px;
  border: 1px solid var(--gcx-line, #e5e0d5);
  border-left: 3px solid var(--ctd-amber, #b3801f);
  border-radius: 4px 10px 10px 4px;
  background: var(--ctd-paper, #fffdf8);
  color: var(--gcx-ink, #1a1714);
}

/* The member variant is reassurance, so it reads cooler and carries no CTA. */
.cbeta--member { border-left-color: var(--gcx-forest, #1a3d2e); }

.cbeta__eyebrow {
  margin: 0 0 6px;
  font-family: var(--gcx-mono, ui-monospace, "IBM Plex Mono", monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ctd-amber, #b3801f);
}
.cbeta--member .cbeta__eyebrow { color: var(--gcx-forest, #1a3d2e); }

.cbeta__title {
  margin: 0 0 7px;
  font-family: var(--gcx-serif, Fraunces, Georgia, serif);
  font-size: 1.09rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--gcx-ink, #1a1714);
}

.cbeta__body {
  margin: 0;
  max-width: 62ch;
  font-family: var(--gcx-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.925rem;
  line-height: 1.62;
  color: var(--gcx-ink2, #55514a);
}

/* ── Launch-list form ─────────────────────────────────────────────────── */
.cbeta__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
}

/* Visible label would repeat the placeholder and the button; the field still
   needs a programmatic name, so it is hidden rather than omitted. */
.cbeta__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cbeta__input {
  /* Capped: flex-grow alone stretched the field the full width of the banner at
     desktop, which reads as a form to fill in rather than a one-line aside. */
  flex: 1 1 210px;
  max-width: 340px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--gcx-line, #e5e0d5);
  border-radius: 9px;
  background: #fff;
  font-family: var(--gcx-sans, "DM Sans", system-ui, sans-serif);
  font-size: 15px; /* 16px-equivalent floor: anything smaller zooms iOS on focus */
  color: var(--gcx-ink, #1a1714);
}
.cbeta__input:focus-visible {
  outline: 2px solid var(--ctd-amber, #b3801f);
  outline-offset: 2px;
}

.cbeta__btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 11px 17px;
  border: 0;
  border-radius: 9px;
  background: var(--gcx-ink, #1a1714);
  color: #fdfaf2;
  font-family: var(--gcx-sans, "DM Sans", system-ui, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease;
}
.cbeta__btn:hover { background: var(--ctd-amber, #b3801f); }
.cbeta__btn:focus-visible { outline: 2px solid var(--ctd-amber, #b3801f); outline-offset: 2px; }
.cbeta__btn[disabled] { opacity: 0.62; cursor: default; }

.cbeta__msg {
  flex: 1 0 100%;
  margin: 2px 0 0;
  font-family: var(--gcx-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--gcx-ink2, #55514a);
}
.cbeta__msg--err { color: #a3341f; }
/* [hidden] is silently beaten by any rule that sets display, and this element
   sits in a flex container. Without this it stays an invisible layout gap. */
.cbeta__msg[hidden] { display: none; }

.cbeta__done {
  margin: 15px 0 0;
  font-family: var(--gcx-sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gcx-forest, #1a3d2e);
}

/* ── Dismiss ──────────────────────────────────────────────────────────── */
.cbeta__x {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gcx-ink2, #55514a);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.cbeta__x:hover { background: rgba(0, 0, 0, 0.05); color: var(--gcx-ink, #1a1714); }
.cbeta__x:focus-visible { outline: 2px solid var(--ctd-amber, #b3801f); outline-offset: 1px; }

/* The 34px control sits inside a 44px hit area rather than growing the button,
   which would crowd the heading at narrow widths. */
.cbeta__x::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

@media (max-width: 560px) {
  .cbeta { padding: 18px 46px 18px 17px; }
  .cbeta__title { font-size: 1.03rem; }
  .cbeta__btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cbeta__btn { transition: none; }
}