/* Shared by every MBFA page: tokens, faces, the loud bar, buttons, forms.
   Marketing adds scrollcraft.css + site.css; app pages add app.css. */

:root {
  --sc-canvas:     #120c0d;
  --sc-surface:    #1d1315;
  --sc-ink:        #f6efe6;
  --sc-ink-soft:   #c2b0a6;
  --sc-accent:     #d4a94f;
  --sc-accent-ink: #170d0e;
  --sc-font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;

  --burgundy:   #7d1526;
  --burgundy-2: #5a0e1b;
  --gold:       #d4a94f;
  --gold-deep:  #a67c2e;
  --bone:       #f6efe6;
  --red-alert:  #e2382f;
  --ok:         #4fb07a;
  --radius:     6px;
  --bar-h:      72px;
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 760px) { :root { --bar-h: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  line-height: 1.6;
  letter-spacing: 0.005em;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--gold); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--sc-accent-ink); padding: 8px 14px; border-radius: var(--radius); }
.skip:focus { left: 12px; }

/* ---------------------------------------------------------------- the bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 0 clamp(14px, 3vw, 36px);
  background: linear-gradient(90deg, #0d0809 0%, #2a0a11 45%, var(--burgundy) 100%);
  border-bottom: 1px solid rgba(212, 169, 79, 0.35);
  box-shadow: 0 6px 24px rgba(10, 4, 5, 0.45);
}
.bar__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; }
.bar__mark img { height: calc(var(--bar-h) - 22px); width: auto; }
.bar__nav { justify-self: end; display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); }
.bar__nav a:not(.btn) {
  font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 1rem; text-decoration: none; color: var(--bone);
  padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color 160ms var(--ease-out);
}
.bar__nav a:not(.btn):hover { border-color: var(--gold); }
@media (max-width: 980px) { .bar__nav .bar__link { display: none; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 1.05rem; line-height: 1; white-space: nowrap;
  padding: 14px 22px; border-radius: var(--radius); border: 2px solid var(--gold);
  background: var(--gold); color: var(--sc-accent-ink); text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(10, 4, 5, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 140ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn:hover { background: #e2bb64; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--bone); border-color: rgba(246, 239, 230, 0.55); box-shadow: none; }
.btn--ghost:hover { background: rgba(246, 239, 230, 0.08); }
.btn--dark { background: var(--sc-accent-ink); color: var(--bone); border-color: var(--sc-accent-ink); }
.btn--dark:hover { background: #2a1a1c; }
.btn--danger { background: transparent; color: #ff8a80; border-color: #a33a33; box-shadow: none; }
.btn--sm { padding: 9px 14px; font-size: 0.92rem; }
.bar .btn { padding: 11px 18px; }
@media (max-width: 760px) { .bar .btn { padding: 9px 12px; font-size: 0.92rem; } }

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 6px; }
.field > span { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: var(--sc-ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--bone); background: #0e0909;
  border: 1px solid rgba(246, 239, 230, 0.22); border-radius: var(--radius);
  padding: 12px 14px; min-height: 48px; width: 100%;
  transition: border-color 160ms var(--ease-out);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(246, 239, 230, 0.4); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 0.95rem; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold); }
.hint { font-size: 0.85rem; color: var(--sc-ink-soft); margin: 0; }
.err { color: #ff8a80; font-size: 0.92rem; margin: 0; min-height: 1.2em; }
.okmsg { color: #8fe0b0; font-size: 0.92rem; margin: 0; }

.demo-banner {
  position: relative; z-index: 60; margin-top: var(--bar-h);
  background: repeating-linear-gradient(135deg, #2b2410 0 14px, #251f0e 14px 28px);
  color: #f3dfaa; font-size: 0.88rem; text-align: center; padding: 8px 16px;
  border-bottom: 1px solid rgba(212, 169, 79, 0.4);
}
.demo-banner button { font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0 0 0 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}