/* ============================================================================
   somalia.css — additions on top of styles.css (+ onboarding.css for the
   .commitments split and .gates timeline) for the Somalia pilot page.
   Inherits all Sovereign Night tokens + components; adds the embedded brief,
   the FMS-state strip, and the incorporation→licence flow.
   ========================================================================== */

/* ---- Embedded video brief ---------------------------------------------- */
.videoframe {
  margin-top: 3rem;
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  overflow: hidden;
  background: #05070f;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(110, 140, 255, 0.06);
  position: relative;
}
.videoframe video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.videoframe__cap {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--fg-faint);
  border-top: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.015);
}
.videoframe__cap b { color: var(--teal); font-weight: 500; }

/* ---- Incorporation → licence flow (the architecture in one line) -------- */
.flow {
  list-style: none; padding: 0;
  margin: 3rem 0 0;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.7rem;
}
.flow__step {
  flex: 1 1 150px;
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  background: var(--bg-2);
  padding: 0.95rem 1.05rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.flow__step.is-mesh { border-color: rgba(232, 145, 91, 0.4); background: rgba(232, 145, 91, 0.06); }
.flow__t { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--fg); letter-spacing: -0.01em; }
.flow__s { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--fg-muted); line-height: 1.4; }
.flow__step.is-mesh .flow__t { color: var(--ember); }

/* ---- Federal Member State onboarding strip ----------------------------- */
.fms-strip {
  list-style: none; padding: 0;
  margin: 2.4rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.fms {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--hair);
  border-radius: 100px;
  color: var(--fg-faint);
}
.fms::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-decor); flex: none;
}
.fms--live { color: var(--teal); border-color: rgba(61, 216, 196, 0.35); }
.fms--live::before { background: var(--teal); box-shadow: 0 0 8px rgba(61, 216, 196, 0.6); }
.fms__tag { color: var(--fg-faint); }
.fms--live .fms__tag { color: var(--teal); }

/* small overrides so inherited journey sections read as a calm process page */
.section--journey .wrap { max-width: 1040px; }

@media (max-width: 560px) {
  .flow__step { flex-basis: 100%; }
}