/* Hybrid (from Concept A) · Sign up / Sign in (prefix faa-) */
.faa { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--fa-head-h)); }
.faa-art { position: relative; overflow: hidden; background: #0b0907; }
.faa-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1s var(--ease-out), transform 6s var(--ease-out); }
.faa-art img.on { opacity: 1; transform: scale(1); }
.faa-art-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,8,6,.9)), linear-gradient(90deg, transparent 70%, rgba(18,16,13,.95)); }
.faa-art-tx { position: absolute; left: 44px; right: 60px; bottom: 74px; display: grid; gap: 14px; }
.faa-art-q { margin: 0; max-width: 480px; font: italic 24px/1.4 var(--font-lore); color: var(--cream); text-shadow: 0 2px 10px #000; }
.faa-fan { display: flex; margin-top: 4px; }
.faa-fan img { position: static; opacity: 1; transform: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 15%; border: 2px solid var(--gold); margin-right: -12px; box-shadow: 0 8px 18px rgba(0,0,0,.6); transition: transform .3s var(--ease-spring); }
.faa-fan img:hover { transform: translateY(-4px) scale(1.06); z-index: 2; }
.faa-panel { display: grid; place-items: center; padding: 40px 28px; background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(212,175,55,.06), transparent 70%); }
.faa-card { width: min(480px, 100%); display: grid; gap: 14px; padding: 30px 34px 26px; border-radius: 20px; border: 1px solid var(--gold-hair);
  background: linear-gradient(180deg, rgba(40,35,30,.92), rgba(16,13,10,.95)); box-shadow: inset 0 1px 0 rgba(255,235,200,.08), 0 30px 70px rgba(0,0,0,.6); }
.faa-card[hidden] { display: none; }
.faa-h { margin: 0; font: 700 clamp(28px, 2.6vw, 36px)/1.08 var(--font-display); color: var(--gold); }
.faa-pw { position: relative; }
.faa-pw .fa-input { padding-right: 48px; }
.faa-eye { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border-radius: 9px; border: 0; background: none; color: var(--cream-faint); font-size: 18px; display: grid; place-items: center; }
.faa-eye:hover { color: var(--gold); }
.faa-go { width: 100%; }
.faa-fine { margin: -6px 0 0; text-align: center; font-size: 13px; color: var(--cream-dim); }
.faa-alt { margin: 0; text-align: center; font-size: 14px; color: var(--cream-dim); }
.faa-alt a, .faa-forgot { color: var(--gold); text-decoration: none; font-weight: 600; }
.faa-alt a:hover, .faa-forgot:hover { color: var(--gold-bright); text-decoration: underline; }
.faa-forgot { justify-self: end; font-size: 13.5px; margin-top: -8px; }
.faa-done-seal { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; color: var(--gold-bright); background: radial-gradient(circle at 50% 30%, #4a3d2e, #15110e 70%); border: 2px solid var(--gold); box-shadow: 0 0 0 5px rgba(12,10,8,.6), 0 0 40px rgba(255,122,47,.4); }
.faa-waiting { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.faa-waiting li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(212,175,55,.14); font-size: 14px; color: var(--cream-dim); animation: rise .5s var(--ease-out) calc(var(--i) * 110ms + 300ms) both; }
.faa-waiting li b { color: var(--cream); font-family: var(--font-heading); letter-spacing: .03em; }
.faa-waiting iconify-icon { font-size: 20px; color: var(--gold); }

@media (max-width: 900px) {
  .faa { grid-template-columns: 1fr; }
  .faa-art { height: 260px; }
  .faa-art-tx { left: 20px; right: 20px; bottom: 18px; }
  .faa-art-q { font-size: 18px; }
  .faa-fan img { width: 44px; height: 44px; }
  .faa-panel { padding: 24px 16px 40px; }
  .faa-card { padding: 24px 20px; }
  .faa-card .btn.fa-xl { font-size: 17px; white-space: normal; height: auto; min-height: 54px; }
}

.faa .fa-input { height: 44px; }
.faa .fa-err { min-height: 0; }
.faa .fa-err:not(:empty) { min-height: 16px; }

.faa-example { margin-top: -10px; font-size: 12px; opacity: .85; }
.faa-example[hidden] { display: none; }
/* Invites (Peter 2026-10-04): the invite eyebrows stay on one line on a phone. */
@media (max-width: 420px) { .faa-invited .fa-eyebrow { letter-spacing: .14em; } .faa-invited .fa-eyebrow::before { display: none; } }

/* ═════════ Sign up, one flow (board mockup 2026-10-11): the form. The 6-digit code window opens in the app, over Home ═════════ */
/* the agree checkbox (was in h-pay.css, which this page no longer loads) */
.faa-agree { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--cream); font-size: 14px; line-height: 1.5; cursor: pointer; }
.faa-agree input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); cursor: pointer; }
.faa-agree a { color: var(--gold-bright); }
.faa-agree input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.faa-lead { margin: -4px 0 4px; font: italic 400 19px/1.45 var(--font-lore); color: var(--cream); }
.faa-lead b { font: 600 16px/1.3 var(--font-body); font-style: normal; color: var(--gold-bright); overflow-wrap: anywhere; }
.faa-art-tx .fa-eyebrow { text-shadow: 0 1px 6px #000, 0 0 16px #000; }
.faa-example { margin-top: -8px; font-size: 12.5px; opacity: 1; }
.faa-panel { align-content: center; gap: 16px; }
@media (max-width: 900px) { .faa-panel { align-content: start; } }
.faa-under { margin-top: 2px; }
.faa-under[hidden] { display: none; }
/* the server's answer line takes no room while it is empty (the approved form has no line there); it shows with its message */
#faa-form #faa-server:empty { display: none; }
@media (max-width: 520px) {
  .faa-lead { font-size: 17px; }
}