/* base.css — reset + shared primitives for both directions */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }

/* ---- A/B direction switcher (lives above both pages) ---- */
.ft-switch {
  position: fixed; z-index: 9999; top: 16px; right: 16px;
  display: flex; align-items: stretch; gap: 0;
  background: rgba(10,20,36,.92); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.ft-switch button {
  border: 0; background: transparent; color: rgba(255,255,255,.62);
  padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; transition: color .18s, background .18s; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.ft-switch button .tag {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700;
  opacity: .8;
}
.ft-switch button.active { color: #fff; background: #1668CF; }
.ft-switch button.active.b { background: #F5B301; color: #0B2440; box-shadow: none; }
.ft-switch button:not(.active):hover { color: #fff; }
@media (max-width: 640px) {
  .ft-switch button .lbl { display: none; }
}

/* shared focus ring for form fields */
.ft-field:focus-visible { outline: 2px solid #1668CF; outline-offset: 1px; }